gzkx-editor 0.0.0

package/ARCHITECTURE.md

@@ -0,0 +1,1011 @@
+# GZKX Editor 技术实现文档
+
+## 1. 架构概述
+
+GZKX Editor 基于 ProseMirror 构建，采用模块化架构设计，将编辑器功能拆分为多个独立的包，每个包负责特定的功能领域。
+
+### 1.1 核心架构分层
+
+```
+┌─────────────────────────────────────────┐
+│            View Layer (视图层)           │
+│         gzkx-editor-view                │
+├─────────────────────────────────────────┤
+│           State Layer (状态层)           │
+│         gzkx-editor-state               │
+├─────────────────────────────────────────┤
+│          Model Layer (模型层)            │
+│         gzkx-editor-model               │
+├─────────────────────────────────────────┤
+│       Transform Layer (转换层)           │
+│         gzkx-editor-transform           │
+└─────────────────────────────────────────┘
+```
+
+### 1.2 模块依赖关系图
+
+```
+                    ┌─────────────────┐
+                    │ gzkx-editor-model │
+                    └────────┬────────┘
+                             │
+                    ┌────────▼────────┐
+                    │gzkx-editor-transform│
+                    └────────┬────────┘
+                             │
+          ┌──────────────────┼──────────────────┐
+          │                  │                  │
+   ┌──────▼──────┐    ┌──────▼──────┐    ┌──────▼──────┐
+   │gzkx-editor-state│    │gzkx-editor-commands│   │gzkx-editor-keymap │
+   └──────┬──────┘    └──────┬──────┘    └─────────────┘
+          │                  │
+          │           ┌──────▼──────┐
+          │           │gzkx-editor-inputrules│
+          │           └─────────────┘
+          │
+   ┌──────▼──────┐    ┌─────────────┐
+   │gzkx-editor-view│    │gzkx-editor-history│
+   └─────────────┘    └─────────────┘
+```
+
+## 2. 核心模块详解
+
+### 2.1 gzkx-editor-model (文档模型层)
+
+文档模型层是整个编辑器的基础，定义了文档的数据结构。
+
+#### 2.1.1 核心类
+
+**Node (节点)**
+- 文档的基本组成单元
+- 包含类型、属性、内容和标记
+- 支持两种类型：文本节点(TextNode)和块级节点(BlockNode)
+
+**Fragment (片段)**
+- 节点的集合，用于表示文档的一部分内容
+- 不可变数据结构，支持高效的差量更新
+
+**Slice (切片)**
+- 从文档中切取的一部分内容
+- 用于跨编辑器复制/粘贴操作
+- 包含完整的位置映射信息
+
+**Mark (标记)**
+- 应用于内容的元数据，如加粗、斜体、链接等
+- 可以叠加多个标记
+
+**Schema (模式)**
+- 定义文档的结构约束
+- 声明可用的节点类型和标记类型
+- 规定节点之间的包含关系
+
+#### 2.1.2 Schema 定义示例
+
+```typescript
+const mySchema = new Schema({
+  nodes: {
+    // 文档根节点
+    doc: { content: 'block+' },
+
+    // 段落
+    paragraph: {
+      content: 'inline*',
+      group: 'block',
+      parseDOM: [{ tag: 'p' }],
+      toDOM() { return ['p', 0] }
+    },
+
+    // 标题
+    heading: {
+      content: 'inline*',
+      group: 'block',
+      attrs: { level: { default: 1 } },
+      parseDOM: [
+        { tag: 'h1', attrs: { level: 1 } },
+        { tag: 'h2', attrs: { level: 2 } }
+      ],
+      toDOM(node) { return ['h' + node.attrs.level, 0] }
+    },
+
+    // 文本
+    text: { group: 'inline' },
+
+    // 硬换行
+    hard_break: {
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseDOM: [{ tag: 'br' }],
+      toDOM() { return ['br'] }
+    }
+  },
+
+  marks: {
+    // 加粗
+    strong: {
+      parseDOM: [
+        { tag: 'strong' },
+        { tag: 'b', getAttrs: node => (node as HTMLElement).style.fontWeight !== 'normal' && null },
+        { style: 'font-weight', getAttrs: value => /^(bold(er)|[5-9]00)$/.test(value as string) && null }
+      ],
+      toDOM() { return ['strong', 0] }
+    },
+
+    // 斜体
+    em: {
+      parseDOM: [
+        { tag: 'i' },
+        { tag: 'em' },
+        { style: 'font-style=italic' }
+      ],
+      toDOM() { return ['em', 0] }
+    },
+
+    // 链接
+    link: {
+      attrs: {
+        href: {},
+        title: { default: null }
+      },
+      parseDOM: [{
+        tag: 'a[href]',
+        getAttrs(dom) {
+          return {
+            href: (dom as HTMLElement).getAttribute('href'),
+            title: (dom as HTMLElement).getAttribute('title')
+          }
+        }
+      }],
+      toDOM(mark) {
+        return ['a', { href: mark.attrs.href, title: mark.attrs.title }, 0]
+      }
+    }
+  }
+});
+```
+
+#### 2.1.3 内容表达式 (Content Expressions)
+
+Schema 使用内容表达式来定义节点之间的包含关系：
+
+| 表达式 | 说明 |
+|--------|------|
+| `block` | 匹配 block 组中的任一节点 |
+| `inline` | 匹配 inline 组中的任一节点 |
+| `text` | 匹配文本节点 |
+| `nodeType` | 匹配指定类型的节点 |
+| `+` | 一个或多个 |
+| `*` | 零个或多个 |
+| `?` | 零个或一个 |
+| `|` | 或 |
+| `()` | 分组 |
+
+示例：
+- `block+` - 一个或多个块级节点
+- `inline*` - 零个或多个行内节点
+- `(bullet_list | ordered_list)+` - 一个或多个列表
+- `paragraph | heading` - 段落或标题
+
+### 2.2 gzkx-editor-state (状态管理层)
+
+状态层管理编辑器的完整状态，包括文档内容、选择和插件。
+
+#### 2.2.1 EditorState
+
+```typescript
+interface EditorState {
+  // 文档内容
+  doc: Node;
+
+  // 当前选择
+  selection: Selection;
+
+  // 已应用的事务集合
+  storedMarks: Mark[] | null;
+
+  // 激活的插件
+  plugins: Plugin[];
+}
+```
+
+#### 2.2.2 Transaction (事务)
+
+事务是不可变的，代表一次状态变更：
+
+```typescript
+// 创建事务的方式
+const tr = state.tr;
+
+// 插入文本
+tr.insertText('Hello', 10);
+
+// 删除内容
+tr.delete(5, 15);
+
+// 设置选择
+tr.setSelection(TextSelection.create(tr.doc, 0, 10));
+
+// 添加标记
+tr.addMark(0, 10, state.schema.marks.strong.create());
+
+// 提交事务
+view.dispatch(tr);
+```
+
+#### 2.2.3 Selection (选择)
+
+支持的选择类型：
+
+- **TextSelection** - 文本选择，最常见的类型
+- **NodeSelection** - 节点选择，用于选中整个节点
+- **AllSelection** - 全选
+
+```typescript
+// 获取当前选择
+const { from, to, empty } = state.selection;
+
+// 创建文本选择
+const selection = TextSelection.create(doc, 0, 10);
+
+// 创建节点选择
+const nodeSelection = NodeSelection.create(doc, 5);
+
+// 折叠选择
+const collapsed = selection.extend(15);
+```
+
+#### 2.2.4 Plugin (插件)
+
+插件是扩展编辑器功能的主要机制：
+
+```typescript
+const myPlugin = new Plugin({
+  key: myPluginKey,
+
+  // 插件状态
+  state: {
+    init() {
+      return initialState;
+    },
+    apply(tr, oldState, oldEditorState, newEditorState) {
+      // 更新插件状态
+      return newState;
+    }
+  },
+
+  // 视图部分
+  view(editorView) {
+    return {
+      update(editorView, prevState) { },
+      destroy() { }
+    };
+  },
+
+  // 事务过滤
+  filterTransaction(transaction, state) {
+    // 可以阻止某些事务
+    return true;
+  },
+
+  // 追加事务
+  appendTransaction(transactions, oldState, newState) {
+    // 在事务后自动应用额外变更
+  },
+
+  // 属性
+  props: {
+    handleKeyDown(view, event) { },
+    handleClick(view, pos, event) { }
+  }
+});
+```
+
+### 2.3 gzkx-editor-view (视图层)
+
+视图层负责渲染文档和处理用户交互。
+
+#### 2.3.1 EditorView
+
+```typescript
+const view = new EditorView(document.querySelector('.editor'), {
+  // 初始状态
+  state: initialState,
+
+  // 分发事务回调
+  dispatchTransaction(transaction) {
+    const newState = view.state.apply(transaction);
+    view.updateState(newState);
+  },
+
+  // 不可编辑时返回 false
+  editable() {
+    return !readOnly;
+  },
+
+  // 属性
+  attributes: {
+    class: 'my-editor'
+  },
+
+  // 装饰器
+  decorations(state) {
+    return decorationSet;
+  },
+
+  // 节点视图
+  nodeViews: {
+    myNode(node, view, getPos, decorations, innerDecorations) {
+      return {
+        dom: createMyNodeDOM(),
+        contentDOM: someChild,
+        update(node) { },
+        ignoreMutation() { },
+        destroy() { }
+      };
+    }
+  }
+});
+```
+
+#### 2.3.2 节点视图 (NodeView)
+
+自定义节点渲染：
+
+```typescript
+function createImageNodeView() {
+  return {
+    // 外层 DOM 元素
+    dom: document.createElement('div'),
+
+    // 内容 DOM（可选）
+    contentDOM: null,
+
+    // 更新节点
+    update(node) {
+      if (node.type.name !== 'image') return false;
+      this.dom.innerHTML = `<img src="${node.attrs.src}">`
+      return true;
+    },
+
+    // 是否忽略 DOM 变化
+    ignoreMutation(mutation) {
+      return true;
+    },
+
+    // 销毁
+    destroy() {
+      this.dom.remove();
+    },
+
+    // 位置获取函数
+    stopEvent(event) {
+      return false;
+    }
+  };
+}
+```
+
+### 2.4 gzkx-editor-transform (转换层)
+
+转换层提供文档的变换操作，是协同编辑的基础。
+
+#### 2.4.1 Step (步骤)
+
+步骤是文档变更的原子单位：
+
+```typescript
+// 替换步骤
+const replaceStep = new ReplaceStep(0, 10, new Slice(fragment, 0, 0));
+
+// 添加标记步骤
+const addMarkStep = new AddMarkStep(0, 10, mark);
+
+// 移除标记步骤
+const removeMarkStep = new RemoveMarkStep(0, 10, mark);
+```
+
+#### 2.4.2 Transform
+
+变换操作构建器：
+
+```typescript
+const tr = state.tr;
+
+// 插入内容
+tr.insert(5, Node.fromJSON(schema, { type: 'paragraph', content: [...] }));
+
+// 插入文本
+tr.insertText('Hello World', 5);
+
+// 删除内容
+tr.delete(0, 5);
+
+// 替换内容
+tr.replace(0, 10, new Slice(fragment, 0, 0));
+
+// 添加标记
+tr.addMark(0, 10, schema.marks.strong.create());
+
+// 移除标记
+tr.removeMark(0, 10, schema.marks.strong);
+
+// 分割节点
+tr.split(10);
+
+// 合并节点
+tr.join(10);
+
+// 提升节点
+tr.lift(range, target);
+
+// 包裹节点
+tr.wrap(range, [{ type: schema.nodes.blockquote }]);
+```
+
+#### 2.4.3 Mapping
+
+映射跟踪文档位置变化：
+
+```typescript
+const mapping = new Mapping([step1.map, step2.map]);
+
+// 映射位置
+const newPos = mapping.map(oldPos);
+
+// 映射范围
+const [from, to] = mapping.mapRange(oldFrom, oldTo);
+
+// 获取映射结果
+const result = mapping.mapResult(oldPos);
+if (result.deleted) {
+  // 位置已被删除
+}
+```
+
+### 2.5 gzkx-editor-commands (命令层)
+
+命令是编辑操作的抽象。
+
+#### 2.5.1 Command 接口
+
+```typescript
+type Command = (
+  state: EditorState,
+  dispatch?: (tr: Transaction) => void,
+  view?: EditorView
+) => boolean;
+```
+
+#### 2.5.2 内置命令
+
+```typescript
+// 删除选区
+deleteSelection(state, dispatch);
+
+// 插入硬换行
+exitCode(state, dispatch);
+
+// 加粗/取消加粗
+toggleMark(schema.marks.strong)(state, dispatch);
+
+// 设置块类型
+setBlockType(schema.nodes.heading, { level: 1 })(state, dispatch);
+
+// 包裹节点
+wrapIn(schema.nodes.blockquote)(state, dispatch);
+
+// 提升节点
+lift(state, dispatch);
+
+// 撤销
+undo(state, dispatch);
+
+// 重做
+redo(state, dispatch);
+
+// 提交
+commit_to_history(state, dispatch);
+```
+
+#### 2.5.3 自定义命令
+
+```typescript
+const myCommand: Command = (state, dispatch, view) => {
+  // 检查命令是否可用
+  if (someCondition) return false;
+
+  if (dispatch) {
+    const tr = state.tr;
+    // 执行操作
+    dispatch(tr);
+  }
+
+  return true;
+};
+```
+
+### 2.6 gzkx-editor-keymap (快捷键层)
+
+快捷键绑定管理。
+
+#### 2.6.1 基础快捷键
+
+```typescript
+import { baseKeymap } from 'gzkx-editor-commands';
+
+// Ctrl+B: 加粗
+// Ctrl+I: 斜体
+// Ctrl+Shift+X: 行内代码
+// Ctrl+|: 引用
+// ...
+```
+
+#### 2.6.2 自定义快捷键
+
+```typescript
+import { keymap } from 'gzkx-editor-keymap';
+
+const myKeymap = keymap({
+  'Mod-Alt-c': (state, dispatch) => {
+    // 自定义命令
+    return true;
+  },
+
+  'Enter': (state, dispatch) => {
+    // 拦截回车键
+    return true;
+  }
+});
+```
+
+### 2.7 gzkx-editor-inputrules (输入规则层)
+
+输入规则在用户输入时自动触发变换。
+
+#### 2.7.1 创建输入规则
+
+```typescript
+import { inputRules, wrappingInputRule, textblockTypeInputRule, smartQuotes } from 'gzkx-editor-inputrules';
+
+// 引号自动闭合
+const quoteRule = wrappingInputRule(/^\s*>"$/, schema.nodes.blockquote);
+
+// 有序列表
+const orderedListRule = wrappingInputRule(
+  /^\s*(\d+)\.\s$/,
+  schema.nodes.ordered_list,
+  match => ({ order: +match[1] }),
+  (match, node) => node.childCount + node.attrs.order === +match[1]
+);
+
+// 标题
+const headingRule = textblockTypeInputRule(
+  /^#{1,6}\s$/,
+  schema.nodes.heading,
+  match => ({ level: match[0].trim().length })
+);
+
+// 分割线
+const horizontalRule = textblockTypeInputRule(
+  /^---$/,
+  schema.nodes.horizontal_rule
+);
+```
+
+#### 2.7.2 组合输入规则
+
+```typescript
+const myInputRules = inputRules({
+  rules: [
+    ...smartQuotes,
+    quoteRule,
+    orderedListRule,
+    headingRule
+  ]
+});
+```
+
+### 2.8 gzkx-editor-history (历史记录层)
+
+撤销/重做功能。
+
+```typescript
+import { history, undo, redo, commit_to_history } from 'gzkx-editor-history';
+
+// 撤销
+undo(state, dispatch);
+
+// 重做
+redo(state, dispatch);
+
+// 提交到历史
+commit_to_history(state, dispatch);
+
+// 关闭历史记录
+const noHistory = history();
+```
+
+### 2.9 gzkx-editor-schema-basic 和 schema-list
+
+预定义的 Schema 和辅助函数。
+
+#### 2.9.1 基础 Schema
+
+```typescript
+import { schema } from 'gzkx-editor-schema-basic';
+
+// schema.nodes 包含:
+// - doc
+// - paragraph
+// - text
+// - heading (1-6级)
+// - blockquote
+// - code_block
+// - horizontal_rule
+// - image
+// - hard_break
+
+// schema.marks 包含:
+// - strong
+// - em
+// - code
+// - link
+```
+
+#### 2.9.2 列表辅助
+
+```typescript
+import { addListNodes } from 'gzkx-editor-schema-list';
+
+// 扩展 Schema 支持列表
+const mySchema = new Schema({
+  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
+  marks: schema.spec.marks
+});
+
+// 添加的节点:
+// - bullet_list
+// - ordered_list
+// - list_item
+```
+
+## 3. 进阶主题
+
+### 3.1 协同编辑
+
+gzkx-editor-collab 包支持协同编辑：
+
+```typescript
+import { collab, receiveTransaction, sendableTransactions } from 'gzkx-editor-collab';
+
+// 初始化协同编辑
+const collabPlugin = collab({
+  version: initialVersion,
+
+  // 发送更新到服务器
+  send(tr) {
+    socket.send(JSON.stringify({
+      version: tr.meta.collab_version,
+      steps: tr.steps.map(s => s.toJSON())
+    }));
+  }
+});
+
+// 处理来自服务器的更新
+function applyServerUpdate(version, steps) {
+  const tr = receiveTransaction(state, steps, version);
+  dispatch(tr);
+}
+```
+
+### 3.2 Decoration (装饰器)
+
+装饰器用于添加可视元素而不修改文档：
+
+```typescript
+import { Decoration, DecorationSet } from 'gzkx-editor-view';
+
+// 创建装饰器集
+const decorations = DecorationSet.create(doc, [
+  // widget 装饰器
+  Decoration.widget(10, createWidget(), { key: 'my-widget' }),
+
+  // inline 装饰器
+  Decoration.inline(0, 10, { class: 'highlight' }),
+
+  // 节点装饰器
+  Decoration.node(5, 15, { class: 'important' })
+]);
+
+// 插件中使用
+const highlightPlugin = new Plugin({
+  state: {
+    init() {
+      return DecorationSet.empty;
+    },
+    apply(tr) {
+      return tr.getMeta('highlight') || DecorationSet.empty;
+    }
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    }
+  }
+});
+```
+
+### 3.3 剪贴板处理
+
+```typescript
+// 自定义粘贴处理
+view.setProps({
+  handlePaste(view, event, slice) {
+    // 获取剪贴板内容
+    const html = event.clipboardData.getData('text/html');
+    const text = event.clipboardData.getData('text/plain');
+
+    // 自定义处理
+    const processedSlice = processContent(html, text);
+
+    // 应用
+    dispatch(tr.replaceSelectionWith(processedSlice.content));
+    return true;
+  },
+
+  // 复制时转换
+  transformCopied(slice, view) {
+    // 在复制前转换内容
+    return transformSlice(slice, someTransformation);
+  },
+
+  // 粘贴时转换
+  transformPasted(slice, view) {
+    return transformSlice(slice, sanitizeTransformation);
+  }
+});
+```
+
+### 3.4 自定义节点类型
+
+```typescript
+// 定义自定义节点
+const mentionNode = {
+  group: 'inline',
+  inline: true,
+  atom: true,
+  attrs: { id: {}, label: {} },
+  parseDOM: [{
+    tag: 'span[data-mention]',
+    getAttrs(dom) {
+      return {
+        id: (dom as HTMLElement).getAttribute('data-id'),
+        label: (dom as HTMLElement).getAttribute('data-label')
+      };
+    }
+  }],
+  toDOM(node) {
+    return [
+      'span',
+      {
+        'class': 'mention',
+        'data-id': node.attrs.id,
+        'data-label': node.attrs.label
+      },
+      '@' + node.attrs.label
+    ];
+  }
+};
+
+// 创建节点视图
+const mentionNodeView = (node, view, getPos) => {
+  const dom = document.createElement('span');
+  dom.className = 'mention';
+  dom.textContent = '@' + node.attrs.label;
+
+  return {
+    dom,
+    update(node) {
+      if (node.type.name !== 'mention') return false;
+      dom.textContent = '@' + node.attrs.label;
+      return true;
+    },
+    ignoreMutation() { return true; }
+  };
+};
+
+// 使用
+const mySchema = new Schema({
+  nodes: {
+    doc: { content: 'block+' },
+    paragraph: { content: 'inline*', group: 'block' },
+    text: { group: 'inline' },
+    mention: mentionNode
+  }
+});
+
+const view = new EditorView(editorElement, {
+  state,
+  nodeViews: {
+    mention: mentionNodeView
+  }
+});
+```
+
+## 4. 性能优化
+
+### 4.1 懒加载大型节点
+
+```typescript
+const lazyImageNodeView = (node, view, getPos) => {
+  let dom: HTMLElement;
+
+  return {
+    dom: dom = document.createElement('div'),
+
+    contentDOM: null,
+
+    update(node) {
+      if (node.type.name !== 'image') return false;
+
+      // 懒加载图片
+      const img = document.createElement('img');
+      img.src = node.attrs.src;
+      img.loading = 'lazy';
+
+      dom.innerHTML = '';
+      dom.appendChild(img);
+      return true;
+    },
+
+    ignoreMutation() { return true; }
+  };
+};
+```
+
+### 4.2 避免不必要的重绘
+
+```typescript
+const optimizedPlugin = new Plugin({
+  props: {
+    decorations(state) {
+      // 缓存装饰器
+      const cached = this.getState(state);
+      if (cached) return cached;
+
+      // 创建新装饰器
+      const deco = computeExpensiveDecoration(state);
+      return deco;
+    }
+  },
+
+  state: {
+    init() { return null; },
+    apply(tr, prev) {
+      // 只有相关变更时才更新
+      if (tr.docChanged) {
+        return tr.getMeta('update-decorations');
+      }
+      return prev;
+    }
+  }
+});
+```
+
+### 4.3 事务批处理
+
+```typescript
+let pendingUpdates: Transaction[] = [];
+
+function scheduleUpdate(tr: Transaction) {
+  pendingUpdates.push(tr);
+
+  if (pendingUpdates.length === 1) {
+    requestAnimationFrame(() => {
+      if (pendingUpdates.length === 1) {
+        // 单个事务
+        dispatch(pendingUpdates[0]);
+      } else {
+        // 合并多个事务
+        const tr = state.tr;
+        for (const pending of pendingUpdates) {
+          tr.merge(pending);
+        }
+        dispatch(tr);
+      }
+      pendingUpdates = [];
+    });
+  }
+}
+```
+
+## 5. 调试技巧
+
+### 5.1 查看状态
+
+```typescript
+// 打印当前文档结构
+console.log(state.doc.toString());
+
+// 打印选择
+console.log(state.selection.from, state.selection.to);
+
+// 打印所有事务步骤
+tr.steps.forEach((step, i) => {
+  console.log(`Step ${i}:`, step.toJSON());
+});
+```
+
+### 5.2 状态历史
+
+```typescript
+const debugPlugin = new Plugin({
+  view(editorView) {
+    return {
+      update(view, prevState) {
+        if (prevState.doc !== view.state.doc) {
+          console.log('Document changed');
+          console.log('Diff:', diffMatch.diff_main(
+            prevState.doc.textContent,
+            view.state.doc.textContent
+          ));
+        }
+        if (!prevState.selection.eq(view.state.selection)) {
+          console.log('Selection changed:', view.state.selection.from, '->', view.state.selection.to);
+        }
+      }
+    };
+  }
+});
+```
+
+## 6. TypeScript 类型定义
+
+### 6.1 自定义 Schema 类型
+
+```typescript
+import { Node as PMNode, Mark, Schema } from 'gzkx-editor-model';
+
+interface MyNodeAttrs {
+  id?: string;
+  level?: number;
+  src?: string;
+}
+
+interface MyMarkAttrs {
+  href?: string;
+  title?: string;
+}
+
+type MySchema = Schema<{
+  doc: 'doc';
+  paragraph: 'paragraph';
+  heading: 'heading';
+  text: 'text';
+  image: 'image';
+  blockquote: 'blockquote';
+  list_item: 'list_item';
+  bullet_list: 'bullet_list';
+  ordered_list: 'ordered_list';
+}, {
+  strong: 'strong';
+  em: 'em';
+  link: 'link';
+}>;
+
+// 使用类型
+const node: PMNode<MySchema> = state.doc.nodeAt(0);
+if (node.type.name === 'heading') {
+  const level: number = node.attrs.level;
+}
+```
+
+## 7. 常见问题排查
+
+| 问题 | 原因 | 解决方案 |
+|------|------|----------|
+| 输入无响应 | Schema 未定义 text 节点 | 确保 Schema 包含 text 节点 |
+| 粘贴内容丢失 | clipboardParser 未设置 | 设置正确的 clipboardParser |
+| 装饰器不更新 | 插件 state 未正确实现 | 检查 apply 方法返回值 |
+| 选择位置错误 | DOMObserver 不同步 | 检查是否正确更新状态 |
+| 撤销无法使用 | 历史插件未添加 | 添加 history() 插件 |