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

package/dist/components/Markdown/index.acss

@@ -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/components/MiniNodeRenderer/index.acss

@@ -1,11 +1,26 @@
 .md-animate-block {
   animation-fill-mode: forwards;
   animation-name: md-block-appear;
-  animation-timing-function: var(--md-animation-timing, ease-in);
-  animation-duration: var(--md-animation-duration, 300ms);
+  animation-timing-function: ease-in;
+  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; }
+}
+
+/* 流式逐字淡入：每个新字符从透明渐显，已显示的字符（按下标复用）不会重播。
+   Alipay 不能嵌套 <text>，包裹层用 inline view 维持文本流。 */
+.md-anim-text {
+  display: inline;
+}
+.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/components/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/components/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/components/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/es/Markdown/index.acss

@@ -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/es/MiniNodeRenderer/index.acss

@@ -1,11 +1,26 @@
 .md-animate-block {
   animation-fill-mode: forwards;
   animation-name: md-block-appear;
-  animation-timing-function: var(--md-animation-timing, ease-in);
-  animation-duration: var(--md-animation-duration, 300ms);
+  animation-timing-function: ease-in;
+  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; }
+}
+
+/* 流式逐字淡入：每个新字符从透明渐显，已显示的字符（按下标复用）不会重播。
+   Alipay 不能嵌套 <text>，包裹层用 inline view 维持文本流。 */
+.md-anim-text {
+  display: inline;
+}
+.md-anim-char {
+  opacity: 0;
+  animation: md-char-in 360ms ease-out forwards;
+}
+@keyframes md-char-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }