tiptap: add defaultShowPicker in Flow

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

@@ -1,3 +1,4 @@
+import { IUser } from '@think/domains';
 import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import { FlowWrapper } from 'tiptap/core/wrappers/flow';
@@ -7,6 +8,8 @@ export interface IFlowAttrs {
   width?: number | string;
   height?: number;
   data?: string;
+  defaultShowPicker?: boolean;
+  createUser?: IUser['id'];
 }
 
 declare module '@tiptap/core' {
@@ -40,6 +43,12 @@ export const Flow = Node.create({
         default: DEFAULT_XML,
         parseHTML: getDatasetAttribute('data'),
       },
+      defaultShowPicker: {
+        default: false,
+      },
+      createUser: {
+        default: null,
+      },
     };
   },
 

packages/client/src/tiptap/core/hooks/use-attributes.tsx

@@ -8,12 +8,7 @@ function mapSelf<T>(d: T): T {
   return d;
 }
 
-export function useAttributes<T extends Record<string, unknown>, R>(
+export function useAttributes<T, R = T>(editor: Editor, attrbute: string, defaultValue?: T, map?: (arg: T) => R) {
-  editor: Editor,
-  attrbute: string,
-  defaultValue?: T,
-  map?: (arg: T) => R
-) {
   const mapFn = (map || mapSelf) as MapFn<T, R>;
   const [value, setValue] = useState<R>(mapFn(defaultValue));
   const prevValueCache = useRef<R>(value);

packages/client/src/tiptap/core/menus/commands.tsx

@@ -114,8 +114,8 @@ export const COMMANDS: ICommand[] = [
   {
     icon: <IconFlow />,
     label: '流程图',
-    action: (editor) => {
+    action: (editor, user) => {
-      editor.chain().focus().setFlow({ width: '100%' }).run();
+      editor.chain().focus().setFlow({ width: '100%', defaultShowPicker: true, createUser: user.id }).run();
     },
   },
   {

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

@@ -2,16 +2,22 @@ import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons';
 import { Button, Space } from '@douyinfe/semi-ui';
 import { Divider } from 'components/divider';
 import { Tooltip } from 'components/tooltip';
-import { useCallback } from 'react';
+import { useUser } from 'data/user';
+import { useCallback, useEffect } from 'react';
 import { BubbleMenu } from 'tiptap/core/bubble-menu';
-import { Flow } from 'tiptap/core/extensions/flow';
+import { Flow, IFlowAttrs } from 'tiptap/core/extensions/flow';
 import { useAttributes } from 'tiptap/core/hooks/use-attributes';
 import { copyNode, deleteNode } from 'tiptap/prose-utils';
 
 import { triggerOpenFlowSettingModal } from '../_event';
 
 export const FlowBubbleMenu = ({ editor }) => {
-  const attrs = useAttributes(editor, Flow.name, {});
+  const attrs = useAttributes<IFlowAttrs>(editor, Flow.name, {
+    defaultShowPicker: false,
+    createUser: '',
+  });
+  const { defaultShowPicker, createUser } = attrs;
+  const { user } = useUser();
 
   const openEditLinkModal = useCallback(() => {
     triggerOpenFlowSettingModal(editor, attrs);
@@ -20,6 +26,13 @@ export const FlowBubbleMenu = ({ editor }) => {
   const copyMe = useCallback(() => copyNode(Flow.name, editor), [editor]);
   const deleteMe = useCallback(() => deleteNode(Flow.name, editor), [editor]);
 
+  useEffect(() => {
+    if (defaultShowPicker && user && createUser === user.id) {
+      openEditLinkModal();
+      editor.chain().updateAttributes(Flow.name, { defaultShowPicker: false }).focus().run();
+    }
+  }, [createUser, defaultShowPicker, editor, openEditLinkModal, user]);
+
   return (
     <BubbleMenu
       className={'bubble-menu'}