From 9a2ca115726cbbc1c9b2c4f9b7881a2222161768 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 19 May 2022 15:37:51 +0800
Subject: [PATCH] tiptap: fix render flow

---
 .../src/tiptap/core/wrappers/flow/index.tsx   | 37 +++++++------------
 .../tiptap/editor/hooks/use-editor-ready.tsx  | 23 ------------
 2 files changed, 13 insertions(+), 47 deletions(-)
 delete 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 9d0e0899..324eaf7f 100644
--- a/packages/client/src/tiptap/core/wrappers/flow/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
@@ -7,7 +7,6 @@ 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';
@@ -23,9 +22,6 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   const { theme } = useTheme();
   const $viewer = useRef(null);
   const $container = useRef<HTMLElement>();
-  const isEditorReady = useEditorReady(editor, () => {
-    render($container.current);
-  });
   const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)');
   const bgColorOpacity = useMemo(() => {
     if (!bgColor) return bgColor;
@@ -76,26 +72,19 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
     [updateAttributes]
   );
 
-  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);
-        });
-      }
-    },
-    [isEditorReady]
-  );
+  const render = useCallback((div) => {
+    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);
+      });
+    }
+  }, []);
 
   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
deleted file mode 100644
index 409a155c..00000000
--- a/packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useToggle } from 'hooks/use-toggle';
-import { useEffect } from 'react';
-
-import { Editor } from '../react';
-
-export const useEditorReady = (editor: Editor, onReady?: () => void) => {
-  const [isEditorReady, toggleEditorReady] = useToggle(false);
-
-  useEffect(() => {
-    const handler = () => {
-      toggleEditorReady();
-      onReady && onReady();
-    };
-
-    editor.on('create', handler);
-
-    return () => {
-      editor.off('create', handler);
-    };
-  }, [editor, toggleEditorReady, onReady]);
-
-  return isEditorReady;
-};