@h-ai/ui 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/components/scenes/ai/document-parse.js

@@ -4,6 +4,7 @@
  * Extracts HTML, outline, and code block metadata for document-mode rendering.
  */
 import { Marked } from 'marked';
+import { createEditorMarkdownExtensions, extractPlainTextFromTokens, } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
 /** Default parsing options for document mode. */
 const DEFAULT_OPTIONS = {
@@ -82,8 +83,8 @@ function createRendererObject(options, state) {
         heading(token) {
             // depth is clamped to the valid heading range.
             const depth = Math.max(1, Math.min(6, token.depth));
-            // text is the plain heading text used for outline labels.
-            const text = token.text.trim();
+            // text 需要剥离自定义 span / 强调等 inline token，保证目录显示的是用户可见标题。
+            const text = extractPlainTextFromTokens(token.tokens).trim();
             // id is the stable anchor for outline navigation.
             const id = createHeadingId(state, text);
             state.outline.push({
@@ -205,6 +206,7 @@ function createRendererObject(options, state) {
 function createMarkedInstance(options, state) {
     return new Marked({
         renderer: createRendererObject(options, state),
+        extensions: createEditorMarkdownExtensions(),
         gfm: true,
         breaks: options.breaks,
     });

package/dist/components/scenes/ai/document-types.d.ts

@@ -59,13 +59,31 @@ export interface MarkdownRewriteRequest {
     title?: string;
 }
 /**
- * Block-level format actions for the editor toolbar.
+ * Legacy block-level format actions preserved for backward compatibility.
  */
 export type MarkdownBlockFormatKind = 'heading' | 'bullet';
+/**
+ * Rich block-style actions used by the current editor toolbar.
+ */
+export type MarkdownBlockStyleKind = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4';
 /**
  * Inline format actions for the editor toolbar.
+ * `highlight` and `link` stay in the public union so older integrations keep compiling.
  */
 export type MarkdownInlineFormatKind = 'bold' | 'italic' | 'strike' | 'underline' | 'code' | 'highlight' | 'link';
+/**
+ * Paragraph alignment actions for the editor toolbar.
+ */
+export type MarkdownTextAlignKind = 'left' | 'center' | 'right' | 'justify';
+/**
+ * 颜色面板一次只会修改前景色或背景色中的一个维度。
+ */
+export interface MarkdownColorFormatRequest {
+    /** `text` 表示文字颜色，`background` 表示文本底色。 */
+    target: 'text' | 'background';
+    /** 颜色值为空时表示恢复默认。 */
+    value: string | null;
+}
 export interface MarkdownToolbarDownloadAction {
     /** Action id used to identify the download target. */
     id: string;
@@ -74,6 +92,13 @@ export interface MarkdownToolbarDownloadAction {
     /** Optional short badge displayed beside the menu label. */
     badgeLabel?: string;
 }
+/**
+ * Callback props are exposed to Svelte consumers, so we keep parameter checks bivariant.
+ * This lets older handlers with narrower unions remain assignable while the component gains new APIs.
+ */
+type BivariantCallback<Args extends unknown[], Return = void> = {
+    bivarianceHack: (...args: Args) => Return;
+}['bivarianceHack'];
 export interface AiDocumentEditorProps {
     /** Markdown source content. */
     content?: string;
@@ -153,12 +178,21 @@ export interface AiDocumentEditorProps {
     onhistory?: () => void;
     /** Custom full-document copy handler. */
     oncopydocument?: () => void | Promise<void>;
-    /** Block-format action handler from the selection toolbar. */
-    onapplyblockformat?: (kind: MarkdownBlockFormatKind) => void;
+    /** Legacy block-format action handler for older heading / bullet integrations. */
+    onapplyblockformat?: BivariantCallback<[kind: MarkdownBlockFormatKind], void>;
+    /** Rich block-style handler for paragraph and concrete heading-level changes. */
+    onapplyblockstyle?: BivariantCallback<[kind: MarkdownBlockStyleKind], void>;
     /** Inline-format action handler from the selection toolbar. */
-    onapplyinlineformat?: (kind: MarkdownInlineFormatKind) => void;
+    onapplyinlineformat?: BivariantCallback<[kind: MarkdownInlineFormatKind], void>;
+    /** Paragraph alignment handler from the selection toolbar. */
+    onapplyalignment?: (kind: MarkdownTextAlignKind) => void;
+    /** Link add / edit / remove handler from the selection toolbar. */
+    onapplylink?: (href: string | null) => void;
+    /** Text or background color handler from the selection toolbar. */
+    onapplycolor?: (request: MarkdownColorFormatRequest) => void;
     /** Selection copy handler for custom behavior. */
     oncopyselection?: () => void | Promise<void>;
     /** Selection annotation handler. */
     onannotation?: () => void | Promise<void>;
 }
+export {};

package/dist/components/scenes/ai/editor-markdown-extensions.d.ts

@@ -0,0 +1,11 @@
+import type { Token, TokenizerAndRendererExtension } from 'marked';
+/**
+ * Markdown heading 提取目录时需要一个“纯文本标题”。
+ * 这里显式递归常见 inline token，保证 `<hai-span>`、链接、强调等都能回落成纯文本。
+ */
+export declare function extractPlainTextFromTokens(tokens: Token[] | undefined): string;
+/**
+ * ChatWorkspace 编辑器会把“非标准 Markdown”能力写成自定义标签，
+ * 这里把它们注册为 marked 扩展，保证普通 Markdown 和编辑器增强能力共享同一条渲染链路。
+ */
+export declare function createEditorMarkdownExtensions(): TokenizerAndRendererExtension[];

package/dist/components/scenes/ai/editor-markdown-extensions.js

@@ -0,0 +1,184 @@
+/**
+ * 编辑器扩展里只接受固定格式的十六进制颜色，避免把任意 style 串透传到渲染结果。
+ */
+const HEX_COLOR_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/**
+ * 对齐扩展只开放编辑器工具条里的四种模式。
+ */
+const ALIGN_VALUE_REGEX = /^(?:left|center|right|justify)$/i;
+const HAI_ALIGN_BLOCK_REGEX = /^<hai-align\s+value="(left|center|right|justify)">\n?([\s\S]+?)\n?<\/hai-align>\n{0,2}/i;
+const HAI_SPAN_INLINE_REGEX = /^<hai-span(?:\s+color="([^"]+)")?(?:\s+bg="([^"]+)")?\s*>([\s\S]+?)<\/hai-span>/i;
+const HAI_UNDERLINE_REGEX = /^\+\+((?:\\.|[\s\S])+?)\+\+/;
+const HAI_HIGHLIGHT_REGEX = /^==((?:\\.|[\s\S])+?)==/;
+/**
+ * Markdown heading 提取目录时需要一个“纯文本标题”。
+ * 这里显式递归常见 inline token，保证 `<hai-span>`、链接、强调等都能回落成纯文本。
+ */
+export function extractPlainTextFromTokens(tokens) {
+    if (!tokens || tokens.length === 0) {
+        return '';
+    }
+    return tokens.map((token) => {
+        if ('tokens' in token && Array.isArray(token.tokens)) {
+            return extractPlainTextFromTokens(token.tokens);
+        }
+        if ('text' in token && typeof token.text === 'string') {
+            return token.text;
+        }
+        if ('raw' in token && typeof token.raw === 'string') {
+            return token.raw;
+        }
+        return '';
+    }).join('');
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function sanitizeColor(value) {
+    if (!value) {
+        return undefined;
+    }
+    const normalized = value.trim().toLowerCase();
+    return HEX_COLOR_REGEX.test(normalized) ? normalized : undefined;
+}
+function sanitizeAlign(value) {
+    if (!value) {
+        return undefined;
+    }
+    const normalized = value.trim().toLowerCase();
+    return ALIGN_VALUE_REGEX.test(normalized)
+        ? normalized
+        : undefined;
+}
+/**
+ * ChatWorkspace 编辑器会把“非标准 Markdown”能力写成自定义标签，
+ * 这里把它们注册为 marked 扩展，保证普通 Markdown 和编辑器增强能力共享同一条渲染链路。
+ */
+export function createEditorMarkdownExtensions() {
+    return [
+        {
+            name: 'haiAlign',
+            level: 'block',
+            start(src) {
+                return src.indexOf('<hai-align');
+            },
+            tokenizer(src) {
+                const match = src.match(HAI_ALIGN_BLOCK_REGEX);
+                if (!match) {
+                    return undefined;
+                }
+                const align = sanitizeAlign(match[1]);
+                if (!align) {
+                    return undefined;
+                }
+                const body = match[2].trim();
+                return {
+                    type: 'haiAlign',
+                    raw: match[0],
+                    align,
+                    tokens: this.lexer.blockTokens(body),
+                };
+            },
+            renderer(token) {
+                const alignToken = token;
+                return `<div class="hai-md-align-block" data-hai-align="${escapeHtml(alignToken.align)}" style="text-align:${escapeHtml(alignToken.align)};">${this.parser.parse(alignToken.tokens)}</div>`;
+            },
+            childTokens: ['tokens'],
+        },
+        {
+            name: 'haiSpan',
+            level: 'inline',
+            start(src) {
+                return src.indexOf('<hai-span');
+            },
+            tokenizer(src) {
+                const match = src.match(HAI_SPAN_INLINE_REGEX);
+                if (!match) {
+                    return undefined;
+                }
+                const color = sanitizeColor(match[1]);
+                const background = sanitizeColor(match[2]);
+                return {
+                    type: 'haiSpan',
+                    raw: match[0],
+                    color,
+                    background,
+                    tokens: this.lexer.inlineTokens(match[3]),
+                };
+            },
+            renderer(token) {
+                const spanToken = token;
+                const style = [
+                    spanToken.color ? `color:${spanToken.color}` : '',
+                    spanToken.background ? `background-color:${spanToken.background}` : '',
+                ].filter(Boolean).join(';');
+                if (!style) {
+                    return this.parser.parseInline(spanToken.tokens);
+                }
+                const attributes = [
+                    'class="hai-md-inline-style"',
+                    `style="${escapeHtml(style)};"`,
+                    spanToken.color
+                        ? `data-hai-color="${escapeHtml(spanToken.color)}"`
+                        : '',
+                    spanToken.background
+                        ? `data-hai-bg="${escapeHtml(spanToken.background)}"`
+                        : '',
+                ].filter(Boolean).join(' ');
+                return `<span ${attributes}>${this.parser.parseInline(spanToken.tokens)}</span>`;
+            },
+            childTokens: ['tokens'],
+        },
+        {
+            name: 'haiUnderline',
+            level: 'inline',
+            start(src) {
+                return src.indexOf('++');
+            },
+            tokenizer(src) {
+                const match = src.match(HAI_UNDERLINE_REGEX);
+                if (!match) {
+                    return undefined;
+                }
+                return {
+                    type: 'haiUnderline',
+                    raw: match[0],
+                    tokens: this.lexer.inlineTokens(match[1]),
+                };
+            },
+            renderer(token) {
+                const underlineToken = token;
+                return `<u>${this.parser.parseInline(underlineToken.tokens)}</u>`;
+            },
+            childTokens: ['tokens'],
+        },
+        {
+            name: 'haiHighlight',
+            level: 'inline',
+            start(src) {
+                return src.indexOf('==');
+            },
+            tokenizer(src) {
+                const match = src.match(HAI_HIGHLIGHT_REGEX);
+                if (!match) {
+                    return undefined;
+                }
+                return {
+                    type: 'haiHighlight',
+                    raw: match[0],
+                    tokens: this.lexer.inlineTokens(match[1]),
+                };
+            },
+            renderer(token) {
+                const highlightToken = token;
+                return `<mark>${this.parser.parseInline(highlightToken.tokens)}</mark>`;
+            },
+            childTokens: ['tokens'],
+        },
+    ];
+}

package/dist/components/scenes/ai/index.d.ts

@@ -11,7 +11,7 @@ export { downloadAiDocument, resolveDocumentDownloadActions, resolveDocumentMark
 export type { AiDocumentDownloadFormat, AiDocumentDownloadRequest, AiDocumentResolvedDownloadAction, } from './document-download.js';
 export { renderMarkdownDocument } from './document-parse.js';
 export type { MarkdownDocumentParseOptions, MarkdownRenderResult, } from './document-parse.js';
-export type { AiDocumentEditorProps, MarkdownBlockFormatKind, MarkdownCodeBlockItem, MarkdownCodeRunRequest, MarkdownCodeRunResult, MarkdownInlineFormatKind, MarkdownOutlineItem, MarkdownRewriteAction, MarkdownRewriteRequest, MarkdownToolbarDownloadAction, } from './document-types.js';
+export type { AiDocumentEditorProps, MarkdownBlockFormatKind, MarkdownBlockStyleKind, MarkdownCodeBlockItem, MarkdownCodeRunRequest, MarkdownCodeRunResult, MarkdownColorFormatRequest, MarkdownInlineFormatKind, MarkdownOutlineItem, MarkdownRewriteAction, MarkdownRewriteRequest, MarkdownTextAlignKind, MarkdownToolbarDownloadAction, } from './document-types.js';
 export { parseMarkdown } from './markdown-parse.js';
 export type { MarkdownParseOptions } from './markdown-parse.js';
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';

package/dist/components/scenes/ai/markdown-parse.js

@@ -6,6 +6,7 @@
  * @module markdown-parse
  */
 import { Marked } from 'marked';
+import { createEditorMarkdownExtensions } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
 const SAFE_LINK_HREF_REGEX = /^(?:https?:\/\/|\/|#|mailto:)/i;
 const SAFE_IMAGE_SRC_REGEX = /^(?:https?:\/\/|\/|data:image\/)/i;
@@ -117,6 +118,7 @@ function createRendererObject(options) {
 function createMarkedInstance(options) {
     return new Marked({
         renderer: createRendererObject(options),
+        extensions: createEditorMarkdownExtensions(),
         gfm: true,
         breaks: options.breaks,
     });

package/dist/messages/en-US.json

@@ -204,6 +204,11 @@
   "markdown_history": "History",
   "markdown_view_version": "View version",
   "markdown_format_heading": "Heading",
+  "markdown_format_paragraph": "Paragraph",
+  "markdown_format_heading_1": "Heading 1",
+  "markdown_format_heading_2": "Heading 2",
+  "markdown_format_heading_3": "Heading 3",
+  "markdown_format_heading_4": "Heading 4",
   "markdown_format_bullet": "Bullets",
   "markdown_format_bold": "Bold",
   "markdown_format_strike": "Strike",
@@ -212,6 +217,20 @@
   "markdown_format_link": "Link",
   "markdown_format_code": "Code",
   "markdown_format_highlight": "Highlight",
+  "markdown_align": "Align",
+  "markdown_align_left": "Align left",
+  "markdown_align_center": "Align center",
+  "markdown_align_right": "Align right",
+  "markdown_align_justify": "Justify",
+  "markdown_text_color": "Text color",
+  "markdown_background_color": "Background color",
+  "markdown_reset_default": "Reset default",
+  "markdown_color_dialog_label": "Text and background color",
+  "markdown_link_dialog_label": "Edit link",
+  "markdown_link_input_label": "Link URL",
+  "markdown_link_placeholder": "Paste or type a link",
+  "markdown_link_apply": "Apply link",
+  "markdown_link_remove": "Remove link",
   "markdown_copy_selection": "Copy",
   "markdown_annotation": "Annotate",
   "markdown_run_preview": "Run Preview",

package/dist/messages/zh-CN.json

@@ -204,6 +204,11 @@
   "markdown_history": "历史版本",
   "markdown_view_version": "查看版本",
   "markdown_format_heading": "标题",
+  "markdown_format_paragraph": "正文",
+  "markdown_format_heading_1": "一级标题",
+  "markdown_format_heading_2": "二级标题",
+  "markdown_format_heading_3": "三级标题",
+  "markdown_format_heading_4": "四级标题",
   "markdown_format_bullet": "列表",
   "markdown_format_bold": "加粗",
   "markdown_format_strike": "删除线",
@@ -212,6 +217,20 @@
   "markdown_format_link": "链接",
   "markdown_format_code": "代码",
   "markdown_format_highlight": "高亮",
+  "markdown_align": "对齐",
+  "markdown_align_left": "左对齐",
+  "markdown_align_center": "居中对齐",
+  "markdown_align_right": "右对齐",
+  "markdown_align_justify": "两端对齐",
+  "markdown_text_color": "字体颜色",
+  "markdown_background_color": "背景颜色",
+  "markdown_reset_default": "恢复默认",
+  "markdown_color_dialog_label": "文本和背景颜色",
+  "markdown_link_dialog_label": "编辑链接",
+  "markdown_link_input_label": "链接地址",
+  "markdown_link_placeholder": "输入或粘贴链接地址",
+  "markdown_link_apply": "应用链接",
+  "markdown_link_remove": "移除链接",
   "markdown_copy_selection": "复制",
   "markdown_annotation": "注释",
   "markdown_run_preview": "运行预览",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -42,7 +42,7 @@
     "marked": "^18.0.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.10"
+    "@h-ai/core": "0.1.0-alpha.11"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",