fix(plugin-md-power): fix file-tree container incorrectly rendering in nesting content, close #795 (#797)

plugins/plugin-md-power/__test__/__snapshots__/fileTreePlugin.spec.ts.snap

@@ -161,3 +161,31 @@ exports[`fileTreePlugin > should work with default options 1`] = `
 <div class="vp-file-tree"></div>
 "
 `;
+
+exports[`fileTreePlugin > should work with nesting content 1`] = `
+"<ul>
+<li>
+<p>item1</p>
+<div class="vp-file-tree"><FileTreeNode type="folder" filename="docs" :level="0">
+<template #icon><VPIcon provider="iconify" name="vscode-icons:folder-type-docs" /></template><FileTreeNode type="file" filename="…" :level="1">
+
+</FileTreeNode>
+</FileTreeNode>
+<FileTreeNode expanded type="folder" filename="src" :level="0">
+<template #icon><VPIcon provider="iconify" name="vscode-icons:folder-type-src" /></template><FileTreeNode type="file" filename="a.js" :level="1">
+<template #icon><VPIcon provider="iconify" name="vscode-icons:file-type-js" /></template>
+</FileTreeNode>
+<FileTreeNode type="file" filename="b.ts" :level="1">
+<template #icon><VPIcon provider="iconify" name="vscode-icons:file-type-typescript" /></template>
+</FileTreeNode>
+</FileTreeNode>
+<FileTreeNode type="file" filename="README.md" :level="0">
+<template #icon><VPIcon provider="iconify" name="flat-color-icons:info" /></template>
+</FileTreeNode></div>
+</li>
+<li>
+<p>item2</p>
+</li>
+</ul>
+"
+`;

plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts

@@ -60,7 +60,8 @@ function createMarkdown(options?: FileTreeOptions) {
 }
 
 describe('fileTreePlugin', () => {
-  const code = `\
+  it('should work with default options', () => {
+    const code = `\
 :::file-tree
 - docs
   - README.md
@@ -110,7 +111,27 @@ describe('fileTreePlugin', () => {
 ::: file-tree
 :::
 `
-  it('should work with default options', () => {
+    const md = createMarkdown()
+
+    expect(md.render(code)).toMatchSnapshot()
+  })
+
+  // fix #795
+  it('should work with nesting content', () => {
+    const code = `\
+- item1
+
+  ::: file-tree
+  - docs/
+  - src
+    - a.js
+    - b.ts
+  - README.md
+  :::
+
+- item2
+`
+
     const md = createMarkdown()
 
     expect(md.render(code)).toMatchSnapshot()

plugins/plugin-md-power/src/node/container/fileTree.ts

@@ -43,13 +43,15 @@ export interface FileTreeNodeProps {
 export function parseFileTreeRawContent(content: string): FileTreeNode[] {
   const root: FileTreeNode = { info: '', level: -1, children: [] }
   const stack: FileTreeNode[] = [root]
-  const lines = content.trim().split('\n')
+  const lines = content.trimEnd().split('\n')
+  const spaceLength = lines[0].match(/^\s*/)?.[0].length ?? 0 // 去除行首空格/)
+
   for (const line of lines) {
     const match = line.match(/^(\s*)-(.*)$/)
     if (!match)
       continue
 
-    const level = Math.floor(match[1].length / 2) // 每两个空格为一个层级
+    const level = Math.floor((match[1].length - spaceLength) / 2) // 每两个空格为一个层级
     const info = match[2].trim()
 
     // 检索当前层级的父节点