fix: add editor rerendering optimization

makeplane · Dec 24, 2024 · a207653 · a207653
1 parent 0ccef4a
commit a207653
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 97 deletions.
diff --git a/live/package.json b/live/package.json
@@ -20,10 +20,6 @@
     "@hocuspocus/extension-logger": "^2.15.0",
     "@hocuspocus/extension-redis": "^2.15.0",
     "@hocuspocus/server": "^2.15.0",
-    "@hocuspocus/extension-database": "^2.11.3",
-    "@hocuspocus/extension-logger": "^2.11.3",
-    "@hocuspocus/extension-redis": "^2.13.5",
-    "@hocuspocus/server": "^2.11.3",
     "@plane/constants": "*",
     "@plane/editor": "*",
     "@plane/types": "*",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -55,27 +55,7 @@
     "@tiptap/starter-kit": "^2.10.3",
     "@tiptap/suggestion": "^2.10.3",
     "clsx": "^2.0.0",
-    "@hocuspocus/provider": "^2.13.5",
     "@plane/types": "*",
-    "@plane/ui": "*",
-    "@plane/utils": "*",
-    "@tiptap/core": "^2.1.13",
-    "@tiptap/extension-blockquote": "^2.1.13",
-    "@tiptap/extension-character-count": "^2.6.5",
-    "@tiptap/extension-collaboration": "^2.3.2",
-    "@tiptap/extension-image": "^2.1.13",
-    "@tiptap/extension-list-item": "^2.1.13",
-    "@tiptap/extension-mention": "^2.1.13",
-    "@tiptap/extension-placeholder": "^2.3.0",
-    "@tiptap/extension-task-item": "^2.1.13",
-    "@tiptap/extension-task-list": "^2.1.13",
-    "@tiptap/extension-text-align": "^2.8.0",
-    "@tiptap/extension-text-style": "^2.7.1",
-    "@tiptap/extension-underline": "^2.1.13",
-    "@tiptap/pm": "^2.1.13",
-    "@tiptap/react": "^2.1.13",
-    "@tiptap/starter-kit": "^2.1.13",
-    "@tiptap/suggestion": "^2.0.13",
     "class-variance-authority": "^0.7.0",
     "highlight.js": "^11.8.0",
     "jsx-dom-cjs": "^8.0.3",

diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
@@ -1,9 +1,8 @@
-import { useImperativeHandle, MutableRefObject, useEffect, useState } from "react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { DOMSerializer } from "@tiptap/pm/model";
 import { EditorProps } from "@tiptap/pm/view";
-import { Editor, useEditorState, useEditor as useTiptapEditor } from "@tiptap/react";
-import { useEditor as useTiptapEditor, Editor, Extensions } from "@tiptap/react";
+import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
+import { useImperativeHandle, MutableRefObject, useEffect } from "react";
 import * as Y from "yjs";
 // components
 import { getEditorMenuItems } from "@/components/menus";
@@ -72,46 +71,10 @@ export const useEditor = (props: CustomEditorProps) => {
     autofocus = false,
   } = props;
 
-  const editor = useTiptapEditor({
-    immediatelyRender: true,
-    shouldRerenderOnTransaction: false,
-    autofocus,
-    editorProps: {
-      ...CoreEditorProps({
-        editorClassName,
-      }),
-      ...editorProps,
-    },
-    extensions: [
-      ...CoreEditorExtensions({
-        disabledExtensions,
-        enableHistory,
-        fileHandler,
-        mentionConfig: {
-          mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
-          mentionHighlights: mentionHandler.highlights,
-        },
-        placeholder,
-        tabIndex,
-      }),
-      ...extensions,
-    ],
-    content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
-    onCreate: () => handleEditorReady?.(true),
-    onTransaction: () => {
-      onTransaction?.();
-    },
-    onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
-    onDestroy: () => handleEditorReady?.(false),
-  });
-  // states
-  const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
-  // refs
-  const editorRef: MutableRefObject<Editor | null> = useRef(null);
-  const savedSelectionRef = useRef(savedSelection);
   const editor = useTiptapEditor(
     {
-      editable,
+      immediatelyRender: true,
+      shouldRerenderOnTransaction: false,
       autofocus,
       editorProps: {
         ...CoreEditorProps({
@@ -133,8 +96,7 @@ export const useEditor = (props: CustomEditorProps) => {
       ],
       content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
       onCreate: () => handleEditorReady?.(true),
-      onTransaction: ({ editor }) => {
-        setSavedSelection(editor.state.selection);
+      onTransaction: () => {
         onTransaction?.();
       },
       onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
@@ -143,18 +105,6 @@ export const useEditor = (props: CustomEditorProps) => {
     [editable]
   );
 
-  const editorState = useEditorState({
-    editor,
-    // This function will be called every time the editor state changes
-    selector: ({ editor: editorInstance }: { editor: Editor }) => ({
-      // It will only re-render if the bold or italic state changes
-      isBold: editorInstance.isActive("bold"),
-      isItalic: editorInstance.isActive("italic"),
-    }),
-  });
-
-  console.log("editorState", editorState);
-  const [currentEditorState, setCurrentEditorState] = useState(editorState);
   // Effect for syncing SWR data
   useEffect(() => {
     // value is null when intentionally passed where syncing is not yet
@@ -173,9 +123,6 @@ export const useEditor = (props: CustomEditorProps) => {
       }
     }
   }, [editor, value, id]);
-  useEffect(() => {
-    setCurrentEditorState(editorState);
-  }, [editorState]);
 
   useImperativeHandle(
     forwardedRef,
@@ -330,7 +277,7 @@ export const useEditor = (props: CustomEditorProps) => {
       emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
       listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
     }),
-    [editor, currentEditorState]
+    [editor]
   );
 
   if (!editor) {