From 657b0e0ef999493fe525345d8ebe777a8c43698f Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 19 May 2022 14:35:29 +0800
Subject: [PATCH] tiptap: delay flow renderer

---
 .../src/tiptap/core/wrappers/flow/index.tsx   | 32 +++++++++++--------
 .../tiptap/editor/hooks/use-editor-ready.tsx  | 18 +++++++++++
 2 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx

diff --git a/packages/client/src/tiptap/core/wrappers/flow/index.tsx b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
index d71a9f99..09954701 100644
--- a/packages/client/src/tiptap/core/wrappers/flow/index.tsx
+++ b/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,20 +74,24 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
     [updateAttributes]
   );
 
-  const render = useCallback((div) => {
-    if (!div) return;
+  const render = useCallback(
+    (div) => {
+      if (!isEditorReady) return;
+      if (!div) return;
 
-    // @ts-ignore
-    const DrawioViewer = window.GraphViewer;
-    if (DrawioViewer) {
-      div.innerHTML = '';
-      DrawioViewer.createViewerForElement(div, (viewer) => {
-        $viewer.current = viewer;
-        const background = viewer?.graph?.background;
-        background && setBgColor(background);
-      });
-    }
-  }, []);
+      // @ts-ignore
+      const DrawioViewer = window.GraphViewer;
+      if (DrawioViewer) {
+        div.innerHTML = '';
+        DrawioViewer.createViewerForElement(div, (viewer) => {
+          $viewer.current = viewer;
+          const background = viewer?.graph?.background;
+          background && setBgColor(background);
+        });
+      }
+    },
+    [isEditorReady]
+  );
 
   const setMxgraph = useCallback(
     (div) => {
diff --git a/packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx b/packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx
new file mode 100644
index 00000000..da8b6478
--- /dev/null
+++ b/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;
+};