mirror of https://github.com/vuejs/vitepress
refactor: use markdown title plugin and remove parseHeader utils (#1235)
meteorlxy
2 years ago
committed by
GitHub
parent
71358ebce7
commit
19c0f43daa
@ -1,34 +0,0 @@
|
||||
import { test, expect } from 'vitest'
|
||||
import { deeplyParseHeader } from 'node/utils/parseHeader'
|
||||
|
||||
test('deeplyParseHeader', () => {
|
||||
const asserts: Record<string, string> = {
|
||||
// remove tail html
|
||||
'# `H1` <Comp></Comp>': '# H1',
|
||||
'# *H1* <Comp/>': '# H1',
|
||||
|
||||
// reserve code-wrapped tail html
|
||||
'# `H1` `<Comp></Comp>`': '# H1 <Comp></Comp>',
|
||||
'# *H1* `<Comp/>`': '# H1 <Comp/>',
|
||||
|
||||
// remove leading html
|
||||
'# <Comp></Comp> `H1`': '# H1',
|
||||
'# <Comp/> *H1*': '# H1',
|
||||
|
||||
// reserve code-wrapped leading html
|
||||
'# `<Comp></Comp>` `H1`': '# <Comp></Comp> H1',
|
||||
'# `<Comp/>` *H1*': '# <Comp/> H1',
|
||||
|
||||
// remove middle html
|
||||
'# `H1` <Comp></Comp> `H2`': '# H1 H2',
|
||||
'# `H1` <Comp/> `H2`': '# H1 H2',
|
||||
|
||||
// reserve middle html
|
||||
'# `H1` `<Comp></Comp>` `H2`': '# H1 <Comp></Comp> H2',
|
||||
'# `H1` `<Comp/>` `H2`': '# H1 <Comp/> H2'
|
||||
}
|
||||
|
||||
Object.keys(asserts).forEach((input) => {
|
||||
expect(deeplyParseHeader(input)).toBe(asserts[input])
|
||||
})
|
||||
})
|
||||
@ -1,39 +0,0 @@
|
||||
import { describe, test, expect } from 'vitest'
|
||||
import { parseHeader } from 'node/utils/parseHeader'
|
||||
|
||||
describe('parseHeader', () => {
|
||||
test('should unescape html', () => {
|
||||
const input = `<div :id="'app'">`
|
||||
expect(parseHeader(input)).toBe(`<div :id="'app'">`)
|
||||
})
|
||||
|
||||
test('should remove markdown tokens correctly', () => {
|
||||
const asserts: Record<string, string> = {
|
||||
// vuepress #238
|
||||
'[vue](vuejs.org)': 'vue',
|
||||
'`vue`': 'vue',
|
||||
'*vue*': 'vue',
|
||||
'**vue**': 'vue',
|
||||
'***vue***': 'vue',
|
||||
_vue_: 'vue',
|
||||
'\\_vue\\_': '_vue_',
|
||||
'\\*vue\\*': '*vue*',
|
||||
'\\!vue\\!': '!vue!',
|
||||
|
||||
// vuepress #2688
|
||||
'[vue](vuejs.org) / [vue](vuejs.org)': 'vue / vue',
|
||||
'[\\<ins>](vuejs.org)': '<ins>',
|
||||
|
||||
// vuepress #564 For multiple markdown tokens
|
||||
'`a` and `b`': 'a and b',
|
||||
'***bold and italic***': 'bold and italic',
|
||||
'**bold** and *italic*': 'bold and italic',
|
||||
|
||||
// escaping \$
|
||||
'\\$vue': '$vue'
|
||||
}
|
||||
Object.keys(asserts).forEach((input) => {
|
||||
expect(parseHeader(input)).toBe(asserts[input])
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -1,57 +0,0 @@
|
||||
import { test, expect } from 'vitest'
|
||||
import { removeNonCodeWrappedHTML } from 'node/utils/parseHeader'
|
||||
|
||||
test('removeNonCodeWrappedHTML', () => {
|
||||
const asserts: Record<string, string> = {
|
||||
// Remove tail html
|
||||
'# H1 <Comp></Comp>': '# H1 ',
|
||||
'# H1<Comp></Comp>': '# H1',
|
||||
'# H1 <Comp a="b"></Comp>': '# H1 ',
|
||||
'# H1<Comp a="b"></Comp>': '# H1',
|
||||
'# H1 <Comp/>': '# H1 ',
|
||||
'# H1<Comp/>': '# H1',
|
||||
'# H1 <Comp a="b"/>': '# H1 ',
|
||||
'# H1<Comp a="b"/>': '# H1',
|
||||
|
||||
// Reserve code-wrapped tail html
|
||||
'# H1 `<Comp></Comp>`': '# H1 `<Comp></Comp>`',
|
||||
'# H1 `<Comp a="b"></Comp>`': '# H1 `<Comp a="b"></Comp>`',
|
||||
'# H1 `<Comp/>`': '# H1 `<Comp/>`',
|
||||
'# H1 `<Comp a="b"/>`': '# H1 `<Comp a="b"/>`',
|
||||
|
||||
// Remove leading html
|
||||
'# <Comp></Comp> H1': '# H1',
|
||||
'# <Comp></Comp>H1': '# H1',
|
||||
'# <Comp a="b"></Comp> H1': '# H1',
|
||||
'# <Comp a="b"></Comp>H1': '# H1',
|
||||
'# <Comp/> H1': '# H1',
|
||||
'# <Comp/>H1': '# H1',
|
||||
'# <Comp a="b"/> H1': '# H1',
|
||||
'# <Comp a="b"/>H1': '# H1',
|
||||
|
||||
// Reserve code-wrapped leading html
|
||||
'# `<Comp></Comp>` H1': '# `<Comp></Comp>` H1',
|
||||
'# `<Comp a="b"></Comp>` H1': '# `<Comp a="b"></Comp>` H1',
|
||||
'# `<Comp/>` H1': '# `<Comp/>` H1',
|
||||
'# `<Comp a="b"/>` H1': '# `<Comp a="b"/>` H1',
|
||||
|
||||
// Remove middle html
|
||||
'# H1 <Comp></Comp> H2': '# H1 H2',
|
||||
'# H1 <Comp a="b"></Comp> H2': '# H1 H2',
|
||||
'# H1 <Comp/> H2': '# H1 H2',
|
||||
'# H1 <Comp a="b"/> H2': '# H1 H2',
|
||||
|
||||
// Reserve code-wrapped middle html
|
||||
'# H1 `<Comp></Comp>` H2': '# H1 `<Comp></Comp>` H2',
|
||||
'# H1 `<Comp a="b"></Comp>` H2': '# H1 `<Comp a="b"></Comp>` H2',
|
||||
'# H1 `<Comp/>` H2': '# H1 `<Comp/>` H2',
|
||||
'# H1 `<Comp a="b"/>` H2': '# H1 `<Comp a="b"/>` H2',
|
||||
|
||||
// vuepress #2688
|
||||
'# \\<ins>': '# \\<ins>'
|
||||
}
|
||||
|
||||
Object.keys(asserts).forEach((input) => {
|
||||
expect(removeNonCodeWrappedHTML(input)).toBe(asserts[input])
|
||||
})
|
||||
})
|
||||
@ -1,68 +0,0 @@
|
||||
// Since VuePress needs to extract the header from the markdown source
|
||||
// file and display it in the sidebar or title (#238), this file simply
|
||||
// removes some unnecessary elements to make header displays well at
|
||||
// sidebar or title.
|
||||
//
|
||||
// But header's parsing in the markdown content is done by the markdown
|
||||
// loader based on markdown-it. markdown-it parser will will always keep
|
||||
// HTML in headers, so in VuePress, after being parsed by the markdown
|
||||
// loader, the raw HTML in headers will finally be parsed by Vue-loader.
|
||||
// so that we can write HTML/Vue in the header. One exception is the HTML
|
||||
// wrapped by <code>(markdown token: '`') tag.
|
||||
import emojiData from 'markdown-it-emoji/lib/data/full.json'
|
||||
|
||||
const parseEmojis = (str: string) => {
|
||||
return str.replace(
|
||||
/:(.+?):/g,
|
||||
(placeholder, key) => (emojiData as any)[key] || placeholder
|
||||
)
|
||||
}
|
||||
|
||||
const unescapeHtml = (html: string) =>
|
||||
html
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/:/g, ':')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
|
||||
const removeMarkdownTokens = (str: string) =>
|
||||
str
|
||||
.replace(/(\[(.[^\]]+)\]\((.[^)]+)\))/g, '$2') // []()
|
||||
.replace(/(`|\*{1,3}|_)(.*?[^\\])\1/g, '$2') // `{t}` | *{t}* | **{t}** | ***{t}*** | _{t}_
|
||||
.replace(/(\\)(\*|_|`|\!|<|\$)/g, '$2') // remove escape char '\'
|
||||
|
||||
const removeCustomAnchor = (str: string) =>
|
||||
str.replace(/\{#([a-zA-Z0-9\-_]+?)\}\s*$/, '') // {#custom-header}
|
||||
|
||||
const trim = (str: string) => str.trim()
|
||||
|
||||
// This method remove the raw HTML but reserve the HTML wrapped by `<code>`.
|
||||
// e.g.
|
||||
// Input: "<a> b", Output: "b"
|
||||
// Input: "`<a>` b", Output: "`<a>` b"
|
||||
export const removeNonCodeWrappedHTML = (str: string) => {
|
||||
return String(str).replace(/(^|[^><`\\])<.*>([^><`]|$)/g, '$1$2')
|
||||
}
|
||||
|
||||
const compose = (...processors: ((str: string) => string)[]) => {
|
||||
if (processors.length === 0) return (input: string) => input
|
||||
if (processors.length === 1) return processors[0]
|
||||
return processors.reduce((prev, next) => {
|
||||
return (str) => next(prev(str))
|
||||
})
|
||||
}
|
||||
|
||||
// Unescape html, parse emojis and remove some md tokens.
|
||||
export const parseHeader = compose(
|
||||
unescapeHtml,
|
||||
parseEmojis,
|
||||
removeCustomAnchor,
|
||||
removeMarkdownTokens,
|
||||
trim
|
||||
)
|
||||
|
||||
// Also clean the html that isn't wrapped by code.
|
||||
// Because we want to support using VUE components in headers.
|
||||
// e.g. https://vuepress.vuejs.org/guide/using-vue.html#badge
|
||||
export const deeplyParseHeader = compose(removeNonCodeWrappedHTML, parseHeader)
|
||||
Loading…
Reference in new issue