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

tiptap: optimize render

fix/tiptap
fantasticit 2022-08-19 18:51:15 +08:00
parent 32fdf58f42
commit 7289050350
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
View File

@ -3,7 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { IconMind } from 'components/icons';
import { Resizeable } from 'components/resizeable';
import deepEqual from 'deep-equal';
import { useToggle } from 'hooks/use-toggle';
import React from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { Excalidraw } from 'tiptap/core/extensions/excalidraw';
@ -15,7 +17,7 @@ const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
export const _ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
const exportToSvgRef = useRef(null);
const isEditable = editor.isEditable;
const isActive = editor.isActive(Excalidraw.name);
@ -111,3 +113,11 @@ export const ExcalidrawWrapper = ({ editor, node, updateAttributes }) => {
</NodeViewWrapper>
);
};
export const ExcalidrawWrapper = React.memo(_ExcalidrawWrapper, (prevProps, nextProps) => {
if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
return true;
}
return false;
});

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

@ -3,7 +3,9 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable';
import deepEqual from 'deep-equal';
import { useToggle } from 'hooks/use-toggle';
import React from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { load, renderXml } from 'thirtypart/diagram';
@ -15,7 +17,7 @@ import styles from './index.module.scss';
const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
export const FlowWrapper = ({ editor, node, updateAttributes }) => {
export const _FlowWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable;
const isActive = editor.isActive(Flow.name);
const { width: maxWidth } = getEditorContainerDOMSize(editor);
@ -137,3 +139,11 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
</NodeViewWrapper>
);
};
export const FlowWrapper = React.memo(_FlowWrapper, (prevProps, nextProps) => {
if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
return true;
}
return false;
});

13
packages/client/src/tiptap/core/wrappers/mind/index.tsx
View File

@ -9,7 +9,6 @@ import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { load, renderMind } from 'thirtypart/kityminder';
import { Mind } from 'tiptap/core/extensions/mind';
import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant';
import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils';
@ -19,7 +18,7 @@ const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
export const MindWrapper = ({ editor, node, updateAttributes }) => {
export const _MindWrapper = ({ editor, node, updateAttributes }) => {
const $mind = useRef(null);
const isEditable = editor.isEditable;
const { width: maxWidth } = getEditorContainerDOMSize(editor);
@ -122,7 +121,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
{loading && <Spin spinning style={INHERIT_SIZE_STYLE}></Spin>}
{!loading && !error && visible && (
{!loading && !error && (
<div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
)}
@ -164,3 +163,11 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
</NodeViewWrapper>
);
};
export const MindWrapper = React.memo(_MindWrapper, (prevProps, nextProps) => {
if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
return true;
}
return false;
});