Merge pull request #176 from fantasticit/fix/tiptap

packages/client/src/thirtypart/kityminder/index.ts

@@ -24,15 +24,25 @@ export function renderMind(options: Options) {
   const Editor = window.kityminder.Editor;
   const editor = new Editor(options.container);
   const mind = editor.minder;
+  mind.editor = editor;
 
   options.data && mind.importJson(options.data);
 
   if (!options.isEditable) {
     mind.disable();
+    mind.setStatus('readonly');
   }
 
   setTimeout(() => {
     mind.execCommand('camera');
+
+    if (!options.isEditable) {
+      const selectedNodes = mind.getSelectedNodes();
+
+      if (selectedNodes.length) {
+        mind.removeSelectedNodes(selectedNodes);
+      }
+    }
   }, 0);
 
   return mind;

packages/client/src/thirtypart/kityminder/kity-core/core/event.js

@@ -138,6 +138,9 @@ define(function (require, exports, module) {
     },
 
     _bindEvents: function () {
+      if (this.getStatus() === 'readonly') {
+        return this;
+      }
       /* jscs:disable maximumLineLength */
       this._paper.on(
         'click dblclick mousedown contextmenu mouseup mousemove mouseover mousewheel DOMMouseScroll touchstart touchmove touchend dragenter dragleave drop',

packages/client/src/thirtypart/kityminder/kity-core/core/focus.js

@@ -17,6 +17,10 @@ define(function (require, exports, module) {
 
   kity.extendClass(Minder, {
     focus: function () {
+      if (this.getStatus() === 'readonly') {
+        return this;
+      }
+
       if (!this.isFocused()) {
         var renderTarget = this._renderTarget;
         renderTarget.classList.add('focus');

packages/client/src/thirtypart/kityminder/kity-core/core/keyreceiver.js

@@ -23,6 +23,10 @@ define(function (require, exports, module) {
 
   kity.extendClass(Minder, {
     _initKeyReceiver: function () {
+      if (this.getStatus() === 'readonly') {
+        return;
+      }
+
       if (this._keyReceiver) return;
 
       var receiver = (this._keyReceiver = document.createElement('input'));
@@ -34,6 +38,10 @@ define(function (require, exports, module) {
       var minder = this;
 
       listen(receiver, 'keydown keyup keypress copy paste blur focus input', function (e) {
+        if (minder.getStatus() === 'readonly') {
+          return;
+        }
+
         switch (e.type) {
           case 'blur':
             minder.blur();
@@ -50,14 +58,24 @@ define(function (require, exports, module) {
       });
 
       this.on('focus', function () {
+        if (this.getStatus() === 'readonly') {
+          return;
+        }
         receiver.select();
         receiver.focus();
       });
       this.on('blur', function () {
+        if (this.getStatus() === 'readonly') {
+          return;
+        }
         receiver.blur();
       });
 
       if (this.isFocused()) {
+        if (this.getStatus() === 'readonly') {
+          return;
+        }
+
         receiver.select();
         receiver.focus();
       }

packages/client/src/thirtypart/kityminder/kity-core/module/expand.js

@@ -142,6 +142,8 @@ define(function (require, exports, module) {
 
       initEvent: function (node) {
         this.on('mousedown', function (e) {
+          if (minder._status === 'readonly') return;
+
           minder.select([node], true);
           if (node.isExpanded()) {
             node.collapse();

packages/client/src/thirtypart/kityminder/kity-core/module/priority.js

@@ -82,7 +82,7 @@ define(function (require, exports, module) {
           mask.fill(color[0]);
         }
 
-        number.setContent(value);
+        number.setContent('P' + value);
       },
     });
 

packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js

@@ -21,9 +21,11 @@ define(function (require, exports, module) {
     var receiverElement = receiver.element;
     var isGecko = window.kity.Browser.gecko;
     // setup everything to go
+
     setupReciverElement();
     setupFsm();
     setupHotbox();
+
     // expose editText()
     this.editText = editText;
     // listen the fsm changes, make action.
@@ -32,6 +34,8 @@ define(function (require, exports, module) {
       fsm.when('* -> input', enterInputMode);
       // when exited, commit or exit depends on the exit reason
       fsm.when('input -> *', function (exit, enter, reason) {
+        if (minder._status === 'readonly') return;
+
         switch (reason) {
           case 'input-cancel':
             return exitInputMode();
@@ -43,11 +47,15 @@ define(function (require, exports, module) {
       });
       // lost focus to commit
       receiver.onblur(function (e) {
+        if (minder._status === 'readonly') return;
+
         if (fsm.state() == 'input') {
           fsm.jump('normal', 'input-commit');
         }
       });
       minder.on('beforemousedown', function () {
+        if (minder._status === 'readonly') return;
+
         if (fsm.state() == 'input') {
           fsm.jump('normal', 'input-commit');
         }
@@ -69,9 +77,14 @@ define(function (require, exports, module) {
       minder.on('layoutallfinish viewchange viewchanged selectionchange', function (e) {
         // viewchange event is too frequenced, lazy it
         if (e.type == 'viewchange' && fsm.state() != 'input') return;
-        updatePosition();
+
+        if (minder.getStatus() !== 'readonly') {
+          updatePosition();
+        }
       });
-      updatePosition();
+      if (minder.getStatus() !== 'readonly') {
+        updatePosition();
+      }
     }
     // edit entrance in hotbox
     function setupHotbox() {
@@ -121,6 +134,8 @@ define(function (require, exports, module) {
      * @Date 2015-12-2
      */
     function enterInputMode() {
+      if (minder._status === 'readonly') return;
+
       var node = minder.getSelectedNode();
       if (node) {
         var fontSize = node.getData('font-size') || node.getStyle('font-size');
@@ -141,6 +156,13 @@ define(function (require, exports, module) {
      * @Date: 2015.9.16
      */
     function commitInputText(textNodes) {
+      if (minder._status === 'readonly') return;
+
+      var node = minder.getSelectedNode();
+      if (!node) {
+        return;
+      }
+
       var text = '';
       var TAB_CHAR = '\t',
         ENTER_CHAR = '\n',
@@ -282,6 +304,8 @@ define(function (require, exports, module) {
      * @Date: 2015.9.16
      */
     function commitInputNode(node, text) {
+      if (minder._status === 'readonly') return;
+
       try {
         minder.decodeData('text', text).then(function (json) {
           function importText(node, json, minder) {
@@ -309,6 +333,8 @@ define(function (require, exports, module) {
       }
     }
     function commitInputResult() {
+      if (minder._status === 'readonly') return;
+
       /**
        * @Desc: 进行如下处理：
        *             根据用户的输入判断是否生成新的节点
@@ -338,10 +364,14 @@ define(function (require, exports, module) {
       }
     }
     function exitInputMode() {
+      if (minder._status === 'readonly') return;
+
       receiverElement.classList.remove('input');
       receiver.selectAll();
     }
     function updatePosition() {
+      if (minder._status === 'readonly') return;
+
       var planed = updatePosition;
       var focusNode = minder.getSelectedNode();
       if (!focusNode) return;

packages/client/src/thirtypart/kityminder/kity-editor/runtime/jumping.js

@@ -48,18 +48,26 @@ define(function (require, exports, module) {
     var receiverElement = receiver.element;
     var hotbox = this.hotbox;
     var compositionLock = false;
+    var that = this;
 
     // normal -> *
     receiver.listen('normal', function (e) {
+      if (minder._status === 'readonly') return;
       // 为了防止处理进入edit模式而丢失处理的首字母,此时receiver必须为enable
       receiver.enable();
       // normal -> hotbox
       if (e.is('Space')) {
+        // 非编辑模式
+        if (that.minder.getStatus() === 'readonly') {
+          return;
+        }
+
         e.preventDefault();
         // safari下Space触发hotbox,然而这时Space已在receiver上留下作案痕迹,因此抹掉
         if (kity.Browser.safari) {
           receiverElement.innerHTML = '';
         }
+
         return fsm.jump('hotbox', 'space-trigger');
       }
 
@@ -91,6 +99,8 @@ define(function (require, exports, module) {
 
     // hotbox -> normal
     receiver.listen('hotbox', function (e) {
+      if (minder._status === 'readonly') return;
+
       receiver.disable();
       e.preventDefault();
       var handleResult = hotbox.dispatch(e);
@@ -101,6 +111,8 @@ define(function (require, exports, module) {
 
     // input => normal
     receiver.listen('input', function (e) {
+      if (minder._status === 'readonly') return;
+
       receiver.enable();
       if (e.type == 'keydown') {
         if (e.is('Enter')) {
@@ -138,6 +150,8 @@ define(function (require, exports, module) {
     container.addEventListener(
       'mousedown',
       function (e) {
+        if (minder._status === 'readonly') return;
+
         if (e.button == MOUSE_RB) {
           e.preventDefault();
         }
@@ -155,6 +169,8 @@ define(function (require, exports, module) {
     container.addEventListener(
       'mousewheel',
       function (e) {
+        if (minder._status === 'readonly') return;
+
         if (fsm.state() == 'hotbox') {
           hotbox.active(Hotbox.STATE_IDLE);
           fsm.jump('normal', 'mousemove-blur');
@@ -164,12 +180,14 @@ define(function (require, exports, module) {
     );
 
     container.addEventListener('contextmenu', function (e) {
+      if (minder._status === 'readonly') return;
       e.preventDefault();
     });
 
     container.addEventListener(
       'mouseup',
       function (e) {
+        if (minder._status === 'readonly') return;
         if (fsm.state() != 'normal') {
           return;
         }
@@ -186,6 +204,7 @@ define(function (require, exports, module) {
 
     // 阻止热盒事件冒泡，在热盒正确执行前导致热盒关闭
     hotbox.$element.addEventListener('mousedown', function (e) {
+      if (minder._status === 'readonly') return;
       e.stopPropagation();
     });
   }

packages/client/src/tiptap/core/extensions/callout.ts

@@ -69,7 +69,7 @@ export const Callout = Node.create({
   addInputRules() {
     return [
       wrappingInputRule({
-        find: /^\$callout $/,
+        find: /^\$callout\$$/,
         type: this.type,
         getAttributes: (match) => {
           return { type: match[1] };

packages/client/src/tiptap/core/extensions/columns.ts

@@ -268,7 +268,7 @@ export const Columns = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$columns $/,
+        find: /^\$columns\$$/,
         type: this.type,
         getAttributes: () => {
           return { type: 'left-right', columns: 2 };

packages/client/src/tiptap/core/extensions/countdown.ts

@@ -78,7 +78,7 @@ export const Countdown = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$countdown $/,
+        find: /^\$countdown\$$/,
         type: this.type,
         getAttributes: () => {
           return { width: '100%' };

packages/client/src/tiptap/core/extensions/excalidraw.ts

@@ -103,7 +103,7 @@ export const Excalidraw = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$excalidraw $/,
+        find: /^\$excalidraw\$$/,
         type: this.type,
         getAttributes: () => {
           return { width: '100%' };

packages/client/src/tiptap/core/extensions/flow.ts

@@ -12,6 +12,11 @@ export interface IFlowAttrs {
   createUser?: IUser['id'];
 }
 
+interface IFlowOptions {
+  HTMLAttributes: Record<string, any>;
+  getCreateUserId: () => string | number;
+}
+
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     flow: {
@@ -20,7 +25,7 @@ declare module '@tiptap/core' {
   }
 }
 
-export const Flow = Node.create({
+export const Flow = Node.create<IFlowOptions>({
   name: 'flow',
   group: 'block',
   selectable: true,
@@ -55,6 +60,7 @@ export const Flow = Node.create({
       HTMLAttributes: {
         class: 'flow',
       },
+      getCreateUserId: () => null,
     };
   },
 
@@ -102,10 +108,10 @@ export const Flow = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$flow $/,
+        find: /^\$flow\$$/,
         type: this.type,
         getAttributes: () => {
-          return { width: '100%' };
+          return { width: '100%', defaultShowPicker: true, createUser: this.options.getCreateUserId() };
         },
       }),
     ];

packages/client/src/tiptap/core/extensions/iframe.ts

@@ -98,7 +98,7 @@ export const Iframe = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$iframe $/,
+        find: /^\$iframe\$$/,
         type: this.type,
         getAttributes: () => {
           return { width: '100%' };

packages/client/src/tiptap/core/extensions/katex.ts

@@ -10,6 +10,11 @@ export type IKatexAttrs = {
   createUser?: IUser['id'];
 };
 
+interface IKatexOptions {
+  HTMLAttributes: Record<string, any>;
+  getCreateUserId: () => string | number;
+}
+
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     katex: {
@@ -18,7 +23,7 @@ declare module '@tiptap/core' {
   }
 }
 
-export const Katex = Node.create({
+export const Katex = Node.create<IKatexOptions>({
   name: 'katex',
   group: 'block',
   selectable: true,
@@ -30,6 +35,7 @@ export const Katex = Node.create({
       HTMLAttributes: {
         class: 'katex',
       },
+      getCreateUserId: () => null,
     };
   },
 
@@ -72,8 +78,11 @@ export const Katex = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$katex $/,
+        find: /^\$katex\$$/,
         type: this.type,
+        getAttributes: () => {
+          return { defaultShowPicker: true, createUser: this.options.getCreateUserId() };
+        },
       }),
     ];
   },

packages/client/src/tiptap/core/extensions/mind.ts

@@ -22,6 +22,11 @@ export interface IMindAttrs {
   zoom?: number;
 }
 
+interface IMindOptions {
+  HTMLAttributes: Record<string, any>;
+  getCreateUserId: () => string | number;
+}
+
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     mind: {
@@ -30,7 +35,7 @@ declare module '@tiptap/core' {
   }
 }
 
-export const Mind = Node.create({
+export const Mind = Node.create<IMindOptions>({
   name: 'mind',
   group: 'block',
   selectable: true,
@@ -66,6 +71,7 @@ export const Mind = Node.create({
       HTMLAttributes: {
         class: 'mind',
       },
+      getCreateUserId: () => null,
     };
   },
 
@@ -113,10 +119,10 @@ export const Mind = Node.create({
   addInputRules() {
     return [
       nodeInputRule({
-        find: /^\$mind $/,
+        find: /^\$mind\$$/,
         type: this.type,
         getAttributes: () => {
-          return { width: '100%' };
+          return { width: '100%', defaultShowPicker: true, createUser: this.options.getCreateUserId() };
         },
       }),
     ];

packages/client/src/tiptap/core/extensions/placeholder.ts

@@ -1,3 +1,109 @@
-import BuiltInPlaceholder from '@tiptap/extension-placeholder';
+import { Editor, Extension } from '@tiptap/core';
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 
-export const Placeholder = BuiltInPlaceholder;
+export interface PlaceholderOptions {
+  emptyEditorClass: string;
+  emptyNodeClass: string;
+  placeholder: ((PlaceholderProps: { editor: Editor; node: ProsemirrorNode; pos: number }) => string) | string;
+  showOnlyWhenEditable: boolean;
+  showOnlyCurrent: boolean;
+  includeChildren: boolean;
+}
+
+export const Placeholder = Extension.create<PlaceholderOptions>({
+  name: 'placeholder',
+
+  addOptions() {
+    return {
+      emptyEditorClass: 'is-editor-empty',
+      emptyNodeClass: 'is-empty',
+      placeholder: 'Write something …',
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false,
+    };
+  },
+
+  addStorage() {
+    return new Map();
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          decorations: ({ doc, selection }) => {
+            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+            const { anchor } = selection;
+            const decorations: Decoration[] = [];
+
+            if (!active) {
+              return;
+            }
+
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+              const isEmpty = !node.isLeaf && !node.childCount;
+
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+                const classes = [this.options.emptyNodeClass];
+
+                if (this.editor.isEmpty) {
+                  classes.push(this.options.emptyEditorClass);
+                }
+
+                const start = pos;
+                const end = pos + node.nodeSize;
+                let placeholder = '';
+
+                if (this.editor.isEditable) {
+                  const key = `${start}-${end}`;
+
+                  if (!this.editor.storage[this.name].has(key)) {
+                    this.editor.storage[this.name].set(
+                      key,
+                      typeof this.options.placeholder === 'function'
+                        ? this.options.placeholder({
+                            editor: this.editor,
+                            node,
+                            pos,
+                          })
+                        : this.options.placeholder
+                    );
+                  }
+                  placeholder = this.editor.storage[this.name].get(key);
+
+                  setTimeout(() => {
+                    this.editor.storage[this.name].delete(key);
+                  }, 500);
+                } else {
+                  placeholder =
+                    typeof this.options.placeholder === 'function'
+                      ? this.options.placeholder({
+                          editor: this.editor,
+                          node,
+                          pos,
+                        })
+                      : this.options.placeholder;
+                }
+
+                const decoration = Decoration.node(start, end, {
+                  'class': classes.join(' '),
+                  'data-placeholder': placeholder,
+                });
+
+                decorations.push(decoration);
+              }
+
+              return this.options.includeChildren;
+            });
+
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+});

packages/client/src/tiptap/core/extensions/quick-insert.ts

@@ -8,7 +8,7 @@ import { insertMenuLRUCache, QUICK_INSERT_COMMANDS, transformToCommands } from '
 import { MenuList } from 'tiptap/core/wrappers/menu-list';
 
 export const QuickInsertPluginKey = new PluginKey('quickInsert');
-const extensionName = 'quickInsert'
+const extensionName = 'quickInsert';
 
 export const QuickInsert = Node.create({
   name: extensionName,
@@ -63,8 +63,8 @@ export const QuickInsert = Node.create({
         top: 0,
         right: 0,
         bottom: 0,
-      }
+      },
-    }
+    };
   },
 }).configure({
   suggestion: {

packages/client/src/tiptap/core/menus/excalidraw/modal.tsx

@@ -32,7 +32,6 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
   );
 
   const renderExcalidraw = useCallback((app) => {
-    console.log('render', app);
     setTimeout(() => {
       app.refresh();
     });
@@ -54,7 +53,14 @@ export const ExcalidrawSettingModal: React.FC<IProps> = ({ editor }) => {
       return;
     }
 
+    /**
+     * FIXME: 绘图更新后会滚动 dom 到顶点，原因未知，在此 hack 修复下！
+     */
+    const currentScrollTop = document.querySelector('main#js-tocs-container')?.scrollTop;
     editor.chain().focus().setExcalidraw({ data }).run();
+    setTimeout(() => {
+      document.querySelector('main#js-tocs-container').scrollTop = currentScrollTop;
+    });
     toggleVisible(false);
   }, [Excalidraw, editor, data, toggleVisible]);
 

packages/client/src/tiptap/core/menus/katex/bubble.tsx

@@ -43,7 +43,7 @@ export const KatexBubbleMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
 
   useEffect(() => {
     if (visible) {
-      setTimeout(() => ref.current?.focus(), 100);
+      setTimeout(() => ref.current?.focus(), 200);
     }
   }, [visible]);
 

packages/client/src/tiptap/core/menus/mind/constant.ts

@@ -1,3 +1,36 @@
+const getProgressTitle = (index) => {
+  switch (index) {
+    case 0:
+      return '移除进度';
+    case 1:
+      return '未开始';
+    case 9:
+      return '全部完成';
+    default:
+      return '完成' + (index - 1) + '/8';
+  }
+};
+
+export const PROGRESSES = Array.from({ length: 10 }, (_, i) => {
+  return {
+    text: getProgressTitle(i),
+    value: i,
+  };
+});
+
+export const PRIORITIES = [
+  {
+    text: '移除优先级',
+    value: 0,
+  },
+  ...Array.from({ length: 9 }, (_, i) => {
+    return {
+      text: `P${i + 1}`,
+      value: i + 1,
+    };
+  }),
+];
+
 export const TEMPLATES = [
   {
     label: '经典',

packages/client/src/tiptap/core/menus/mind/modal.tsx

@@ -46,7 +46,14 @@ export const MindSettingModal: React.FC<IProps> = ({ editor }) => {
       return;
     }
     const data = mind.exportJson();
+    /**
+     * FIXME: 百度脑图更新后会滚动 dom 到顶点，原因未知，在此 hack 修复下！
+     */
+    const currentScrollTop = document.querySelector('main#js-tocs-container')?.scrollTop;
     editor.chain().focus().setMind({ data }).run();
+    setTimeout(() => {
+      document.querySelector('main#js-tocs-container').scrollTop = currentScrollTop;
+    });
     toggleVisible(false);
   }, [editor, toggleVisible, mind]);
 
@@ -65,6 +72,12 @@ export const MindSettingModal: React.FC<IProps> = ({ editor }) => {
     };
   }, [editor, toggleVisible]);
 
+  useEffect(() => {
+    if (!visible && mind) {
+      mind.destroy();
+    }
+  }, [visible, mind]);
+
   return (
     <Modal
       centered
@@ -75,6 +88,7 @@ export const MindSettingModal: React.FC<IProps> = ({ editor }) => {
       onOk={save}
       okText="保存"
       cancelText="退出"
+      motion={false}
     >
       <div
         style={{

packages/client/src/tiptap/core/menus/mind/toolbar/bgcolor.tsx

@@ -0,0 +1,39 @@
+import { IconMark } from '@douyinfe/semi-icons';
+import { Button, Tooltip } from '@douyinfe/semi-ui';
+import { ColorPicker } from 'components/color-picker';
+
+export const BgColor = ({ bgColor, selectedNode, setBackgroundColor }) => {
+  return (
+    <ColorPicker
+      onSetColor={(color) => {
+        setBackgroundColor(color);
+      }}
+    >
+      <Tooltip content="背景色" zIndex={10000}>
+        <Button
+          disabled={!selectedNode}
+          type="tertiary"
+          theme={bgColor ? 'light' : 'borderless'}
+          icon={
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+              }}
+            >
+              <IconMark />
+              <span
+                style={{
+                  width: 12,
+                  height: 2,
+                  backgroundColor: bgColor,
+                }}
+              ></span>
+            </div>
+          }
+        />
+      </Tooltip>
+    </ColorPicker>
+  );
+};

packages/client/src/tiptap/core/menus/mind/toolbar/font-color.tsx

@@ -0,0 +1,39 @@
+import { IconFont } from '@douyinfe/semi-icons';
+import { Button, Tooltip } from '@douyinfe/semi-ui';
+import { ColorPicker } from 'components/color-picker';
+
+export const FontColor = ({ selectedNode, setFontColor, textColor }) => {
+  return (
+    <ColorPicker
+      onSetColor={(color) => {
+        setFontColor(color);
+      }}
+    >
+      <Tooltip content="文本色" zIndex={10000}>
+        <Button
+          disabled={!selectedNode}
+          type="tertiary"
+          theme={textColor ? 'light' : 'borderless'}
+          icon={
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+              }}
+            >
+              <IconFont />
+              <span
+                style={{
+                  width: 12,
+                  height: 2,
+                  backgroundColor: textColor,
+                }}
+              ></span>
+            </div>
+          }
+        />
+      </Tooltip>
+    </ColorPicker>
+  );
+};

packages/client/src/tiptap/core/menus/mind/toolbar/help.tsx

@@ -0,0 +1,33 @@
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+import { Button, Descriptions, Popover } from '@douyinfe/semi-ui';
+
+import styles from './index.module.scss';
+
+const HELP_MESSAGE = [
+  { key: '新增同级节点', value: 'Enter 键' },
+  { key: '新增子节点', value: 'Tab 键' },
+  { key: '编辑节点文字', value: '双击节点' },
+  { key: '编辑节点菜单', value: '在节点右键' },
+];
+
+const HELP_MESSAGE_STYLE = {
+  width: '200px',
+};
+
+export const Help = () => {
+  return (
+    <Popover
+      zIndex={10000}
+      spacing={10}
+      style={{ padding: 12, overflow: 'hidden' }}
+      position="bottomLeft"
+      content={
+        <section className={styles.sectionWrap}>
+          <Descriptions data={HELP_MESSAGE} style={HELP_MESSAGE_STYLE} />
+        </section>
+      }
+    >
+      <Button size="small" theme="borderless" type="tertiary" icon={<IconHelpCircle />} />
+    </Popover>
+  );
+};

packages/client/src/tiptap/core/menus/mind/toolbar/image.tsx

@@ -1,4 +1,4 @@
-import { IconFile } from '@douyinfe/semi-icons';
+import { IconImage } from '@douyinfe/semi-icons';
 import { Button, Dropdown, Form, Tooltip } from '@douyinfe/semi-ui';
 import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
 import { Upload } from 'components/upload';
@@ -48,7 +48,7 @@ export const Image = ({ disabled, image, setImage }) => {
     >
       <span style={{ display: 'inline-block' }}>
         <Tooltip content="设置图片" zIndex={10000}>
-          <Button disabled={disabled} type="tertiary" theme={image ? 'light' : 'borderless'} icon={<IconFile />} />
+          <Button disabled={disabled} type="tertiary" theme={image ? 'light' : 'borderless'} icon={<IconImage />} />
         </Tooltip>
       </span>
     </Dropdown>

packages/client/src/tiptap/core/menus/mind/toolbar/index.tsx

@@ -1,108 +1,188 @@
-import { IconBold, IconFont, IconHelpCircle, IconMark } from '@douyinfe/semi-icons';
+import { IconBold, IconRedo, IconUndo } from '@douyinfe/semi-icons';
-import { Button, Descriptions, Popover, Space, Tooltip, Typography } from '@douyinfe/semi-ui';
+import { Button, Space, Tooltip } from '@douyinfe/semi-ui';
-import cls from 'classnames';
+import { Divider } from 'components/divider';
-import { ColorPicker } from 'components/color-picker';
+import { IconMindCenter } from 'components/icons';
-import { IconDrawBoard, IconMindCenter, IconStructure } from 'components/icons';
 import { IconZoomIn, IconZoomOut } from 'components/icons';
 import { useToggle } from 'hooks/use-toggle';
 import { useCallback, useEffect, useState } from 'react';
-import { clamp } from 'tiptap/prose-utils';
 
-import { MAX_ZOOM, MIN_ZOOM, TEMPLATES, THEMES, ZOOM_STEP } from '../constant';
+import { BgColor } from './bgcolor';
+import { FontColor } from './font-color';
+import { Help } from './help';
 import { Image } from './image';
-import styles from './index.module.scss';
 import { Link } from './link';
-
+import { Priority } from './priority';
-const { Text } = Typography;
+import { Progress } from './progress';
-
+import { Template } from './template';
-const HELP_MESSAGE = [
+import { Theme } from './theme';
-  { key: '新增同级节点', value: 'Enter 键' },
-  { key: '新增子节点', value: 'Tab 键' },
-  { key: '编辑节点文字', value: '双击节点' },
-  { key: '编辑节点菜单', value: '在节点右键' },
-];
-
-const HELP_MESSAGE_STYLE = {
-  width: '200px',
-};
 
 export const Toolbar = ({ mind }) => {
-  const [template, setTemplateState] = useState('');
+  const [node, setNode] = useState(null); // 当前选择节点
-  const [theme, setThemeState] = useState('');
+
-  const [node, setNode] = useState(null);
+  const [hasUndo, toggleHasUndo] = useToggle(false);
+  const [hasRedo, toggleHasRedo] = useToggle(false);
+
   const [isBold, toggleIsBold] = useToggle(false);
   const [textColor, setTextColor] = useState('');
   const [bgColor, setBgColor] = useState('');
   const [link, setLink] = useState('');
   const [image, setImage] = useState('');
 
-  const setTemplate = useCallback(
+  const [template, setTemplateState] = useState('');
-    (template) => {
+  const [theme, setThemeState] = useState('');
-      mind.execCommand('template', template);
-    },
-    [mind]
-  );
 
-  const setTheme = useCallback(
+  /**
-    (theme) => {
+   * 撤销
-      mind.execCommand('theme', theme);
+   */
-    },
+  const undo = useCallback(() => {
-    [mind]
-  );
-
-  const setZoom = useCallback(
-    (type: 'minus' | 'plus') => {
-      return () => {
-        if (!mind) return;
-        const currentZoom = mind.getZoomValue();
-        const nextZoom = clamp(
-          type === 'minus' ? currentZoom - ZOOM_STEP : currentZoom + ZOOM_STEP,
-          MIN_ZOOM,
-          MAX_ZOOM
-        );
-        mind.zoom(nextZoom);
-      };
-    },
-    [mind]
-  );
-
-  const setCenter = useCallback(() => {
     if (!mind) return;
-    mind.execCommand('camera');
+    if (mind.editor.history.hasUndo()) {
+      mind.editor.history.undo();
+    }
   }, [mind]);
 
+  /**
+   * 重做
+   */
+  const redo = useCallback(() => {
+    if (!mind) return;
+    if (mind.editor.history.hasRedo()) {
+      mind.editor.history.redo();
+    }
+  }, [mind]);
+
+  /**
+   * 加粗
+   */
   const toggleBold = useCallback(() => {
+    if (!mind) return;
+
     mind.execCommand('Bold');
   }, [mind]);
 
+  /**
+   * 设置文字颜色
+   */
   const setFontColor = useCallback(
     (color) => {
+      if (!mind) return;
+
       mind.execCommand('ForeColor', color);
     },
     [mind]
   );
 
+  /**
+   * 设置背景色
+   */
   const setBackgroundColor = useCallback(
     (color) => {
+      if (!mind) return;
+
       mind.execCommand('Background', color);
     },
     [mind]
   );
 
+  /**
+   * 设置链接
+   */
   const setHyperLink = useCallback(
     (url) => {
+      if (!mind) return;
+
       mind.execCommand('HyperLink', url);
     },
     [mind]
   );
 
+  /**
+   * 插入图片
+   */
   const insertImage = useCallback(
     (url) => {
+      if (!mind) return;
+
       mind.execCommand('Image', url);
     },
     [mind]
   );
 
+  /**
+   * 设置进度
+   */
+  const setProgress = useCallback(
+    (value) => () => {
+      if (!mind) return;
+
+      const node = mind.getSelectedNode();
+      if (!node) return;
+
+      mind.execCommand('progress', value);
+    },
+    [mind]
+  );
+
+  /**
+   * 设置优先级
+   */
+  const setPriority = useCallback(
+    (value) => () => {
+      if (!mind) return;
+
+      const node = mind.getSelectedNode();
+      if (!node) return;
+
+      mind.execCommand('priority', value);
+    },
+    [mind]
+  );
+
+  /**
+   * 模板
+   */
+  const setTemplate = useCallback(
+    (template) => {
+      if (!mind) return;
+
+      mind.execCommand('template', template);
+    },
+    [mind]
+  );
+
+  /**
+   * 主题
+   */
+  const setTheme = useCallback(
+    (theme) => {
+      if (!mind) return;
+
+      mind.execCommand('theme', theme);
+    },
+    [mind]
+  );
+
+  /**
+   * 缩放
+   */
+  const setZoom = useCallback(
+    (type: 'minus' | 'plus') => {
+      return () => {
+        if (!mind) return;
+        mind.execCommand(type === 'minus' ? 'zoomOut' : 'zoomIn');
+      };
+    },
+    [mind]
+  );
+
+  /**
+   * 定位到根节点
+   */
+  const setCenter = useCallback(() => {
+    if (!mind) return;
+    mind.execCommand('camera', mind.getRoot(), 600);
+  }, [mind]);
+
   useEffect(() => {
     if (!mind) return;
 
@@ -126,6 +206,9 @@ export const Toolbar = ({ mind }) => {
         setNode(null);
       }
 
+      toggleHasUndo(mind.editor.history.hasUndo());
+      toggleHasRedo(mind.editor.history.hasRedo());
+
       setTemplateState(mind.queryCommandValue('Template'));
       setThemeState(mind.queryCommandValue('Theme'));
       toggleIsBold(isBold);
@@ -140,68 +223,53 @@ export const Toolbar = ({ mind }) => {
     return () => {
       mind.off('interactchange', handler);
     };
-  }, [mind, toggleIsBold, setBackgroundColor]);
+  }, [mind, toggleHasUndo, toggleHasRedo, toggleIsBold, setBackgroundColor]);
 
   return (
     <Space>
-      <Popover
+      <Tooltip content="撤销">
-        zIndex={10000}
+        <Button
-        spacing={10}
+          onClick={undo}
-        style={{ padding: '0 12px 12px', overflow: 'hidden' }}
+          icon={<IconUndo />}
-        position="bottomLeft"
+          disabled={!hasUndo}
-        content={
+          theme={hasUndo ? 'light' : 'borderless'}
-          <section className={styles.sectionWrap}>
+          type="tertiary"
-            <Text type="secondary">布局</Text>
+        />
-            <div>
+      </Tooltip>
-              <ul>
-                {TEMPLATES.map((item) => {
-                  return (
-                    <li
-                      key={item.label}
-                      className={cls(template === item.value && styles.active)}
-                      onClick={() => setTemplate(item.value)}
-                    >
-                      <Text>{item.label}</Text>
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          </section>
-        }
-      >
-        <Button icon={<IconStructure />} type="tertiary" theme="borderless" size="small" />
-      </Popover>
 
-      <Popover
+      <Tooltip content="重做">
-        zIndex={10000}
+        <Button
-        spacing={10}
+          onClick={redo}
-        style={{ padding: '0 12px 12px', overflow: 'hidden' }}
+          icon={<IconRedo />}
-        position="bottomLeft"
+          disabled={!hasRedo}
-        content={
+          theme={hasRedo ? 'light' : 'borderless'}
-          <section className={styles.sectionWrap}>
+          type="tertiary"
-            <Text type="secondary">主题</Text>
+        />
-            <div>
+      </Tooltip>
-              <ul>
+
-                {THEMES.map((item) => {
+      <Divider />
-                  return (
+
-                    <li
+      <Tooltip content="加粗" zIndex={10000}>
-                      key={item.label}
+        <Button
-                      className={cls(theme === item.value && styles.active)}
+          disabled={!node}
-                      style={item.style || {}}
+          theme={isBold ? 'light' : 'borderless'}
-                      onClick={() => setTheme(item.value)}
+          type="tertiary"
-                    >
+          onClick={toggleBold}
-                      {item.label}
+          icon={<IconBold />}
-                    </li>
+        />
-                  );
+      </Tooltip>
-                })}
+
-              </ul>
+      <FontColor selectedNode={node} textColor={textColor} setFontColor={setFontColor} />
-            </div>
+      <BgColor selectedNode={node} bgColor={bgColor} setBackgroundColor={setBackgroundColor} />
-          </section>
+      <Link disabled={!node} link={link} setLink={setHyperLink} />
-        }
+      <Image disabled={!node} image={image} setImage={insertImage} />
-      >
+
-        <Button icon={<IconDrawBoard />} type="tertiary" theme="borderless" size="small" />
+      <Divider />
-      </Popover>
+
+      <Progress selectedNode={node} setProgress={setProgress} />
+      <Priority selectedNode={node} setPriority={setPriority} />
+
+      <Divider />
 
       <Tooltip content="居中">
         <Button
@@ -233,97 +301,14 @@ export const Toolbar = ({ mind }) => {
         />
       </Tooltip>
 
-      <Tooltip content="加粗" zIndex={10000}>
+      <Divider />
-        <Button
-          disabled={!node}
-          type="tertiary"
-          theme={isBold ? 'light' : 'borderless'}
-          onClick={toggleBold}
-          icon={<IconBold />}
-        />
-      </Tooltip>
 
-      <ColorPicker
+      <Template template={template} setTemplate={setTemplate} />
-        onSetColor={(color) => {
+      <Theme theme={theme} setTheme={setTheme} />
-          setFontColor(color);
-        }}
-      >
-        <Tooltip content="文本色" zIndex={10000}>
-          <Button
-            disabled={!node}
-            type="tertiary"
-            theme={textColor ? 'light' : 'borderless'}
-            icon={
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                }}
-              >
-                <IconFont />
-                <span
-                  style={{
-                    width: 12,
-                    height: 2,
-                    backgroundColor: textColor,
-                  }}
-                ></span>
-              </div>
-            }
-          />
-        </Tooltip>
-      </ColorPicker>
 
-      <ColorPicker
+      <Divider />
-        onSetColor={(color) => {
-          setBackgroundColor(color);
-        }}
-      >
-        <Tooltip content="背景色" zIndex={10000}>
-          <Button
-            disabled={!node}
-            type="tertiary"
-            theme={bgColor ? 'light' : 'borderless'}
-            icon={
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                }}
-              >
-                <IconMark />
-                <span
-                  style={{
-                    width: 12,
-                    height: 2,
-                    backgroundColor: bgColor,
-                  }}
-                ></span>
-              </div>
-            }
-          />
-        </Tooltip>
-      </ColorPicker>
 
-      <Link disabled={!node} link={link} setLink={setHyperLink} />
+      <Help />
-
-      <Image disabled={!node} image={image} setImage={insertImage} />
-
-      <Popover
-        zIndex={10000}
-        spacing={10}
-        style={{ padding: 12, overflow: 'hidden' }}
-        position="bottomLeft"
-        content={
-          <section className={styles.sectionWrap}>
-            <Descriptions data={HELP_MESSAGE} style={HELP_MESSAGE_STYLE} />
-          </section>
-        }
-      >
-        <Button size="small" theme="borderless" type="tertiary" icon={<IconHelpCircle />} />
-      </Popover>
     </Space>
   );
 };

packages/client/src/tiptap/core/menus/mind/toolbar/priority.tsx

@@ -0,0 +1,29 @@
+import { IconClock } from '@douyinfe/semi-icons';
+import { Button, Dropdown, Tooltip } from '@douyinfe/semi-ui';
+
+import { PRIORITIES } from '../constant';
+
+export const Priority = ({ selectedNode, setPriority }) => {
+  return (
+    <Dropdown
+      trigger="click"
+      render={
+        <Dropdown.Menu>
+          {PRIORITIES.map((item) => {
+            return (
+              <Dropdown.Item key={item.value} onClick={setPriority(item.value)}>
+                {item.text}
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      }
+    >
+      <span>
+        <Tooltip content="优先级" zIndex={10000}>
+          <Button size="small" theme="borderless" type="tertiary" disabled={!selectedNode} icon={<IconClock />} />
+        </Tooltip>
+      </span>
+    </Dropdown>
+  );
+};

packages/client/src/tiptap/core/menus/mind/toolbar/progress.tsx

@@ -0,0 +1,29 @@
+import { IconDuration } from '@douyinfe/semi-icons';
+import { Button, Dropdown, Tooltip } from '@douyinfe/semi-ui';
+
+import { PROGRESSES } from '../constant';
+
+export const Progress = ({ selectedNode, setProgress }) => {
+  return (
+    <Dropdown
+      trigger="click"
+      render={
+        <Dropdown.Menu>
+          {PROGRESSES.map((progress) => {
+            return (
+              <Dropdown.Item key={progress.value} onClick={setProgress(progress.value)}>
+                {progress.text}
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      }
+    >
+      <span>
+        <Tooltip content="进度" zIndex={10000}>
+          <Button size="small" theme="borderless" type="tertiary" disabled={!selectedNode} icon={<IconDuration />} />
+        </Tooltip>
+      </span>
+    </Dropdown>
+  );
+};

packages/client/src/tiptap/core/menus/mind/toolbar/template.tsx

@@ -0,0 +1,41 @@
+import { Button, Popover, Typography } from '@douyinfe/semi-ui';
+import cls from 'classnames';
+import { IconStructure } from 'components/icons';
+
+import { TEMPLATES } from '../constant';
+import styles from './index.module.scss';
+
+const { Text } = Typography;
+
+export const Template = ({ template, setTemplate }) => {
+  return (
+    <Popover
+      zIndex={10000}
+      spacing={10}
+      style={{ padding: '0 12px 12px', overflow: 'hidden' }}
+      position="bottomLeft"
+      content={
+        <section className={styles.sectionWrap}>
+          <Text type="secondary">布局</Text>
+          <div>
+            <ul>
+              {TEMPLATES.map((item) => {
+                return (
+                  <li
+                    key={item.label}
+                    className={cls(template === item.value && styles.active)}
+                    onClick={() => setTemplate(item.value)}
+                  >
+                    <Text>{item.label}</Text>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </section>
+      }
+    >
+      <Button icon={<IconStructure />} type="tertiary" theme="borderless" size="small" />
+    </Popover>
+  );
+};

packages/client/src/tiptap/core/menus/mind/toolbar/theme.tsx

@@ -0,0 +1,42 @@
+import { Button, Popover, Typography } from '@douyinfe/semi-ui';
+import cls from 'classnames';
+import { IconDrawBoard } from 'components/icons';
+
+import { THEMES } from '../constant';
+import styles from './index.module.scss';
+
+const { Text } = Typography;
+
+export const Theme = ({ theme, setTheme }) => {
+  return (
+    <Popover
+      zIndex={10000}
+      spacing={10}
+      style={{ padding: '0 12px 12px', overflow: 'hidden' }}
+      position="bottomLeft"
+      content={
+        <section className={styles.sectionWrap}>
+          <Text type="secondary">主题</Text>
+          <div>
+            <ul>
+              {THEMES.map((item) => {
+                return (
+                  <li
+                    key={item.label}
+                    className={cls(theme === item.value && styles.active)}
+                    style={item.style || {}}
+                    onClick={() => setTheme(item.value)}
+                  >
+                    {item.label}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </section>
+      }
+    >
+      <Button icon={<IconDrawBoard />} type="tertiary" theme="borderless" size="small" />
+    </Popover>
+  );
+};

packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx

@@ -3,7 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { IconMind } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
+import deepEqual from 'deep-equal';
 import { useToggle } from 'hooks/use-toggle';
+import React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
@@ -15,7 +17,7 @@ const { Text } = Typography;
 
 const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
 
-export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
+export const _ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
   const exportToSvgRef = useRef(null);
   const isEditable = editor.isEditable;
   const isActive = editor.isActive(Excalidraw.name);
@@ -111,3 +113,11 @@ export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
     </NodeViewWrapper>
   );
 };
+
+export const ExcalidrawWrapper = React.memo(_ExcalidrawWrapper, (prevProps, nextProps) => {
+  if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
+    return true;
+  }
+
+  return false;
+});

packages/client/src/tiptap/core/wrappers/flow/index.tsx

@@ -3,7 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
+import deepEqual from 'deep-equal';
 import { useToggle } from 'hooks/use-toggle';
+import React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { load, renderXml } from 'thirtypart/diagram';
@@ -15,7 +17,7 @@ import styles from './index.module.scss';
 const { Text } = Typography;
 const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
 
-export const FlowWrapper = ({ editor, node, updateAttributes }) => {
+export const _FlowWrapper = ({ editor, node, updateAttributes }) => {
   const isEditable = editor.isEditable;
   const isActive = editor.isActive(Flow.name);
   const { width: maxWidth } = getEditorContainerDOMSize(editor);
@@ -81,7 +83,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
 
   const onViewportChange = useCallback(
     (visible) => {
-      if (visible) {
+      if (visible && !$graph.current) {
         toggleVisible(true);
       }
     },
@@ -137,3 +139,11 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
     </NodeViewWrapper>
   );
 };
+
+export const FlowWrapper = React.memo(_FlowWrapper, (prevProps, nextProps) => {
+  if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
+    return true;
+  }
+
+  return false;
+});

packages/client/src/tiptap/core/wrappers/mind/index.tsx

@@ -6,10 +6,9 @@ import { Resizeable } from 'components/resizeable';
 import { Tooltip } from 'components/tooltip';
 import deepEqual from 'deep-equal';
 import { useToggle } from 'hooks/use-toggle';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { load, renderMind } from 'thirtypart/kityminder';
-import { Mind } from 'tiptap/core/extensions/mind';
 import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant';
 import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils';
 
@@ -19,10 +18,9 @@ const { Text } = Typography;
 
 const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
 
-export const MindWrapper = ({ editor, node, updateAttributes }) => {
+export const _MindWrapper = ({ editor, node, updateAttributes }) => {
   const $mind = useRef(null);
   const isEditable = editor.isEditable;
-  const isActive = editor.isActive(Mind.name);
   const { width: maxWidth } = getEditorContainerDOMSize(editor);
   const { data, width, height } = node.attrs;
   const [visible, toggleVisible] = useToggle(false);
@@ -80,7 +78,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
 
   const onViewportChange = useCallback(
     (visible) => {
-      if (visible) {
+      if (visible && !$mind.current) {
         toggleVisible(true);
       }
     },
@@ -108,7 +106,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
   }, [width, height, setCenter]);
 
   return (
-    <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
+    <NodeViewWrapper className={cls(styles.wrap)}>
       <VisibilitySensor onChange={onViewportChange}>
         <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
           <div
@@ -123,7 +121,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
 
             {loading && <Spin spinning style={INHERIT_SIZE_STYLE}></Spin>}
 
-            {!loading && !error && visible && (
+            {!loading && !error && (
               <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
             )}
 
@@ -165,3 +163,11 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
     </NodeViewWrapper>
   );
 };
+
+export const MindWrapper = React.memo(_MindWrapper, (prevProps, nextProps) => {
+  if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
+    return true;
+  }
+
+  return false;
+});

packages/client/src/tiptap/core/wrappers/status/index.tsx

@@ -4,7 +4,7 @@ import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import { useUser } from 'data/user';
 import { useToggle } from 'hooks/use-toggle';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import styles from './index.module.scss';
 
@@ -24,14 +24,15 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
   const { user } = useUser();
   const ref = useRef<HTMLInputElement>();
   const [visible, toggleVisible] = useToggle(false);
+  const [currentText, setCurrentText] = useState(text);
 
   const content = useMemo(
     () => (
       <Tag className="render-wrapper" style={{ backgroundColor: bgcolor, border: `1px solid ${borderColor}` }}>
-        <span style={{ color: currentTextColor }}>{text || '点击设置状态'}</span>
+        <span style={{ color: currentTextColor }}>{currentText || '点击设置状态'}</span>
       </Tag>
     ),
-    [bgcolor, borderColor, currentTextColor, text]
+    [bgcolor, borderColor, currentTextColor, currentText]
   );
 
   const onVisibleChange = useCallback(
@@ -64,8 +65,10 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
   useEffect(() => {
     if (visible) {
       ref.current?.focus();
+    } else {
+      updateAttributes({ text: currentText });
     }
-  }, [visible]);
+  }, [visible, updateAttributes, currentText]);
 
   return (
     <NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
@@ -78,7 +81,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
           content={
             <div style={{ width: 184, height: 65 }}>
               <div style={{ marginBottom: 8 }}>
-                <Input ref={ref} placeholder="输入状态" onChange={(v) => updateAttributes({ text: v })} />
+                <Input ref={ref} placeholder="输入状态" value={currentText} onChange={setCurrentText} />
               </div>
               <Space>
                 {STATUS_COLORS.map((color) => {

packages/client/src/tiptap/editor/collaboration/kit.ts

@@ -1,5 +1,5 @@
 import { Toast } from '@douyinfe/semi-ui';
-import scrollIntoView from 'scroll-into-view-if-needed';
+import { safeJSONParse } from 'helpers/json';
 // 自定义节点扩展
 import { Attachment } from 'tiptap/core/extensions/attachment';
 import { BackgroundColor } from 'tiptap/core/extensions/background-color';
@@ -78,6 +78,16 @@ const DocumentWithTitle = Document.extend({
 
 export { Document };
 
+const placeholders = [
+  '输入 / 唤起更多',
+  '使用 markdown 语法进行输入',
+  '输入 @ 来提及他人',
+  '输入 : 来插入表情',
+  '你知道吗？输入 $katex 然后在输入一个 $ 就可以快速插入数学公式，其他节点操作类似哦',
+];
+
+const getCreateUserId = () => safeJSONParse(window.localStorage.getItem('user')).id;
+
 export const CollaborationKit = [
   Paragraph,
   Placeholder.configure({
@@ -88,7 +98,7 @@ export const CollaborationKit = [
 
       if (!editor.isEditable) return;
 
-      return '输入 / 唤起更多';
+      return placeholders[~~(Math.random() * placeholders.length)];
     },
     showOnlyCurrent: false,
     showOnlyWhenEditable: false,
@@ -152,11 +162,17 @@ export const CollaborationKit = [
   DocumentChildren,
   DocumentReference,
   Emoji,
-  Flow,
+  Flow.configure({
+    getCreateUserId,
+  }),
   Iframe,
-  Katex,
+  Katex.configure({
+    getCreateUserId,
+  }),
   Mention,
-  Mind,
+  Mind.configure({
+    getCreateUserId,
+  }),
   QuickInsert,
   SearchNReplace,
   Status,