fix: editor performance improvements (#1648)

* Switch to useEditorState
* change shouldRerenderOnTransaction to false

apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx

@@ -2,15 +2,16 @@ import {
   BubbleMenu as BaseBubbleMenu,
   findParentNode,
   posToDOMRect,
-} from '@tiptap/react';
-import { useCallback } from 'react';
-import { sticky } from 'tippy.js';
-import { Node as PMNode } from 'prosemirror-model';
+  useEditorState,
+} from "@tiptap/react";
+import { useCallback } from "react";
+import { sticky } from "tippy.js";
+import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
-} from '@/features/editor/components/table/types/types.ts';
-import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+} from "@/features/editor/components/table/types/types.ts";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
 
 export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   const shouldShow = useCallback(
@@ -19,14 +20,31 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         return false;
       }
 
-      return editor.isActive('excalidraw') && editor.getAttributes('excalidraw')?.src;
+      return (
+        editor.isActive("excalidraw") && editor.getAttributes("excalidraw")?.src
+      );
     },
-    [editor]
+    [editor],
   );
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
+      return {
+        isExcalidraw: ctx.editor.isActive("excalidraw"),
+        width: excalidrawAttr?.width ? parseInt(excalidrawAttr.width) : null,
+      };
+    },
+  });
+
   const getReferenceClientRect = useCallback(() => {
     const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === 'excalidraw';
+    const predicate = (node: PMNode) => node.type.name === "excalidraw";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
@@ -39,9 +57,9 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
 
   const onWidthChange = useCallback(
     (value: number) => {
-      editor.commands.updateAttributes('excalidraw', { width: `${value}%` });
+      editor.commands.updateAttributes("excalidraw", { width: `${value}%` });
     },
-    [editor]
+    [editor],
   );
 
   return (
@@ -54,25 +72,22 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         offset: [0, 8],
         zIndex: 99,
         popperOptions: {
-          modifiers: [{ name: 'flip', enabled: false }],
+          modifiers: [{ name: "flip", enabled: false }],
         },
         plugins: [sticky],
-        sticky: 'popper',
+        sticky: "popper",
       }}
       shouldShow={shouldShow}
     >
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
         }}
       >
-        {editor.getAttributes('excalidraw')?.width && (
-          <NodeWidthResize
-            onChange={onWidthChange}
-            value={parseInt(editor.getAttributes('excalidraw').width)}
-          />
+        {editorState?.width && (
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
         )}
       </div>
     </BaseBubbleMenu>