diff --git a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx b/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
index 4daeced1..f69aefc2 100644
--- a/packages/client/src/tiptap/core/wrappers/excalidraw/index.tsx
+++ b/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 }) => {
);
};
+
+export const ExcalidrawWrapper = React.memo(_ExcalidrawWrapper, (prevProps, nextProps) => {
+ if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
+ return true;
+ }
+
+ return false;
+});
diff --git a/packages/client/src/tiptap/core/wrappers/flow/index.tsx b/packages/client/src/tiptap/core/wrappers/flow/index.tsx
index afc0c7ae..e6437651 100644
--- a/packages/client/src/tiptap/core/wrappers/flow/index.tsx
+++ b/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 }) => {
);
};
+
+export const FlowWrapper = React.memo(_FlowWrapper, (prevProps, nextProps) => {
+ if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
+ return true;
+ }
+
+ return false;
+});
diff --git a/packages/client/src/tiptap/core/wrappers/mind/index.tsx b/packages/client/src/tiptap/core/wrappers/mind/index.tsx
index bff13e12..8ea6118b 100644
--- a/packages/client/src/tiptap/core/wrappers/mind/index.tsx
+++ b/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 &&