tiptap: delay flow renderer

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

@@ -7,6 +7,7 @@ import { convertColorToRGBA } from 'helpers/color';
 import { Theme, useTheme } from 'hooks/use-theme';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Flow } from 'tiptap/core/extensions/flow';
+import { useEditorReady } from 'tiptap/editor/hooks/use-editor-ready';
 import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
 
 import styles from './index.module.scss';
@@ -22,6 +23,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   const { theme } = useTheme();
   const $viewer = useRef(null);
   const $container = useRef<HTMLElement>();
+  const isEditorReady = useEditorReady(editor);
   const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)');
   const bgColorOpacity = useMemo(() => {
     if (!bgColor) return bgColor;
@@ -72,7 +74,9 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
     [updateAttributes]
   );
 
-  const render = useCallback((div) => {
+  const render = useCallback(
+    (div) => {
+      if (!isEditorReady) return;
       if (!div) return;
 
       // @ts-ignore
@@ -85,7 +89,9 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
           background && setBgColor(background);
         });
       }
-  }, []);
+    },
+    [isEditorReady]
+  );
 
   const setMxgraph = useCallback(
     (div) => {

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

@@ -0,0 +1,18 @@
+import { useToggle } from 'hooks/use-toggle';
+import { useEffect } from 'react';
+
+import { Editor } from '../react';
+
+export const useEditorReady = (editor: Editor) => {
+  const [isEditorReady, toggleEditorReady] = useToggle(false);
+
+  useEffect(() => {
+    editor.on('create', toggleEditorReady);
+
+    return () => {
+      editor.off('create', toggleEditorReady);
+    };
+  }, [editor, toggleEditorReady]);
+
+  return isEditorReady;
+};