pack-test-yanmengs 1.0.0 → 1.0.1

package/components.ts

@@ -126,7 +126,6 @@ customElements.define(
     }
   },
 );
-
 customElements.define(
   "doc-card",
   class extends HTMLElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pack-test-yanmengs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "private": false,
   "main": "index.js",
@@ -15,8 +15,10 @@
   "dependencies": {
     "mdast": "^3.0.0",
     "mdast-util-directive": "^3.1.0",
+    "rehype-stringify": "^10.0.1",
     "remark-directive": "^4.0.0",
     "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "typescript": "^5.9.3",
     "unified": "^11.0.5"
   },

package/utils.ts

@@ -1,15 +1,15 @@
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkDirective from "remark-directive";
-import type { Root, Content, Text, Parent, Code } from "mdast";
+import type { Root, Content, Text, Parent } from "mdast";
 import type { ContainerDirective } from "mdast-util-directive";
-
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
 /**
  * 获取 Markdown AST (抽象语法树)
  */
 function getAST(content: string): Root {
   const processor = unified().use(remarkParse).use(remarkDirective);
-  console.log(processor.parse(content), "processor.parse(content)", content);
   return processor.parse(content) as Root;
 }
 
@@ -44,9 +44,8 @@ const parseAST = (
         ? `</doc-${directiveNode.name}>`
         : `<doc-${directiveNode.name}${attrString ? " " + attrString : ""}>`;
 
-      // 3. 创建替换文本节点
-      const textNode: Text = {
-        type: "text",
+      const htmlNode: any = {
+        type: "html",
         value: tagName,
       };
 
@@ -57,7 +56,7 @@ const parseAST = (
         map.set(column, true);
       }
 
-      newChildren.push(textNode);
+      newChildren.push(htmlNode);
 
       // 5. 递归处理子节点并将结果展开（平铺化）
       if (directiveNode.children) {
@@ -68,6 +67,7 @@ const parseAST = (
       const processedInner = parseAST(getAST(String(node.value)));
       newChildren.push(...processedInner);
     } else {
+      console.log(node, "node");
       // 普通节点递归处理（如果存在子节点）
       if ("children" in node) {
         node.children = parseAST(node as Parent, map) as any;
@@ -79,37 +79,28 @@ const parseAST = (
   return newChildren;
 };
 
-/**
- * 将 AST 节点拍平并提取文本内容 (HTML 字符串)
- */
-const parseHtml = (nodes: Content[], currentStr: string = ""): string => {
-  let result = currentStr;
-
-  nodes.forEach((node) => {
-    if ("children" in node && node.children) {
-      result = parseHtml(node.children as Content[], result);
-    } else if ("value" in node) {
-      result += node.value + "\n";
-    }
-  });
-
-  return result;
-};
-const MarkdownToHtml = (markdownContent: string): string => {
+export const transformMarkdownToHtml = async (
+  markdownContent: string,
+): Promise<string> => {
+  // 1. 依然使用你原来的逻辑生成转换后的 AST 节点数组
   const ast = getAST(markdownContent);
   const transformedChildren = parseAST(ast);
-  return parseHtml(transformedChildren);
-};
-/**
- * 主导出函数
- */
-export const transformMarkdownToHtml = (markdownContent: string): string => {
-  let result = MarkdownToHtml(markdownContent);
-  // while (result.includes(":::")) {
-  //   result = MarkdownToHtml(result);
-  //   console.log(result);
-  // }
 
-  console.log(result);
-  return result;
+  // 2. 构造一个新的 Root 节点
+  const transformedAst: Root = {
+    type: "root",
+    children: transformedChildren as any,
+  };
+
+  // 3. 【核心步骤】交给 unified 处理原本的 md 语法
+  const processor = unified()
+    .use(remarkRehype, { allowDangerousHtml: true }) // 允许你 push 的 html 节点通过
+    .use(rehypeStringify, { allowDangerousHtml: true });
+
+  // 运行转换：这一步会将树里的 Heading 变成 h1, List 变成 ul/li
+  const hastTree = await processor.run(transformedAst);
+
+  // 将处理完的树序列化为 HTML 字符串
+  const finalHtml = processor.stringify(hastTree);
+  return String(finalHtml);
 };