fix: page title editor bugs (#892)

* Fix page title

* compare empty page title

* Properly handle null tree node name and icon

apps/client/package.json

@@ -37,6 +37,7 @@
     "katex": "0.16.21",
     "lowlight": "^3.2.0",
     "mermaid": "^11.4.1",
+    "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.11",

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

@@ -1,5 +1,5 @@
 import "@/features/editor/styles/index.css";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { Document } from "@tiptap/extension-document";
 import { Heading } from "@tiptap/extension-heading";
@@ -11,16 +11,16 @@ import {
   titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
 import { useUpdatePageMutation } from "@/features/page/queries/page-query";
-import { useDebouncedValue } from "@mantine/hooks";
+import { useDebouncedCallback } from "@mantine/hooks";
 import { useAtom } from "jotai";
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { updateTreeNodeName } from "@/features/page/tree/utils";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 import { History } from "@tiptap/extension-history";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import EmojiCommand from '@/features/editor/extensions/emoji-command.ts';
+import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
+import { UpdateEvent } from "@/features/websocket/types";
+import localEmitter from "@/lib/local-emitter.ts";
 
 export interface TitleEditorProps {
   pageId: string;
@@ -38,16 +38,9 @@ export function TitleEditor({
   editable,
 }: TitleEditorProps) {
   const { t } = useTranslation();
-  const [debouncedTitleState, setDebouncedTitleState] = useState(null);
-  const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 700);
-  const {
-    data: updatedPageData,
-    mutate: updatePageMutation,
-    status,
-  } = useUpdatePageMutation();
+  const { mutateAsync: updatePageMutationAsync } = useUpdatePageMutation();
   const pageEditor = useAtomValue(pageEditorAtom);
   const [, setTitleEditor] = useAtom(titleEditorAtom);
-  const [treeData, setTreeData] = useAtom(treeDataAtom);
   const emit = useQueryEmit();
   const navigate = useNavigate();
   const [activePageId, setActivePageId] = useState(pageId);
@@ -68,18 +61,17 @@ export function TitleEditor({
       History.configure({
         depth: 20,
       }),
-      EmojiCommand
+      EmojiCommand,
     ],
     onCreate({ editor }) {
       if (editor) {
         // @ts-ignore
         setTitleEditor(editor);
+        setActivePageId(pageId);
       }
     },
     onUpdate({ editor }) {
-      const currentTitle = editor.getText();
-      setDebouncedTitleState(currentTitle);
-      setActivePageId(pageId);
+      debounceUpdate();
     },
     editable: editable,
     content: title,
@@ -92,31 +84,34 @@ export function TitleEditor({
     navigate(pageSlug, { replace: true });
   }, [title]);
 
-  useEffect(() => {
-    if (debouncedTitle !== null && activePageId === pageId) {
-      updatePageMutation({
+  const saveTitle = useCallback(() => {
+    if (!titleEditor || activePageId !== pageId) return;
+
+    if (
+      titleEditor.getText() === title ||
+      (titleEditor.getText() === "" && title === null)
+    ) {
+      return;
+    }
+
+    updatePageMutationAsync({
       pageId: pageId,
-        title: debouncedTitle,
-      });
-    }
-  }, [debouncedTitle]);
-
-  useEffect(() => {
-    if (status === "success" && updatedPageData) {
-      const newTreeData = updateTreeNodeName(treeData, pageId, debouncedTitle);
-      setTreeData(newTreeData);
-
-      setTimeout(() => {
-        emit({
+      title: titleEditor.getText(),
+    }).then((page) => {
+      const event: UpdateEvent = {
         operation: "updateOne",
-          spaceId: updatedPageData.spaceId,
+        spaceId: page.spaceId,
         entity: ["pages"],
-          id: pageId,
-          payload: { title: debouncedTitle, slugId: slugId },
+        id: page.id,
+        payload: { title: page.title, slugId: page.slugId },
+      };
+
+      localEmitter.emit("message", event);
+      emit(event);
     });
-      }, 50);
-    }
-  }, [updatedPageData, status]);
+  }, [pageId, title, titleEditor]);
+
+  const debounceUpdate = useDebouncedCallback(saveTitle, 500);
 
   useEffect(() => {
     if (titleEditor && title !== titleEditor.getText()) {
@@ -130,6 +125,13 @@ export function TitleEditor({
     }, 500);
   }, [titleEditor]);
 
+  useEffect(() => {
+    return () => {
+      // force-save title on navigation
+      saveTitle();
+    };
+  }, [pageId]);
+
   function handleTitleKeyDown(event) {
     if (!titleEditor || !pageEditor || event.shiftKey) return;
 

apps/client/src/features/websocket/use-tree-socket.ts

@@ -6,6 +6,7 @@ import { WebSocketEvent } from "@/features/websocket/types";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { useQueryClient } from "@tanstack/react-query";
 import { SimpleTree } from "react-arborist";
+import localEmitter from "@/lib/local-emitter.ts";
 
 export const useTreeSocket = () => {
   const [socket] = useAtom(socketAtom);
@@ -18,8 +19,29 @@ export const useTreeSocket = () => {
   }, [treeData]);
 
   useEffect(() => {
-    socket?.on("message", (event: WebSocketEvent) => {
+    const updateNodeName = (event) => {
+      const initialData = initialTreeData.current;
+      const treeApi = new SimpleTree<SpaceTreeNode>(initialData);
 
+      if (treeApi.find(event?.id)) {
+        if (event.payload?.title !== undefined) {
+          treeApi.update({
+            id: event.id,
+            changes: { name: event.payload.title },
+          });
+          setTreeData(treeApi.data);
+        }
+      }
+    };
+
+    localEmitter.on("message", updateNodeName);
+    return () => {
+      localEmitter.off("message", updateNodeName);
+    };
+  }, []);
+
+  useEffect(() => {
+    socket?.on("message", (event: WebSocketEvent) => {
       const initialData = initialTreeData.current;
       const treeApi = new SimpleTree<SpaceTreeNode>(initialData);
 
@@ -27,30 +49,40 @@ export const useTreeSocket = () => {
         case "updateOne":
           if (event.entity[0] === "pages") {
             if (treeApi.find(event.id)) {
-              if (event.payload?.title) {
-                treeApi.update({ id: event.id, changes: { name: event.payload.title } });
+              if (event.payload?.title !== undefined) {
+                treeApi.update({
+                  id: event.id,
+                  changes: { name: event.payload.title },
+                });
               }
-              if (event.payload?.icon) {
-                treeApi.update({ id: event.id, changes: { icon: event.payload.icon } });
+              if (event.payload?.icon !== undefined) {
+                treeApi.update({
+                  id: event.id,
+                  changes: { icon: event.payload.icon },
+                });
               }
               setTreeData(treeApi.data);
             }
           }
           break;
-        case 'addTreeNode':
+        case "addTreeNode":
           if (treeApi.find(event.payload.data.id)) return;
 
-          treeApi.create({ parentId: event.payload.parentId, index: event.payload.index, data: event.payload.data });
+          treeApi.create({
+            parentId: event.payload.parentId,
+            index: event.payload.index,
+            data: event.payload.data,
+          });
           setTreeData(treeApi.data);
 
           break;
-        case 'moveTreeNode':
+        case "moveTreeNode":
           // move node
           if (treeApi.find(event.payload.id)) {
             treeApi.move({
               id: event.payload.id,
               parentId: event.payload.parentId,
-              index: event.payload.index
+              index: event.payload.index,
             });
 
             // update node position
@@ -58,7 +90,7 @@ export const useTreeSocket = () => {
               id: event.payload.id,
               changes: {
                 position: event.payload.position,
-              }
+              },
             });
 
             setTreeData(treeApi.data);
@@ -71,7 +103,7 @@ export const useTreeSocket = () => {
             setTreeData(treeApi.data);
 
             queryClient.invalidateQueries({
-              queryKey: ['pages', event.payload.node.slugId].filter(Boolean),
+              queryKey: ["pages", event.payload.node.slugId].filter(Boolean),
             });
           }
           break;

apps/client/src/lib/local-emitter.ts

@@ -0,0 +1,3 @@
+import mitt from "mitt";
+const localEmitter = mitt();
+export default localEmitter;

pnpm-lock.yaml

@@ -281,6 +281,9 @@ importers:
       mermaid:
         specifier: ^11.4.1
         version: 11.4.1
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -6957,6 +6960,9 @@ packages:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -16819,6 +16825,8 @@ snapshots:
       minipass: 3.3.6
       yallist: 4.0.0
 
+  mitt@3.0.1: {}
+
   mkdirp@1.0.4: {}
 
   mlly@1.7.3: