fix: editor performance improvements (#1648)

* Switch to useEditorState
* change shouldRerenderOnTransaction to false

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

@@ -3,6 +3,7 @@ import {
   BubbleMenuProps,
   isNodeSelection,
   useEditor,
+  useEditorState,
 } from "@tiptap/react";
 import { FC, useEffect, useRef, useState } from "react";
 import {
@@ -50,34 +51,52 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     showCommentPopupRef.current = showCommentPopup;
   }, [showCommentPopup]);
 
+  const editorState = useEditorState({
+    editor: props.editor,
+    selector: (ctx) => {
+      if (!props.editor) {
+        return null;
+      }
+
+      return {
+        isBold: ctx.editor.isActive("bold"),
+        isItalic: ctx.editor.isActive("italic"),
+        isUnderline: ctx.editor.isActive("underline"),
+        isStrike: ctx.editor.isActive("strike"),
+        isCode: ctx.editor.isActive("code"),
+        isComment: ctx.editor.isActive("comment"),
+      };
+    },
+  });
+
   const items: BubbleMenuItem[] = [
     {
       name: "Bold",
-      isActive: () => props.editor.isActive("bold"),
+      isActive: () => editorState?.isBold,
       command: () => props.editor.chain().focus().toggleBold().run(),
       icon: IconBold,
     },
     {
       name: "Italic",
-      isActive: () => props.editor.isActive("italic"),
+      isActive: () => editorState?.isItalic,
       command: () => props.editor.chain().focus().toggleItalic().run(),
       icon: IconItalic,
     },
     {
       name: "Underline",
-      isActive: () => props.editor.isActive("underline"),
+      isActive: () => editorState?.isUnderline,
       command: () => props.editor.chain().focus().toggleUnderline().run(),
       icon: IconUnderline,
     },
     {
       name: "Strike",
-      isActive: () => props.editor.isActive("strike"),
+      isActive: () => editorState?.isStrike,
       command: () => props.editor.chain().focus().toggleStrike().run(),
       icon: IconStrikethrough,
     },
     {
       name: "Code",
-      isActive: () => props.editor.isActive("code"),
+      isActive: () => editorState?.isCode,
       command: () => props.editor.chain().focus().toggleCode().run(),
       icon: IconCode,
     },
@@ -85,7 +104,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
   const commentItem: BubbleMenuItem = {
     name: "Comment",
-    isActive: () => props.editor.isActive("comment"),
+    isActive: () => editorState?.isComment,
     command: () => {
       const commentId = uuid7();
 

apps/client/src/features/editor/components/bubble-menu/color-selector.tsx

@@ -9,7 +9,8 @@ import {
   Text,
   Tooltip,
 } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 
 export interface BubbleColorMenuItem {
@@ -18,7 +19,7 @@ export interface BubbleColorMenuItem {
 }
 
 interface ColorSelectorProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -108,12 +109,36 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   setIsOpen,
 }) => {
   const { t } = useTranslation();
+
+  const editorState = useEditorState({
+    editor,
+    selector: ctx => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const activeColors: Record<string, boolean> = {};
+      TEXT_COLORS.forEach(({ color }) => {
+        activeColors[`text_${color}`] = ctx.editor.isActive("textStyle", { color });
+      });
+      HIGHLIGHT_COLORS.forEach(({ color }) => {
+        activeColors[`highlight_${color}`] = ctx.editor.isActive("highlight", { color });
+      });
+
+      return activeColors;
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
   const activeColorItem = TEXT_COLORS.find(({ color }) =>
-    editor.isActive("textStyle", { color }),
+    editorState[`text_${color}`]
   );
 
   const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
-    editor.isActive("highlight", { color }),
+    editorState[`highlight_${color}`]
   );
 
   return (
@@ -151,7 +176,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 justify="left"
                 fullWidth
                 rightSection={
-                  editor.isActive("textStyle", { color }) && (
+                  editorState[`text_${color}`] && (
                     <IconCheck style={{ width: rem(16) }} />
                   )
                 }

apps/client/src/features/editor/components/bubble-menu/node-selector.tsx

@@ -13,11 +13,12 @@ import {
   IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 
 interface NodeSelectorProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -36,6 +37,27 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!editor) {
+        return null;
+      }
+
+      return {
+        isParagraph: ctx.editor.isActive("paragraph"),
+        isBulletList: ctx.editor.isActive("bulletList"),
+        isOrderedList: ctx.editor.isActive("orderedList"),
+        isHeading1: ctx.editor.isActive("heading", { level: 1 }),
+        isHeading2: ctx.editor.isActive("heading", { level: 2 }),
+        isHeading3: ctx.editor.isActive("heading", { level: 3 }),
+        isTaskItem: ctx.editor.isActive("taskItem"),
+        isBlockquote: ctx.editor.isActive("blockquote"),
+        isCodeBlock: ctx.editor.isActive("codeBlock"),
+      };
+    },
+  });
+
   const items: BubbleMenuItem[] = [
     {
       name: "Text",
@@ -43,45 +65,45 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       command: () =>
         editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
       isActive: () =>
-        editor.isActive("paragraph") &&
+        editorState?.isParagraph &&
-        !editor.isActive("bulletList") &&
+        !editorState?.isBulletList &&
-        !editor.isActive("orderedList"),
+        !editorState?.isOrderedList,
     },
     {
       name: "Heading 1",
       icon: IconH1,
       command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
+      isActive: () => editorState?.isHeading1,
     },
     {
       name: "Heading 2",
       icon: IconH2,
       command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
+      isActive: () => editorState?.isHeading2,
     },
     {
       name: "Heading 3",
       icon: IconH3,
       command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
+      isActive: () => editorState?.isHeading3,
     },
     {
       name: "To-do List",
       icon: IconCheckbox,
       command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskItem"),
+      isActive: () => editorState?.isTaskItem,
     },
     {
       name: "Bullet List",
       icon: IconList,
       command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
+      isActive: () => editorState?.isBulletList,
     },
     {
       name: "Numbered List",
       icon: IconListNumbers,
       command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
+      isActive: () => editorState?.isOrderedList,
     },
     {
       name: "Blockquote",
@@ -93,13 +115,13 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           .toggleNode("paragraph", "paragraph")
           .toggleBlockquote()
           .run(),
-      isActive: () => editor.isActive("blockquote"),
+      isActive: () => editorState?.isBlockquote,
     },
     {
       name: "Code",
       icon: IconCode,
       command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
+      isActive: () => editorState?.isCodeBlock,
     },
   ];
 

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -8,11 +8,12 @@ import {
   IconChevronDown,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, rem } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 
 interface TextAlignmentProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -31,36 +32,54 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      return {
+        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+        isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }),
+      };
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
   const items: BubbleMenuItem[] = [
     {
       name: "Align left",
-      isActive: () => editor.isActive({ textAlign: "left" }),
+      isActive: () => editorState?.isAlignLeft,
       command: () => editor.chain().focus().setTextAlign("left").run(),
       icon: IconAlignLeft,
     },
     {
       name: "Align center",
-      isActive: () => editor.isActive({ textAlign: "center" }),
+      isActive: () => editorState?.isAlignCenter,
       command: () => editor.chain().focus().setTextAlign("center").run(),
       icon: IconAlignCenter,
     },
     {
       name: "Align right",
-      isActive: () => editor.isActive({ textAlign: "right" }),
+      isActive: () => editorState?.isAlignRight,
       command: () => editor.chain().focus().setTextAlign("right").run(),
       icon: IconAlignRight,
     },
     {
       name: "Justify",
-      isActive: () => editor.isActive({ textAlign: "justify" }),
+      isActive: () => editorState?.isAlignJustify,
       command: () => editor.chain().focus().setTextAlign("justify").run(),
       icon: IconAlignJustified,
     },
   ];
 
-  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
-    name: "Multiple",
-  };
 
   return (
     <Popover opened={isOpen} withArrow>
@@ -73,7 +92,7 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
           rightSection={<IconChevronDown size={16} />}
           onClick={() => setIsOpen(!isOpen)}
         >
-          <IconAlignLeft style={{ width: rem(16) }} stroke={2} />
+          <activeItem.icon style={{ width: rem(16) }} stroke={2} />
         </Button>
       </Popover.Target>
 

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

@@ -2,6 +2,7 @@ import {
   BubbleMenu as BaseBubbleMenu,
   findParentNode,
   posToDOMRect,
+  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
@@ -9,7 +10,7 @@ import {
   EditorMenuProps,
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
-import { ActionIcon, Tooltip, Divider } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import {
   IconAlertTriangleFilled,
   IconCircleCheckFilled,
@@ -35,6 +36,23 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
     [editor],
   );
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      return {
+        isCallout: ctx.editor.isActive("callout"),
+        isInfo: ctx.editor.isActive("callout", { type: "info" }),
+        isSuccess: ctx.editor.isActive("callout", { type: "success" }),
+        isWarning: ctx.editor.isActive("callout", { type: "warning" }),
+        isDanger: ctx.editor.isActive("callout", { type: "danger" }),
+      };
+    },
+  });
+
   const getReferenceClientRect = useCallback(() => {
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "callout";
@@ -92,7 +110,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
   return (
     <BaseBubbleMenu
       editor={editor}
-      pluginKey={`callout-menu}`}
+      pluginKey={`callout-menu`}
       updateDelay={0}
       tippyOptions={{
         getReferenceClientRect,
@@ -111,9 +129,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("info")}
             size="lg"
             aria-label={t("Info")}
-            variant={
+            variant={editorState?.isInfo ? "light" : "default"}
-              editor.isActive("callout", { type: "info" }) ? "light" : "default"
-            }
           >
             <IconInfoCircleFilled size={18} />
           </ActionIcon>
@@ -124,11 +140,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("success")}
             size="lg"
             aria-label={t("Success")}
-            variant={
+            variant={editorState?.isSuccess ? "light" : "default"}
-              editor.isActive("callout", { type: "success" })
-                ? "light"
-                : "default"
-            }
           >
             <IconCircleCheckFilled size={18} />
           </ActionIcon>
@@ -139,11 +151,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("warning")}
             size="lg"
             aria-label={t("Warning")}
-            variant={
+            variant={editorState?.isWarning ? "light" : "default"}
-              editor.isActive("callout", { type: "warning" })
-                ? "light"
-                : "default"
-            }
           >
             <IconAlertTriangleFilled size={18} />
           </ActionIcon>
@@ -154,11 +162,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("danger")}
             size="lg"
             aria-label={t("Danger")}
-            variant={
+            variant={editorState?.isDanger ? "light" : "default"}
-              editor.isActive("callout", { type: "danger" })
-                ? "light"
-                : "default"
-            }
           >
             <IconCircleXFilled size={18} />
           </ActionIcon>

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

@@ -2,15 +2,16 @@ import {
   BubbleMenu as BaseBubbleMenu,
   findParentNode,
   posToDOMRect,
-} from '@tiptap/react';
+  useEditorState,
-import { useCallback } from 'react';
+} from "@tiptap/react";
-import { sticky } from 'tippy.js';
+import { useCallback } from "react";
-import { Node as PMNode } from 'prosemirror-model';
+import { sticky } from "tippy.js";
+import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
-} from '@/features/editor/components/table/types/types.ts';
+} from "@/features/editor/components/table/types/types.ts";
-import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
 
 export function DrawioMenu({ editor }: EditorMenuProps) {
   const shouldShow = useCallback(
@@ -19,14 +20,29 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         return false;
       }
 
-      return editor.isActive('drawio') && editor.getAttributes('drawio')?.src;
+      return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
     },
-    [editor]
+    [editor],
   );
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const drawioAttr = ctx.editor.getAttributes("drawio");
+      return {
+        isDrawio: ctx.editor.isActive("drawio"),
+        width: drawioAttr?.width ? parseInt(drawioAttr.width) : null,
+      };
+    },
+  });
+
   const getReferenceClientRect = useCallback(() => {
     const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === 'drawio';
+    const predicate = (node: PMNode) => node.type.name === "drawio";
     const parent = findParentNode(predicate)(selection);
 
     if (parent) {
@@ -39,40 +55,37 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
 
   const onWidthChange = useCallback(
     (value: number) => {
-      editor.commands.updateAttributes('drawio', { width: `${value}%` });
+      editor.commands.updateAttributes("drawio", { width: `${value}%` });
     },
-    [editor]
+    [editor],
   );
 
   return (
     <BaseBubbleMenu
       editor={editor}
-      pluginKey={`drawio-menu}`}
+      pluginKey={`drawio-menu`}
       updateDelay={0}
       tippyOptions={{
         getReferenceClientRect,
         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',
+          display: "flex",
-          flexDirection: 'column',
+          flexDirection: "column",
-          alignItems: 'center',
+          alignItems: "center",
         }}
       >
-        {editor.getAttributes('drawio')?.width && (
+        {editorState?.width && (
-          <NodeWidthResize
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-            onChange={onWidthChange}
-            value={parseInt(editor.getAttributes('drawio').width)}
-          />
         )}
       </div>
     </BaseBubbleMenu>

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

@@ -2,15 +2,16 @@ import {
   BubbleMenu as BaseBubbleMenu,
   findParentNode,
   posToDOMRect,
-} from '@tiptap/react';
+  useEditorState,
-import { useCallback } from 'react';
+} from "@tiptap/react";
-import { sticky } from 'tippy.js';
+import { useCallback } from "react";
-import { Node as PMNode } from 'prosemirror-model';
+import { sticky } from "tippy.js";
+import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
-} from '@/features/editor/components/table/types/types.ts';
+} from "@/features/editor/components/table/types/types.ts";
-import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+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',
+          display: "flex",
-          flexDirection: 'column',
+          flexDirection: "column",
-          alignItems: 'center',
+          alignItems: "center",
         }}
       >
-        {editor.getAttributes('excalidraw')?.width && (
+        {editorState?.width && (
-          <NodeWidthResize
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-            onChange={onWidthChange}
-            value={parseInt(editor.getAttributes('excalidraw').width)}
-          />
         )}
       </div>
     </BaseBubbleMenu>

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

@@ -2,6 +2,7 @@ import {
   BubbleMenu as BaseBubbleMenu,
   findParentNode,
   posToDOMRect,
+  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
@@ -32,6 +33,25 @@ export function ImageMenu({ editor }: EditorMenuProps) {
     [editor],
   );
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const imageAttrs = ctx.editor.getAttributes("image");
+
+      return {
+        isImage: ctx.editor.isActive("image"),
+        isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
+        isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
+        isAlignRight: ctx.editor.isActive("image", { align: "right" }),
+        width: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
+      };
+    },
+  });
+
   const getReferenceClientRect = useCallback(() => {
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "image";
@@ -83,7 +103,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
   return (
     <BaseBubbleMenu
       editor={editor}
-      pluginKey={`image-menu}`}
+      pluginKey={`image-menu`}
       updateDelay={0}
       tippyOptions={{
         getReferenceClientRect,
@@ -103,9 +123,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             onClick={alignImageLeft}
             size="lg"
             aria-label={t("Align left")}
-            variant={
+            variant={editorState?.isAlignLeft ? "light" : "default"}
-              editor.isActive("image", { align: "left" }) ? "light" : "default"
-            }
           >
             <IconLayoutAlignLeft size={18} />
           </ActionIcon>
@@ -116,11 +134,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             onClick={alignImageCenter}
             size="lg"
             aria-label={t("Align center")}
-            variant={
+            variant={editorState?.isAlignCenter ? "light" : "default"}
-              editor.isActive("image", { align: "center" })
-                ? "light"
-                : "default"
-            }
           >
             <IconLayoutAlignCenter size={18} />
           </ActionIcon>
@@ -131,20 +145,15 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             onClick={alignImageRight}
             size="lg"
             aria-label={t("Align right")}
-            variant={
+            variant={editorState?.isAlignRight ? "light" : "default"}
-              editor.isActive("image", { align: "right" }) ? "light" : "default"
-            }
           >
             <IconLayoutAlignRight size={18} />
           </ActionIcon>
         </Tooltip>
       </ActionIcon.Group>
 
-      {editor.getAttributes("image")?.width && (
+      {editorState?.width && (
-        <NodeWidthResize
+        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-          onChange={onWidthChange}
-          value={parseInt(editor.getAttributes("image").width)}
-        />
       )}
     </BaseBubbleMenu>
   );

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

@@ -1,4 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu, useEditorState } from "@tiptap/react";
 import React, { useCallback, useState } from "react";
 import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
@@ -12,7 +12,18 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
     return editor.isActive("link");
   }, [editor]);
 
-  const { href: link } = editor.getAttributes("link");
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+      const link = ctx.editor.getAttributes("link");
+      return {
+        href: link.href,
+      };
+    },
+  });
 
   const handleEdit = useCallback(() => {
     setShowEdit(true);
@@ -70,11 +81,14 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
           padding="xs"
           bg="var(--mantine-color-body)"
         >
-          <LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />
+          <LinkEditorPanel
+            initialUrl={editorState?.href}
+            onSetLink={onSetLink}
+          />
         </Card>
       ) : (
         <LinkPreviewPanel
-          url={link}
+          url={editorState?.href}
           onClear={onUnsetLink}
           onEdit={handleEdit}
         />

apps/client/src/features/editor/components/table/table-background-color.tsx

@@ -9,7 +9,8 @@ import {
   Tooltip,
   UnstyledButton,
 } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 
 export interface TableColorItem {
@@ -18,7 +19,7 @@ export interface TableColorItem {
 }
 
 interface TableBackgroundColorProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
 }
 
 const TABLE_COLORS: TableColorItem[] = [
@@ -38,37 +39,50 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
   const { t } = useTranslation();
   const [opened, setOpened] = React.useState(false);
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      let currentColor = "";
+      if (ctx.editor.isActive("tableCell")) {
+        const attrs = ctx.editor.getAttributes("tableCell");
+        currentColor = attrs.backgroundColor || "";
+      } else if (ctx.editor.isActive("tableHeader")) {
+        const attrs = ctx.editor.getAttributes("tableHeader");
+        currentColor = attrs.backgroundColor || "";
+      }
+
+      return {
+        currentColor,
+        isTableCell: ctx.editor.isActive("tableCell"),
+        isTableHeader: ctx.editor.isActive("tableHeader"),
+      };
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
   const setTableCellBackground = (color: string, colorName: string) => {
     editor
       .chain()
       .focus()
       .updateAttributes("tableCell", {
         backgroundColor: color || null,
-        backgroundColorName: color ? colorName : null 
+        backgroundColorName: color ? colorName : null,
       })
       .updateAttributes("tableHeader", {
         backgroundColor: color || null,
-        backgroundColorName: color ? colorName : null 
+        backgroundColorName: color ? colorName : null,
       })
       .run();
     setOpened(false);
   };
 
-  // Get current cell's background color
-  const getCurrentColor = () => {
-    if (editor.isActive("tableCell")) {
-      const attrs = editor.getAttributes("tableCell");
-      return attrs.backgroundColor || "";
-    }
-    if (editor.isActive("tableHeader")) {
-      const attrs = editor.getAttributes("tableHeader");
-      return attrs.backgroundColor || "";
-    }
-    return "";
-  };
-
-  const currentColor = getCurrentColor();
-
   return (
     <Popover
       width={200}
@@ -123,7 +137,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
                     cursor: "pointer",
                   }}
                 >
-                  {currentColor === item.color && (
+                  {editorState.currentColor === item.color && (
                     <IconCheck
                       size={18}
                       style={{

apps/client/src/features/editor/components/table/table-text-alignment.tsx

@@ -9,15 +9,15 @@ import {
   ActionIcon,
   Button,
   Popover,
-  rem,
   ScrollArea,
   Tooltip,
 } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 
 interface TableTextAlignmentProps {
-  editor: ReturnType<typeof useEditor>;
+  editor: Editor | null;
 }
 
 interface AlignmentItem {
@@ -32,25 +32,44 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
   const { t } = useTranslation();
   const [opened, setOpened] = React.useState(false);
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      return {
+        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+      };
+    },
+  });
+
+  if (!editor || !editorState) {
+    return null;
+  }
+
   const items: AlignmentItem[] = [
     {
       name: "Align left",
       value: "left",
-      isActive: () => editor.isActive({ textAlign: "left" }),
+      isActive: () => editorState?.isAlignLeft,
       command: () => editor.chain().focus().setTextAlign("left").run(),
       icon: IconAlignLeft,
     },
     {
       name: "Align center",
       value: "center",
-      isActive: () => editor.isActive({ textAlign: "center" }),
+      isActive: () => editorState?.isAlignCenter,
       command: () => editor.chain().focus().setTextAlign("center").run(),
       icon: IconAlignCenter,
     },
     {
       name: "Align right",
       value: "right",
-      isActive: () => editor.isActive({ textAlign: "right" }),
+      isActive: () => editorState?.isAlignRight,
       command: () => editor.chain().focus().setTextAlign("right").run(),
       icon: IconAlignRight,
     },
@@ -64,7 +83,7 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
       onChange={setOpened}
       position="bottom"
       withArrow
-      transitionProps={{ transition: 'pop' }}
+      transitionProps={{ transition: "pop" }}
     >
       <Popover.Target>
         <Tooltip label={t("Text alignment")} withArrow>
@@ -87,9 +106,7 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
                 key={index}
                 variant="default"
                 leftSection={<item.icon size={16} />}
-                rightSection={
+                rightSection={item.isActive() && <IconCheck size={16} />}
-                  item.isActive() && <IconCheck size={16} />
-                }
                 justify="left"
                 fullWidth
                 onClick={() => {

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

@@ -2,6 +2,7 @@ import {
   BubbleMenu as BaseBubbleMenu,
   findParentNode,
   posToDOMRect,
+  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
@@ -32,6 +33,25 @@ export function VideoMenu({ editor }: EditorMenuProps) {
     [editor],
   );
 
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) {
+        return null;
+      }
+
+      const videoAttrs = ctx.editor.getAttributes("video");
+
+      return {
+        isVideo: ctx.editor.isActive("video"),
+        isAlignLeft: ctx.editor.isActive("video", { align: "left" }),
+        isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
+        isAlignRight: ctx.editor.isActive("video", { align: "right" }),
+        width: videoAttrs?.width ? parseInt(videoAttrs.width) : null,
+      };
+    },
+  });
+
   const getReferenceClientRect = useCallback(() => {
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "video";
@@ -83,7 +103,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
   return (
     <BaseBubbleMenu
       editor={editor}
-      pluginKey={`video-menu}`}
+      pluginKey={`video-menu`}
       updateDelay={0}
       tippyOptions={{
         getReferenceClientRect,
@@ -103,9 +123,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             onClick={alignVideoLeft}
             size="lg"
             aria-label={t("Align left")}
-            variant={
+            variant={editorState?.isAlignLeft ? "light" : "default"}
-              editor.isActive("video", { align: "left" }) ? "light" : "default"
-            }
           >
             <IconLayoutAlignLeft size={18} />
           </ActionIcon>
@@ -116,11 +134,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             onClick={alignVideoCenter}
             size="lg"
             aria-label={t("Align center")}
-            variant={
+            variant={editorState?.isAlignCenter ? "light" : "default"}
-              editor.isActive("video", { align: "center" })
-                ? "light"
-                : "default"
-            }
           >
             <IconLayoutAlignCenter size={18} />
           </ActionIcon>
@@ -131,20 +145,15 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             onClick={alignVideoRight}
             size="lg"
             aria-label={t("Align right")}
-            variant={
+            variant={editorState?.isAlignRight ? "light" : "default"}
-              editor.isActive("video", { align: "right" }) ? "light" : "default"
-            }
           >
             <IconLayoutAlignRight size={18} />
           </ActionIcon>
         </Tooltip>
       </ActionIcon.Group>
 
-      {editor.getAttributes("video")?.width && (
+      {editorState?.width && (
-        <NodeWidthResize
+        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-          onChange={onWidthChange}
-          value={parseInt(editor.getAttributes("video").width)}
-        />
       )}
     </BaseBubbleMenu>
   );

apps/client/src/features/editor/page-editor.tsx

@@ -7,7 +7,12 @@ import {
   onAuthenticationFailedParameters,
   WebSocketStatus,
 } from "@hocuspocus/provider";
-import { EditorContent, EditorProvider, useEditor } from "@tiptap/react";
+import {
+  EditorContent,
+  EditorProvider,
+  useEditor,
+  useEditorState,
+} from "@tiptap/react";
 import {
   collabExtensions,
   mainExtensions,
@@ -50,7 +55,7 @@ import { extractPageSlugId } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
-import { searchSpotlight } from '@/features/search/constants.ts';
+import { searchSpotlight } from "@/features/search/constants.ts";
 
 interface PageEditorProps {
   pageId: string;
@@ -77,7 +82,7 @@ export default function PageEditor({
   const [isLocalSynced, setLocalSynced] = useState(false);
   const [isRemoteSynced, setRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
-    yjsConnectionStatusAtom
+    yjsConnectionStatusAtom,
   );
   const menuContainerRef = useRef(null);
   const documentName = `page.${pageId}`;
@@ -213,17 +218,17 @@ export default function PageEditor({
       extensions,
       editable,
       immediatelyRender: true,
-      shouldRerenderOnTransaction: true,
+      shouldRerenderOnTransaction: false,
       editorProps: {
         scrollThreshold: 80,
         scrollMargin: 80,
         handleDOMEvents: {
           keydown: (_view, event) => {
-            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+            if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
               event.preventDefault();
               return true;
             }
-            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyK') {
+            if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") {
               searchSpotlight.open();
               return true;
             }
@@ -268,9 +273,16 @@ export default function PageEditor({
         debouncedUpdateContent(editorJson);
       },
     },
-    [pageId, editable, remoteProvider]
+    [pageId, editable, remoteProvider],
   );
 
+  const editorIsEditable = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return ctx.editor?.isEditable ?? false;
+    },
+  });
+
   const debouncedUpdateContent = useDebouncedCallback((newContent: any) => {
     const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);
 
@@ -306,7 +318,7 @@ export default function PageEditor({
     return () => {
       document.removeEventListener(
         "ACTIVE_COMMENT_EVENT",
-        handleActiveCommentEvent
+        handleActiveCommentEvent,
       );
     };
   }, []);
@@ -389,7 +401,7 @@ export default function PageEditor({
           <SearchAndReplaceDialog editor={editor} editable={editable} />
         )}
 
-        {editor && editor.isEditable && (
+        {editor && editorIsEditable && (
           <div>
             <EditorBubbleMenu editor={editor} />
             <TableMenu editor={editor} />