fix: editor performance improvements (#1648)

* Switch to useEditorState * change shouldRerenderOnTransaction to false
2025-09-30 14:04:01 +01:00
parent b50e25600a
commit 3fae41a5ca
13 changed files with 369 additions and 177 deletions
@@ -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();

@@ -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) }} />
                  )
                }
@@ -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") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
+        editorState?.isParagraph &&
+        !editorState?.isBulletList &&
+        !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,
    },
  ];

@@ -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() ?? {
-    name: "Multiple",
-  };
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];

  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>