feat(mind):为编辑器添加插入思维导图功能

packages/docs/package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.2",
+    "@logicflow/core": "^2.0.16",
+    "@logicflow/extension": "^2.0.21",
     "@opentiny/fluent-editor": "workspace:^",
     "emoji-mart": "^5.6.0",
     "highlight.js": "^10.2.0",
@@ -26,6 +28,7 @@
     "quill-markdown-shortcuts": "^0.0.10",
     "quill-table-up": "^2.1.7",
     "quill-toolbar-tip": "^0.0.13",
+    "simple-mind-map": "0.14.0-fix.1",
     "vue": "^3.5.13",
     "vue-toastification": "2.0.0-rc.5"
   },

packages/fluent-editor/package.json

@@ -40,6 +40,8 @@
   "devDependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.2",
+    "@logicflow/core": "^2.0.16",
+    "@logicflow/extension": "^2.0.21",
     "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.12",
     "commander": "^6.2.0",
@@ -51,6 +53,7 @@
     "parchment": "^3.0.0",
     "sass": "^1.47.0",
     "shelljs": "^0.8.4",
+    "simple-mind-map": "0.14.0-fix.1",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",
     "typescript": "^4.9.5",

packages/fluent-editor/src/config/i18n/en-us.ts

@@ -72,6 +72,7 @@ export const EN_US = {
   'strike': 'Strikethrough',
   'image': 'Image',
   'file': 'File',
+  'mind-map': 'Mind Map',
   'link': 'Hyperlink',
   'code': 'Inline Code',
   'table': 'Table',

packages/fluent-editor/src/config/i18n/zh-cn.ts

@@ -70,6 +70,7 @@ export const ZH_CN = {
   'strike': '删除线',
   'image': '图片',
   'file': '文件',
+  'mind-map': '思维导图',
   'link': '超链接',
   'divider': '分割线',
   'code': '行内代码',
@@ -133,5 +134,4 @@ export const ZH_CN = {
   'DeleteTable': '删除当前表格',
   'BackgroundColor': '设置背景颜色',
   'BorderColor': '设置边框颜色',
-
 }

packages/fluent-editor/src/config/types/editor-modules.interface.ts

@@ -44,4 +44,5 @@ export interface IEditorModules {
   'file'?: boolean
   'mathlive'?: boolean
   'image'?: boolean | Partial<BlotFormatterOptionsInput>
+  'mind-map'?: boolean
 }

packages/fluent-editor/src/fluent-editor.ts

@@ -14,6 +14,7 @@ import I18N from './modules/i18n'
 import { LinkBlot } from './modules/link' // 超链接
 import { MathliveModule } from './modules/mathlive' // latex公式
 import { Mention } from './modules/mention' // @提醒
+import { MindMapModule } from './modules/mind-map' // 思维导图
 import { ShortCutKey } from './modules/shortcut-key'
 import Syntax from './modules/syntax' // 代码块高亮
 import { BetterToolbar } from './modules/toolbar' // 工具栏
@@ -57,6 +58,7 @@ FluentEditor.register(
     'modules/toolbar': BetterToolbar,
     'modules/uploader': FileUploader,
     'modules/shortcut-key': ShortCutKey,
+    'modules/mind-map': MindMapModule,
 
     'themes/snow': SnowTheme,
 

packages/fluent-editor/src/modules/index.ts

@@ -9,6 +9,7 @@ export * from './i18n'
 export * from './link'
 export * from './mathlive'
 export * from './mention'
+export * from './mind-map'
 export * from './shortcut-key'
 export * from './syntax'
 export * from './table-up'

packages/fluent-editor/src/modules/mind-map/formats/mind-map-blot.ts

@@ -0,0 +1,106 @@
+import type { Root } from 'parchment'
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block'
+import type FluentEditor from '../../../core/fluent-editor'
+import Quill from 'quill'
+import SimpleMindMap from 'simple-mind-map'
+import Drag from 'simple-mind-map/src/plugins/Drag.js'
+import Export from 'simple-mind-map/src/plugins/Export.js'
+import { initContextMenu } from '../modules/context-menu'
+import { createControlPanel } from '../modules/control-panel'
+import '../style/mind-map.scss'
+
+const BlockEmbed = Quill.import('blots/embed') as typeof TypeBlockEmbed
+
+class MindMapPlaceholderBlot extends BlockEmbed {
+  static blotName = 'mind-map-placeholder'
+  static tagName = 'div'
+  static className = 'ql-mind-map'
+  mindMap: SimpleMindMap | null = null
+  data: any
+  zoomCount = 0
+  contextMenu: HTMLElement | null = null
+  currentNode: any = null
+
+  constructor(scroll: Root, domNode: HTMLElement) {
+    super(scroll, domNode)
+    this.domNode.classList.add('ql-mind-map-container')
+    this.domNode.style.height = '500px'
+    this.domNode.style.border = '1px solid #e8e8e8'
+    this.data = MindMapPlaceholderBlot.value(this.domNode)
+    this.initMindMap()
+  }
+
+  static value(domNode: HTMLElement): any {
+    const dataStr = JSON.parse(domNode.getAttribute('data-mind-map'))
+    return dataStr.root ? dataStr.root : dataStr
+  }
+
+  static create(value: any): HTMLElement {
+    const node = super.create() as HTMLElement
+    if (value) {
+      node.setAttribute('data-mind-map', JSON.stringify(value))
+    }
+    return node
+  }
+
+  initMindMap(): void {
+    if (this.domNode.isConnected) {
+      this.insertMindMapEditor()
+    }
+    else {
+      const observer = new MutationObserver(() => {
+        if (this.domNode.isConnected) {
+          this.insertMindMapEditor()
+          observer.disconnect()
+        }
+      })
+      observer.observe(document.body, { childList: true, subtree: true })
+    }
+  }
+
+  insertMindMapEditor(): void {
+    this.domNode.style.width = '100%'
+    this.domNode.style.height = '500px'
+    while (this.domNode.firstChild) {
+      this.domNode.removeChild(this.domNode.firstChild)
+    }
+    SimpleMindMap.usePlugin(Drag).usePlugin(Export)
+    this.mindMap = new SimpleMindMap ({
+      el: this.domNode,
+      mousewheelAction: 'zoom',
+      disableMouseWheelZoom: true,
+      data: this.data,
+    } as any)
+
+    const handleScroll = () => {
+      if (this.mindMap && this.domNode && this.domNode.isConnected) {
+        this.mindMap.getElRectInfo()
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    this.domNode.addEventListener('remove', () => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+    const quill = this.scroll as unknown as FluentEditor
+    createControlPanel(this, quill) // 创建控制面板
+    initContextMenu(this, quill) // 初始化右键菜单
+    this.mindMap.on('node_tree_render_end', () => {
+      this.data = this.mindMap.getData({})
+      this.domNode.setAttribute('data-mind-map', JSON.stringify(this.data))
+      this.scroll.update([], {})
+    })
+    if (this.mindMap) {
+      this.mindMap.setData(this.data)
+    }
+  }
+
+  value(): any {
+    return this.data
+  }
+}
+
+Quill.register(MindMapPlaceholderBlot)
+
+export default MindMapPlaceholderBlot

packages/fluent-editor/src/modules/mind-map/i18n/en-us.ts

@@ -0,0 +1,28 @@
+export const MIND_MAP_EN_US = {
+  'mindMap.contextMenu.copy': 'Copy',
+  'mindMap.contextMenu.cut': 'Cut',
+  'mindMap.contextMenu.paste': 'Paste',
+  'mindMap.contextMenu.deleteContent': 'Delete',
+  'mindMap.controlPanel.zoomOut': 'Out',
+  'mindMap.controlPanel.zoomIn': 'In',
+  'mindMap.controlPanel.fit': 'Fit',
+  'mindMap.controlPanel.back': 'Back',
+  'mindMap.controlPanel.forward': 'Forward',
+  'mindMap.controlPanel.export': 'Export',
+  'mindMap.controlPanel.import': 'Import',
+  'mindMap.controlPanel.inserChildNode': 'Child',
+  'mindMap.controlPanel.inserNode': 'Node',
+  'mindMap.controlPanel.inserParentNode': 'Parent',
+  'mindMap.controlPanel.removeNode': 'Remove',
+  'mindMap.controlPanel.zoomOutTitle': 'Zoom Out View',
+  'mindMap.controlPanel.zoomInTitle': 'Zoom In View',
+  'mindMap.controlPanel.fitTitle': 'Fit View Size',
+  'mindMap.controlPanel.backTitle': 'Step Back',
+  'mindMap.controlPanel.forwardTitle': 'Step Forward',
+  'mindMap.controlPanel.exportTitle': 'Export Mind Map',
+  'mindMap.controlPanel.importTitle': 'Import Mind Map',
+  'mindMap.controlPanel.inserChildNodeTitle': 'Insert Child Node',
+  'mindMap.controlPanel.inserNodeTitle': 'Insert Sibling Node',
+  'mindMap.controlPanel.inserParentNodeTitle': 'Insert Parent Node',
+  'mindMap.controlPanel.removeNodeTitle': 'Delete Current Node',
+}

packages/fluent-editor/src/modules/mind-map/i18n/index.ts

@@ -0,0 +1,9 @@
+import { MIND_MAP_EN_US } from './en-us'
+import { MIND_MAP_ZH_CN } from './zh-cn'
+
+export function registerMindMapI18N(I18N: any) {
+  I18N.register({
+    'en-US': MIND_MAP_EN_US,
+    'zh-CN': MIND_MAP_ZH_CN,
+  }, false)
+}

packages/fluent-editor/src/modules/mind-map/i18n/zh-cn.ts

@@ -0,0 +1,28 @@
+export const MIND_MAP_ZH_CN = {
+  'mindMap.contextMenu.copy': '复制',
+  'mindMap.contextMenu.cut': '剪切',
+  'mindMap.contextMenu.paste': '粘贴',
+  'mindMap.contextMenu.deleteContent': '删除',
+  'mindMap.controlPanel.zoomOut': '缩小',
+  'mindMap.controlPanel.zoomIn': '放大',
+  'mindMap.controlPanel.fit': '适应',
+  'mindMap.controlPanel.back': '上一步',
+  'mindMap.controlPanel.forward': '下一步',
+  'mindMap.controlPanel.export': '导出',
+  'mindMap.controlPanel.import': '导入',
+  'mindMap.controlPanel.inserChildNode': '子节点',
+  'mindMap.controlPanel.inserNode': '同级节点',
+  'mindMap.controlPanel.inserParentNode': '父节点',
+  'mindMap.controlPanel.removeNode': '删除',
+  'mindMap.controlPanel.zoomOutTitle': '缩小视图',
+  'mindMap.controlPanel.zoomInTitle': '放大视图',
+  'mindMap.controlPanel.fitTitle': '适应视图大小',
+  'mindMap.controlPanel.backTitle': '后退一步',
+  'mindMap.controlPanel.forwardTitle': '前进一步',
+  'mindMap.controlPanel.exportTitle': '导出思维导图',
+  'mindMap.controlPanel.importTitle': '导入思维导图',
+  'mindMap.controlPanel.inserChildNodeTitle': '插入子节点',
+  'mindMap.controlPanel.inserNodeTitle': '插入同级节点',
+  'mindMap.controlPanel.inserParentNodeTitle': '插入父节点',
+  'mindMap.controlPanel.removeNodeTitle': '删除当前节点',
+}

packages/fluent-editor/src/modules/mind-map/index.ts

@@ -0,0 +1,48 @@
+import type Quill from 'quill'
+import './formats/mind-map-blot'
+
+export class MindMapModule {
+  quill: Quill
+  toolbar: any
+
+  constructor(quill: Quill, options: any) {
+    this.quill = quill
+    this.toolbar = quill.getModule('toolbar')
+    const domNode = document.querySelector('.ql-mind-map')
+
+    if (domNode) {
+      domNode.addEventListener('click', () => {
+        this.insertMindMapEditor()
+      })
+    }
+  }
+
+  public insertMindMapEditor(): void {
+    const range = this.quill.getSelection()
+    if (range) {
+      const defaultData = {
+        data: {
+          text: '根节点',
+          expand: true,
+          uid: '36bae545-da0b-4c08-be14-ff05f7f05d0a',
+          isActive: false,
+        },
+        children: [
+          {
+            data: {
+              text: '二级节点',
+              uid: 'ef0895d2-b5cc-4214-b0ee-e29f8f02420d',
+              expand: true,
+              richText: false,
+              isActive: false,
+            },
+            children: [],
+          },
+        ],
+        smmVersion: '0.14.0-fix.1',
+      }
+      this.quill.insertEmbed(range.index, 'mind-map-placeholder', defaultData, 'user')
+      this.quill.setSelection(range.index + 1, 0)
+    }
+  }
+}