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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Ant Group and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,216 @@
+# @ant-design/x-markdown-mini
+
+> 多小程序、轻量、流式友好的 Markdown 渲染器。
+
+- **轻**：内置 `marked` lexer，ESM 整库约 103KB / gzip 约 25KB
+- **流**：增量解析，已稳定块只 parse 一次；onPatch 推回全量统一节点
+- **双端**：当前支持微信 / 支付宝，统一组件路径 + 自动识别
+- **可扩展**：marked tokenizer / walkTokens / hooks + colocated `miniRenderer`；内置 LaTeX 和代码高亮扩展
+
+## 安装
+
+```bash
+npm install @ant-design/x-markdown-mini
+# 或
+pnpm add @ant-design/x-markdown-mini
+```
+
+## 两种用法
+
+### A. 直接用现成的小程序组件（推荐）
+
+包内附带了开箱即用的 **Markdown** / **MiniNodeRenderer** 小程序组件。**支付宝、微信使用同一条路径**——
+微信开发者工具读取 `package.json#miniprogram` 字段，自动解析到 wechat 子树；支付宝则走默认包根。
+
+```jsonc
+// page.json（支付宝 & 微信都一样写）
+{
+  "usingComponents": {
+    "markdown": "@ant-design/x-markdown-mini/es/Markdown/index"
+  }
+}
+```
+
+```xml
+<!-- 支付宝 page.axml -->
+<markdown
+  content="{{content}}"
+  animation="{{true}}"
+  selectable="{{true}}"
+  streaming="{{ { hasNextChunk: hasNextChunk, semantic: true } }}"
+  onRenderComplete="onComplete"
+/>
+```
+
+```xml
+<!-- 微信 page.wxml -->
+<markdown
+  content="{{content}}"
+  animation="{{true}}"
+  selectable="{{true}}"
+  streaming="{{ { hasNextChunk: hasNextChunk, semantic: true } }}"
+  bindrendercomplete="onComplete"
+/>
+```
+
+组件内部已经把 `XMarkdownMini` / `StreamingProcessor` 接好，直接 `setData` 节点；
+样式（`.md-paragraph` / `.md-heading` / `.md-code-block` …）随组件 `acss` / `wxss`
+一起加载，可在外层覆盖。
+
+### B. 仅取节点数据，自己渲染
+
+```ts
+import { renderNodes } from '@ant-design/x-markdown-mini';
+
+const nodes = renderNodes({
+  content: '# Hello\n\nWorld.',
+  platform: 'auto',     // 默认自动识别 my / wx
+  selectable: true,
+});
+```
+
+```xml
+<!-- 交给内置的 MiniNodeRenderer 组件渲染（原生 text/view/image/scroll-view） -->
+<mini-node-renderer nodes="{{nodes}}" />
+```
+
+> 注意：我们**自己渲染**这棵 `MiniNode` 树，而不是喂给原生 `<rich-text>`。
+> `<rich-text>` 是「HTML 富文本」渲染器，会重新套用标签/属性白名单、屏蔽事件、且无法做逐节点动画——
+> 既然节点树已是我们自己构建的结构化数据，直接用 `MiniNodeRenderer` 渲染更合适。
+
+### C. 仅解析 Markdown，自己适配
+
+```ts
+import { render, parse } from '@ant-design/x-markdown-mini';
+
+const tokens = render('# Hello'); // 等同 parse('# Hello')，返回 marked Token[]
+const sameTokens = parse('# Hello');
+
+render({
+  content: 'hello **wor',
+  streaming: { hasNextChunk: true },
+  onPatch: (tokens) => {
+    // tokens 是经过 AI 流式字符串补全后再 marked.lex 的结果
+  },
+});
+```
+
+## 流式渲染（LLM 边出边渲）
+
+```ts
+// 流式进行中：每来一段累计 markdown 就调用一次
+renderNodes({
+  content: accumulatedMarkdown,
+  platform: 'wechat',
+  streaming: { hasNextChunk: true, semantic: true, enableAnimation: true },
+  onPatch: (nodes) => this.setData({ nodes }),
+});
+
+// 最后一轮：hasNextChunk=false，flush 残余并触发 onRenderComplete
+renderNodes({
+  content: finalMarkdown,
+  platform: 'wechat',
+  streaming: { hasNextChunk: false },
+  onPatch: (nodes) => this.setData({ nodes }),
+  onRenderComplete: () => console.log('done'),
+});
+```
+
+底层做了什么：
+
+1. 已经被空行收尾的块缓存为 `stableNodes`，不再重解析
+2. 仅未稳定的「最后一段」每轮重 lex
+3. 默认 `chunkDelay = charDelay = 0` 时**完全跳过 setTimeout**，同步推回
+
+详见 [docs/streaming.md](./docs/streaming.md)。
+
+## 插件：LaTeX & 代码高亮
+
+插件按需引入，不影响主包体积（主库 ~105 KB gzip ~25 KB，Latex 插件 ~486 KB，CodeHighlight 插件 ~184 KB）。
+
+```ts
+import { XMarkdownMini } from '@ant-design/x-markdown-mini';
+import Latex from '@ant-design/x-markdown-mini/plugins/Latex';
+import CodeHighlight from '@ant-design/x-markdown-mini/plugins/CodeHighlight';
+
+const md = new XMarkdownMini({
+  extensions: [Latex(), CodeHighlight()],
+});
+```
+
+**样式引入**（在页面或组件样式文件中）：
+
+```css
+/* 支付宝 .acss */
+@import "@ant-design/x-markdown-mini/plugins/Latex/style.acss";
+@import "@ant-design/x-markdown-mini/plugins/CodeHighlight/style.acss";
+
+/* 微信 .wxss */
+@import "@ant-design/x-markdown-mini/plugins/CodeHighlight/style.wxss";
+@import "@ant-design/x-markdown-mini/plugins/Latex/style.wxss";
+```
+
+### Latex
+
+基于 [KaTeX](https://katex.org/) 渲染数学公式。支持行内 `$x^2$` 和块级 `$$...\n...$$` 语法。
+
+```ts
+Latex({
+  katexOptions: { throwOnError: false },  // 透传给 katex.renderToString()
+  onError(tex, err) { /* 自定义错误回调 */ },
+})
+```
+
+### CodeHighlight
+
+基于 [highlight.js](https://highlightjs.org/) 的代码语法高亮。默认支持 18 种常用语言，可自定义子集。
+
+```ts
+import javascript from 'highlight.js/lib/languages/javascript';
+
+CodeHighlight({
+  languages: { javascript },  // 只注册需要的语言
+  hljsOptions: { ignoreIllegals: true },
+})
+```
+
+详见 [docs/extensions.md](./docs/extensions.md)。
+
+## 平台自动识别 + 能力矩阵
+
+| 平台      | `<pre>` | `<table>` | `<blockquote>` | `<ol start>` | https-only 图片 | `<video>` |
+| --------- | :-----: | :-------: | :------------: | :----------: | :-------------: | :-------: |
+| 微信      | ✅      | ✅        | ✅             | ✅           |                 |           |
+| 支付宝    | ✅      | ✅        | ✅             |              | ✅              |           |
+
+当前仅内置微信和支付宝。新增平台时扩展 `src/platforms` 下的 renderer，并补组件输出目录。
+详见 [docs/platforms.md](./docs/platforms.md)。
+
+## 在线预览（手机壳模拟）
+
+```bash
+npm run build
+cd docs-site && npm install && npm run dev
+```
+
+打开 http://localhost:5173/ ，或 http://localhost:5173/preview.html 看真机壳样式。
+详见 [docs-site/README.md](./docs-site/README.md)。
+
+## 文档
+
+- [架构](./docs/architecture.md) — 流水线四步、目录结构、为何内置 marked
+- [流式](./docs/streaming.md) — 增量解析、打字机模式、动画 hooks
+- [平台](./docs/platforms.md) — 能力矩阵、降级规则、自定义平台
+- [扩展](./docs/extensions.md) — marked 扩展、`miniRenderer`、Latex、CodeHighlight
+
+## 开发
+
+```bash
+pnpm install
+pnpm build
+pnpm test
+```
+
+## License
+
+MIT

package/dist/components/Markdown/index.acss

@@ -0,0 +1,103 @@
+.md-root {
+  display: block;
+  font-size: 28rpx;
+  line-height: 1.65;
+  color: #1f1f1f;
+  word-break: break-word;
+}
+
+.md-paragraph {
+  display: block;
+  margin: 0 0 16rpx;
+}
+
+.md-heading {
+  display: block;
+  font-weight: 600;
+  margin: 24rpx 0 12rpx;
+  line-height: 1.3;
+}
+.md-h1 { font-size: 44rpx; }
+.md-h2 { font-size: 38rpx; }
+.md-h3 { font-size: 34rpx; }
+.md-h4 { font-size: 30rpx; }
+.md-h5 { font-size: 28rpx; }
+.md-h6 { font-size: 26rpx; color: #666; }
+
+.md-list {
+  display: block;
+  margin: 8rpx 0 16rpx;
+  padding-left: 32rpx;
+}
+.md-list-item {
+  display: list-item;
+  margin: 4rpx 0;
+}
+
+.md-blockquote {
+  display: block;
+  margin: 12rpx 0;
+  padding: 8rpx 16rpx;
+  border-left: 6rpx solid #d9d9d9;
+  color: #555;
+  background: #fafafa;
+}
+
+.md-code-block {
+  display: block;
+  margin: 12rpx 0;
+  padding: 16rpx;
+  background: #f6f8fa;
+  border-radius: 8rpx;
+  overflow-x: auto;
+}
+
+.md-code {
+  display: block;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 26rpx;
+  white-space: pre;
+}
+
+.md-inline-code {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 26rpx;
+  background: #f3f3f3;
+  padding: 0 6rpx;
+  border-radius: 4rpx;
+}
+
+.md-strong { font-weight: 600; }
+.md-em { font-style: italic; }
+
+.md-link {
+  color: #1677ff;
+  text-decoration: underline;
+}
+
+.md-img {
+  display: block;
+  max-width: 100%;
+}
+
+.md-hr {
+  display: block;
+  height: 2rpx;
+  background: #e5e5e5;
+  margin: 16rpx 0;
+}
+
+.md-table {
+  display: block;
+  width: 100%;
+  margin: 12rpx 0;
+  border-collapse: collapse;
+}
+.md-th, .md-td {
+  display: table-cell;
+  padding: 8rpx 12rpx;
+  border: 1rpx solid #e5e5e5;
+}
+.md-th { background: #fafafa; font-weight: 600; }
+
+.md-html { display: block; }

package/dist/components/Markdown/index.axml

@@ -0,0 +1,12 @@
+<view class="md-root {{className}}">
+  <mini-node-renderer
+    nodes="{{nodes}}"
+    selectable="{{selectable}}"
+    animation="{{animation}}"
+    slotComponents="{{slotComponents}}"
+    onTap="onTap"
+    onAppear="onAppear"
+  >
+    <slot slot-scope="prop" data="{{prop.data}}" />
+  </mini-node-renderer>
+</view>

package/dist/components/Markdown/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+// src/components/alipay/Markdown/index.ts
+var import__ = require("../../index.js");
+var import_flattenInline = require("../../shared/flattenInline.js");
+var defaultProps = {
+  content: "",
+  streaming: false,
+  selectable: true,
+  className: "",
+  extensions: null,
+  components: null,
+  footnote: false
+};
+function sameList(a, b) {
+  const x = a != null ? a : [];
+  const y = b != null ? b : [];
+  if (x.length !== y.length) return false;
+  for (let i = 0; i < x.length; i++) if (x[i] !== y[i]) return false;
+  return true;
+}
+Component({
+  props: defaultProps,
+  data: {
+    nodes: [],
+    slotComponents: []
+  },
+  md: null,
+  didMount() {
+    this._build(this.props);
+    this._render(this.props);
+  },
+  didUpdate(prevProps) {
+    const p = this.props;
+    if (!sameList(prevProps.components, p.components) || prevProps.footnote !== p.footnote) {
+      this._build(p);
+      this._render(p);
+      return;
+    }
+    if (prevProps.content !== p.content || prevProps.streaming !== p.streaming || prevProps.selectable !== p.selectable || prevProps.extensions !== p.extensions || prevProps.gfm !== p.gfm || prevProps.breaks !== p.breaks) {
+      this._render(p);
+    }
+  },
+  didUnmount() {
+    var _a;
+    (_a = this.md) == null ? void 0 : _a.reset();
+    this.md = null;
+  },
+  methods: {
+    _build(props) {
+      var _a, _b;
+      const components = (_a = props.components) != null ? _a : [];
+      const extensions = props.footnote ? [(0, import__.Footnote)()] : [];
+      (_b = this.md) == null ? void 0 : _b.reset();
+      this.md = new import__.XMarkdownMini({ escapeText: false, components, extensions });
+      const slotComponents = props.footnote ? components.concat(["footnote"]) : components;
+      this.setData({ slotComponents });
+    },
+    _render(props) {
+      var _a;
+      this.md.renderNodes({
+        content: props.content,
+        platform: "alipay",
+        streaming: props.streaming,
+        selectable: props.selectable,
+        gfm: props.gfm,
+        breaks: props.breaks,
+        extensions: (_a = props.extensions) != null ? _a : void 0,
+        onRenderStart: () => {
+          var _a2;
+          return (_a2 = props.onRenderStart) == null ? void 0 : _a2.call(props);
+        },
+        onRenderProgress: (payload) => {
+          var _a2;
+          return (_a2 = props.onRenderProgress) == null ? void 0 : _a2.call(props, payload);
+        },
+        onRenderComplete: () => {
+          var _a2;
+          return (_a2 = props.onRenderComplete) == null ? void 0 : _a2.call(props);
+        },
+        onPatch: (nodes) => this.setData({ nodes: (0, import_flattenInline.flattenInlineNodes)(nodes) })
+      });
+    },
+    onTap(e) {
+      var _a, _b;
+      (_b = (_a = this.props).onTap) == null ? void 0 : _b.call(_a, e);
+    },
+    onAppear(e) {
+      var _a, _b;
+      (_b = (_a = this.props).onAppear) == null ? void 0 : _b.call(_a, e);
+    }
+  }
+});

package/dist/components/Markdown/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mini-node-renderer": "../MiniNodeRenderer/index"
+  }
+}

package/dist/components/MiniNodeRenderer/index.acss

@@ -0,0 +1,11 @@
+.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);
+}
+
+@keyframes md-block-appear {
+  0%   { opacity: 0; transform: translateY(4rpx); }
+  100% { opacity: 1; transform: translateY(0); }
+}

package/dist/components/MiniNodeRenderer/index.axml

@@ -0,0 +1,113 @@
+<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
+    a:if="{{u.isText(node.name)}}"
+    class="{{u.classOf(node)}}"
+    selectable="{{selectable}}"
+  >{{u.valueOf(node)}}</text>
+
+  <!-- br -->
+  <text a:elif="{{u.isBr(node.name)}}">{{'\n'}}</text>
+
+  <!-- hr -->
+  <view a:elif="{{u.isHr(node.name)}}" class="{{u.classOf(node)}}" />
+
+  <!-- img -->
+  <image
+    a:elif="{{u.isImg(node.name)}}"
+    class="{{u.classOf(node)}}"
+    style="{{u.styleOf(node)}}"
+    src="{{u.srcOf(node)}}"
+    mode="widthFix"
+    data-data="{{node}}"
+    catchTap="_tap"
+    onAppear="_appear"
+  />
+
+  <!-- pre: scrollable code container -->
+  <scroll-view
+    a:elif="{{u.isPre(node.name)}}"
+    scroll-x
+    class="{{u.classOf(node)}}"
+    style="{{u.styleOf(node)}}"
+    data-data="{{node}}"
+    catchTap="_tap"
+  >
+    <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>
+
+  <!-- anchor: kept interactive, children are already flattened text runs -->
+  <text
+    a:elif="{{node.name === 'a'}}"
+    class="{{u.classOf(node)}}"
+    style="{{u.styleOf(node)}}"
+    selectable="{{selectable}}"
+    data-data="{{node}}"
+    catchTap="_tap"
+  >
+    <text
+      a:for="{{node.children}}"
+      a:for-item="c"
+      a:for-index="ci"
+      a:key="ci"
+      class="{{u.classOf(c)}}"
+    >{{u.valueOf(c)}}</text>
+  </text>
+
+  <!-- inline tag rendered as <text>: children are flat text runs -->
+  <text
+    a:elif="{{u.isInline(node.name)}}"
+    class="{{u.classOf(node)}}"
+    style="{{u.styleOf(node)}}"
+    selectable="{{selectable}}"
+    data-data="{{node}}"
+    catchTap="_tap"
+  >
+    <text
+      a:for="{{node.children}}"
+      a:for-item="c"
+      a:for-index="ci"
+      a:key="ci"
+      class="{{u.classOf(c)}}"
+    >{{u.valueOf(c)}}</text>
+  </text>
+
+  <!-- custom component: hand off to host scoped slot, keyed by node.tag -->
+  <slot
+    a:elif="{{u.isSlot(node.name, slotComponents)}}"
+    data="{{node}}"
+  />
+
+  <!-- block tag rendered as <view> -->
+  <view
+    a:else
+    class="{{u.classOf(node)}}"
+    style="{{u.styleOf(node)}}"
+    data-data="{{node}}"
+    catchTap="_tap"
+  >
+    <mini-node-renderer
+      a:if="{{node.children}}"
+      nodes="{{node.children}}"
+      selectable="{{selectable}}"
+      animation="{{animation}}"
+      slotComponents="{{slotComponents}}"
+      onTap="onTap"
+      onAppear="onAppear"
+    >
+      <slot slot-scope="prop" data="{{prop.data}}" />
+    </mini-node-renderer>
+  </view>
+</block>

package/dist/components/MiniNodeRenderer/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/alipay/MiniNodeRenderer/index.ts
+var MiniNodeRenderer_exports = {};
+module.exports = __toCommonJS(MiniNodeRenderer_exports);
+var defaultProps = {
+  nodes: [],
+  selectable: true,
+  animation: false,
+  slotComponents: []
+};
+Component({
+  props: defaultProps,
+  methods: {
+    _tap(e) {
+      var _a, _b;
+      (_b = (_a = this.props).onTap) == null ? void 0 : _b.call(_a, e);
+    },
+    _appear(e) {
+      var _a, _b;
+      (_b = (_a = this.props).onAppear) == null ? void 0 : _b.call(_a, e);
+    }
+  }
+});

package/dist/components/MiniNodeRenderer/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mini-node-renderer": "./index"
+  }
+}

package/dist/components/MiniNodeRenderer/index.sjs

@@ -0,0 +1,63 @@
+var INLINE = { strong: 1, em: 1, del: 1, code: 1, a: 1, span: 1 };
+var BLOCK = {
+  p: 1, h1: 1, h2: 1, h3: 1, h4: 1, h5: 1, h6: 1,
+  div: 1, blockquote: 1, ul: 1, ol: 1, li: 1,
+  pre: 1, hr: 1,
+  table: 1, thead: 1, tbody: 1, tr: 1, th: 1, td: 1,
+};
+
+function isInline(name) { return INLINE[name] === 1; }
+function isBlock(name) { return BLOCK[name] === 1; }
+function isText(name) { return name === 'text'; }
+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 isSlot(name, slotComponents) {
+  return !!slotComponents && slotComponents.indexOf(name) > -1;
+}
+
+function classOf(node) {
+  var attrs = node.attrs || {};
+  var cls = attrs['class'] || '';
+  if (node.animate) {
+    cls = cls ? cls + ' md-animate-block' : 'md-animate-block';
+  }
+  return cls;
+}
+
+function styleOf(node) {
+  var attrs = node.attrs || {};
+  return attrs.style || '';
+}
+
+function srcOf(node) {
+  var attrs = node.attrs || {};
+  return attrs.src || '';
+}
+
+function altOf(node) {
+  var attrs = node.attrs || {};
+  return attrs.alt || '';
+}
+
+function valueOf(node) {
+  var attrs = node.attrs || {};
+  return attrs.value || '';
+}
+
+export default {
+  isInline: isInline,
+  isBlock: isBlock,
+  isText: isText,
+  isBr: isBr,
+  isImg: isImg,
+  isHr: isHr,
+  isPre: isPre,
+  isSlot: isSlot,
+  classOf: classOf,
+  styleOf: styleOf,
+  srcOf: srcOf,
+  altOf: altOf,
+  valueOf: valueOf,
+};