tiptap: show modal when create iframe

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

@@ -1,12 +1,21 @@
+import { IUser } from '@think/domains';
 import { mergeAttributes, Node } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import { IframeWrapper } from 'tiptap/core/wrappers/iframe';
 import { getDatasetAttribute } from 'tiptap/prose-utils';
 
+export interface IIframeAttrs {
+  width?: number | string;
+  height?: number;
+  url?: string;
+  defaultShowPicker?: boolean;
+  createUser?: IUser['id'];
+}
+
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     iframe: {
-      setIframe: (attrs) => ReturnType;
+      setIframe: (attrs: IIframeAttrs) => ReturnType;
     };
   }
 }
@@ -41,6 +50,12 @@ export const Iframe = Node.create({
         default: null,
         parseHTML: getDatasetAttribute('url'),
       },
+      defaultShowPicker: {
+        default: false,
+      },
+      createUser: {
+        default: null,
+      },
     };
   },
 
@@ -66,7 +81,7 @@ export const Iframe = Node.create({
             return commands.updateAttributes(this.name, options);
           }
 
-          const { url } = options || { url: '' };
+          const attrs = options || { url: '' };
           const { selection } = editor.state;
           const pos = selection.$head;
 
@@ -74,7 +89,7 @@ export const Iframe = Node.create({
             .insertContentAt(pos.before(), [
               {
                 type: this.name,
-                attrs: { url },
+                attrs,
               },
             ])
             .run();

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

@@ -106,7 +106,8 @@ export const COMMANDS: ICommand[] = [
   {
     icon: <IconLink />,
     label: '外链',
-    action: (editor) => editor.chain().focus().setIframe({ url: '' }).run(),
+    action: (editor, user) =>
+      editor.chain().focus().setIframe({ url: '', defaultShowPicker: true, createUser: user.id }).run(),
   },
   {
     title: '卡片',

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

@@ -4,10 +4,11 @@ import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
 import { Divider } from 'components/divider';
 import { SizeSetter } from 'components/size-setter';
 import { Tooltip } from 'components/tooltip';
+import { useUser } from 'data/user';
 import { useToggle } from 'hooks/use-toggle';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { BubbleMenu } from 'tiptap/core/bubble-menu';
-import { Iframe } from 'tiptap/core/extensions/iframe';
+import { Iframe, IIframeAttrs } from 'tiptap/core/extensions/iframe';
 import { useAttributes } from 'tiptap/core/hooks/use-attributes';
 import { copyNode, deleteNode } from 'tiptap/prose-utils';
 
@@ -17,8 +18,15 @@ const EXAMPLE_LINK =
   'https://proxy.tencentsuite.com/openapi/proxy/v2/addon?uid=144115212008575217&creator=144115212008575217&redirect=https%3A%2F%2Fi.y.qq.com%2Fn2%2Fm%2Foutchain%2Fplayer%2Findex.html%3Fsongid%3D5408217&docType=1&docID=300000000$RwqOunTcpXjs&addonID=0b69e1b9517e44a4aee35d33ee021b55&packageID=817&nonce=m3rqxn';
 
 export const IframeBubbleMenu = ({ editor }) => {
-  const { width, height, url } = useAttributes(editor, Iframe.name, { width: 0, height: 0, url: '' });
+  const { width, height, url, defaultShowPicker, createUser } = useAttributes<IIframeAttrs>(editor, Iframe.name, {
+    width: 0,
+    height: 0,
+    url: '',
+    defaultShowPicker: false,
+    createUser: null,
+  });
   const $form = useRef<FormApi>();
+  const { user } = useUser();
   const [visible, toggleVisible] = useToggle(false);
 
   const useExample = useCallback(() => {
@@ -61,6 +69,13 @@ export const IframeBubbleMenu = ({ editor }) => {
   const copyMe = useCallback(() => copyNode(Iframe.name, editor), [editor]);
   const deleteMe = useCallback(() => deleteNode(Iframe.name, editor), [editor]);
 
+  useEffect(() => {
+    if (defaultShowPicker && user && createUser === user.id) {
+      toggleVisible(true);
+      editor.chain().updateAttributes(Iframe.name, { defaultShowPicker: false }).focus().run();
+    }
+  }, [createUser, defaultShowPicker, editor, toggleVisible, user]);
+
   return (
     <BubbleMenu
       className={'bubble-menu'}