tiptap: fix render flow

pull/44/head
fantasticit 2022-05-19 15:37:51 +08:00
parent 36102b9c82
commit 9a2ca11572
2 changed files with 13 additions and 47 deletions

View File

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

View File

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