gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: fix render flow

This commit is contained in:
fantasticit 2022-05-19 15:01:49 +08:00
parent 67410ce2a4
commit 35ca6cba61
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/client/src/tiptap/core/wrappers/flow/index.tsx
View File

@ -23,7 +23,10 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const { theme } = useTheme(); const { theme } = useTheme();
const $viewer = useRef(null); const $viewer = useRef(null);
const $container = useRef<HTMLElement>(); const $container = useRef<HTMLElement>();
const isEditorReady = useEditorReady(editor); const doRenderRef = useRef<() => void>();
const isEditorReady = useEditorReady(editor, () => {
doRenderRef.current && doRenderRef.current();
});
const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)'); const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)');
const bgColorOpacity = useMemo(() => { const bgColorOpacity = useMemo(() => {
if (!bgColor) return bgColor; if (!bgColor) return bgColor;
@ -76,18 +79,26 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const render = useCallback( const render = useCallback(
(div) => { (div) => {
if (!isEditorReady) return; const doRender = (div) => {
if (!div) 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);
});
}
doRenderRef.current = null;
};
// @ts-ignore if (!isEditorReady) {
const DrawioViewer = window.GraphViewer; doRenderRef.current = () => doRender(div);
if (DrawioViewer) { return;
div.innerHTML = ''; } else {
DrawioViewer.createViewerForElement(div, (viewer) => { doRender(div);
$viewer.current = viewer;
const background = viewer?.graph?.background;
background && setBgColor(background);
});
} }
}, },
[isEditorReady] [isEditorReady]
@ -96,16 +107,14 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const setMxgraph = useCallback( const setMxgraph = useCallback(
(div) => { (div) => {
$container.current = div; $container.current = div;
if (!isEditorReady) return;
render(div); render(div);
}, },
[isEditorReady, render] [render]
); );
useEffect(() => { useEffect(() => {
if (!isEditorReady) return;
render($container.current); render($container.current);
}, [isEditorReady, graphData, render]); }, [graphData, render]);
return ( return (
<NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}> <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>

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

@ -3,16 +3,21 @@ import { useEffect } from 'react';
import { Editor } from '../react'; import { Editor } from '../react';
export const useEditorReady = (editor: Editor) => { export const useEditorReady = (editor: Editor, onReady?: () => void) => {
const [isEditorReady, toggleEditorReady] = useToggle(false); const [isEditorReady, toggleEditorReady] = useToggle(false);
useEffect(() => { useEffect(() => {
editor.on('create', toggleEditorReady); const handler = () => {
toggleEditorReady();
onReady && onReady();
};
editor.on('create', handler);
return () => { return () => {
editor.off('create', toggleEditorReady); editor.off('create', handler);
}; };
}, [editor, toggleEditorReady]); }, [editor, toggleEditorReady, onReady]);
return isEditorReady; return isEditorReady;
}; };