@mteditor/renderer-mini 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MtEditor contributors
+
+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

@@ -1,3 +1,151 @@
-# Temporary Holding Version
+# @mteditor/renderer-mini
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> 小程序 / uni-app / Taro / 鸿蒙 ArkTS 只读渲染器 —— 子路径导出多端。
+
+## 定位
+
+> **小程序端不提供完整富文本编辑。** 小程序无稳定 `contenteditable`，业界无可靠原生富文本方案。
+> MtEditor 在小程序端提供 **100% 保真的只读渲染**；如需编辑，引导用户跳转 H5 / App 编辑页，
+> 编辑后回传 `MtDocument`。
+
+本包只做三件事，**不自己序列化 nodes**：
+
+| 职责 | API |
+|---|---|
+| ① 通道解析（`auto` → 阈值判定） | `resolveChannel` |
+| ② 主题字面量注入（小程序无 CSS 变量） | `resolveThemeTokens` / `MT_MINI_TOKENS_*` |
+| ③ 平台能力表（准入） | `resolveCapabilities` / `MT_MINI_CAPABILITIES` |
+
+`nodes` 一律由 `@mteditor/document` 的 `serializeDocumentToMini` 产出，
+保证「编辑、详情页、小程序、导出」四处看到的是同一份真相。
+
+## 可用平台
+
+| 子路径 | 状态 |
+|---|---|
+| `@mteditor/renderer-mini/wechat` | ✅ 可用（微信小程序） |
+| `/alipay` `/bytedance` `/uni-app` `/taro` `/arkts` | ⏳ 规划中。各端 `rich-text` 白名单不一致，**未实测前拒绝执行**（调用会抛 `RangeError`），不拿微信表硬跑 |
+
+## 安装
+
+```bash
+npm i @mteditor/renderer-mini
+```
+
+## 用法
+
+```ts
+import { render } from '@mteditor/renderer-mini/wechat'
+
+const { mode, nodes, report, stats, autoSwitched } = render(doc, { theme: 'dark' })
+
+// mode 是「实际使用的通道」，不是入参 —— 宿主必须按它分支
+// nodes 直接喂给 <rich-text nodes="{{nodes}}"> 或递归组件
+// report 为空数组表示内容无损；autoSwitched 非 null 表示触发了阈值降级
+```
+
+通用入口（自己传 `platform`）：
+
+```ts
+import { renderMiniDocument } from '@mteditor/renderer-mini'
+
+const result = renderMiniDocument(doc, { platform: 'wechat', mode: 'auto' })
+```
+
+### 返回值（`MtMiniRenderResult`）
+
+| 字段 | 说明 |
+|---|---|
+| `platform` | 目标平台 |
+| `mode` | **实际使用**的通道；入参 `'auto'` 时这里是解析结果 |
+| `nodes` | 小程序 nodes（**Array 形式**） |
+| `report` | 降级报告（`MT_DEG_*`），无降级时为空数组。**始终返回、不可关闭** |
+| `stats` | 序列化统计（节点数 / 最大深度 / 字节数） |
+| `autoSwitched` | 自动通道切换记录（`from` / `to` / `nodeCount` / `maxNodes`）；未触发为 `null` |
+
+> `report` 与 `autoSwitched` 刻意分开：前者是**内容表达损失**，后者是**渲染策略**。
+> 本包**不提供关闭降级报告的开关**：`rich-text` 通道会把 `video` / `audio` / 公式降级成文本，
+> 这类损失用户直接看得见，留开关等于给静默留后门。
+
+### 选项（`MtMiniRenderOptions`）
+
+| 选项 | 缺省 | 说明 |
+|---|---|---|
+| `platform` | `'wechat'` | 目标平台；未实测核实的平台会被拒绝（抛 `RangeError`） |
+| `mode` | `'auto'` | `'auto' \| 'richText' \| 'component'` |
+| `maxNodes` | `3000` | `auto` 的降级阈值，单位是**文档节点数**；判定在序列化**之前** |
+| `theme` | `'light'` | 内置主题名，或自定义字面量表（键含 `--` 前缀） |
+| `themeTokens` | — | 主题字面量补充 / 覆盖，与 `theme` 合并后**后者优先** |
+| `preRendered` | — | 预渲染产物索引（公式 SVG / 代码高亮） |
+
+## 双通道渲染
+
+| 通道 | 实现 | 适用 | 样式来源 |
+|---|---|---|---|
+| **B. 递归自定义组件**（默认） | JSON → 递归 `view` / `text` 树 | 复杂内容、需要交互（图片预览、表格横滑） | 组件 wxss + CSS 变量 |
+| **A. `rich-text` 原生组件** | JSON → `nodes` 数组 | 内容简单、性能优先 | 序列化时**内联的字面量** |
+
+`mode: 'auto'` 的判据是**文档节点数**（与 `maxNodes` 比较），**判定发生在序列化之前** ——
+判定的意义正是避免一次昂贵序列化。触发降级时 `autoSwitched` 会带上切换前后的通道与节点数。
+
+## 小程序组件（随包分发）
+
+通道 B 的实现就在包里，**它是唯一权威副本**：
+
+| 文件 | 作用 |
+|---|---|
+| `components/mt-renderer/` | 入口组件：按 `render()` 返回的 `mode` 在 `<rich-text>` 与递归组件之间分支 |
+| `components/mt-node/` | 递归节点组件：按 `node.name` 分派到 `<view>` / `<text>` / `<image>` / `<video>` / `<audio>` |
+| `components/mt-theme.wxss` | 主题变量表（宿主 `@import` 一次），亮色默认 + `mt-theme-dark` 覆盖 |
+
+接入三步：
+
+1. **复制组件**：小程序无法从 `node_modules` 直读组件，把 `components/` 下的
+   `mt-renderer` / `mt-node` 复制进项目（如 `components/mt/`），组件的 `usingComponents`
+   用的是相对路径，复制后无需改动；
+2. **页面声明**：`"usingComponents": { "mt-renderer": "/components/mt/mt-renderer/index" }`；
+3. **渲染**：
+
+```js
+import { render } from '@mteditor/renderer-mini/wechat'
+
+Page({
+  data: { mode: 'component', nodes: [] },
+
+  onLoad() {
+    const { mode, nodes, report, autoSwitched } = render(doc, { theme: 'dark' })
+    this.setData({ mode, nodes })
+    if (report.length > 0) console.warn('内容有降级', report)
+    if (autoSwitched) console.warn('已自动切换通道', autoSwitched)
+  },
+
+  /** 图片点击 → 预览；附件点击 → 下载 */
+  onItemTap(event) {
+    const { kind, value } = event.detail
+    if (kind === 'image') wx.previewImage({ urls: [value] })
+    if (kind === 'attachment') wx.downloadFile({ url: value })
+  },
+})
+```
+
+```xml
+<mt-renderer mode="{{mode}}" nodes="{{nodes}}" bind:mttap="onItemTap" />
+```
+
+`mode` **必须是 `render()` 返回的值**，不要传你传进去的 `'auto'` ——
+`'auto'` 的解析结果只有渲染器知道。两条通道的样式接入方式与组件选项（`virtualHost` +
+`addGlobalClass`）见 [`components/README.md`](./components/README.md)。
+
+## 注意事项
+
+- **最低基础库 2.21.0**。
+- **主题必须走字面量**：`rich-text` 内的 `style` 不参与宿主 CSS 变量继承，
+  所以 `theme` / `themeTokens` 是唯一入口（组件通道则用 `mt-theme.wxss` + CSS 变量）。
+- **降级必须可见**：`video` / `audio` / `mention` 等在 `rich-text` 下不可表达的节点会写入 `report`，
+  禁止静默丢弃；`autoSwitched` 是「策略降级」的载体（本包不持有事件总线，故不用 `console.warn`）。
+- 各端 `rich-text` 白名单**不完全一致**，映射表逐端独立维护；未实测的平台不猜。
+- 小程序没有 `window`：本包不含任何 DOM 依赖，可在 Node 侧先算好 `nodes` 再下发。
+
+## 许可
+
+MIT

package/components/README.md

@@ -0,0 +1,92 @@
+# renderer-mini 的小程序组件
+
+> 「递归自定义组件」通道的实现，随包分发 —— 通道的名字就是它，所以它是渲染器的一部分，
+> 不是某个示例的私事。
+
+## 目录
+
+| 文件 | 作用 |
+|---|---|
+| `mt-renderer/` | 入口组件：按 `render()` 返回的 `mode` 在 `<rich-text>` 与递归组件之间分支 |
+| `mt-node/` | 递归节点组件：按 `node.name` 分派到 `<view>` / `<text>` / `<image>` / `<video>` / `<audio>` |
+| `mt-theme.wxss` | 主题变量表（宿主 `@import` 一次），亮色默认 + `mt-theme-dark` 覆盖 |
+
+## 接入（三步）
+
+**1. 复制或引用组件**
+
+小程序无法从 `node_modules` 直接读组件，把这两个目录复制进项目（如 `components/mt/`）即可。
+组件的 `usingComponents` 用的是相对路径，复制后无需改动。
+
+**2. 页面声明组件**
+
+```json
+{
+  "usingComponents": {
+    "mt-renderer": "/components/mt/mt-renderer/index"
+  }
+}
+```
+
+**3. 渲染**
+
+```js
+import { render } from '@mteditor/renderer-mini/wechat'
+
+Page({
+  data: { mode: 'component', nodes: [] },
+
+  onLoad() {
+    const { mode, nodes, report, autoSwitched } = render(doc, { theme: 'dark' })
+    this.setData({ mode, nodes })
+    if (report.length > 0) console.warn('内容有降级', report)
+    if (autoSwitched) console.warn('已自动切换通道', autoSwitched)
+  },
+
+  /** 图片点击 → 预览；附件点击 → 下载 */
+  onItemTap(event) {
+    const { kind, value } = event.detail
+    if (kind === 'image') wx.previewImage({ urls: [value] })
+    if (kind === 'attachment') wx.downloadFile({ url: value })
+  },
+})
+```
+
+```xml
+<mt-renderer mode="{{mode}}" nodes="{{nodes}}" bind:mttap="onItemTap" />
+```
+
+`mode` **必须是 `render()` 返回的值**，不要传你传进去的 `'auto'` ——
+`'auto'` 的解析结果只有渲染器知道。
+
+## 两条通道的样式来源不同（重要）
+
+| 通道 | 样式来源 | 主题切换 |
+|---|---|---|
+| `component`（默认） | 组件 wxss + CSS 变量 | 覆盖 `page { --mt-*: … }`，或加 `mt-theme-dark` class |
+| `richText` | 序列化时**内联的字面量** | `render(doc, { theme, themeTokens })` |
+
+原因是 `rich-text` 内的 `style` 不参与宿主 CSS 变量继承，
+所以那条通道的主题必须在序列化阶段就解析成字面量。
+
+## 三处有意的额外包裹
+
+跨端一致性要求「无多余包裹」，下面三处是**明确记录在案**的例外，
+都是小程序能力约束所致：
+
+1. **表格**：外包一层 `<scroll-view scroll-x>` —— 宽表格必须能横滑；
+2. **公式**：`<view class="mt-math">` 里的 SVG 文本由组件转成 `data:image/svg+xml,` URI 后交给 `<image>`；
+3. **附件**：独立分支以便绑定点击。
+
+## 组件选项
+
+两个组件都开了：
+
+- `virtualHost: true` —— 组件自身不产生包裹节点（基础库 ≥ 2.19.2，本包基线 2.21.0）；
+- `addGlobalClass: true` —— 允许宿主的全局样式作用进组件，宿主才有办法微调外观。
+
+最低基础库：**2.21.0**。
+
+## 许可
+
+MIT

package/components/mt-node/index.js

@@ -0,0 +1,123 @@
+/**
+ * `mt-node` —— 递归节点组件（「通道 B：递归自定义组件」）。
+ *
+ * ## 输入契约
+ *
+ * `node` 就是一个 `MtMiniNode`（由 `renderMiniDocument` / `render` 产出）：
+ *
+ * ```ts
+ * { type: 'node', name: 'view', attrs: { class: 'mt-p' }, children: [...] }
+ * { type: 'text', text: '段落内容' }
+ * ```
+ *
+ * 本组件**不做任何数据解释**（不解析 JSON、不拼字符串），只按 `name` 分派
+ * 到对应的小程序标签 —— 所有结构决策都在 `@mteditor/document` 里做完了。
+ *
+ * ## 两个必须显式打开的能力
+ *
+ * `virtualHost: true`：组件自身不产生包裹节点。 要求跨端「节点数与层级结构
+ *   一一对应，无多余包裹」，默认的包裹行为会让 35 篇基线全部多出一层。
+ *   基础库要求 ≥ 2.19.2，本包基线 2.21.0满足。
+ * - `addGlobalClass: true`：允许宿主的全局样式（`app.wxss`）作用到本组件内，
+ *   宿主才有办法微调外观而不必改组件源码。
+ *
+ * ## 事件
+ *
+ * 只冒泡一种事件 `mttap`，`detail` 形如：
+ *
+ * ```ts
+ * { kind: 'image' | 'attachment', value: string }
+ * ```
+ *
+ * 递归链上每一层都原样转发，最终由 `mt-renderer` 抛给页面 ——
+ * 节点树有多深，事件都能一路冒上来。
+ */
+
+Component({
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+  },
+
+  properties: {
+    /** 待渲染的单个节点（`MtMiniNode`） */
+    node: { type: null, value: null },
+    /** 是否允许长按选中文本，缺省允许（只读页里用户常需要复制） */
+    selectable: { type: Boolean, value: true },
+  },
+
+  data: {
+    /** `mt-math` 节点转换出的 data URI；空串表示未转换 */
+    mathSrc: '',
+  },
+
+  observers: {
+    node(value) {
+      this.refreshMath(value)
+    },
+  },
+
+  methods: {
+    /**
+     * 公式节点预处理。
+     *
+     * `document` 把预渲染好的 SVG 以**文本载荷**挂在 `<view class="mt-math">` 下
+     * （它不假设宿主如何渲染 SVG）。小程序不能内联 SVG 标签，但 `<image>` 可以吃
+     * `data:image/svg+xml,` 开头的 data URI —— 转换放在这里，因为它属于「渲染」。
+     *
+     * @param {object} node 当前节点
+     */
+    refreshMath(node) {
+      const isMath = node && node.attrs && node.attrs.class === 'mt-math'
+      if (!isMath) {
+        if (this.data.mathSrc !== '') this.setData({ mathSrc: '' })
+        return
+      }
+      const first = node.children && node.children[0]
+      const svg = first && first.type === 'text' ? first.text : ''
+      const src = svg ? `data:image/svg+xml,${encodeURIComponent(svg)}` : ''
+      if (src !== this.data.mathSrc) this.setData({ mathSrc: src })
+    },
+
+    /**
+     * 向上转发子节点的事件。
+     *
+     * @param {object} event 子组件抛出的 `mttap`
+     */
+    onBubble(event) {
+      this.triggerEvent('mttap', event.detail)
+    },
+
+    /** 图片点击：把 `src` 交给页面去 `previewImage` */
+    onImageTap() {
+      this.emit('image', this.attr('src'))
+    },
+
+    /** 附件点击：把下载地址交给页面 */
+    onAttachmentTap() {
+      this.emit('attachment', this.attr('data-src'))
+    },
+
+    /**
+     * 读取当前节点的某个属性。
+     *
+     * @param {string} key 属性名
+     * @returns {string} 属性值；缺失时为空串
+     */
+    attr(key) {
+      const node = this.data.node
+      return (node && node.attrs && node.attrs[key]) || ''
+    },
+
+    /**
+     * 抛出 `mttap`。
+     *
+     * @param {'image' | 'attachment'} kind 事件种类
+     * @param {string} value 载荷（通常是 URL）
+     */
+    emit(kind, value) {
+      if (!value) return
+      this.triggerEvent('mttap', { kind, value })
+    },
+  },
+})

package/components/mt-node/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mt-node": "./index"
+  }
+}

package/components/mt-node/index.wxml

@@ -0,0 +1,95 @@
+<!--
+  mt-node —— 递归渲染单个节点（通道 B）
+
+  分派规则与「递归组件通道」一列逐行对应
+  文本 → <text>；图片/视频/音频 → 原生组件；其余 → <view> 并递归 children。
+
+  三处**有意的额外包裹**，都是小程序的能力约束所致，不是设计疏漏：
+  1. 表格：包一层 <scroll-view scroll-x> —— 宽表格必须能横滑；
+  2. 公式：<view class="mt-math"> 里的 SVG 文本在 JS 里转成 data URI 后由 <image> 承载；
+  3. 附件：需要绑定点击，故独立分支而非走通用 <view>。
+-->
+
+<!-- 文本节点 -->
+<text
+  wx:if="{{node.type === 'text'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  user-select="{{selectable}}"
+>{{node.text}}</text>
+
+<!-- 图片：mode=widthFix 是「宽度自适应、高度按比例」的唯一可靠方式 -->
+<image
+  wx:elif="{{node.name === 'image'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  src="{{node.attrs.src}}"
+  mode="widthFix"
+  bindtap="onImageTap"
+/>
+
+<!-- 视频（rich-text 通道不可表达，必须由原生组件承载） -->
+<video
+  wx:elif="{{node.name === 'video'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  src="{{node.attrs.src}}"
+  poster="{{node.attrs.poster}}"
+/>
+
+<!-- 音频 -->
+<audio
+  wx:elif="{{node.name === 'audio'}}"
+  class="{{node.attrs.class}}"
+  style="{{node.attrs.style}}"
+  src="{{node.attrs.src}}"
+/>
+
+<!-- 公式：SVG 已在 JS 中转为 data URI -->
+<image
+  wx:elif="{{node.attrs.class === 'mt-math' && mathSrc}}"
+  class="mt-math"
+  src="{{mathSrc}}"
+  mode="widthFix"
+/>
+
+<!-- 表格：外层 <scroll-view scroll-x> 提供横滑 -->
+<scroll-view wx:elif="{{node.attrs.class === 'mt-table'}}" class="mt-table-scroll" scroll-x>
+  <view class="{{node.attrs.class}}" style="{{node.attrs.style}}">
+    <mt-node
+      wx:for="{{node.children}}"
+      wx:key="index"
+      node="{{item}}"
+      selectable="{{selectable}}"
+      bind:mttap="onBubble"
+    />
+  </view>
+</scroll-view>
+
+<!-- 附件卡片：可点击 -->
+<view
+  wx:elif="{{node.attrs.class === 'mt-attachment'}}"
+  class="mt-attachment"
+  style="{{node.attrs.style}}"
+  data-src="{{node.attrs['data-src']}}"
+  bindtap="onAttachmentTap"
+>
+  <mt-node
+    wx:for="{{node.children}}"
+    wx:key="index"
+    node="{{item}}"
+    selectable="{{selectable}}"
+    bind:mttap="onBubble"
+  />
+</view>
+
+<!-- 通用元素节点：<view> + 递归 -->
+<view wx:else class="{{node.attrs.class}}" style="{{node.attrs.style}}">
+  <mt-node
+    wx:for="{{node.children}}"
+    wx:key="index"
+    node="{{item}}"
+    selectable="{{selectable}}"
+    bind:mttap="onBubble"
+  />
+</view>

package/components/mt-node/index.wxss

@@ -0,0 +1,163 @@
+/**
+ * mt-node 的节点样式。
+ *
+ * ## 与 rich-text 通道的**本质差异**（必须写进对外文档）
+ *
+ * | 通道 | 样式来源 | 主题切换方式 |
+ * |---|---|---|
+ * | 组件通道（本文件） | WXSS + CSS 变量 | 宿主覆盖 `page { --mt-*: … }`，或用 `mt-theme.wxss` |
+ * | `rich-text` 通道 | 序列化时**内联的字面量** | `render(doc, { theme, themeTokens })` |
+ *
+ * 原因是硬约束：`rich-text` 内的 `style` 不参与宿主 CSS 变量继承，
+ * 而组件通道里的元素是宿主的真实节点，CSS 变量照常生效。
+ *
+ * ## 每个取值都带 fallback
+ *
+ * 宿主不引 `mt-theme.wxss` 也要能渲染出可用外观 —— 一个「必须再引一个文件才能看」
+ * 的渲染器，第一次用就会被认为是坏的。
+ */
+
+/* ---- 段落与标题 ---- */
+
+.mt-p {
+  margin: 0 0 0.75em;
+  font-size: var(--mt-font-size, 15px);
+  line-height: var(--mt-line-height, 1.7);
+  color: var(--mt-color-text, #1f2329);
+  overflow-wrap: break-word;
+}
+
+.mt-h1,
+.mt-h2,
+.mt-h3,
+.mt-h4,
+.mt-h5,
+.mt-h6 {
+  margin: 1em 0 0.5em;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--mt-color-text, #1f2329);
+}
+
+.mt-h1 {
+  font-size: var(--mt-h1-font-size, 28px);
+}
+
+.mt-h2 {
+  font-size: var(--mt-h2-font-size, 24px);
+}
+
+.mt-h3 {
+  font-size: var(--mt-h3-font-size, 20px);
+}
+
+.mt-h4 {
+  font-size: var(--mt-h4-font-size, 18px);
+}
+
+.mt-h5 {
+  font-size: var(--mt-h5-font-size, 16px);
+}
+
+.mt-h6 {
+  font-size: var(--mt-h6-font-size, 15px);
+}
+
+/* ---- 引用（左侧竖线由序列化时内联的 style 提供） ---- */
+
+.mt-blockquote {
+  margin: 0 0 0.75em;
+  color: var(--mt-color-text-secondary, #646a73);
+}
+
+/* ---- 列表：缩进由 WXSS 提供，序号由 <ol> 自绘 ---- */
+
+.mt-ul,
+.mt-ol {
+  margin: 0 0 0.75em;
+  padding-left: 1.6em;
+}
+
+.mt-li {
+  margin: 0.25em 0;
+}
+
+/* 嵌套列表再加一层缩进 */
+.mt-li .mt-ul,
+.mt-li .mt-ol {
+  margin-bottom: 0;
+}
+
+/* ---- 任务列表（小程序无 input，序列化时已用 ☐ / ☑ 字符模拟） ---- */
+
+.mt-task-list {
+  margin: 0 0 0.75em;
+}
+
+.mt-task-item {
+  margin: 0.25em 0;
+}
+
+/* ---- 代码块（背景色与横向滚动由内联 style 提供） ---- */
+
+.mt-pre {
+  margin: 0 0 0.75em;
+  border-radius: var(--mt-radius-md, 6px);
+  font-size: var(--mt-font-size-sm, 13px);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+/* ---- 分割线（border-top 由内联 style 提供） ---- */
+
+.mt-hr {
+  height: 0;
+  margin: 1.25em 0;
+}
+
+/* ---- 表格：外层 scroll-view 提供横滑 ---- */
+
+.mt-table-scroll {
+  width: 100%;
+  margin: 0 0 0.75em;
+}
+
+.mt-table {
+  border-collapse: collapse;
+  font-size: var(--mt-font-size-sm, 13px);
+}
+
+.mt-th,
+.mt-td {
+  padding: 6px 8px;
+  border: 1px solid var(--mt-color-border, #dee0e3);
+  vertical-align: top;
+  color: var(--mt-color-text, #1f2329);
+}
+
+.mt-th {
+  background-color: var(--mt-color-bg-muted, #f5f7fa);
+  font-weight: 600;
+}
+
+/* ---- 媒体与其它 ---- */
+
+.mt-img {
+  display: block;
+  max-width: 100%;
+}
+
+.mt-math {
+  display: block;
+  max-width: 100%;
+  margin: 0.5em 0;
+}
+
+.mt-attachment {
+  display: block;
+  margin: 0 0 0.75em;
+  padding: 8px 12px;
+  border: 1px solid var(--mt-color-border, #dee0e3);
+  border-radius: var(--mt-radius-md, 6px);
+  background-color: var(--mt-color-bg-muted, #f5f7fa);
+}