diff --git a/plugins/plugin-md-power/src/node/container/fileTree.ts b/plugins/plugin-md-power/src/node/container/fileTree.ts index f1755b75..0a310945 100644 --- a/plugins/plugin-md-power/src/node/container/fileTree.ts +++ b/plugins/plugin-md-power/src/node/container/fileTree.ts @@ -4,6 +4,7 @@ import Token from 'markdown-it/lib/token.mjs' import container from 'markdown-it-container' import { removeEndingSlash, removeLeadingSlash } from 'vuepress/shared' import { defaultFile, defaultFolder, getFileIcon } from '../fileIcons/index.js' +import { resolveAttrs } from '../utils/resolveAttrs.js' interface FileTreeNode { filename: string @@ -13,13 +14,16 @@ interface FileTreeNode { empty: boolean } +interface FileTreeAttrs { + title?: string + icon?: FileTreeIconMode +} + const type = 'file-tree' const closeType = `container_${type}_close` const componentName = 'FileTreeItem' const itemOpen = 'file_tree_item_open' const itemClose = 'file_tree_item_close' -const RE_SIMPLE_ICON = /:simple-icon\b/ -const RE_COLORED_ICON = /:colored-icon\b/ export function fileTreePlugin(md: Markdown, options: FileTreeOptions = {}) { const getIcon = (filename: string, type: 'folder' | 'file', mode?: FileTreeIconMode): string => { @@ -32,7 +36,7 @@ export function fileTreePlugin(md: Markdown, options: FileTreeOptions = {}) { const validate = (info: string): boolean => info.trim().startsWith(type) const render = (tokens: Token[], idx: number): string => { - const mode = getFileIconMode(tokens[idx].info) + const { attrs } = resolveAttrs(tokens[idx].info.slice(type.length - 1)) if (tokens[idx].nesting === 1) { const hasRes: number[] = [] // level stack @@ -49,7 +53,7 @@ export function fileTreePlugin(md: Markdown, options: FileTreeOptions = {}) { hasRes.push(token.level) const [info, inline] = result const { filename, type, expanded, empty } = info - const icon = getIcon(filename, type, mode) + const icon = getIcon(filename, type, attrs.icon) token.type = itemOpen token.tag = componentName @@ -69,8 +73,7 @@ export function fileTreePlugin(md: Markdown, options: FileTreeOptions = {}) { } } } - - const title = resolveTitle(tokens[idx].info) + const title = attrs.title return `
${title ? `

${title}

` : ''}` } else { @@ -81,20 +84,6 @@ export function fileTreePlugin(md: Markdown, options: FileTreeOptions = {}) { md.use(container, type, { validate, render }) } -function getFileIconMode(info: string): FileTreeIconMode | undefined { - if (RE_SIMPLE_ICON.test(info)) - return 'simple' - if (RE_COLORED_ICON.test(info)) - return 'colored' - return undefined -} - -function resolveTitle(info: string): string { - info = info.trim().slice(type.length).trim() - info = info.replace(RE_SIMPLE_ICON, '').replace(RE_COLORED_ICON, '') - return info.trim() -} - export function resolveTreeNodeInfo( tokens: Token[], current: Token, diff --git a/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts b/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts index 3f321f88..802d6fc0 100644 --- a/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts +++ b/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts @@ -1,13 +1,13 @@ const RE_ATTR_VALUE = /(?:^|\s+)(?[\w-]+)(?:=\s*(?['"])(?.+?)\k)?(?:\s+|$)/ -export function resolveAttrs(info: string): { - attrs: Record +export function resolveAttrs = Record>(info: string): { + attrs: T rawAttrs: string } { info = info.trim() if (!info) - return { rawAttrs: '', attrs: {} } + return { rawAttrs: '', attrs: {} as T } const attrs: Record = {} const rawAttrs = info @@ -37,5 +37,5 @@ export function resolveAttrs(info: string): { } }) - return { attrs, rawAttrs } + return { attrs: attrs as T, rawAttrs } }