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

package/dist/miniprogram_dist/components/MiniNodeRenderer/index.wxml

@@ -1,9 +1,21 @@
 <wxs src="./index.wxs" module="u" />
 
 <block wx:for="{{nodes}}" wx:for-item="node" wx:for-index="i" wx:key="i">
-  <!-- text leaf -->
+  <!-- text leaf: 流式时逐字淡入（每字一个 <text>，按下标 key 复用，只有新字触发动画）；
+       非流式时整段渲染为单个 <text>。 -->
   <text
-    wx:if="{{u.isText(node.name)}}"
+    wx:if="{{u.isText(node.name) && animation}}"
+    class="{{u.classOf(node)}}"
+    selectable="{{selectable}}"
+  ><text
+      wx:for="{{u.charsOf(node)}}"
+      wx:for-item="ch"
+      wx:for-index="ci"
+      wx:key="ci"
+      class="md-anim-char"
+    >{{ch}}</text></text>
+  <text
+    wx:elif="{{u.isText(node.name)}}"
     class="{{u.classOf(node)}}"
     selectable="{{selectable}}"
   >{{u.valueOf(node)}}</text>
@@ -25,26 +37,91 @@
     catch:tap="_tap"
   />
 
-  <!-- pre: scrollable code container -->
-  <scroll-view
+  <!-- pre: code block with language label + copy toolbar, scrollable body -->
+  <view
     wx:elif="{{u.isPre(node.name)}}"
-    scroll-x
-    class="{{u.classOf(node)}}"
-    style="{{u.styleOf(node)}}"
-    data-data="{{node}}"
-    catch:tap="_tap"
+    class="md-codeblock {{node.animate ? 'md-animate-block' : ''}}"
   >
-    <mini-node-renderer
-      wx:if="{{node.children}}"
-      generic:custom-slot="custom-slot"
-      nodes="{{node.children}}"
-      selectable="{{selectable}}"
-      animation="{{false}}"
-      slotComponents="{{slotComponents}}"
-      bind:tap="_tap"
-      bind:appear="_appear"
-    />
-  </scroll-view>
+    <view wx:if="{{node.header}}" class="md-codeblock-bar">
+      <block wx:for="{{node.header}}" wx:for-item="h" wx:for-index="hi" wx:key="hi">
+        <text wx:if="{{u.isText(h.name)}}" class="{{u.classOf(h)}}">{{u.valueOf(h)}}</text>
+        <image
+          wx: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)}}"
+          catch:tap="_copy"
+        />
+        <view wx:else class="{{u.classOf(h)}}" style="{{u.styleOf(h)}}">
+          <mini-node-renderer
+            wx:if="{{h.children}}"
+            generic:custom-slot="custom-slot"
+            nodes="{{h.children}}"
+            selectable="{{selectable}}"
+            animation="{{false}}"
+            slotComponents="{{slotComponents}}"
+            bind:tap="_tap"
+          />
+        </view>
+      </block>
+    </view>
+    <scroll-view scroll-x class="md-code-block">
+      <mini-node-renderer
+        wx:if="{{node.children}}"
+        generic:custom-slot="custom-slot"
+        nodes="{{node.children}}"
+        selectable="{{selectable}}"
+        animation="{{false}}"
+        slotComponents="{{slotComponents}}"
+        bind:tap="_tap"
+        bind:appear="_appear"
+      />
+    </scroll-view>
+  </view>
+
+  <!-- table: caption + copy toolbar card, horizontal-scroll CSS table (columns kept aligned) -->
+  <view
+    wx:elif="{{u.isTable(node.name)}}"
+    class="md-tableblock {{node.animate ? 'md-animate-block' : ''}}"
+  >
+    <view wx:if="{{node.header}}" class="md-tableblock-bar">
+      <block wx:for="{{node.header}}" wx:for-item="h" wx:for-index="hi" wx:key="hi">
+        <text wx:if="{{u.isText(h.name)}}" class="{{u.classOf(h)}}">{{u.valueOf(h)}}</text>
+        <image
+          wx: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)}}"
+          catch:tap="_copy"
+        />
+        <view wx:else class="{{u.classOf(h)}}" style="{{u.styleOf(h)}}">
+          <mini-node-renderer
+            wx:if="{{h.children}}"
+            generic:custom-slot="custom-slot"
+            nodes="{{h.children}}"
+            selectable="{{selectable}}"
+            animation="{{false}}"
+            slotComponents="{{slotComponents}}"
+            bind:tap="_tap"
+          />
+        </view>
+      </block>
+    </view>
+    <scroll-view scroll-x class="md-table-scroll">
+      <view class="md-table">
+        <mini-node-renderer
+          wx:if="{{node.children}}"
+          generic:custom-slot="custom-slot"
+          nodes="{{node.children}}"
+          selectable="{{selectable}}"
+          animation="{{false}}"
+          slotComponents="{{slotComponents}}"
+          bind:tap="_tap"
+          bind:appear="_appear"
+        />
+      </view>
+    </scroll-view>
+  </view>
 
   <!-- anchor: kept interactive, children are already flattened text runs -->
   <text
@@ -66,7 +143,7 @@
 
   <!-- inline tag rendered as <text>: children are flat text runs -->
   <text
-    wx:elif="{{u.isInline(node.name)}}"
+    wx:elif="{{u.isInline(node.name) && !u.isRich(node)}}"
     class="{{u.classOf(node)}}"
     style="{{u.styleOf(node)}}"
     selectable="{{selectable}}"

package/dist/miniprogram_dist/components/MiniNodeRenderer/index.wxs

@@ -6,6 +6,20 @@ 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) { return (node.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;
 }
@@ -19,8 +33,29 @@ 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) { return (node.attrs || {}).style || ''; }
 function srcOf(node)   { return (node.attrs || {}).src || ''; }
+function langOf(node)  { return (node.attrs || {}).lang || ''; }
 function altOf(node)   { return (node.attrs || {}).alt || ''; }
 function valueOf(node) { return (node.attrs || {}).value || ''; }
 
@@ -31,10 +66,16 @@ module.exports = {
   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/miniprogram_dist/components/MiniNodeRenderer/index.wxss

@@ -5,7 +5,18 @@
   animation-duration: var(--md-animation-duration, 300ms);
 }
 
+/* 纯透明度淡入：不做 translateY 位移，避免流式逐字重渲染时块体上下抖动。 */
 @keyframes md-block-appear {
-  0%   { opacity: 0; transform: translateY(4rpx); }
-  100% { opacity: 1; transform: translateY(0); }
+  from { opacity: 0.3; }
+  to   { opacity: 1; }
+}
+
+/* 流式逐字淡入：每个新字符从透明渐显，已显示的字符（按下标复用）不会重播。 */
+.md-anim-char {
+  opacity: 0;
+  animation: md-char-in 360ms ease-out forwards;
+}
+@keyframes md-char-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }

package/dist/miniprogram_dist/es/Markdown/index.json

@@ -5,6 +5,6 @@
     "mini-node-renderer": "../MiniNodeRenderer/index"
   },
   "componentGenerics": {
-    "custom-slot": { "default": "view" }
+    "custom-slot": { "default": "../MiniNodeRenderer/index" }
   }
 }

package/dist/miniprogram_dist/es/Markdown/index.wxss

@@ -45,11 +45,47 @@
 
 .md-code-block {
   display: block;
-  margin: 12rpx 0;
   padding: 16rpx;
   background: #f6f8fa;
-  border-radius: 8rpx;
   overflow-x: auto;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 26rpx;
+  line-height: 1.6;
+  white-space: pre;
+}
+
+/* code & table cards share a captioned header bar with an icon copy button */
+.md-codeblock,
+.md-tableblock {
+  margin: 16rpx 0;
+  border: 2rpx solid #eceef1;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+.md-codeblock-bar,
+.md-tableblock-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64rpx;
+  padding: 0 24rpx;
+  background: #eceef2;
+  font-size: 24rpx;
+  color: #4e5969;
+}
+.md-codeblock-lang {
+  text-transform: uppercase;
+  letter-spacing: 1rpx;
+  font-weight: 600;
+  color: #1d2129;
+}
+.md-tableblock-title {
+  font-weight: 600;
+  color: #1d2129;
+}
+.md-copy-icon {
+  width: 32rpx;
+  height: 32rpx;
 }
 
 .md-code {
@@ -78,6 +114,8 @@
 .md-img {
   display: block;
   max-width: 100%;
+  margin: 16rpx 0;
+  border-radius: 12rpx;
 }
 
 .md-hr {
@@ -87,17 +125,37 @@
   margin: 16rpx 0;
 }
 
-.md-table {
+/* table body scrolls horizontally inside the .md-tableblock card */
+.md-table-scroll {
   display: block;
   width: 100%;
-  margin: 12rpx 0;
-  border-collapse: collapse;
+  overflow: hidden;
+  white-space: nowrap;
 }
+.md-table {
+  display: table;
+  table-layout: auto;
+  width: max-content;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 26rpx;
+}
+.md-tr { display: table-row; }
 .md-th, .md-td {
   display: table-cell;
-  padding: 8rpx 12rpx;
-  border: 1rpx solid #e5e5e5;
+  padding: 12rpx 20rpx;
+  max-width: 480rpx;
+  border-right: 2rpx solid #e5e5e5;
+  border-bottom: 2rpx solid #e5e5e5;
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+  white-space: normal;
 }
 .md-th { background: #fafafa; font-weight: 600; }
+.md-tr .md-th:last-child,
+.md-tr .md-td:last-child { border-right: none; }
+.md-table .md-tr:last-child .md-td { border-bottom: none; }
 
 .md-html { display: block; }

package/dist/miniprogram_dist/es/MiniNodeRenderer/index.js

@@ -16,6 +16,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/wechat/MiniNodeRenderer/index.ts
 var MiniNodeRenderer_exports = {};
 module.exports = __toCommonJS(MiniNodeRenderer_exports);
+function copyToClipboard(text) {
+  if (!text) return;
+  wx.setClipboardData({
+    data: text,
+    success: () => wx.showToast({ title: "\u5DF2\u590D\u5236", icon: "none", duration: 1200 }),
+    fail: () => wx.showToast({ title: "\u590D\u5236\u5931\u8D25", icon: "none" })
+  });
+}
 Component({
   options: {
     multipleSlots: true,
@@ -34,6 +42,10 @@ Component({
     },
     _appear(e) {
       this.triggerEvent("appear", e, { bubbles: true, composed: true });
+    },
+    _copy(e) {
+      const ds = e && e.currentTarget && e.currentTarget.dataset;
+      copyToClipboard(ds && ds.copy || "");
     }
   }
 });

package/dist/miniprogram_dist/es/MiniNodeRenderer/index.json

@@ -5,6 +5,6 @@
     "mini-node-renderer": "./index"
   },
   "componentGenerics": {
-    "custom-slot": { "default": "view" }
+    "custom-slot": { "default": "./index" }
   }
 }

package/dist/miniprogram_dist/es/MiniNodeRenderer/index.wxml

@@ -1,9 +1,21 @@
 <wxs src="./index.wxs" module="u" />
 
 <block wx:for="{{nodes}}" wx:for-item="node" wx:for-index="i" wx:key="i">
-  <!-- text leaf -->
+  <!-- text leaf: 流式时逐字淡入（每字一个 <text>，按下标 key 复用，只有新字触发动画）；
+       非流式时整段渲染为单个 <text>。 -->
   <text
-    wx:if="{{u.isText(node.name)}}"
+    wx:if="{{u.isText(node.name) && animation}}"
+    class="{{u.classOf(node)}}"
+    selectable="{{selectable}}"
+  ><text
+      wx:for="{{u.charsOf(node)}}"
+      wx:for-item="ch"
+      wx:for-index="ci"
+      wx:key="ci"
+      class="md-anim-char"
+    >{{ch}}</text></text>
+  <text
+    wx:elif="{{u.isText(node.name)}}"
     class="{{u.classOf(node)}}"
     selectable="{{selectable}}"
   >{{u.valueOf(node)}}</text>
@@ -25,26 +37,91 @@
     catch:tap="_tap"
   />
 
-  <!-- pre: scrollable code container -->
-  <scroll-view
+  <!-- pre: code block with language label + copy toolbar, scrollable body -->
+  <view
     wx:elif="{{u.isPre(node.name)}}"
-    scroll-x
-    class="{{u.classOf(node)}}"
-    style="{{u.styleOf(node)}}"
-    data-data="{{node}}"
-    catch:tap="_tap"
+    class="md-codeblock {{node.animate ? 'md-animate-block' : ''}}"
   >
-    <mini-node-renderer
-      wx:if="{{node.children}}"
-      generic:custom-slot="custom-slot"
-      nodes="{{node.children}}"
-      selectable="{{selectable}}"
-      animation="{{false}}"
-      slotComponents="{{slotComponents}}"
-      bind:tap="_tap"
-      bind:appear="_appear"
-    />
-  </scroll-view>
+    <view wx:if="{{node.header}}" class="md-codeblock-bar">
+      <block wx:for="{{node.header}}" wx:for-item="h" wx:for-index="hi" wx:key="hi">
+        <text wx:if="{{u.isText(h.name)}}" class="{{u.classOf(h)}}">{{u.valueOf(h)}}</text>
+        <image
+          wx: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)}}"
+          catch:tap="_copy"
+        />
+        <view wx:else class="{{u.classOf(h)}}" style="{{u.styleOf(h)}}">
+          <mini-node-renderer
+            wx:if="{{h.children}}"
+            generic:custom-slot="custom-slot"
+            nodes="{{h.children}}"
+            selectable="{{selectable}}"
+            animation="{{false}}"
+            slotComponents="{{slotComponents}}"
+            bind:tap="_tap"
+          />
+        </view>
+      </block>
+    </view>
+    <scroll-view scroll-x class="md-code-block">
+      <mini-node-renderer
+        wx:if="{{node.children}}"
+        generic:custom-slot="custom-slot"
+        nodes="{{node.children}}"
+        selectable="{{selectable}}"
+        animation="{{false}}"
+        slotComponents="{{slotComponents}}"
+        bind:tap="_tap"
+        bind:appear="_appear"
+      />
+    </scroll-view>
+  </view>
+
+  <!-- table: caption + copy toolbar card, horizontal-scroll CSS table (columns kept aligned) -->
+  <view
+    wx:elif="{{u.isTable(node.name)}}"
+    class="md-tableblock {{node.animate ? 'md-animate-block' : ''}}"
+  >
+    <view wx:if="{{node.header}}" class="md-tableblock-bar">
+      <block wx:for="{{node.header}}" wx:for-item="h" wx:for-index="hi" wx:key="hi">
+        <text wx:if="{{u.isText(h.name)}}" class="{{u.classOf(h)}}">{{u.valueOf(h)}}</text>
+        <image
+          wx: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)}}"
+          catch:tap="_copy"
+        />
+        <view wx:else class="{{u.classOf(h)}}" style="{{u.styleOf(h)}}">
+          <mini-node-renderer
+            wx:if="{{h.children}}"
+            generic:custom-slot="custom-slot"
+            nodes="{{h.children}}"
+            selectable="{{selectable}}"
+            animation="{{false}}"
+            slotComponents="{{slotComponents}}"
+            bind:tap="_tap"
+          />
+        </view>
+      </block>
+    </view>
+    <scroll-view scroll-x class="md-table-scroll">
+      <view class="md-table">
+        <mini-node-renderer
+          wx:if="{{node.children}}"
+          generic:custom-slot="custom-slot"
+          nodes="{{node.children}}"
+          selectable="{{selectable}}"
+          animation="{{false}}"
+          slotComponents="{{slotComponents}}"
+          bind:tap="_tap"
+          bind:appear="_appear"
+        />
+      </view>
+    </scroll-view>
+  </view>
 
   <!-- anchor: kept interactive, children are already flattened text runs -->
   <text
@@ -66,7 +143,7 @@
 
   <!-- inline tag rendered as <text>: children are flat text runs -->
   <text
-    wx:elif="{{u.isInline(node.name)}}"
+    wx:elif="{{u.isInline(node.name) && !u.isRich(node)}}"
     class="{{u.classOf(node)}}"
     style="{{u.styleOf(node)}}"
     selectable="{{selectable}}"

package/dist/miniprogram_dist/es/MiniNodeRenderer/index.wxs

@@ -6,6 +6,20 @@ 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) { return (node.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;
 }
@@ -19,8 +33,29 @@ 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) { return (node.attrs || {}).style || ''; }
 function srcOf(node)   { return (node.attrs || {}).src || ''; }
+function langOf(node)  { return (node.attrs || {}).lang || ''; }
 function altOf(node)   { return (node.attrs || {}).alt || ''; }
 function valueOf(node) { return (node.attrs || {}).value || ''; }
 
@@ -31,10 +66,16 @@ module.exports = {
   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/miniprogram_dist/es/MiniNodeRenderer/index.wxss

@@ -5,7 +5,18 @@
   animation-duration: var(--md-animation-duration, 300ms);
 }
 
+/* 纯透明度淡入：不做 translateY 位移，避免流式逐字重渲染时块体上下抖动。 */
 @keyframes md-block-appear {
-  0%   { opacity: 0; transform: translateY(4rpx); }
-  100% { opacity: 1; transform: translateY(0); }
+  from { opacity: 0.3; }
+  to   { opacity: 1; }
+}
+
+/* 流式逐字淡入：每个新字符从透明渐显，已显示的字符（按下标复用）不会重播。 */
+.md-anim-char {
+  opacity: 0;
+  animation: md-char-in 360ms ease-out forwards;
+}
+@keyframes md-char-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }