@wsxjs/wsx-marked-components 0.0.18

package/src/Markdown.wsx

@@ -0,0 +1,269 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX Markdown Component
+ *
+ * A reusable component that renders markdown into WSX marked components.
+ * Supports customization through custom token renderers.
+ *
+ * @example
+ * ```html
+ * <wsx-markdown markdown="# Hello World"></wsx-markdown>
+ * ```
+ */
+
+import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
+import { createLogger } from "@wsxjs/wsx-logger";
+import { marked } from "marked";
+import type { Tokens } from "marked";
+import styles from "./Markdown.css?inline";
+import { renderInlineTokens } from "./marked-utils";
+// Import WSX components so they're registered as custom elements
+import "./Heading.wsx";
+import "./Code.wsx";
+import "./Blockquote.wsx";
+import "./Paragraph.wsx";
+import "./List.wsx";
+import "./Error.wsx";
+
+const logger = createLogger("Markdown");
+
+/**
+ * Custom token renderer function type
+ * Return null to use default rendering, or return an HTMLElement to override
+ */
+export type TokenRenderer = (
+    token: Tokens.Generic,
+    defaultRender: () => HTMLElement | null
+) => HTMLElement | null;
+
+/**
+ * Custom renderers configuration
+ */
+export interface CustomRenderers {
+    [tokenType: string]: TokenRenderer;
+}
+
+/**
+ * Markdown Component
+ *
+ * Renders markdown content into WSX marked components using marked.lexer()
+ * and manual JSX conversion.
+ */
+@autoRegister({ tagName: "wsx-markdown" })
+export default class Markdown extends LightComponent {
+    @state private markdown: string = "";
+    private customRenderers: CustomRenderers = {};
+
+    constructor() {
+        super({
+            styles,
+            styleName: "wsx-markdown",
+            lightDOM: true,
+        });
+        logger.info("Markdown initialized");
+    }
+
+    static get observedAttributes() {
+        return ["markdown"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === "markdown") {
+            this.markdown = newValue || "";
+            this.rerender();
+        }
+    }
+
+    /**
+     * Set custom renderers for specific token types
+     *
+     * @example
+     * ```typescript
+     * markdown.setCustomRenderers({
+     *   heading: (token, defaultRender) => {
+     *     // Custom heading rendering
+     *     return defaultRender();
+     *   }
+     * });
+     * ```
+     */
+    setCustomRenderers(renderers: CustomRenderers): void {
+        this.customRenderers = { ...this.customRenderers, ...renderers };
+        this.rerender();
+    }
+
+    /**
+     * Get current custom renderers
+     */
+    getCustomRenderers(): CustomRenderers {
+        return { ...this.customRenderers };
+    }
+
+    render() {
+        if (!this.markdown) {
+            return <div class="marked-content"></div>;
+        }
+
+        try {
+            // Use marked.lexer to get tokens, then render with WSX JSX
+            const tokens = marked.lexer(this.markdown);
+            return <div class="marked-content">{this.renderTokens(tokens)}</div>;
+        } catch (error) {
+            logger.error("Failed to render markdown", error);
+            return (
+                <div class="marked-content">
+                    <wsx-marked-error message={`Error: ${error}`} />
+                </div>
+            );
+        }
+    }
+
+    protected onConnected() {
+        // Get initial value from attribute
+        const markdownAttr = this.getAttribute("markdown");
+        if (markdownAttr) {
+            this.markdown = markdownAttr;
+        }
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * Render a single token to WSX JSX element
+     * Supports custom renderers for extensibility
+     */
+    private renderToken(token: Tokens.Generic): HTMLElement | null {
+        // Check for custom renderer first
+        const customRenderer = this.customRenderers[token.type];
+        if (customRenderer) {
+            const result = customRenderer(token, () => this.defaultRenderToken(token));
+            if (result !== null) {
+                return result;
+            }
+            // If custom renderer returns null, fall back to default
+        }
+
+        return this.defaultRenderToken(token);
+    }
+
+    /**
+     * Default token rendering logic
+     * This is the core rendering implementation
+     */
+    private defaultRenderToken(token: Tokens.Generic): HTMLElement | null {
+        switch (token.type) {
+            case "heading": {
+                const headingToken = token as Tokens.Heading;
+                return (
+                    <wsx-marked-heading
+                        level={headingToken.depth.toString()}
+                        text={renderInlineTokens(headingToken.tokens)}
+                    />
+                );
+            }
+
+            case "code": {
+                const codeToken = token as Tokens.Code;
+                return <wsx-marked-code code={codeToken.text} language={codeToken.lang || ""} />;
+            }
+
+            case "blockquote": {
+                const blockquoteToken = token as Tokens.Blockquote;
+                return (
+                    <wsx-marked-blockquote>
+                        {this.renderTokens(blockquoteToken.tokens)}
+                    </wsx-marked-blockquote>
+                );
+            }
+
+            case "paragraph": {
+                const paraToken = token as Tokens.Paragraph;
+                return <wsx-marked-paragraph content={renderInlineTokens(paraToken.tokens)} />;
+            }
+
+            case "list": {
+                const listToken = token as Tokens.List;
+                // List items can contain block-level tokens (nested lists, blockquotes, etc.)
+                // So we need to use renderTokens() instead of renderInlineTokens()
+                const items = listToken.items.map((item) => {
+                    // 防御性检查：确保 item.tokens 存在且是数组
+                    if (!item.tokens || !Array.isArray(item.tokens)) {
+                        logger.warn("List item has no tokens or tokens is not an array", { item });
+                        return "";
+                    }
+                    // Render all tokens in the list item (both inline and block-level)
+                    const renderedElements = this.renderTokens(item.tokens);
+                    // 如果渲染结果为空，返回空字符串
+                    if (renderedElements.length === 0) {
+                        return "";
+                    }
+                    // Convert rendered elements to HTML string for the List component
+                    // Create a temporary container to collect the HTML
+                    const tempContainer = document.createElement("div");
+                    renderedElements.forEach((el) => {
+                        if (el) {
+                            tempContainer.appendChild(el);
+                        }
+                    });
+                    const html = tempContainer.innerHTML;
+                    // 如果 innerHTML 为空，记录警告
+                    if (!html) {
+                        logger.warn("tempContainer.innerHTML is empty after appending elements", {
+                            renderedElementsCount: renderedElements.length,
+                            itemTokens: item.tokens,
+                        });
+                    }
+                    return html;
+                });
+                return (
+                    <wsx-marked-list
+                        ordered={listToken.ordered ? "true" : "false"}
+                        items={JSON.stringify(items)}
+                    />
+                );
+            }
+
+            case "html": {
+                const htmlToken = token as Tokens.HTML;
+                return <div>{htmlToken.text}</div>;
+            }
+
+            case "hr": {
+                return <hr />;
+            }
+
+            case "space": {
+                // Ignore space tokens
+                return null;
+            }
+
+            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
+                const textToken = token as Tokens.Text;
+                return <span>{textToken.text || ""}</span>;
+            }
+
+            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 null;
+            }
+        }
+    }
+}

package/src/Paragraph.wsx

@@ -0,0 +1,36 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * WSX Paragraph Component
+ * Custom paragraph component for markdown rendering
+ */
+
+import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
+
+@autoRegister({ tagName: "wsx-marked-paragraph" })
+export default class Paragraph extends LightComponent {
+    @state private content: string = "";
+
+    constructor() {
+        super({
+            styleName: "wsx-marked-paragraph",
+        });
+    }
+
+    static get observedAttributes() {
+        return ["content"];
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (name === "content") {
+            // HTML 属性值会被浏览器自动解码，所以这里得到的是原始的 HTML 字符串
+            this.content = newValue || "";
+        }
+    }
+
+    render() {
+        // content 是 HTML 字符串，需要解析为 DOM 节点
+        // JSX factory 会自动检测 HTML 字符串并转换
+        return <p class="marked-paragraph">{this.content}</p>;
+    }
+}
+

package/src/index.ts

@@ -0,0 +1,16 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+
+// Export all marked components
+export { default as Heading } from "./Heading.wsx";
+export { default as Code } from "./Code.wsx";
+export { default as Blockquote } from "./Blockquote.wsx";
+export { default as Paragraph } from "./Paragraph.wsx";
+export { default as List } from "./List.wsx";
+export { default as Error } from "./Error.wsx";
+export { default as Markdown } from "./Markdown.wsx";
+
+// Export utilities
+export * from "./marked-utils";
+
+// Export types
+export type { TokenRenderer, CustomRenderers, MarkdownOptions } from "./types";

package/src/marked-utils.ts

@@ -0,0 +1,111 @@
+/**
+ * Marked utilities for Pattern 1 and Pattern 2
+ * Shared utilities for extracting and rendering inline tokens
+ */
+
+import type { Tokens } from "marked";
+
+/**
+ * Helper to escape HTML for attributes
+ */
+export function escapeHtml(text: string): string {
+    const div = document.createElement("div");
+    div.textContent = text;
+    // Framework utility function for HTML escaping - innerHTML is necessary here
+    return div.innerHTML;
+}
+
+/**
+ * Extract inline tokens from a list of tokens
+ * Handles paragraph tokens by extracting their inline tokens
+ */
+export function extractInlineTokens(tokens: Tokens.Generic[] | undefined): Tokens.Generic[] {
+    // 防御性检查：确保 tokens 存在且是数组
+    if (!tokens || !Array.isArray(tokens)) {
+        return [];
+    }
+
+    const inlineTokens: Tokens.Generic[] = [];
+
+    tokens.forEach((token) => {
+        if (token.type === "paragraph") {
+            // If it's a paragraph, extract its inline tokens
+            const paraToken = token as Tokens.Paragraph;
+            // 防御性检查：确保 paraToken.tokens 存在
+            if (paraToken.tokens && Array.isArray(paraToken.tokens)) {
+                inlineTokens.push(...paraToken.tokens);
+            }
+        } else if (
+            token.type === "text" ||
+            token.type === "strong" ||
+            token.type === "em" ||
+            token.type === "link" ||
+            token.type === "code" ||
+            token.type === "br"
+        ) {
+            // If it's already an inline token, add it directly
+            inlineTokens.push(token);
+        }
+        // For other block-level tokens, we skip them
+        // If needed, they can be handled separately
+    });
+
+    return inlineTokens;
+}
+
+/**
+ * Render inline tokens to HTML string
+ * Used by both Pattern 1 and Pattern 2
+ */
+export function renderInlineTokens(tokens: Tokens.Generic[] | undefined): string {
+    // 防御性检查：确保 tokens 存在且是数组
+    if (!tokens || !Array.isArray(tokens)) {
+        return "";
+    }
+
+    return tokens
+        .map((token) => {
+            switch (token.type) {
+                case "text": {
+                    const textToken = token as Tokens.Text;
+                    return textToken.text || "";
+                }
+                case "strong": {
+                    const strongToken = token as Tokens.Strong;
+                    // 防御性检查：确保 strongToken.tokens 存在
+                    const nestedTokens =
+                        strongToken.tokens && Array.isArray(strongToken.tokens)
+                            ? strongToken.tokens
+                            : [];
+                    return `<strong>${renderInlineTokens(nestedTokens)}</strong>`;
+                }
+                case "em": {
+                    const emToken = token as Tokens.Em;
+                    // 防御性检查：确保 emToken.tokens 存在
+                    const nestedTokens =
+                        emToken.tokens && Array.isArray(emToken.tokens) ? emToken.tokens : [];
+                    return `<em>${renderInlineTokens(nestedTokens)}</em>`;
+                }
+                case "link": {
+                    const linkToken = token as Tokens.Link;
+                    const title = linkToken.title ? ` title="${escapeHtml(linkToken.title)}"` : "";
+                    // 防御性检查：确保 linkToken.tokens 存在
+                    const nestedTokens =
+                        linkToken.tokens && Array.isArray(linkToken.tokens) ? linkToken.tokens : [];
+                    return `<a href="${linkToken.href || "#"}"${title}>${renderInlineTokens(nestedTokens)}</a>`;
+                }
+                case "code": {
+                    const codeToken = token as Tokens.Code;
+                    return `<code>${escapeHtml(codeToken.text || "")}</code>`;
+                }
+                case "br": {
+                    return "<br>";
+                }
+                default: {
+                    // For unknown token types, return empty string
+                    return "";
+                }
+            }
+        })
+        .join("");
+}

package/src/types/wsx.d.ts

@@ -0,0 +1,5 @@
+declare module "*.wsx" {
+    import { Component } from "@wsxjs/wsx-core";
+    const ComponentClass: typeof Component;
+    export default ComponentClass;
+}

package/src/types.ts

@@ -0,0 +1,57 @@
+/**
+ * Type definitions for @wsxjs/wsx-marked-components
+ */
+
+import type { Tokens } from "marked";
+
+/**
+ * Custom token renderer function type
+ *
+ * @param token - The token to render
+ * @param defaultRender - Function to call default rendering logic
+ * @returns HTMLElement or null (null means use default rendering)
+ *
+ * @example
+ * ```typescript
+ * const customHeadingRenderer: TokenRenderer = (token, defaultRender) => {
+ *   if (token.type === 'heading') {
+ *     const headingToken = token as Tokens.Heading;
+ *     // Custom logic here
+ *     return defaultRender(); // Or return custom element
+ *   }
+ *   return null; // Use default for other types
+ * };
+ * ```
+ */
+export type TokenRenderer = (
+    token: Tokens.Generic,
+    defaultRender: () => HTMLElement | null
+) => HTMLElement | null;
+
+/**
+ * Custom renderers configuration
+ * Maps token types to custom renderer functions
+ */
+export interface CustomRenderers {
+    [tokenType: string]: TokenRenderer;
+}
+
+/**
+ * Markdown component options
+ */
+export interface MarkdownOptions {
+    /**
+     * Custom renderers for specific token types
+     */
+    customRenderers?: CustomRenderers;
+
+    /**
+     * Custom CSS class name for the content container
+     */
+    contentClass?: string;
+
+    /**
+     * Whether to enable debug logging
+     */
+    debug?: boolean;
+}