From 3bd5d1180cdfe5be2ea623d87f29b1cf70c97bae Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Fri, 19 Aug 2022 18:39:48 +0800
Subject: [PATCH] tiptap: add createUserId

---
 .../client/src/tiptap/core/extensions/flow.ts | 10 +++-
 .../src/tiptap/core/extensions/katex.ts       | 11 +++-
 .../client/src/tiptap/core/extensions/mind.ts | 12 +++--
 .../src/tiptap/core/menus/katex/bubble.tsx    |  2 +-
 .../src/tiptap/core/wrappers/flow/index.tsx   |  2 +-
 .../src/tiptap/core/wrappers/mind/index.tsx   | 50 +++++++++++--------
 .../src/tiptap/editor/collaboration/kit.ts    | 15 ++++--
 7 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/packages/client/src/tiptap/core/extensions/flow.ts b/packages/client/src/tiptap/core/extensions/flow.ts
index a4c8b97d..9c407910 100644
--- a/packages/client/src/tiptap/core/extensions/flow.ts
+++ b/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,
     };
   },
 
@@ -105,7 +111,7 @@ export const Flow = Node.create({
         find: /^\$flow $/,
         type: this.type,
         getAttributes: () => {
-          return { width: '100%' };
+          return { width: '100%', defaultShowPicker: true, createUser: this.options.getCreateUserId() };
         },
       }),
     ];
diff --git a/packages/client/src/tiptap/core/extensions/katex.ts b/packages/client/src/tiptap/core/extensions/katex.ts
index 249de386..9cf31aac 100644
--- a/packages/client/src/tiptap/core/extensions/katex.ts
+++ b/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,
     };
   },
 
@@ -74,6 +80,9 @@ export const Katex = Node.create({
       nodeInputRule({
         find: /^\$katex $/,
         type: this.type,
+        getAttributes: () => {
+          return { defaultShowPicker: true, createUser: this.options.getCreateUserId() };
+        },
       }),
     ];
   },
diff --git a/packages/client/src/tiptap/core/extensions/mind.ts b/packages/client/src/tiptap/core/extensions/mind.ts
index 2dfc47eb..fcf3e57c 100644
--- a/packages/client/src/tiptap/core/extensions/mind.ts
+++ b/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() };
         },
       }),
     ];
diff --git a/packages/client/src/tiptap/core/menus/katex/bubble.tsx b/packages/client/src/tiptap/core/menus/katex/bubble.tsx
index 5572b702..6d888b46 100644
--- a/packages/client/src/tiptap/core/menus/katex/bubble.tsx
+++ b/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]);
 
diff --git a/packages/client/src/tiptap/core/wrappers/flow/index.tsx b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
index 719ac12f..afc0c7ae 100644
--- a/packages/client/src/tiptap/core/wrappers/flow/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
@@ -81,7 +81,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
 
   const onViewportChange = useCallback(
     (visible) => {
-      if (visible) {
+      if (visible && !$graph.current) {
         toggleVisible(true);
       }
     },
diff --git a/packages/client/src/tiptap/core/wrappers/mind/index.tsx b/packages/client/src/tiptap/core/wrappers/mind/index.tsx
index 383ee4ce..bff13e12 100644
--- a/packages/client/src/tiptap/core/wrappers/mind/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/mind/index.tsx
@@ -6,7 +6,7 @@ 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';
@@ -20,10 +20,8 @@ const { Text } = Typography;
 const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
 
 export const MindWrapper = ({ editor, node, updateAttributes }) => {
-  const $div = useRef(null);
   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);
@@ -33,7 +31,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
   const setCenter = useCallback(() => {
     const mind = $mind.current;
     if (!mind) return;
-    mind.execCommand('camera', mind.getRoot(), 600);
+    mind.execCommand('camera');
   }, []);
 
   const setZoom = useCallback((type: 'minus' | 'plus') => {
@@ -56,9 +54,32 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
     [updateAttributes, setCenter]
   );
 
+  const render = useCallback(
+    (div) => {
+      if (!div) return;
+
+      if (!$mind.current) {
+        const graph = renderMind({
+          container: div,
+          data,
+          isEditable: false,
+        });
+        $mind.current = graph;
+      }
+    },
+    [data]
+  );
+
+  const setMind = useCallback(
+    (div) => {
+      render(div);
+    },
+    [render]
+  );
+
   const onViewportChange = useCallback(
     (visible) => {
-      if (visible) {
+      if (visible && !$mind.current) {
         toggleVisible(true);
       }
     },
@@ -85,21 +106,8 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
     setCenter();
   }, [width, height, setCenter]);
 
-  useEffect(() => {
-    if (visible && !loading && !error) {
-      if (!$mind.current) {
-        const graph = renderMind({
-          container: $div.current,
-          data,
-          isEditable: false,
-        });
-        $mind.current = graph;
-      }
-    }
-  }, [visible, data, loading, error]);
-
   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
@@ -114,8 +122,8 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
 
             {loading && <Spin spinning style={INHERIT_SIZE_STYLE}></Spin>}
 
-            {!loading && !error && (
-              <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={$div}></div>
+            {!loading && !error && visible && (
+              <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
             )}
 
             <div className={styles.title}>
diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts
index 48f495e5..c188c8d4 100644
--- a/packages/client/src/tiptap/editor/collaboration/kit.ts
+++ b/packages/client/src/tiptap/editor/collaboration/kit.ts
@@ -1,4 +1,5 @@
 import { Toast } from '@douyinfe/semi-ui';
+import { safeJSONParse } from 'helpers/json';
 // 自定义节点扩展
 import { Attachment } from 'tiptap/core/extensions/attachment';
 import { BackgroundColor } from 'tiptap/core/extensions/background-color';
@@ -85,6 +86,8 @@ const placeholders = [
   '你知道吗？输入 $katex 然后按一下空格就可以快速插入数学公式，其他节点操作类似哦',
 ];
 
+const getCreateUserId = () => safeJSONParse(window.localStorage.getItem('user')).id;
+
 export const CollaborationKit = [
   Paragraph,
   Placeholder.configure({
@@ -159,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,