fix: remove html tags in title (#203)

slidevjs · May 31, 2021 · d435987 · d435987
1 parent 8cf6896
commit d435987
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/packages/slidev/node/plugins/loaders.ts b/packages/slidev/node/plugins/loaders.ts
@@ -12,7 +12,7 @@ import equal from 'fast-deep-equal'
 import { existsSync } from 'fs-extra'
 import type { Connect } from 'vite'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
-import { resolveImportPath, toAtFS } from '../utils'
+import { resolveImportPath, stringifyMarkdownTokens, toAtFS } from '../utils'
 
 const regexId = /^\/\@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/
 const regexIdQuery = /(\d+?)\.(md|json)$/
@@ -49,7 +49,7 @@ export function sendHmrReload(server: ViteDevServer, modules: ModuleNode[]) {
   })
 }
 
-const md = Markdown()
+const md = Markdown({ html: true })
 md.use(mila, {
   attrs: {
     target: '_blank',
@@ -413,6 +413,11 @@ export function createSlidesLoader(
 
   function generateConfigs() {
     const config = { ...data.config }
+    if (isString(config.title)) {
+      const tokens = md.parseInline(config.title, {})
+      config.title = stringifyMarkdownTokens(tokens)
+    }
+
     if (isString(config.info))
       config.info = md.render(config.info)
 

diff --git a/packages/slidev/node/utils.ts b/packages/slidev/node/utils.ts
@@ -2,6 +2,7 @@ import { ensurePrefix, slash } from '@antfu/utils'
 import isInstalledGlobally from 'is-installed-globally'
 import { sync as resolve } from 'resolve'
 import resolveGlobal from 'resolve-global'
+import type Token from 'markdown-it/lib/token'
 
 export function toAtFS(path: string) {
   return `/@fs${ensurePrefix('/', slash(path))}`
@@ -29,3 +30,14 @@ export function resolveImportPath(importName: string, ensure = false) {
 
   return undefined
 }
+
+export function stringifyMarkdownTokens(tokens: Token[]) {
+  return tokens.map(token =>
+    token.children
+      ?.filter(t => ['text', 'code_inline'].includes(t.type) && !t.content.match(/^\s*$/))
+      .map(t => t.content.trim())
+      .join(' '),
+  )
+    .filter(Boolean)
+    .join(' ')
+}
diff --git a/test/utils.test.ts b/test/utils.test.ts
@@ -1,4 +1,6 @@
+import MarkdownIt from 'markdown-it'
 import { parseAspectRatio, parseRangeString } from '../packages/parser/src'
+import { stringifyMarkdownTokens } from '../packages/slidev/node/utils'
 
 describe('utils', () => {
   it('page-range', () => {
@@ -22,4 +24,15 @@ describe('utils', () => {
     expect(() => parseAspectRatio('hello')).toThrow()
     expect(() => parseAspectRatio('1/0')).toThrow()
   })
+
+  it('stringify-markdown-tokens', () => {
+    const md = MarkdownIt({ html: true })
+    const stringify = (src: string) => stringifyMarkdownTokens(md.parseInline(src, {}))
+
+    expect(stringify('<span style="color:red">Composable</span> Vue')).toBe('Composable Vue')
+    expect(stringify('<b>Whatever</b>')).toBe('Whatever')
+    expect(stringify('Talk about `<details/>`')).toBe('Talk about <details/>')
+    expect(stringify('What is Readonly\\<T\\> in TypeScript')).toBe('What is Readonly<T> in TypeScript')
+    expect(stringify('Welcome to<br />*Slidev*')).toBe('Welcome to Slidev')
+  })
 })