tiptap: optimize render

packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx

@@ -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;
+});

packages/client/src/tiptap/core/wrappers/flow/index.tsx

@@ -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;
+});

packages/client/src/tiptap/core/wrappers/mind/index.tsx

@@ -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;
+});