mirror of https://github.com/fantasticit/think.git
tiptap: fix render flow
This commit is contained in:
parent
67410ce2a4
commit
35ca6cba61
|
@ -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)}>
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue