@wsxjs/wsx-marked-components 0.0.25 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-marked-components",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Markdown rendering components built with WSXJS for marked library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -20,8 +20,8 @@
   "dependencies": {
     "marked": "^12.0.0",
     "prismjs": "^1.30.0",
-    "@wsxjs/wsx-core": "0.0.25",
-    "@wsxjs/wsx-logger": "0.0.25"
+    "@wsxjs/wsx-core": "0.0.26",
+    "@wsxjs/wsx-logger": "0.0.26"
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.5",
@@ -31,8 +31,8 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.4.19",
-    "@wsxjs/wsx-vite-plugin": "0.0.25",
-    "@wsxjs/eslint-plugin-wsx": "0.0.25"
+    "@wsxjs/eslint-plugin-wsx": "0.0.26",
+    "@wsxjs/wsx-vite-plugin": "0.0.26"
   },
   "keywords": [
     "wsx",

package/src/Heading.wsx

@@ -4,7 +4,7 @@
  * Custom heading component for markdown rendering
  */
 
-import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
 import styles from "./Heading.css?inline";
 
 @autoRegister({ tagName: "wsx-marked-heading" })
@@ -19,8 +19,10 @@ export default class Heading extends LightComponent {
         });
     }
 
+    @state private anchorId: string = "";
+
     static get observedAttributes() {
-        return ["level", "text"];
+        return ["level", "text", "anchor-id"];
     }
 
     attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@@ -28,17 +30,19 @@ export default class Heading extends LightComponent {
             this.level = parseInt(newValue, 10) || 1;
         } else if (name === "text") {
             this.text = newValue;
+        } else if (name === "anchor-id") {
+            this.anchorId = newValue;
         }
         this.rerender();
     }
 
     render() {
         // 使用 WSX JSX 语法，根据 level 渲染对应的标题
-        if (this.level === 1) return <h1>{this.text}</h1>;
-        if (this.level === 2) return <h2>{this.text}</h2>;
-        if (this.level === 3) return <h3>{this.text}</h3>;
-        if (this.level === 4) return <h4>{this.text}</h4>;
-        if (this.level === 5) return <h5>{this.text}</h5>;
-        return <h6>{this.text}</h6>;
+        if (this.level === 1) return <h1 id={this.anchorId}>{this.text}</h1>;
+        if (this.level === 2) return <h2 id={this.anchorId}>{this.text}</h2>;
+        if (this.level === 3) return <h3 id={this.anchorId}>{this.text}</h3>;
+        if (this.level === 4) return <h4 id={this.anchorId}>{this.text}</h4>;
+        if (this.level === 5) return <h5 id={this.anchorId}>{this.text}</h5>;
+        return <h6 id={this.anchorId}>{this.text}</h6>;
     }
 }

package/src/Markdown.wsx

@@ -16,7 +16,7 @@ import { createLogger } from "@wsxjs/wsx-logger";
 import { marked } from "marked";
 import type { Tokens } from "marked";
 
-import { renderInlineTokens } from "./marked-utils";
+import { renderInlineTokens, generateId } from "./marked-utils";
 // Import WSX components so they're registered as custom elements
 import "./Heading.wsx";
 import "./Code.wsx";
@@ -143,10 +143,14 @@ export default class Markdown extends LightComponent {
         switch (token.type) {
             case "heading": {
                 const headingToken = token as Tokens.Heading;
+                const text = renderInlineTokens(headingToken.tokens);
+                const id = generateId(text);
+
                 return (
                     <wsx-marked-heading
                         level={headingToken.depth.toString()}
-                        text={renderInlineTokens(headingToken.tokens)}
+                        text={text}
+                        anchor-id={id}
                     />
                 );
             }

package/src/marked-utils.ts

@@ -109,3 +109,17 @@ export function renderInlineTokens(tokens: Tokens.Generic[] | undefined): string
         })
         .join("");
 }
+
+/**
+ * Generate a clean ID from text
+ * Matches the logic in wsx-press TOC generation
+ * 保留中文等 Unicode 字符，只移除特殊符号
+ */
+export function generateId(text: string): string {
+    return text
+        .toLowerCase()
+        .replace(/\s+/g, "-") // 空格转连字符
+        .replace(/[^\p{L}\p{N}-]/gu, "") // 保留字母、数字、连字符（Unicode-aware）
+        .replace(/-+/g, "-") // 合并多个连字符
+        .replace(/^-+|-+$/g, ""); // 移除首尾连字符
+}