mirror of https://github.com/vuejs/vitepress
refactor: externalize markdown component plugin (#843)
meteorlxy
2 years ago
committed by
GitHub
parent
22d796aeea
commit
8a2d4f39e4
@ -1,202 +0,0 @@
|
|||||||
import MarkdownIt from 'markdown-it'
|
|
||||||
import { RuleBlock } from 'markdown-it/lib/parser_block'
|
|
||||||
import blockNames from 'markdown-it/lib/common/html_blocks'
|
|
||||||
import { HTML_OPEN_CLOSE_TAG_RE } from 'markdown-it/lib/common/html_re'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Vue reserved tags
|
|
||||||
*
|
|
||||||
* @see https://vuejs.org/api/built-in-components.html
|
|
||||||
*/
|
|
||||||
const vueReservedTags = [
|
|
||||||
'template',
|
|
||||||
'component',
|
|
||||||
'transition',
|
|
||||||
'transition-group',
|
|
||||||
'keep-alive',
|
|
||||||
'slot',
|
|
||||||
'teleport'
|
|
||||||
]
|
|
||||||
|
|
||||||
/**
|
|
||||||
* According to markdown spec, all non-block html tags are treated as "inline"
|
|
||||||
* tags (wrapped with <p></p>), including those "unknown" tags.
|
|
||||||
*
|
|
||||||
* Therefore, markdown-it processes "inline" tags and "unknown" tags in the
|
|
||||||
* same way, and does not care if a tag is "inline" or "unknown".
|
|
||||||
*
|
|
||||||
* As we want to take those "unknown" tags as custom components, we should
|
|
||||||
* treat them as "block" tags.
|
|
||||||
*
|
|
||||||
* So we have to distinguish between "inline" and "unknown" tags ourselves.
|
|
||||||
*
|
|
||||||
* The inline tags list comes from MDN.
|
|
||||||
*
|
|
||||||
* @see https://spec.commonmark.org/0.29/#raw-html
|
|
||||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
|
|
||||||
*/
|
|
||||||
const inlineTags = [
|
|
||||||
'a',
|
|
||||||
'abbr',
|
|
||||||
'acronym',
|
|
||||||
'audio',
|
|
||||||
'b',
|
|
||||||
'bdi',
|
|
||||||
'bdo',
|
|
||||||
'big',
|
|
||||||
'br',
|
|
||||||
'button',
|
|
||||||
'canvas',
|
|
||||||
'cite',
|
|
||||||
'code',
|
|
||||||
'data',
|
|
||||||
'datalist',
|
|
||||||
'del',
|
|
||||||
'dfn',
|
|
||||||
'em',
|
|
||||||
'embed',
|
|
||||||
'i',
|
|
||||||
// iframe is treated as HTML blocks in markdown spec
|
|
||||||
// 'iframe',
|
|
||||||
'img',
|
|
||||||
'input',
|
|
||||||
'ins',
|
|
||||||
'kbd',
|
|
||||||
'label',
|
|
||||||
'map',
|
|
||||||
'mark',
|
|
||||||
'meter',
|
|
||||||
'noscript',
|
|
||||||
'object',
|
|
||||||
'output',
|
|
||||||
'picture',
|
|
||||||
'progress',
|
|
||||||
'q',
|
|
||||||
'ruby',
|
|
||||||
's',
|
|
||||||
'samp',
|
|
||||||
'script',
|
|
||||||
'select',
|
|
||||||
'slot',
|
|
||||||
'small',
|
|
||||||
'span',
|
|
||||||
'strong',
|
|
||||||
'sub',
|
|
||||||
'sup',
|
|
||||||
'svg',
|
|
||||||
'template',
|
|
||||||
'textarea',
|
|
||||||
'time',
|
|
||||||
'u',
|
|
||||||
'tt',
|
|
||||||
'var',
|
|
||||||
'video',
|
|
||||||
'wbr'
|
|
||||||
]
|
|
||||||
|
|
||||||
// replacing the default htmlBlock rule to allow using custom components at
|
|
||||||
// root level
|
|
||||||
//
|
|
||||||
// an array of opening and corresponding closing sequences for html tags,
|
|
||||||
// last argument defines whether it can terminate a paragraph or not
|
|
||||||
const HTML_SEQUENCES: [RegExp, RegExp, boolean][] = [
|
|
||||||
[/^<(script|pre|style)(?=(\s|>|$))/i, /<\/(script|pre|style)>/i, true],
|
|
||||||
[/^<!--/, /-->/, true],
|
|
||||||
[/^<\?/, /\?>/, true],
|
|
||||||
[/^<![A-Z]/, />/, true],
|
|
||||||
[/^<!\[CDATA\[/, /\]\]>/, true],
|
|
||||||
|
|
||||||
// MODIFIED HERE: treat vue reserved tags as block tags
|
|
||||||
[
|
|
||||||
new RegExp('^</?(' + vueReservedTags.join('|') + ')(?=(\\s|/?>|$))', 'i'),
|
|
||||||
/^$/,
|
|
||||||
true
|
|
||||||
],
|
|
||||||
|
|
||||||
// MODIFIED HERE: treat unknown tags as block tags (custom components),
|
|
||||||
// excluding known inline tags
|
|
||||||
[
|
|
||||||
new RegExp(
|
|
||||||
'^</?(?!(' + inlineTags.join('|') + ')(?![\\w-]))\\w[\\w-]*[\\s/>]'
|
|
||||||
),
|
|
||||||
/^$/,
|
|
||||||
true
|
|
||||||
],
|
|
||||||
|
|
||||||
[
|
|
||||||
new RegExp('^</?(' + blockNames.join('|') + ')(?=(\\s|/?>|$))', 'i'),
|
|
||||||
/^$/,
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[new RegExp(HTML_OPEN_CLOSE_TAG_RE.source + '\\s*$'), /^$/, false]
|
|
||||||
]
|
|
||||||
|
|
||||||
export const componentPlugin = (md: MarkdownIt) => {
|
|
||||||
md.block.ruler.at('html_block', htmlBlock)
|
|
||||||
}
|
|
||||||
|
|
||||||
const htmlBlock: RuleBlock = (state, startLine, endLine, silent): boolean => {
|
|
||||||
let i, nextLine, lineText
|
|
||||||
let pos = state.bMarks[startLine] + state.tShift[startLine]
|
|
||||||
let max = state.eMarks[startLine]
|
|
||||||
|
|
||||||
// if it's indented more than 3 spaces, it should be a code block
|
|
||||||
if (state.sCount[startLine] - state.blkIndent >= 4) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!state.md.options.html) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.src.charCodeAt(pos) !== 0x3c /* < */) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
lineText = state.src.slice(pos, max)
|
|
||||||
|
|
||||||
for (i = 0; i < HTML_SEQUENCES.length; i++) {
|
|
||||||
if (HTML_SEQUENCES[i][0].test(lineText)) {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (i === HTML_SEQUENCES.length) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (silent) {
|
|
||||||
// true if this sequence can be a terminator, false otherwise
|
|
||||||
return HTML_SEQUENCES[i][2]
|
|
||||||
}
|
|
||||||
|
|
||||||
nextLine = startLine + 1
|
|
||||||
|
|
||||||
// if we are here - we detected HTML block. let's roll down till block end
|
|
||||||
if (!HTML_SEQUENCES[i][1].test(lineText)) {
|
|
||||||
for (; nextLine < endLine; nextLine++) {
|
|
||||||
if (state.sCount[nextLine] < state.blkIndent) {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
pos = state.bMarks[nextLine] + state.tShift[nextLine]
|
|
||||||
max = state.eMarks[nextLine]
|
|
||||||
lineText = state.src.slice(pos, max)
|
|
||||||
|
|
||||||
if (HTML_SEQUENCES[i][1].test(lineText)) {
|
|
||||||
if (lineText.length !== 0) {
|
|
||||||
nextLine++
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
state.line = nextLine
|
|
||||||
|
|
||||||
const token = state.push('html_block', '', 0)
|
|
||||||
token.map = [startLine, nextLine]
|
|
||||||
token.content = state.getLines(startLine, nextLine, state.blkIndent, true)
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue