@ant-design/x-markdown-mini 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/es/MiniNodeRenderer/index.axml

@@ -1,9 +1,23 @@
 <import-sjs from="./index.sjs" name="u" />
 
 <block a:for="{{nodes}}" a:for-item="node" a:for-index="i" a:key="i">
-  <!-- text leaf -->
+  <!-- text leaf: 流式时逐字淡入（Alipay 不能嵌套 <text>，用 inline <view> 包裹字符 <text>，
+       按下标 key 复用，只有新字触发动画）；非流式时整段渲染为单个 <text>。 -->
+  <view
+    a:if="{{u.isText(node.name) && animation}}"
+    class="md-anim-text {{u.classOf(node)}}"
+  >
+    <text
+      a:for="{{u.charsOf(node)}}"
+      a:for-item="ch"
+      a:for-index="ci"
+      a:key="ci"
+      class="md-anim-char"
+      selectable="{{selectable}}"
+    >{{ch}}</text>
+  </view>
   <text
-    a:if="{{u.isText(node.name)}}"
+    a:elif="{{u.isText(node.name)}}"
     class="{{u.classOf(node)}}"
     selectable="{{selectable}}"
   >{{u.valueOf(node)}}</text>
@@ -26,34 +40,101 @@
     onAppear="_appear"
   />
 
-  <!-- pre: scrollable code container -->
-  <scroll-view
+  <!-- pre: code block with language label + copy toolbar, scrollable body -->
+  <view
     a:elif="{{u.isPre(node.name)}}"
-    scroll-x
-    class="{{u.classOf(node)}}"
-    style="{{u.styleOf(node)}}"
-    data-data="{{node}}"
-    catchTap="_tap"
+    class="md-codeblock {{node.animate ? 'md-animate-block' : ''}}"
   >
-    <mini-node-renderer
-      a:if="{{node.children}}"
-      nodes="{{node.children}}"
-      selectable="{{selectable}}"
-      animation="{{false}}"
-      slotComponents="{{slotComponents}}"
-      onTap="onTap"
-      onAppear="onAppear"
-    >
-      <slot slot-scope="prop" data="{{prop.data}}" />
-    </mini-node-renderer>
-  </scroll-view>
+    <view a:if="{{node.header}}" class="md-codeblock-bar">
+      <block a:for="{{node.header}}" a:for-item="h" a:for-index="hi" a:key="hi">
+        <text a:if="{{u.isText(h.name)}}" class="{{u.classOf(h)}}">{{u.valueOf(h)}}</text>
+        <image
+          a:elif="{{u.isCopy(h.name)}}"
+          class="{{u.classOf(h) || 'md-copy-icon'}}"
+          src="https://mdn.alipayobjects.com/huamei_y8xg5f/afts/img/JXzqSoHDzm4AAAAAHpAAAAgADuJhAQFr/original"
+          data-copy="{{u.copyOf(h)}}"
+          catchTap="_copy"
+        />
+        <view a:else class="{{u.classOf(h)}}" style="{{u.styleOf(h)}}">
+          <mini-node-renderer
+            a:if="{{h.children}}"
+            nodes="{{h.children}}"
+            selectable="{{selectable}}"
+            animation="{{false}}"
+            slotComponents="{{slotComponents}}"
+            onTap="onTap"
+          >
+            <slot slot-scope="prop" data="{{prop.data}}" />
+          </mini-node-renderer>
+        </view>
+      </block>
+    </view>
+    <scroll-view scroll-x class="md-code-block">
+      <mini-node-renderer
+        a:if="{{node.children}}"
+        nodes="{{node.children}}"
+        selectable="{{selectable}}"
+        animation="{{false}}"
+        slotComponents="{{slotComponents}}"
+        onTap="onTap"
+        onAppear="onAppear"
+      >
+        <slot slot-scope="prop" data="{{prop.data}}" />
+      </mini-node-renderer>
+    </scroll-view>
+  </view>
+
+  <!-- table: caption + copy toolbar card, horizontal-scroll CSS table (columns kept aligned) -->
+  <view
+    a:elif="{{u.isTable(node.name)}}"
+    class="md-tableblock {{node.animate ? 'md-animate-block' : ''}}"
+  >
+    <view a:if="{{node.header}}" class="md-tableblock-bar">
+      <block a:for="{{node.header}}" a:for-item="h" a:for-index="hi" a:key="hi">
+        <text a:if="{{u.isText(h.name)}}" class="{{u.classOf(h)}}">{{u.valueOf(h)}}</text>
+        <image
+          a:elif="{{u.isCopy(h.name)}}"
+          class="{{u.classOf(h) || 'md-copy-icon'}}"
+          src="https://mdn.alipayobjects.com/huamei_y8xg5f/afts/img/JXzqSoHDzm4AAAAAHpAAAAgADuJhAQFr/original"
+          data-copy="{{u.copyOf(h)}}"
+          catchTap="_copy"
+        />
+        <view a:else class="{{u.classOf(h)}}" style="{{u.styleOf(h)}}">
+          <mini-node-renderer
+            a:if="{{h.children}}"
+            nodes="{{h.children}}"
+            selectable="{{selectable}}"
+            animation="{{false}}"
+            slotComponents="{{slotComponents}}"
+            onTap="onTap"
+          >
+            <slot slot-scope="prop" data="{{prop.data}}" />
+          </mini-node-renderer>
+        </view>
+      </block>
+    </view>
+    <scroll-view scroll-x class="md-table-scroll">
+      <view class="md-table">
+        <mini-node-renderer
+          a:if="{{node.children}}"
+          nodes="{{node.children}}"
+          selectable="{{selectable}}"
+          animation="{{false}}"
+          slotComponents="{{slotComponents}}"
+          onTap="onTap"
+          onAppear="onAppear"
+        >
+          <slot slot-scope="prop" data="{{prop.data}}" />
+        </mini-node-renderer>
+      </view>
+    </scroll-view>
+  </view>
 
   <!-- anchor: kept interactive, children are already flattened text runs -->
-  <text
+  <view
     a:elif="{{node.name === 'a'}}"
     class="{{u.classOf(node)}}"
     style="{{u.styleOf(node)}}"
-    selectable="{{selectable}}"
     data-data="{{node}}"
     catchTap="_tap"
   >
@@ -64,14 +145,13 @@
       a:key="ci"
       class="{{u.classOf(c)}}"
     >{{u.valueOf(c)}}</text>
-  </text>
+  </view>
 
-  <!-- inline tag rendered as <text>: children are flat text runs -->
-  <text
-    a:elif="{{u.isInline(node.name)}}"
+  <!-- inline tag rendered as a flat container because Alipay SDK 2.x rejects nested <text>. -->
+  <view
+    a:elif="{{u.isInline(node.name) && !u.isRich(node)}}"
     class="{{u.classOf(node)}}"
     style="{{u.styleOf(node)}}"
-    selectable="{{selectable}}"
     data-data="{{node}}"
     catchTap="_tap"
   >
@@ -82,7 +162,7 @@
       a:key="ci"
       class="{{u.classOf(c)}}"
     >{{u.valueOf(c)}}</text>
-  </text>
+  </view>
 
   <!-- custom component: hand off to host scoped slot, keyed by node.tag -->
   <slot

package/dist/es/MiniNodeRenderer/index.js

@@ -16,6 +16,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/alipay/MiniNodeRenderer/index.ts
 var MiniNodeRenderer_exports = {};
 module.exports = __toCommonJS(MiniNodeRenderer_exports);
+function copyToClipboard(text) {
+  if (!text) return;
+  my.setClipboard({
+    text,
+    success: () => my.showToast({ content: "\u5DF2\u590D\u5236", duration: 1200 }),
+    fail: () => my.showToast({ content: "\u590D\u5236\u5931\u8D25" })
+  });
+}
 var defaultProps = {
   nodes: [],
   selectable: true,
@@ -32,6 +40,10 @@ Component({
     _appear(e) {
       var _a, _b;
       (_b = (_a = this.props).onAppear) == null ? void 0 : _b.call(_a, e);
+    },
+    _copy(e) {
+      const ds = e && e.currentTarget && e.currentTarget.dataset;
+      copyToClipboard(ds && ds.copy || "");
     }
   }
 });

package/dist/es/MiniNodeRenderer/index.sjs

@@ -13,6 +13,23 @@ function isBr(name) { return name === 'br'; }
 function isImg(name) { return name === 'img'; }
 function isHr(name) { return name === 'hr'; }
 function isPre(name) { return name === 'pre'; }
+function isTable(name) { return name === 'table'; }
+function isCopy(name) { return name === 'copy-button'; }
+function copyOf(node) {
+  var attrs = node.attrs || {};
+  return attrs['data-copy'] || '';
+}
+// 富内联节点（如 KaTeX 公式容器）含有元素子节点，必须走递归 <view> 路径
+// 渲染，保留嵌套结构与 style；普通已扁平化的内联只有 text/br 子节点。
+function isRich(node) {
+  var ch = node.children;
+  if (!ch) return false;
+  for (var i = 0; i < ch.length; i++) {
+    var nm = ch[i].name;
+    if (nm !== 'text' && nm !== 'br') return true;
+  }
+  return false;
+}
 function isSlot(name, slotComponents) {
   return !!slotComponents && slotComponents.indexOf(name) > -1;
 }
@@ -26,6 +43,26 @@ function classOf(node) {
   return cls;
 }
 
+// 把文本拆成「按 code point 安全」的字符数组（不劈坏 emoji/组合 surrogate pair），
+// 供流式逐字淡入：每个字符渲染成独立 <text>，按下标 key 复用，只有新字符会触发淡入动画。
+function charsOf(node) {
+  var v = (node.attrs || {}).value || '';
+  var out = [];
+  var i = 0;
+  var n = v.length;
+  while (i < n) {
+    var code = v.charCodeAt(i);
+    if (code >= 55296 && code <= 56319 && i + 1 < n) {
+      out.push(v.charAt(i) + v.charAt(i + 1));
+      i += 2;
+    } else {
+      out.push(v.charAt(i));
+      i += 1;
+    }
+  }
+  return out;
+}
+
 function styleOf(node) {
   var attrs = node.attrs || {};
   return attrs.style || '';
@@ -36,6 +73,11 @@ function srcOf(node) {
   return attrs.src || '';
 }
 
+function langOf(node) {
+  var attrs = node.attrs || {};
+  return attrs.lang || '';
+}
+
 function altOf(node) {
   var attrs = node.attrs || {};
   return attrs.alt || '';
@@ -54,10 +96,16 @@ export default {
   isImg: isImg,
   isHr: isHr,
   isPre: isPre,
+  isTable: isTable,
+  isCopy: isCopy,
+  copyOf: copyOf,
+  isRich: isRich,
   isSlot: isSlot,
   classOf: classOf,
+  charsOf: charsOf,
   styleOf: styleOf,
   srcOf: srcOf,
+  langOf: langOf,
   altOf: altOf,
   valueOf: valueOf,
 };

package/dist/index.d.mts

@@ -168,6 +168,22 @@ interface XMarkdownExtension {
     /** Marked tokenizer overrides (forwarded to marked). */
     tokenizer?: MarkedExtension['tokenizer'];
 }
+/** Context passed to a code-block header renderer. */
+interface CodeHeaderContext {
+    /** Resolved language id ('' when the fence has no language). */
+    lang: string;
+    /** Raw code text — the clipboard payload. */
+    text: string;
+    token: Tokens.Code;
+}
+/** Context passed to a table header renderer. */
+interface TableHeaderContext {
+    /** Raw markdown source of the table — the clipboard payload. */
+    markdown: string;
+    token: Tokens.Table;
+}
+type CodeHeaderRenderer = (ctx: CodeHeaderContext) => MiniNode | MiniNode[] | null;
+type TableHeaderRenderer = (ctx: TableHeaderContext) => MiniNode | MiniNode[] | null;
 /** 渲染上下文：transformer 共用的公共配置。 */
 interface RenderContext {
     /** 是否启用块级动画 */
@@ -184,6 +200,13 @@ interface RenderContext {
      * Colocated tokenizer+renderer extensions registered on the instance.
      */
     extensions?: readonly XMarkdownExtension[];
+    /**
+     * Code-block header config. `true`/undefined = default (language + copy
+     * button); `false` = no header; function = custom header nodes.
+     */
+    codeHeader?: boolean | CodeHeaderRenderer;
+    /** Table header config. Same semantics as `codeHeader`. */
+    tableHeader?: boolean | TableHeaderRenderer;
     /**
      * Recursively render an inline token array to MiniNode[]. Provided by the
      * platform transformer; used by custom extension miniRenderers that emit
@@ -203,6 +226,8 @@ interface MiniNode {
     attrs?: Record<string, string | number | boolean>;
     /** 子节点 */
     children?: MiniNode[];
+    /** 代码块/表格顶部 header 栏（语言/标题 + 复制按钮）。 */
+    header?: MiniNode[];
     /** 是否开启动画 */
     animate?: boolean;
 }
@@ -262,6 +287,14 @@ interface XMarkdownMiniOptions {
      * `</x>` and will not produce a nested structure.
      */
     components?: string[];
+    /** 代码块 header。true=默认（语言名+复制按钮）；false=无；函数=自定义。默认 true。 */
+    codeBlock?: {
+        header?: boolean | CodeHeaderRenderer;
+    };
+    /** 表格 header。true=默认（“表格”+复制按钮）；false=无；函数=自定义。默认 true。 */
+    table?: {
+        header?: boolean | TableHeaderRenderer;
+    };
 }
 /**
  * Independent renderer instance with isolated streaming state.
@@ -274,6 +307,8 @@ declare class XMarkdownMini {
     private readonly fixup;
     private readonly gfm;
     private readonly breaks;
+    private readonly codeHeader;
+    private readonly tableHeader;
     private readonly marked;
     private activeTokenStreamDefaults;
     private activeNodeStreamDefaults;
@@ -434,6 +469,9 @@ declare class StreamingProcessor<T = unknown> {
     private flushNodes;
 }
 
+/** Build a copy-button MiniNode carrying the raw clipboard payload. */
+declare function copyButton(text: string): MiniNode;
+
 /**
  * 自包含行内脚注扩展。
  *
@@ -505,4 +543,4 @@ declare function render(props: XMarkdownMiniTokenProps): Token[];
  */
 declare function renderNodes(props: XMarkdownMiniProps): MiniNode[];
 
-export { type BuiltinPlatform, type FlattenInlineTokensOptions, Footnote, type FootnoteOptions, type InlineRun, type InlineRunKind, type MiniNode, type Platform, type PlatformCapabilities, type PlatformInput, type PlatformRenderer, type RenderContext, type SemanticStreamingConfig, type StreamingConfig, type StreamingFixup, StreamingProcessor, type XMarkdownExtension, XMarkdownMini, type XMarkdownMiniOptions, type XMarkdownMiniProps, type XMarkdownMiniTokenProps, type XMarkdownTokenizerExtension, alipayRenderer, flattenInlineTokens, getPlatformRenderer, parse, registerPlatformRenderer, render, renderNodes, resolvePlatform, tokensToAlipay, tokensToAlipayNodes, tokensToWechat, tokensToWechatNodes, wechatRenderer };
+export { type BuiltinPlatform, type CodeHeaderContext, type CodeHeaderRenderer, type FlattenInlineTokensOptions, Footnote, type FootnoteOptions, type InlineRun, type InlineRunKind, type MiniNode, type Platform, type PlatformCapabilities, type PlatformInput, type PlatformRenderer, type RenderContext, type SemanticStreamingConfig, type StreamingConfig, type StreamingFixup, StreamingProcessor, type TableHeaderContext, type TableHeaderRenderer, type XMarkdownExtension, XMarkdownMini, type XMarkdownMiniOptions, type XMarkdownMiniProps, type XMarkdownMiniTokenProps, type XMarkdownTokenizerExtension, alipayRenderer, copyButton, flattenInlineTokens, getPlatformRenderer, parse, registerPlatformRenderer, render, renderNodes, resolvePlatform, tokensToAlipay, tokensToAlipayNodes, tokensToWechat, tokensToWechatNodes, wechatRenderer };

package/dist/index.d.ts

@@ -168,6 +168,22 @@ interface XMarkdownExtension {
     /** Marked tokenizer overrides (forwarded to marked). */
     tokenizer?: MarkedExtension['tokenizer'];
 }
+/** Context passed to a code-block header renderer. */
+interface CodeHeaderContext {
+    /** Resolved language id ('' when the fence has no language). */
+    lang: string;
+    /** Raw code text — the clipboard payload. */
+    text: string;
+    token: Tokens.Code;
+}
+/** Context passed to a table header renderer. */
+interface TableHeaderContext {
+    /** Raw markdown source of the table — the clipboard payload. */
+    markdown: string;
+    token: Tokens.Table;
+}
+type CodeHeaderRenderer = (ctx: CodeHeaderContext) => MiniNode | MiniNode[] | null;
+type TableHeaderRenderer = (ctx: TableHeaderContext) => MiniNode | MiniNode[] | null;
 /** 渲染上下文：transformer 共用的公共配置。 */
 interface RenderContext {
     /** 是否启用块级动画 */
@@ -184,6 +200,13 @@ interface RenderContext {
      * Colocated tokenizer+renderer extensions registered on the instance.
      */
     extensions?: readonly XMarkdownExtension[];
+    /**
+     * Code-block header config. `true`/undefined = default (language + copy
+     * button); `false` = no header; function = custom header nodes.
+     */
+    codeHeader?: boolean | CodeHeaderRenderer;
+    /** Table header config. Same semantics as `codeHeader`. */
+    tableHeader?: boolean | TableHeaderRenderer;
     /**
      * Recursively render an inline token array to MiniNode[]. Provided by the
      * platform transformer; used by custom extension miniRenderers that emit
@@ -203,6 +226,8 @@ interface MiniNode {
     attrs?: Record<string, string | number | boolean>;
     /** 子节点 */
     children?: MiniNode[];
+    /** 代码块/表格顶部 header 栏（语言/标题 + 复制按钮）。 */
+    header?: MiniNode[];
     /** 是否开启动画 */
     animate?: boolean;
 }
@@ -262,6 +287,14 @@ interface XMarkdownMiniOptions {
      * `</x>` and will not produce a nested structure.
      */
     components?: string[];
+    /** 代码块 header。true=默认（语言名+复制按钮）；false=无；函数=自定义。默认 true。 */
+    codeBlock?: {
+        header?: boolean | CodeHeaderRenderer;
+    };
+    /** 表格 header。true=默认（“表格”+复制按钮）；false=无；函数=自定义。默认 true。 */
+    table?: {
+        header?: boolean | TableHeaderRenderer;
+    };
 }
 /**
  * Independent renderer instance with isolated streaming state.
@@ -274,6 +307,8 @@ declare class XMarkdownMini {
     private readonly fixup;
     private readonly gfm;
     private readonly breaks;
+    private readonly codeHeader;
+    private readonly tableHeader;
     private readonly marked;
     private activeTokenStreamDefaults;
     private activeNodeStreamDefaults;
@@ -434,6 +469,9 @@ declare class StreamingProcessor<T = unknown> {
     private flushNodes;
 }
 
+/** Build a copy-button MiniNode carrying the raw clipboard payload. */
+declare function copyButton(text: string): MiniNode;
+
 /**
  * 自包含行内脚注扩展。
  *
@@ -505,4 +543,4 @@ declare function render(props: XMarkdownMiniTokenProps): Token[];
  */
 declare function renderNodes(props: XMarkdownMiniProps): MiniNode[];
 
-export { type BuiltinPlatform, type FlattenInlineTokensOptions, Footnote, type FootnoteOptions, type InlineRun, type InlineRunKind, type MiniNode, type Platform, type PlatformCapabilities, type PlatformInput, type PlatformRenderer, type RenderContext, type SemanticStreamingConfig, type StreamingConfig, type StreamingFixup, StreamingProcessor, type XMarkdownExtension, XMarkdownMini, type XMarkdownMiniOptions, type XMarkdownMiniProps, type XMarkdownMiniTokenProps, type XMarkdownTokenizerExtension, alipayRenderer, flattenInlineTokens, getPlatformRenderer, parse, registerPlatformRenderer, render, renderNodes, resolvePlatform, tokensToAlipay, tokensToAlipayNodes, tokensToWechat, tokensToWechatNodes, wechatRenderer };
+export { type BuiltinPlatform, type CodeHeaderContext, type CodeHeaderRenderer, type FlattenInlineTokensOptions, Footnote, type FootnoteOptions, type InlineRun, type InlineRunKind, type MiniNode, type Platform, type PlatformCapabilities, type PlatformInput, type PlatformRenderer, type RenderContext, type SemanticStreamingConfig, type StreamingConfig, type StreamingFixup, StreamingProcessor, type TableHeaderContext, type TableHeaderRenderer, type XMarkdownExtension, XMarkdownMini, type XMarkdownMiniOptions, type XMarkdownMiniProps, type XMarkdownMiniTokenProps, type XMarkdownTokenizerExtension, alipayRenderer, copyButton, flattenInlineTokens, getPlatformRenderer, parse, registerPlatformRenderer, render, renderNodes, resolvePlatform, tokensToAlipay, tokensToAlipayNodes, tokensToWechat, tokensToWechatNodes, wechatRenderer };