bridgerte 0.9.0

package/README.md

@@ -0,0 +1,830 @@
+# bridgerte
+
+![BridgeRTE logo](https://gitee.com/wangchuyi1122/bridgerte/raw/master/packages/bridgerte/assets/bridgerte-logo-small.png)
+
+BridgeRTE 是面向 Web、H5、PC、React Native WebView 和 Flutter WebView 的跨端富文本编辑器。
+业务项目只需要安装并引用 `bridgerte`；局部能力可以从 `bridgerte/*` subpath 导入。
+
+## 安装
+
+```bash
+pnpm add bridgerte
+```
+
+如果使用 npm：
+
+```bash
+npm install bridgerte
+```
+
+DOM 编辑器需要显式导入样式：
+
+```ts
+import 'bridgerte/style.css';
+```
+
+## 快速开始
+
+```ts
+import { createRichTextEditor } from 'bridgerte';
+import 'bridgerte/style.css';
+
+const container = document.querySelector<HTMLElement>('#editor');
+
+if (!container) throw new Error('editor container not found');
+
+const editor = createRichTextEditor(container, {
+  placeholder: '请输入内容',
+  onContentChange(change) {
+    console.log(change.plainTextLength, change.isOverMaxLength);
+  }
+});
+
+window.addEventListener('beforeunload', () => {
+  editor.destroy();
+});
+```
+
+页面里准备一个容器即可：
+
+```html
+<div id="editor"></div>
+```
+
+## 导入入口
+
+常规 Web/PC/H5 项目从主入口导入：
+
+```ts
+import {
+  createRichTextEditor,
+  createRichTextToolbar,
+  createWebViewBridgeRuntime
+} from 'bridgerte';
+
+import type {
+  EditorAPI,
+  EditorCommand,
+  EditorContent,
+  MenuItem,
+  ToolbarConfig
+} from 'bridgerte';
+```
+
+只使用某一类能力时，可以使用 subpath：
+
+```ts
+import { createRichTextEditor } from 'bridgerte/dom';
+import { createWebViewBridgeRuntime } from 'bridgerte/webview';
+import { BRIDGERTE_CONTENT_VERSION } from 'bridgerte/core';
+import { isBridgeMessage } from 'bridgerte/bridge';
+import { defaultMenuSchema, resolveToolbarMenu } from 'bridgerte/native-spec';
+```
+
+- `bridgerte`：常用聚合入口。
+- `bridgerte/dom`：DOM 编辑器和独立 toolbar。
+- `bridgerte/webview`：WebView 页面内的 bridge runtime。
+- `bridgerte/core`：内容、命令、上传、菜单、参数面板和 editor API 类型。
+- `bridgerte/bridge`：WebView 双向消息类型和消息判断工具。
+- `bridgerte/native-spec`：RN/Flutter 原生菜单 schema 和 toolbar 解析工具。
+- `bridgerte/style.css`：DOM 默认样式。
+
+## 基础配置
+
+```ts
+const editor = createRichTextEditor(container, {
+  value: {
+    html: '<p>Hello BridgeRTE</p>',
+    plainText: 'Hello BridgeRTE'
+  },
+  readonly: false,
+  platform: 'pc',
+  toolbarMode: 'top',
+  placeholder: '写点什么',
+  maxLength: 10000,
+  keyboardShortcuts: true,
+  onReady(api) {
+    api.focus();
+  }
+});
+```
+
+常用配置：
+
+- `value`：初始内容，传 `Partial<EditorContent>`。
+- `readonly`：只读状态。
+- `platform`：`'pc' | 'h5' | 'webview'`。
+- `toolbarMode`：`'top' | 'bottom' | 'none' | 'native'`。
+- `placeholder`：空态提示。
+- `maxLength`：最大纯文本长度。
+- `keyboardShortcuts`：基础快捷键，默认关闭。
+- `onReady(api)`：编辑器 ready 后回传 `EditorAPI`。
+- `onError(error)`：运行时错误。
+- `onFocus()` / `onBlur()`：焦点变化。
+
+`toolbarMode` 说明：
+
+- `top`：默认顶部 toolbar。
+- `bottom`：H5 底部 tabbar。
+- `none`：只创建编辑器，业务自己挂载 toolbar。
+- `native`：WebView/RN/Flutter 场景不渲染 DOM 菜单。
+
+## 内容读写
+
+主动读取完整内容：
+
+```ts
+const content = editor.getContent();
+
+console.log(content.version);
+console.log(content.html);
+console.log(content.json);
+console.log(content.plainText);
+console.log(content.assets);
+```
+
+写入内容：
+
+```ts
+editor.setContent({
+  html: '<h1>标题</h1><p>正文</p>',
+  plainText: '标题\n正文'
+});
+```
+
+高频内容变化建议使用轻量摘要：
+
+```ts
+createRichTextEditor(container, {
+  onContentChange(change) {
+    saveButton.disabled = !change.dirty;
+    counter.textContent = `${change.plainTextLength}/${change.maxLength ?? '∞'}`;
+  }
+});
+```
+
+`onContentChange` 不携带完整 `html`、`json`、`plainText`，适合驱动 dirty、字数和保存按钮。
+保存、提交或离开页面确认时，再主动调用 `getContent()`。`onChange(content)` 会回传完整内容，
+主要用于兼容旧项目；大文档场景不建议逐字依赖它保存。
+
+## EditorAPI
+
+```ts
+editor.focus();
+editor.blur();
+editor.setReadonly(true);
+
+editor.executeCommand({ type: 'format.bold' });
+
+const states = editor.getCommandStates();
+const unsubscribe = editor.subscribeCommandStateChange((nextStates) => {
+  console.log(nextStates);
+});
+
+unsubscribe();
+editor.destroy();
+```
+
+`EditorAPI` 方法：
+
+- `getContent()`：读取完整内容。
+- `setContent(content)`：写入内容。
+- `executeCommand(command)`：执行命令。
+- `requestPayloadPanel(request)`：打开参数面板请求。
+- `getCommandStates()`：读取命令状态。
+- `subscribeCommandStateChange(listener)`：订阅命令状态变化。
+- `setReadonly(readonly)`：切换只读。
+- `focus()` / `blur()`：焦点控制。
+- `destroy()`：销毁实例。
+
+## 命令 API
+
+文本格式：
+
+```ts
+editor.executeCommand({ type: 'format.bold' });
+editor.executeCommand({ type: 'format.italic' });
+editor.executeCommand({ type: 'format.underline' });
+editor.executeCommand({ type: 'format.strike' });
+editor.executeCommand({ type: 'format.inlineCode' });
+editor.executeCommand({ type: 'format.superscript' });
+editor.executeCommand({ type: 'format.subscript' });
+editor.executeCommand({ type: 'format.clear' });
+editor.executeCommand({ type: 'format.color', value: '#1677ff' });
+editor.executeCommand({ type: 'format.backgroundColor', value: '#e8f3ff' });
+editor.executeCommand({ type: 'format.fontSize', value: '18px' });
+editor.executeCommand({ type: 'format.fontFamily', value: 'Arial' });
+editor.executeCommand({ type: 'format.lineHeight', value: '1.75' });
+```
+
+段落、列表和对齐：
+
+```ts
+editor.executeCommand({ type: 'block.paragraph' });
+editor.executeCommand({ type: 'block.heading', level: 1 });
+editor.executeCommand({ type: 'block.quote' });
+editor.executeCommand({ type: 'block.divider' });
+editor.executeCommand({ type: 'block.code', language: 'typescript' });
+editor.executeCommand({ type: 'block.setCodeLanguage', language: 'json' });
+
+editor.executeCommand({ type: 'list.ordered' });
+editor.executeCommand({ type: 'list.unordered' });
+editor.executeCommand({ type: 'list.todo' });
+
+editor.executeCommand({ type: 'align', value: 'left' });
+editor.executeCommand({ type: 'align', value: 'center' });
+editor.executeCommand({ type: 'align', value: 'right' });
+editor.executeCommand({ type: 'align', value: 'justify' });
+editor.executeCommand({ type: 'indent.increase' });
+editor.executeCommand({ type: 'indent.decrease' });
+```
+
+链接、表格、媒体和历史：
+
+```ts
+editor.executeCommand({ type: 'link.set', href: 'https://example.com', text: 'Example' });
+editor.executeCommand({ type: 'link.unset' });
+editor.executeCommand({ type: 'link.open' });
+
+editor.executeCommand({ type: 'table.insert', rows: 3, cols: 4 });
+editor.executeCommand({ type: 'table.insertRow', direction: 'after', count: 1 });
+editor.executeCommand({ type: 'table.insertColumn', direction: 'after', count: 1 });
+editor.executeCommand({ type: 'table.deleteRow' });
+editor.executeCommand({ type: 'table.deleteColumn' });
+editor.executeCommand({ type: 'table.delete' });
+
+editor.executeCommand({
+  type: 'media.insertImage',
+  url: 'https://example.com/image.png',
+  alt: '示例图片',
+  width: 1200,
+  height: 800,
+  displayWidthPercent: 50,
+  align: 'center'
+});
+
+editor.executeCommand({
+  type: 'media.insertVideo',
+  url: 'https://example.com/video.mp4',
+  poster: 'https://example.com/poster.png',
+  displayWidthPercent: 100
+});
+
+editor.executeCommand({ type: 'history.undo' });
+editor.executeCommand({ type: 'history.redo' });
+editor.executeCommand({ type: 'fullscreen.toggle' });
+editor.executeCommand({ type: 'content.clear' });
+```
+
+默认 toolbar 不提供图片/视频 URL 插入入口，但保留 `media.insertImage` 和
+`media.insertVideo` 命令。主动链接编辑也不作为默认内置入口，业务可以通过自定义菜单调用
+`link.set`、`link.unset` 和 `link.open`。
+
+## Toolbar 和 Tabbar
+
+内置 toolbar/tabbar 配置：
+
+```ts
+createRichTextEditor(container, {
+  platform: 'h5',
+  toolbarMode: 'bottom',
+  toolbarConfig: {
+    toolbarKeys: [
+      'bold',
+      'italic',
+      '|',
+      'heading-1',
+      'quote',
+      '|',
+      {
+        key: 'history',
+        title: '历史',
+        icon: 'history',
+        menuKeys: ['undo', 'redo']
+      }
+    ],
+    excludeKeys: ['quote']
+  }
+});
+```
+
+`toolbarConfig` 规则：
+
+- `toolbarKeys`：完整控制显示顺序。
+- `insertKeys`：在默认菜单基础上插入。
+- `excludeKeys`：隐藏默认菜单。
+- `'|'`：分割线。
+
+关闭内置 toolbar，自己挂载：
+
+```ts
+import { createRichTextEditor, createRichTextToolbar, defaultMenuSchema } from 'bridgerte';
+
+const editor = createRichTextEditor(editorContainer, {
+  toolbarMode: 'none'
+});
+
+const toolbar = createRichTextToolbar(toolbarContainer, {
+  editor,
+  menuSchema: defaultMenuSchema,
+  placement: 'bottom',
+  toolbarConfig: {
+    toolbarKeys: ['bold', 'italic', '|', 'undo', 'redo']
+  }
+});
+
+toolbar.update();
+toolbar.destroy();
+editor.destroy();
+```
+
+`placement: 'top' | 'bottom'` 只表达菜单语义和默认样式状态。toolbar DOM 放在哪里、是否吸顶或吸底，
+由业务自己的布局决定。
+
+## 自定义菜单、Icon 和文案
+
+```ts
+import { createRichTextEditor, defaultMenuSchema, type MenuItem } from 'bridgerte';
+
+const customMenu: MenuItem = {
+  id: 'custom-clear',
+  command: { type: 'content.clear' },
+  label: '清空',
+  icon: 'custom-clear',
+  group: 'history'
+};
+
+createRichTextEditor(container, {
+  menuSchema: [...defaultMenuSchema, customMenu],
+  toolbarConfig: {
+    insertKeys: {
+      index: 0,
+      keys: ['custom-clear', '|']
+    }
+  },
+  icons: {
+    'custom-clear': '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 6h16"/></svg>'
+  },
+  menuLabels: {
+    'custom-clear': '清空文档',
+    bold: '加粗文本'
+  }
+});
+```
+
+稳定规则：
+
+- `MenuItem.id` 是菜单配置使用的稳定 key。
+- `MenuItem.icon` 是稳定 icon key，不是 SVG 字符串。
+- 替换 icon 使用 `icons` map。
+- 替换文案使用 `menuLabels`。
+- `menuLabels` 只影响展示、tooltip 和 `aria-label`，不改变命令语义。
+- 缺失 icon 时，DOM 菜单会使用 label 文本兜底。
+
+## Hoverbar
+
+选中文本 hoverbar 默认开启，复用 `menuSchema`、`icons` 和 `menuLabels`。
+
+```ts
+createRichTextEditor(container, {
+  hoverbarConfig: {
+    toolbarKeys: [
+      'bold',
+      'italic',
+      '|',
+      'color',
+      'background-color',
+      '|',
+      'font-size',
+      'line-height'
+    ]
+  }
+});
+```
+
+关闭内置 hoverbar：
+
+```ts
+createRichTextEditor(container, {
+  floatingMenus: {
+    hoverbar: false
+  }
+});
+```
+
+关闭后只是不显示 DOM hoverbar，不影响底层命令 API。
+
+## 参数面板
+
+颜色、背景色、字号、字体、行高、表格和代码语言都通过参数面板描述候选项。
+
+```ts
+createRichTextEditor(container, {
+  payloadPanelConfig: {
+    'font-size': {
+      fields: {
+        value: {
+          includeValues: ['16px', '20px', '24px'],
+          optionLabels: {
+            '16px': '正文',
+            '24px': '标题'
+          }
+        }
+      }
+    },
+    'text-color': {
+      fields: {
+        value: {
+          options: [
+            { label: '品牌蓝', value: '#1677ff' },
+            { label: '危险红', value: '#ff4d4f' }
+          ]
+        }
+      }
+    },
+    'table-insert': {
+      fields: {
+        rows: { defaultValue: '2', max: 6 },
+        cols: { defaultValue: '3', max: 6 }
+      }
+    }
+  },
+  onPayloadPanelRequest(request) {
+    if (request.panel.id === 'text-color') {
+      renderColorPanel(request);
+      return true;
+    }
+  }
+});
+```
+
+`onPayloadPanelRequest` 返回 `true` 表示业务接管渲染，DOM 默认面板不会显示。业务自绘完成后调用：
+
+```ts
+request.submit({ value: '#1677ff' });
+request.cancel();
+```
+
+readonly 下 request 会带 `readonly: true`，自绘层应展示只读态。
+
+## 图片、视频和上传
+
+BridgeRTE 不内置上传后端。图片/视频上传需要业务实现 `uploadAdapter`。
+
+```ts
+import type { UploadAdapter } from 'bridgerte';
+
+const uploadBlob = async (url: string, file: unknown, signal?: AbortSignal) => {
+  const formData = new FormData();
+
+  if (file instanceof Blob) formData.append('file', file);
+
+  const response = await fetch(url, {
+    method: 'POST',
+    body: formData,
+    signal
+  });
+
+  return await response.json() as {
+    url: string;
+    width?: number;
+    height?: number;
+    poster?: string;
+  };
+};
+
+const uploadAdapter: UploadAdapter = {
+  async uploadImage(file, context) {
+    return await uploadBlob('/api/upload-image', file.data, context.signal as AbortSignal);
+  },
+  async uploadVideo(file, context) {
+    return await uploadBlob('/api/upload-video', file.data, context.signal as AbortSignal);
+  }
+};
+
+createRichTextEditor(container, {
+  uploadAdapter,
+  mediaDefaultWidthPercent: 50
+});
+```
+
+媒体能力：
+
+- 默认 toolbar 提供本地上传图片/视频入口。
+- URL 图片/视频插入使用 `media.insertImage` / `media.insertVideo` 命令。
+- 上传失败时可以重试或删除。
+- 成功态 controls 支持左/中/右对齐、`20%`、`50%`、`100%` 显示比例和删除。
+- `mediaDefaultWidthPercent` 可设为 `20 | 50 | 100`，默认 `50`。
+
+配置媒体 controls：
+
+```ts
+createRichTextEditor(container, {
+  mediaControlsConfig: {
+    toolbarKeys: ['media-align-left', 'media-align-center', 'media-align-right', '|', 'media-remove']
+  },
+  menuLabels: {
+    'media-remove': '删除媒体'
+  }
+});
+```
+
+`media-resize-20`、`media-resize-50`、`media-resize-100` 是基础尺寸能力，配置中误删时会自动补回。
+如果业务完全自绘媒体 controls，也需要提供等价的 `20%`、`50%`、`100%` 尺寸能力。
+
+## Mention
+
+`@` mention 默认开启。provider 负责返回候选数据，展示字段由 `mentionMenuConfig` 控制。
+
+```ts
+import type { MentionItem } from 'bridgerte';
+
+const mentionProvider = async (query: string): Promise<MentionItem[]> => {
+  const response = await fetch(`/api/members?q=${encodeURIComponent(query)}`);
+  return await response.json() as MentionItem[];
+};
+
+createRichTextEditor(container, {
+  mentionProvider,
+  mentionMenuConfig: {
+    labelField: 'data.displayName',
+    descriptionField: 'data.role',
+    avatarField: 'data.avatarUrl',
+    showAvatar: true,
+    showDescription: true,
+    loadingText: '搜索成员中',
+    emptyText: '没有匹配成员',
+    errorText: '成员加载失败'
+  }
+});
+```
+
+自绘 mention 菜单：
+
+```ts
+createRichTextEditor(container, {
+  mentionProvider,
+  onMentionMenuRequest(request) {
+    renderMentionPopover(request);
+    return true;
+  }
+});
+```
+
+关闭 mention trigger：
+
+```ts
+createRichTextEditor(container, {
+  floatingMenus: {
+    mention: false
+  }
+});
+```
+
+关闭后不会监听 `@query`，也不会请求 provider；业务仍可主动执行 `mention.insert` 命令。
+
+## Slash Command
+
+`/` slash command 默认从菜单 schema 里选择常用结构命令。
+
+```ts
+createRichTextEditor(container, {
+  slashCommandConfig: {
+    toolbarKeys: ['heading-1', 'heading-2', '|', 'quote', 'code-block', 'table']
+  },
+  slashCommandMenuConfig: {
+    loadingText: '加载命令中',
+    emptyText: '没有匹配命令',
+    errorText: '命令加载失败'
+  }
+});
+```
+
+追加动态候选：
+
+```ts
+import type { SlashCommandItem } from 'bridgerte';
+
+const slashCommandProvider = async (query: string): Promise<SlashCommandItem[]> => [
+  {
+    id: 'insert-template',
+    label: '插入模板',
+    description: `按 ${query} 搜索模板`,
+    icon: 'template',
+    command: { type: 'block.quote' }
+  }
+];
+
+createRichTextEditor(container, {
+  slashCommandConfig: {
+    toolbarKeys: ['quote', 'table']
+  },
+  slashCommandProvider
+});
+```
+
+语义说明：
+
+- 只传 `slashCommandProvider` 时，provider 候选替换默认 slash 列表。
+- 传入 `slashCommandConfig` 或自定义 `menuSchema` 后，provider 作为动态候选追加。
+- provider 失败时，如果静态候选可用，仍显示静态候选。
+- 表格这类需要参数的命令会继续走参数面板。
+
+自绘 slash command：
+
+```ts
+createRichTextEditor(container, {
+  onSlashCommandMenuRequest(request) {
+    renderSlashPopover(request);
+    return true;
+  }
+});
+```
+
+关闭 slash trigger：
+
+```ts
+createRichTextEditor(container, {
+  floatingMenus: {
+    slash: false
+  }
+});
+```
+
+## WebView
+
+WebView 页面内用 `createWebViewBridgeRuntime()` 接 RN/Flutter 外壳消息。
+
+```ts
+import { createWebViewBridgeRuntime } from 'bridgerte/webview';
+import 'bridgerte/style.css';
+
+const runtime = createWebViewBridgeRuntime({
+  container,
+  transport: {
+    postMessage(message) {
+      window.ReactNativeWebView?.postMessage(JSON.stringify(message));
+    },
+    addMessageListener(listener) {
+      const handleMessage = (event: MessageEvent) => {
+        listener(JSON.parse(String(event.data)));
+      };
+
+      window.addEventListener('message', handleMessage);
+
+      return () => {
+        window.removeEventListener('message', handleMessage);
+      };
+    }
+  }
+});
+
+window.addEventListener('beforeunload', () => {
+  runtime.destroy();
+});
+```
+
+也可以不提供 `addMessageListener`，由业务手动转发消息：
+
+```ts
+runtime.receive(messageFromNative);
+```
+
+原生侧发给编辑器：
+
+- `editor.init`
+- `editor.executeCommand`
+- `editor.setContent`
+- `editor.setReadonly`
+- `editor.requestContent`
+- `editor.payloadPanelResolved`
+- `editor.payloadPanelCanceled`
+- `editor.uploadResolved`
+- `editor.uploadRejected`
+
+编辑器发给原生侧：
+
+- `editor.ready`
+- `editor.content`
+- `editor.contentChange`
+- `editor.selectionChange`
+- `editor.commandStateChange`
+- `editor.payloadPanelRequest`
+- `editor.uploadRequest`
+- `editor.heightChange`
+- `editor.error`
+
+高频自动 `editor.contentChange` 只传轻量摘要。完整 `EditorContent` 通过原生侧发送
+`editor.requestContent` 获取，响应消息是 `editor.content`。兼容期也会同步发送旧
+`editor.contentChange` 完整响应。bridge 不传 File、Blob、base64 或大体积二进制文件。
+
+## RN / Flutter 原生菜单
+
+原生菜单可以读取 `bridgerte/native-spec`：
+
+```ts
+import {
+  defaultMenuSchema,
+  defaultToolbarConfig,
+  resolveToolbarMenu,
+  isMenuItemCommandState
+} from 'bridgerte/native-spec';
+
+const toolbarItems = resolveToolbarMenu(defaultToolbarConfig, defaultMenuSchema);
+```
+
+渲染规则：
+
+- `MenuItem.id` 是配置和状态匹配的稳定 key。
+- `MenuItem.command` 是完整命令，点击后可以直接发给 WebView。
+- `MenuItem.icon` 是稳定 icon key，RN/Flutter 映射到自己的原生图标。
+- `MenuItem.icon` 不是 SVG 字符串。
+- `payloadPanel` 描述需要原生侧补齐的参数。
+- 命令状态可用 `isMenuItemCommandState(item, state)` 匹配。
+
+原生菜单不复用 DOM CSS；WebView 内部编辑器样式通过 `--bridgerte-*` CSS Variables 覆盖。
+
+## 样式和主题
+
+导入默认样式：
+
+```ts
+import 'bridgerte/style.css';
+```
+
+覆盖主题变量：
+
+```css
+.editor-shell {
+  --bridgerte-color-primary: #1677ff;
+  --bridgerte-color-text: #1f2329;
+  --bridgerte-color-text-muted: #86909c;
+  --bridgerte-color-bg: #ffffff;
+  --bridgerte-color-panel: #ffffff;
+  --bridgerte-color-border: #e5e6eb;
+  --bridgerte-color-active-bg: #e8f3ff;
+  --bridgerte-color-placeholder: #b7bcc5;
+  --bridgerte-shadow-panel: 0 12px 32px rgb(15 23 42 / 14%);
+  --bridgerte-font-size: 15px;
+  --bridgerte-line-height: 1.7;
+  --bridgerte-radius: 8px;
+  --bridgerte-toolbar-height: 42px;
+  --bridgerte-control-height: 32px;
+  --bridgerte-editor-padding: 12px;
+}
+```
+
+常用变量：
+
+- `--bridgerte-color-primary`
+- `--bridgerte-color-text`
+- `--bridgerte-color-text-muted`
+- `--bridgerte-color-bg`
+- `--bridgerte-color-panel`
+- `--bridgerte-color-border`
+- `--bridgerte-color-active-bg`
+- `--bridgerte-color-placeholder`
+- `--bridgerte-color-danger`
+- `--bridgerte-shadow-panel`
+- `--bridgerte-font-size`
+- `--bridgerte-line-height`
+- `--bridgerte-radius`
+- `--bridgerte-toolbar-height`
+- `--bridgerte-control-height`
+- `--bridgerte-hoverbar-button-size`
+- `--bridgerte-editor-padding`
+
+## 性能建议
+
+BridgeRTE 按 10w 字符级内容设计输入路径：
+
+- 不要在每次输入时调用 `getContent()`。
+- 不要对 10w 内容逐字依赖 `onChange` 完整保存。
+- 高频 UI 状态使用 `onContentChange` 摘要。
+- 保存、提交或离开页面确认时再调用 `getContent()`。
+- WebView 高频 `editor.contentChange` 只依赖摘要。
+- WebView 完整内容通过 `editor.requestContent` 主动获取。
+- bridge 不传 base64、File、Blob 或二进制大文件。
+
+推荐保存：
+
+```ts
+const save = async () => {
+  const content = editor.getContent();
+
+  await fetch('/api/document', {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify(content)
+  });
+};
+```
+
+## 当前边界
+
+- 默认 toolbar 不提供图片/视频 URL 插入入口；业务用命令 API 自定义入口。
+- 主动链接编辑不作为默认内置入口；业务用 `link.*` 命令自定义入口。
+- BridgeRTE 不内置上传后端。
+- WebView bridge 不传大体积二进制和 base64 文件。