@wsxjs/wsx-marked-components 0.0.27 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-marked-components",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "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-logger": "0.0.27",
-    "@wsxjs/wsx-core": "0.0.27"
+    "@wsxjs/wsx-core": "0.0.30",
+    "@wsxjs/wsx-logger": "0.0.30"
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.5",
@@ -31,8 +31,8 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.4.19",
-    "@wsxjs/eslint-plugin-wsx": "0.0.27",
-    "@wsxjs/wsx-vite-plugin": "0.0.27"
+    "@wsxjs/wsx-vite-plugin": "0.0.30",
+    "@wsxjs/eslint-plugin-wsx": "0.0.30"
   },
   "keywords": [
     "wsx",

package/src/Markdown.wsx

@@ -11,7 +11,13 @@
  * ```
  */
 
-import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
+import {
+    LightComponent,
+    autoRegister,
+    state,
+    type JSXChildren,
+    parseHTMLToNodes,
+} from "@wsxjs/wsx-core";
 import { createLogger } from "@wsxjs/wsx-logger";
 import { marked } from "marked";
 import type { Tokens } from "marked";
@@ -111,21 +117,19 @@ export default class Markdown extends LightComponent {
     /**
      * Convert marked tokens to WSX JSX elements
      */
-    private renderTokens(tokens: Tokens.Generic[]): (HTMLElement | null)[] {
-        return tokens
-            .map((token) => this.renderToken(token))
-            .filter((el): el is HTMLElement => el !== null);
+    private renderTokens(tokens: Tokens.Generic[]): JSXChildren[] {
+        return tokens.map((token) => this.renderToken(token)).filter((el) => el !== null);
     }
 
     /**
      * Render a single token to WSX JSX element
      * Supports custom renderers for extensibility
      */
-    private renderToken(token: Tokens.Generic): HTMLElement | null {
+    private renderToken(token: Tokens.Generic): JSXChildren {
         // Check for custom renderer first
         const customRenderer = this.customRenderers[token.type];
         if (customRenderer) {
-            const result = customRenderer(token, () => this.defaultRenderToken(token));
+            const result = customRenderer(token, () => this.defaultRenderToken(token) as any);
             if (result !== null) {
                 return result;
             }
@@ -139,7 +143,7 @@ export default class Markdown extends LightComponent {
      * Default token rendering logic
      * This is the core rendering implementation
      */
-    private defaultRenderToken(token: Tokens.Generic): HTMLElement | null {
+    private defaultRenderToken(token: Tokens.Generic): JSXChildren {
         switch (token.type) {
             case "heading": {
                 const headingToken = token as Tokens.Heading;
@@ -195,7 +199,13 @@ export default class Markdown extends LightComponent {
                     const tempContainer = document.createElement("div");
                     renderedElements.forEach((el) => {
                         if (el) {
-                            tempContainer.appendChild(el);
+                            if (typeof el === "string" || typeof el === "number") {
+                                tempContainer.appendChild(document.createTextNode(String(el)));
+                            } else if (el instanceof HTMLElement || el instanceof SVGElement) {
+                                tempContainer.appendChild(el.cloneNode(true));
+                            } else if (el instanceof DocumentFragment) {
+                                tempContainer.appendChild(el.cloneNode(true));
+                            }
                         }
                     });
                     const html = tempContainer.innerHTML;
@@ -215,7 +225,8 @@ export default class Markdown extends LightComponent {
 
             case "html": {
                 const htmlToken = token as Tokens.HTML;
-                return <div>{htmlToken.text}</div>;
+                // 使用 Fragment 包裹解析后的节点，支持 Raw HTML
+                return <>{parseHTMLToNodes(htmlToken.text)}</>;
             }
 
             case "hr": {
@@ -228,23 +239,25 @@ export default class Markdown extends LightComponent {
             }
 
             case "text": {
-                // Text tokens are inline tokens, but if they appear as top-level tokens,
-                // render them directly as text nodes wrapped in a span
+                // Text tokens are inline tokens
                 const textToken = token as Tokens.Text;
-                return <span>{textToken.text || ""}</span>;
+                if (textToken.tokens && textToken.tokens.length > 0) {
+                    return <>{this.renderTokens(textToken.tokens)}</>;
+                }
+                return textToken.text || "";
             }
 
             default: {
                 // For other types, use default marked renderer
-                // Note: marked.Renderer() only handles block-level tokens, not inline tokens
                 const renderer = new marked.Renderer();
                 const renderMethod = (
                     renderer as unknown as Record<string, (token: unknown) => string>
                 )[token.type];
                 const html = renderMethod?.(token) || "";
                 if (html) {
-                    return <div>{html}</div>;
+                    return <>{parseHTMLToNodes(html)}</>;
                 }
+                logger.warn(`[WSX-Markdown] Unknown token type: ${token.type}`);
                 return null;
             }
         }

package/src/marked-utils.ts

@@ -41,6 +41,7 @@ export function extractInlineTokens(tokens: Tokens.Generic[] | undefined): Token
             token.type === "em" ||
             token.type === "link" ||
             token.type === "code" ||
+            token.type === "codespan" ||
             token.type === "br"
         ) {
             // If it's already an inline token, add it directly
@@ -98,6 +99,10 @@ export function renderInlineTokens(tokens: Tokens.Generic[] | undefined): string
                     const codeToken = token as Tokens.Code;
                     return `<code>${escapeHtml(codeToken.text || "")}</code>`;
                 }
+                case "codespan": {
+                    const codeToken = token as Tokens.Codespan;
+                    return `<code>${escapeHtml(codeToken.text || "")}</code>`;
+                }
                 case "br": {
                     return "<br>";
                 }