mirror of https://github.com/fantasticit/think.git
tiptap: fix render flow
parent
36102b9c82
commit
9a2ca11572
|
@ -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) => {
|
||||
|
|
|
@ -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;
|
||||
};
|
Loading…
Reference in New Issue