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

37
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,26 +72,19 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
[updateAttributes] [updateAttributes]
); );
const render = useCallback( const render = useCallback((div) => {
(div) => { if (!div) return;
if (!isEditorReady) { // @ts-ignore
return; const DrawioViewer = window.GraphViewer;
} if (DrawioViewer) {
div.innerHTML = '';
if (!div) return; DrawioViewer.createViewerForElement(div, (viewer) => {
// @ts-ignore $viewer.current = viewer;
const DrawioViewer = window.GraphViewer; const background = viewer?.graph?.background;
if (DrawioViewer) { background && setBgColor(background);
div.innerHTML = ''; });
DrawioViewer.createViewerForElement(div, (viewer) => { }
$viewer.current = viewer; }, []);
const background = viewer?.graph?.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;
};