文档内脑图， WORD 脑图扩展

需求：WORD 中不涉及具体脑图代码、只渲染需要操作的脑图（性能）、兼容历史记录

1. 属性：height、脑图 ID、脑图快照。默认显示快照，选中后再渲染脑图

   1
   addAttributes() {
   2
     return {
   3
       height: { // 默认半屏高
   4
         default: '50vh'
   5
       },
   6
       'mind-id': {
   7
         default: ''
   8
       },
   9
       snapshot: { // 默认快照
   10
         default: 'https://faworkfile.xxx.cn/userUpload/docs/rjU0JlwXSfvtcdjiGExIQgQIczZUExReBjOcqzTI.svg'
   11
       }
   12
     }
   13
   },

2. 方法：插入脑图、更新脑图、删除脑图。插入脑图时发送创建请求，请求失败删除脑图，成功以 addToHistory：false 更新脑图

   1
   addCommands() {
   2
   return {
   3
     // prettier-ignore
   4
     setMind: () => ({ commands, editor }) => {
   5
       api_create_mind().then((mindId: string) => {
   6
         // 更新ID
   7
         editor.commands.updateMind({ oldId: mindIngId, newId: mindId })
   8
       }).catch(err => {
   9
         ElMessage.error(err.message)
   10
         // 删除节点
   11
         editor.commands.removeMind(mindIngId)
   12
       })
   13
       const mindIngId = `ing-${uuidv4()}` // 创建中的临时ID
   14
       return commands.insertContent({
   15
         type: this.name,
   16
         attrs: { 'mind-id': mindIngId }
   17
       })
   18
     },
   19
     // prettier-ignore
   20
     updateMind: ({ oldId, newId }) => ({ tr }) => {
   21
       let currPos = -1
   22
       tr.doc.nodesBetween(0, tr.doc.content.size, (node, pos) => {
   23
         if (currPos !== -1 || node.type.name !== this.name) return false
   24
         if (node.attrs['mind-id'] !== oldId) return false
   25
         currPos = pos
   26
       })
   27
       if (currPos > -1) {
   28
         // 以 不要历史记录的方法 更新脑图ID
   29
         tr.setMeta('addToHistory', false)
   30
         tr.setNodeMarkup(currPos, undefined, { 'mind-id': newId })
   31
       }
   32
       return true
   33
     },
   34
     // prettier-ignore
   35
     removeMind: (mindId: string) => ({ tr, state }) => {
   36
       let currPos = -1
   37
       tr.doc.nodesBetween(0, tr.doc.content.size, (node, pos) => {
   38
         if (currPos !== -1 || node.type.name !== this.name) return false
   39
         if (node.attrs['mind-id'] !== mindId) return false
   40
         currPos = pos
   41
       })
   42
       if (currPos > -1) {
   43
         // 删除脑图节点
   44
         tr.replaceWith(currPos, currPos + 1, state.schema.nodes.paragraph.create())
   45
       }
   46
       return true
   47
     }
   48
   }
   49
   },

   展开收起

3. QtableMind.vue

   a. ID 为临时 ID 显示空节点 b. 节点未聚焦显示快照（一张图片，在顶层），一个空 DIV <div class="mind-node" :data-id="mindId"></div> c. 节点聚焦，发送 statusChange 事件给 web 项目 { type: ‘renderMind’, payload: mindId } • web 项目收到后调用 mind/InDoc.vue • mind/InDoc.vue 组件以 <teleport to='.mind-node[data-id="mindId"]'> 方式渲染进 WORD • MIND 渲染完成后发送自定义事件 mindRendered • onBeforeUnmount 钩子中生成脑图快照 base64 d. 收到 mindRendered 事件隐藏快照 e. 节点失焦，发送 statusChange 事件给 web 项目 { type: ‘renderMind’, payload: ” } • web 项目收到后删除 mind/InDoc.vue • mind/InDoc.vue onBeforeUnmount 钩子生成脑图快照 base64，发送自定义事件 mindDestroy f. 收到 mindDestroy 事件以 base64 当作快照 g. 将 base64 上传到服务器，拿到 URL 后替换节点 snapshot 属性