tiptap: fix render flow

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

@@ -23,7 +23,10 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   const { theme } = useTheme();
   const $viewer = useRef(null);
   const $container = useRef<HTMLElement>();
-  const isEditorReady = useEditorReady(editor);
+  const doRenderRef = useRef<() => void>();
+  const isEditorReady = useEditorReady(editor, () => {
+    doRenderRef.current && doRenderRef.current();
+  });
   const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)');
   const bgColorOpacity = useMemo(() => {
     if (!bgColor) return bgColor;
@@ -76,9 +79,8 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
 
   const render = useCallback(
     (div) => {
-      if (!isEditorReady) return;
+      const doRender = (div) => {
         if (!div) return;
-
         // @ts-ignore
         const DrawioViewer = window.GraphViewer;
         if (DrawioViewer) {
@@ -89,6 +91,15 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
             background && setBgColor(background);
           });
         }
+        doRenderRef.current = null;
+      };
+
+      if (!isEditorReady) {
+        doRenderRef.current = () => doRender(div);
+        return;
+      } else {
+        doRender(div);
+      }
     },
     [isEditorReady]
   );
@@ -96,16 +107,14 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   const setMxgraph = useCallback(
     (div) => {
       $container.current = div;
-      if (!isEditorReady) return;
       render(div);
     },
-    [isEditorReady, render]
+    [render]
   );
 
   useEffect(() => {
-    if (!isEditorReady) return;
     render($container.current);
-  }, [isEditorReady, graphData, render]);
+  }, [graphData, render]);
 
   return (
     <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>

packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx

@@ -3,16 +3,21 @@ import { useEffect } from 'react';
 
 import { Editor } from '../react';
 
-export const useEditorReady = (editor: Editor) => {
+export const useEditorReady = (editor: Editor, onReady?: () => void) => {
   const [isEditorReady, toggleEditorReady] = useToggle(false);
 
   useEffect(() => {
-    editor.on('create', toggleEditorReady);
+    const handler = () => {
+      toggleEditorReady();
+      onReady && onReady();
+    };
+
+    editor.on('create', handler);
 
     return () => {
-      editor.off('create', toggleEditorReady);
+      editor.off('create', handler);
     };
-  }, [editor, toggleEditorReady]);
+  }, [editor, toggleEditorReady, onReady]);
 
   return isEditorReady;
 };