tiptap: delay flow renderer

This commit is contained in:
fantasticit 2022-05-19 14:35:29 +08:00
parent 9257e683da
commit 657b0e0ef9
2 changed files with 37 additions and 13 deletions

View File

@ -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) => {

View File

@ -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;
};