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:37:51 +08:00
parent 36102b9c82
commit 9a2ca11572
2 changed files with 13 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,6 @@ import { convertColorToRGBA } from 'helpers/color';
import { Theme, useTheme } from 'hooks/use-theme'; import { Theme, useTheme } from 'hooks/use-theme';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Flow } from 'tiptap/core/extensions/flow'; import { Flow } from 'tiptap/core/extensions/flow';
import { useEditorReady } from 'tiptap/editor/hooks/use-editor-ready';
import { getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -23,9 +22,6 @@ 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, () => {
render($container.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,12 +72,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
[updateAttributes] [updateAttributes]
); );
const render = useCallback( const render = useCallback((div) => {
(div) => {
if (!isEditorReady) {
return;
}
if (!div) return; if (!div) return;
// @ts-ignore // @ts-ignore
const DrawioViewer = window.GraphViewer; const DrawioViewer = window.GraphViewer;
@ -93,9 +84,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
background && setBgColor(background); background && setBgColor(background);
}); });
} }
}, }, []);
[isEditorReady]
);
const setMxgraph = useCallback( const setMxgraph = useCallback(
(div) => { (div) => {

23
packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx
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;
};