tiptap: add createUserId

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() };
         },
       }),
     ];

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() };
+        },
       }),
     ];
   },

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/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/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);
       }
     },

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 && (
+            {!loading && !error && visible && (
-              <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={$div}></div>
+              <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
             )}
 
             <div className={styles.title}>

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,