@h-ai/ui 0.1.0-alpha.30 → 0.1.0-alpha.31

package/dist/components/primitives/Textarea.svelte

@@ -33,9 +33,20 @@
   const dataAttributes = $derived(getDataAttributes(restProps))
   let textareaRef: HTMLTextAreaElement | undefined = $state()
 
+  const wrapperClass = $derived(
+    cn(
+      'flex w-full rounded-lg border bg-base-100',
+      error
+        ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+        : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      'transition-[border-color,box-shadow] duration-150',
+      disabled && 'opacity-50 cursor-not-allowed',
+    ),
+  )
+
   const textareaClass = $derived(
     cn(
-      'textarea w-full',
+      'textarea w-full bg-transparent border-none outline-none',
       getInputSizeClass(size),
       error && 'textarea-error',
       className,
@@ -74,20 +85,22 @@
 </script>
 
 <div {...dataAttributes} class='fieldset w-full'>
-  <textarea
-    bind:this={textareaRef}
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {required}
-    class={textareaClass}
-    bind:value
-    oninput={handleInput}
-    oninvalid={handleInvalid}
-  ></textarea>
+  <div class={wrapperClass}>
+    <textarea
+      bind:this={textareaRef}
+      {id}
+      {name}
+      {placeholder}
+      {rows}
+      {disabled}
+      {readonly}
+      {required}
+      class={textareaClass}
+      bind:value
+      oninput={handleInput}
+      oninvalid={handleInvalid}
+    ></textarea>
+  </div>
   {#if error}
     <span class='fieldset-label text-error'>{error}</span>
   {/if}

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -240,6 +240,8 @@
     sourceKind = 'markdown',
     // sourceKind=code 时的默认语言提示。
     codeLanguage,
+    // 正文字号，number 会按 px 处理。
+    fontSize,
     // 外层自定义类名。
     class: className = '',
     // 是否显示代码块复制按钮。
@@ -250,6 +252,8 @@
     showCodePreviewToggle = false,
     // 是否显式允许内置 HTML / JS / CSS 预览执行高风险内容。
     allowUnsafeCodePreview = false,
+    // 是否按安全白名单解析原始 HTML 标签。
+    allowHtmlTags = false,
     // 代码预览切换模式下展示在语言标签旁的提示文案。
     codePreviewHint = '',
     // 是否启用语法高亮。
@@ -412,6 +416,7 @@
       codeViewPreviewLabel: uiM('file_list_preview'),
       codePreviewHint: normalizedCodePreviewHint,
       breaks,
+      allowHtmlTags,
     }),
   )
   // html 是最终注入正文的内容。
@@ -466,6 +471,25 @@
       editable ? 'hai-markdown-editable' : '',
     ),
   )
+  const normalizedFontSize = $derived(resolveFontSize(fontSize))
+  const documentStyle = $derived(
+    normalizedFontSize
+      ? `--hai-markdown-font-size:${normalizedFontSize};`
+      : undefined,
+  )
+
+  function resolveFontSize(value: AiDocumentEditorProps['fontSize']): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim()
+      return normalized || undefined
+    }
+
+    return undefined
+  }
 
   $effect(() => {
     void html
@@ -936,6 +960,7 @@
         enableHighlight,
         showCopyButton: false,
         breaks,
+        allowHtmlTags,
       })
 
       host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-preview-rendered">${markdownHtml}</div></div>`
@@ -3138,6 +3163,7 @@
           <article
             bind:this={previewHost}
             class={readerDocumentClass}
+            style={documentStyle}
             contenteditable={editable}
             role='document'
             onmousemove={handlePreviewMouseMove}
@@ -3993,6 +4019,7 @@
   }
 
   .hai-markdown-document {
+    font-size: var(--hai-markdown-font-size, 1rem);
     width: 100%;
     min-width: 0;
     max-width: 52.5rem;
@@ -4045,29 +4072,29 @@
   }
 
   .hai-markdown :global(h1) {
-    font-size: 2.2rem;
+    font-size: 2.2em;
     padding-bottom: 0.45em;
     border-bottom: 1px solid oklch(var(--bc) / 0.12);
   }
 
   .hai-markdown :global(h2) {
-    font-size: 1.48rem;
+    font-size: 1.48em;
   }
 
   .hai-markdown :global(h3) {
-    font-size: 1.18rem;
+    font-size: 1.18em;
   }
 
   .hai-markdown :global(h4) {
-    font-size: 1.02rem;
+    font-size: 1.02em;
   }
 
   .hai-markdown :global(h5) {
-    font-size: 0.95rem;
+    font-size: 0.95em;
   }
 
   .hai-markdown :global(h6) {
-    font-size: 0.88rem;
+    font-size: 0.88em;
     color: oklch(var(--bc) / 0.7);
   }
 
@@ -4264,7 +4291,7 @@
     font-family:
       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
       'Liberation Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     line-height: 1.45;
     tab-size: 2;
 

package/dist/components/scenes/ai/MarkdownRenderer.svelte

@@ -24,19 +24,45 @@
 
   const {
     content = '',
+    fontSize,
     class: className = '',
     showCopyButton = true,
     enableHighlight = true,
     breaks = true,
+    allowHtmlTags = false,
     ...restProps
   }: MarkdownRendererProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const normalizedFontSize = $derived(resolveFontSize(fontSize))
+  const markdownStyle = $derived(
+    normalizedFontSize
+      ? `--hai-markdown-font-size:${normalizedFontSize};`
+      : undefined,
+  )
   /** 解析后的 HTML */
   const html = $derived(
-    parseMarkdown(content, { enableHighlight, showCopyButton, breaks }),
+    parseMarkdown(content, {
+      enableHighlight,
+      showCopyButton,
+      breaks,
+      allowHtmlTags,
+    }),
   )
 
+  function resolveFontSize(value: MarkdownRendererProps['fontSize']): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return `${value}px`
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim()
+      return normalized || undefined
+    }
+
+    return undefined
+  }
+
   /**
    * 事件代理：处理代码块复制按钮点击
    */
@@ -65,9 +91,11 @@
   }
 </script>
 
-<div {...dataAttributes}
-     class={cn('hai-markdown', className)}
-     onclick={handleClick}
+<div
+  {...dataAttributes}
+  class={cn('hai-markdown', className)}
+  style={markdownStyle}
+  onclick={handleClick}
 >
   <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
   {@html html}
@@ -81,6 +109,7 @@
    * ========================================================================= */
 
   .hai-markdown {
+    font-size: var(--hai-markdown-font-size, 1rem);
     line-height: 1.75;
     color: inherit;
     word-wrap: break-word;
@@ -171,6 +200,18 @@
     color: oklch(var(--bc) / 0.55);
   }
 
+  .hai-markdown :global(u) {
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.14em;
+  }
+
+  .hai-markdown :global(mark) {
+    padding: 0 0.12em;
+    border-radius: 0.25rem;
+    background: oklch(var(--wa, 0.9 0.14 90) / 0.34);
+    color: inherit;
+  }
+
   /* ─── 行内代码 ─── */
 
   .hai-markdown :global(:not(pre) > code) {
@@ -245,7 +286,7 @@
 
   .hai-markdown :global(.hai-md-code-block code) {
     font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-    font-size: 0.875rem;
+    font-size: 0.875em;
     line-height: 1.6;
     tab-size: 2;
   }

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

@@ -21,6 +21,8 @@ export interface MarkdownDocumentParseOptions {
     codePreviewHint?: string;
     /** Whether soft line breaks are converted to <br>. */
     breaks?: boolean;
+    /** Whether raw HTML tags are parsed through a safe allowlist. */
+    allowHtmlTags?: boolean;
 }
 export interface MarkdownRenderResult {
     /** Rendered HTML output. */

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

@@ -7,6 +7,7 @@ import { Marked } from 'marked';
 import { createEditorMarkdownExtensions, extractPlainTextFromTokens, } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
 import { isMermaidLanguage } from './mermaid-render.js';
+import { escapeHtml, isExternalLinkHref, sanitizeImageSrc, sanitizeLinkHref, sanitizeMarkdownHtml, } from './safe-html.js';
 /** Default parsing options for document mode. */
 const DEFAULT_OPTIONS = {
     enableHighlight: true,
@@ -17,19 +18,15 @@ const DEFAULT_OPTIONS = {
     codeViewPreviewLabel: 'Preview',
     codePreviewHint: '',
     breaks: true,
+    allowHtmlTags: false,
 };
-const SAFE_LINK_HREF_REGEX = /^(?:https?:\/\/|\/|#|mailto:)/i;
-const SAFE_IMAGE_SRC_REGEX = /^(?:https?:\/\/|\/|data:image\/)/i;
-/**
- * Escape HTML entities to prevent raw HTML injection.
- */
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+function readHtmlTokenSource(token) {
+    if ('raw' in token && typeof token.raw === 'string') {
+        return token.raw;
+    }
+    return 'text' in token && typeof token.text === 'string'
+        ? token.text
+        : '';
 }
 /**
  * Create a URL-safe heading slug while keeping letters and digits.
@@ -166,16 +163,18 @@ function createRendererObject(options, state) {
                 + `</div>`;
         },
         html(token) {
-            return escapeHtml('text' in token ? token.text : '');
+            const source = readHtmlTokenSource(token);
+            return options.allowHtmlTags
+                ? sanitizeMarkdownHtml(source)
+                : escapeHtml(source);
         },
         link({ href, title, tokens }) {
             // text preserves inline markdown within the link label.
             const text = this.parser.parseInline(tokens);
             // safeHref strips potentially unsafe protocols.
-            const safeHref = href && SAFE_LINK_HREF_REGEX.test(href) ? href : '';
+            const safeHref = sanitizeLinkHref(href);
             // isExternal controls whether target/_blank is added.
-            const isExternal = safeHref
-                && (safeHref.startsWith('http://') || safeHref.startsWith('https://'));
+            const isExternal = safeHref && isExternalLinkHref(safeHref);
             // attrs is the flattened HTML attribute string.
             const attrs = [
                 `href="${escapeHtml(safeHref)}"`,
@@ -186,7 +185,7 @@ function createRendererObject(options, state) {
         },
         image({ href, title, text }) {
             // safeSrc prevents dangerous image protocols.
-            const safeSrc = href && SAFE_IMAGE_SRC_REGEX.test(href) ? href : '';
+            const safeSrc = sanitizeImageSrc(href);
             // attrs is the flattened HTML attribute string.
             const attrs = [
                 `src="${escapeHtml(safeSrc)}"`,

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

@@ -136,6 +136,8 @@ export interface AiDocumentEditorProps extends DataAttributes {
     sourceKind?: MarkdownSourceKind;
     /** Default language when sourceKind is `code`. */
     codeLanguage?: string;
+    /** Content font size. Numbers are interpreted as px. */
+    fontSize?: string | number;
     /** Custom class for the outer container. */
     class?: string;
     /** Whether to show the copy button on code blocks. */
@@ -144,6 +146,8 @@ export interface AiDocumentEditorProps extends DataAttributes {
     showRunButton?: boolean;
     /** Whether to show the code/preview toggle on code blocks. */
     showCodePreviewToggle?: boolean;
+    /** Whether to parse raw HTML tags through a safe allowlist. */
+    allowHtmlTags?: boolean;
     /**
      * 是否启用内置的高风险代码预览。
      *

package/dist/components/scenes/ai/markdown-parse.d.ts

@@ -15,6 +15,8 @@ export interface MarkdownParseOptions {
     showCopyButton?: boolean;
     /** 是否将换行符转换为 <br>（默认 true，适合 AI 输出） */
     breaks?: boolean;
+    /** 是否按安全白名单解析原始 HTML 标签（默认 false） */
+    allowHtmlTags?: boolean;
 }
 /**
  * 将 Markdown 文本解析为 HTML

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

@@ -8,21 +8,14 @@
 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;
-/**
- * 对 HTML 特殊字符进行转义
- *
- * @param text - 原始文本
- * @returns 转义后的安全文本
- */
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+import { escapeHtml, isExternalLinkHref, sanitizeImageSrc, sanitizeLinkHref, sanitizeMarkdownHtml, } from './safe-html.js';
+function readHtmlTokenSource(token) {
+    if ('raw' in token && typeof token.raw === 'string') {
+        return token.raw;
+    }
+    return 'text' in token && typeof token.text === 'string'
+        ? token.text
+        : '';
 }
 function createTableCellAttrs(cell) {
     const attrs = [];
@@ -69,14 +62,17 @@ function createRendererObject(options) {
         },
         // 原始 HTML 块：转义以防止 XSS
         html(token) {
-            return escapeHtml('text' in token ? token.text : '');
+            const source = readHtmlTokenSource(token);
+            return options.allowHtmlTags
+                ? sanitizeMarkdownHtml(source)
+                : escapeHtml(source);
         },
         // 链接：外部链接自动添加 target="_blank"，阻止危险协议
         link({ href, title, tokens }) {
             const text = this.parser.parseInline(tokens);
             // 安全检查：仅允许安全协议
-            const safeHref = href && SAFE_LINK_HREF_REGEX.test(href) ? href : '';
-            const isExternal = safeHref && (safeHref.startsWith('http://') || safeHref.startsWith('https://'));
+            const safeHref = sanitizeLinkHref(href);
+            const isExternal = safeHref && isExternalLinkHref(safeHref);
             const attrs = [
                 `href="${escapeHtml(safeHref)}"`,
                 title ? `title="${escapeHtml(title)}"` : '',
@@ -87,7 +83,7 @@ function createRendererObject(options) {
         // 图片：添加 loading="lazy"，验证 src 协议
         image({ href, title, text }) {
             // 安全检查：仅允许安全协议
-            const safeSrc = href && SAFE_IMAGE_SRC_REGEX.test(href) ? href : '';
+            const safeSrc = sanitizeImageSrc(href);
             const attrs = [
                 `src="${escapeHtml(safeSrc)}"`,
                 `alt="${escapeHtml(text || '')}"`,
@@ -136,6 +132,7 @@ const DEFAULT_OPTIONS = {
     enableHighlight: true,
     showCopyButton: true,
     breaks: true,
+    allowHtmlTags: false,
 };
 /** 缓存 Marked 实例，避免重复创建 */
 let cachedInstance = null;
@@ -144,7 +141,7 @@ let cachedOptionsKey = '';
  * 获取配置签名，用于实例缓存比较
  */
 function getOptionsKey(options) {
-    return `${options.enableHighlight}-${options.showCopyButton}-${options.breaks}`;
+    return `${options.enableHighlight}-${options.showCopyButton}-${options.breaks}-${options.allowHtmlTags}`;
 }
 /**
  * 将 Markdown 文本解析为 HTML

package/dist/components/scenes/ai/safe-html.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @h-ai/ui — Safe HTML helpers for Markdown rendering.
+ *
+ * The Markdown pipeline keeps raw HTML escaped by default.
+ * When callers opt in, only a controlled allowlist of safe tags and
+ * attributes is reconstructed; unsupported or dangerous markup remains escaped.
+ */
+export declare function escapeHtml(text: string): string;
+export declare function sanitizeLinkHref(href: string | null | undefined): string;
+export declare function isExternalLinkHref(href: string): boolean;
+export declare function sanitizeImageSrc(src: string | null | undefined): string;
+/**
+ * Sanitize raw HTML fragments embedded inside Markdown.
+ * Safe allowlisted tags are reconstructed, everything else remains escaped.
+ */
+export declare function sanitizeMarkdownHtml(fragment: string): string;