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

tiptap: delay flow renderer

This commit is contained in:
fantasticit 2022-05-19 14:35:29 +08:00
parent 9257e683da
commit 657b0e0ef9
2 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

18
packages/client/src/tiptap/editor/hooks/use-editor-ready.tsx Normal file
View File

@ -0,0 +1,18 @@
import { useToggle } from 'hooks/use-toggle';
import { useEffect } from 'react';
import { Editor } from '../react';
export const useEditorReady = (editor: Editor) => {
const [isEditorReady, toggleEditorReady] = useToggle(false);
useEffect(() => {
editor.on('create', toggleEditorReady);
return () => {
editor.off('create', toggleEditorReady);
};
}, [editor, toggleEditorReady]);
return isEditorReady;
};