yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

perf(plugin-md-power): improve timeline syntax parsing (#533)

Browse Source
This commit is contained in:
pengzhanbo 2025-03-22 17:33:31 +08:00 committed by GitHub
parent 5173e7f2ed
commit 7b8fae22b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 74 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/plugin-md-power/__test__/__snapshots__/timelinePlugin.spec.ts.snap
View File

@ -36,5 +36,9 @@ exports[`timeline > timelinePlugin() > should work 1`] = `
这是内容</VPTimelineItem><VPTimelineItem card placement="left">
<template #title>这是标题</template>
这是内容</VPTimelineItem></VPTimeline>"
这是内容</VPTimelineItem><VPTimelineItem :card="undefined">
<template #title>这是标题</template>
<p>这是内容</p>
</VPTimelineItem></VPTimeline>"
`;

24
plugins/plugin-md-power/__test__/timelinePlugin.spec.ts
View File

@ -4,28 +4,24 @@ import { extractTimelineAttributes, timelinePlugin } from '../src/node/container
describe('timeline > extractTimelineAttributes()', () => {
it('should work', () => {
const { title, attrs } = extractTimelineAttributes('这是标题 time=Q1')
expect(title).toBe('这是标题')
expect(attrs).toEqual({ time: 'Q1' })
const meta = extractTimelineAttributes('这是标题 time=Q1')
expect(meta).toEqual({ title: '这是标题', time: 'Q1' })
})
it('should work with multi attrs', () => {
const { title, attrs } = extractTimelineAttributes('这是标题 time=Q1 icon=ri:clockwise-line card=true placement=left line=dashed')
expect(title).toBe('这是标题')
expect(attrs).toEqual({ time: 'Q1', icon: 'ri:clockwise-line', card: 'true', placement: 'left', line: 'dashed' })
const meta = extractTimelineAttributes('这是标题 time=Q1 icon=ri:clockwise-line card=true placement=left line=dashed')
expect(meta).toEqual({ title: '这是标题', time: 'Q1', icon: 'ri:clockwise-line', card: 'true', placement: 'left', line: 'dashed' })
})
it('should work with title include space', () => {
const { title, attrs } = extractTimelineAttributes('这是标题 这也是标题 time=Q1 icon=ri:clockwise-line card=true placement=left line=dashed')
const meta = extractTimelineAttributes('这是标题 这也是标题 time=Q1 icon=ri:clockwise-line card=true placement=left line=dashed')
expect(title).toBe('这是标题 这也是标题')
expect(attrs).toEqual({ time: 'Q1', icon: 'ri:clockwise-line', card: 'true', placement: 'left', line: 'dashed' })
expect(meta).toEqual({ title: '这是标题 这也是标题', time: 'Q1', icon: 'ri:clockwise-line', card: 'true', placement: 'left', line: 'dashed' })
})
it('should work with unknown attr', () => {
const { title, attrs } = extractTimelineAttributes('这是标题 time=Q1 unknown=true card=true')
expect(title).toBe('这是标题 unknown=true card=true')
expect(attrs).toEqual({ time: 'Q1' })
const meta = extractTimelineAttributes('这是标题 time=Q1 unknown=true card=true')
expect(meta).toEqual({ title: '这是标题 unknown=true card=true', time: 'Q1' })
})
})
@ -70,6 +66,10 @@ describe('timeline > timelinePlugin()', () => {
- 这是标题 card=true placement=left
这是内容
- 这是标题
这是内容
:::
`
expect(md.render(source)).toMatchSnapshot()

113
plugins/plugin-md-power/src/node/container/timeline.ts
View File

@ -6,6 +6,7 @@
* - title time="Q2" icon="ri:clockwise-line" line="dashed" type="warning" color="red"
* :::
*/
import type Token from 'markdown-it/lib/token.mjs'
import type { Markdown } from 'vuepress/markdown'
import { resolveAttrs } from '.././utils/resolveAttrs.js'
import { cleanMarkdownEnv } from '../utils/cleanMarkdownEnv.js'
@ -18,7 +19,8 @@ export interface TimelineAttrs {
line?: string
}
export interface TimelineItemAttrs {
export interface TimelineItemMeta {
title: string
time?: string
type?: string
icon?: string
@ -28,10 +30,6 @@ export interface TimelineItemAttrs {
placement?: string
}
export interface TimelineItemMeta extends TimelineItemAttrs {
title: string
}
const RE_KEY = /(\w+)=\s*/
const RE_SEARCH_KEY = /\s+\w+=\s*|$/
const RE_CLEAN_VALUE = /(?<quote>["'])(.*?)(\k<quote>)/
@ -39,50 +37,8 @@ const RE_CLEAN_VALUE = /(?<quote>["'])(.*?)(\k<quote>)/
export function timelinePlugin(md: Markdown) {
createContainerPlugin(md, 'timeline', {
before(info, tokens, index) {
const listStack: number[] = [] // 记录列表嵌套深度
parseTimeline(tokens, index)
for (let i = index + 1; i < tokens.length; i++) {
const token = tokens[i]
if (token.type === 'container_timeline_close') {
break
}
// 列表层级追踪
if (token.type === 'bullet_list_open') {
listStack.push(0) // 每个新列表初始层级为0
if (listStack.length === 1)
token.hidden = true
}
else if (token.type === 'bullet_list_close') {
listStack.pop()
if (listStack.length === 0)
token.hidden = true
}
else if (token.type === 'list_item_open') {
const currentLevel = listStack.length
// 仅处理根级列表项（层级1）
if (currentLevel === 1) {
token.type = 'timeline_item_open'
const titleOpenToken = tokens[i + 1]
const titleCloseToken = tokens[i + 3]
titleOpenToken.hidden = true
titleCloseToken.hidden = true
const inlineToken = tokens[i + 2]
const firstChildToken = inlineToken.children?.shift()
const { title, attrs } = extractTimelineAttributes(firstChildToken!.content.trim())
token.meta = {
title,
...attrs,
} as TimelineItemMeta
}
}
else if (token.type === 'list_item_close') {
const currentLevel = listStack.length
if (currentLevel === 1) {
token.type = 'timeline_item_close'
}
}
}
const { attrs } = resolveAttrs<TimelineAttrs>(info)
const { horizontal, card, placement, line } = attrs
return `<VPTimeline${
@ -121,13 +77,58 @@ export function timelinePlugin(md: Markdown) {
md.renderer.rules.timeline_item_close = () => '</VPTimelineItem>'
}
// 核心属性扫描器
export function extractTimelineAttributes(rawText: string): {
title: string
attrs: TimelineItemAttrs
} {
function parseTimeline(tokens: Token[], index: number) {
const listStack: number[] = [] // 记录列表嵌套深度
for (let i = index + 1; i < tokens.length; i++) {
const token = tokens[i]
if (token.type === 'container_timeline_close') {
break
}
// 列表层级追踪
if (token.type === 'bullet_list_open') {
listStack.push(0) // 每个新列表初始层级为0
if (listStack.length === 1)
token.hidden = true
}
else if (token.type === 'bullet_list_close') {
listStack.pop()
if (listStack.length === 0)
token.hidden = true
}
else if (token.type === 'list_item_open') {
const currentLevel = listStack.length
// 仅处理根级列表项（层级1）
if (currentLevel === 1) {
token.type = 'timeline_item_open'
const titleOpenToken = tokens[i + 1]
const titleCloseToken = tokens[i + 3]
titleOpenToken.hidden = true
titleCloseToken.hidden = true
const inlineToken = tokens[i + 2]
const softbreakIndex = inlineToken.children!.findIndex(
token => token.type === 'softbreak',
)
inlineToken.children = softbreakIndex !== -1
? inlineToken.children!.slice(softbreakIndex)
: []
const content = inlineToken.content.replace(/\n[\s\S]*/, '')
token.meta = extractTimelineAttributes(content.trim())
}
}
else if (token.type === 'list_item_close') {
const currentLevel = listStack.length
if (currentLevel === 1) {
token.type = 'timeline_item_close'
}
}
}
}
export function extractTimelineAttributes(rawText: string): TimelineItemMeta {
const attrKeys = ['time', 'type', 'icon', 'line', 'color', 'card', 'placement'] as const
const attrs: Partial<TimelineItemAttrs> = {}
const attrs: Partial<TimelineItemMeta> = {}
let buffer = rawText.trim()
const titleSegments: string[] = []
@ -160,7 +161,7 @@ export function extractTimelineAttributes(rawText: string): {
valueEnd = buffer.length
const value = buffer.slice(0, valueEnd).trim()
// 存储属性
attrs[matchedKey as keyof TimelineItemAttrs] = value.replace(RE_CLEAN_VALUE, '$2')
attrs[matchedKey as keyof TimelineItemMeta] = value.replace(RE_CLEAN_VALUE, '$2')
// 跳过已处理的值
buffer = buffer.slice(valueEnd)
@ -168,6 +169,6 @@ export function extractTimelineAttributes(rawText: string): {
return {
title: titleSegments.join(' ').trim(),
attrs,
...attrs,
}
}