fix: editor improvements (#583)

* delete unused component

* return page prosemirror content

* prefetch pages

* use prosemirro json content on editor

* cache page query with id and slug as key

* Show notice on collaboration disconnection

* enable scroll while typing

* enable immediatelyRender

* avoid image break in PDF print

* Comment editor rendering props

apps/client/src/features/editor/atoms/editor-atoms.ts

@@ -1,6 +1,8 @@
-import { atom } from 'jotai';
-import { Editor } from '@tiptap/core';
+import { atom } from "jotai";
+import { Editor } from "@tiptap/core";
 
 export const pageEditorAtom = atom<Editor | null>(null);
 
 export const titleEditorAtom = atom<Editor | null>(null);
+
+export const yjsConnectionStatusAtom = atom<string>("");

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

@@ -13,6 +13,7 @@ export interface FullEditorProps {
   pageId: string;
   slugId: string;
   title: string;
+  content: string;
   spaceSlug: string;
   editable: boolean;
 }
@@ -21,6 +22,7 @@ export function FullEditor({
   pageId,
   title,
   slugId,
+  content,
   spaceSlug,
   editable,
 }: FullEditorProps) {
@@ -40,7 +42,7 @@ export function FullEditor({
         spaceSlug={spaceSlug}
         editable={editable}
       />
-      <MemoizedPageEditor pageId={pageId} editable={editable} />
+      <MemoizedPageEditor pageId={pageId} editable={editable} content={content} />
     </Container>
   );
 }

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

@@ -8,8 +8,8 @@ import React, {
 } from "react";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
-import { HocuspocusProvider } from "@hocuspocus/provider";
-import { EditorContent, useEditor } from "@tiptap/react";
+import { HocuspocusProvider, WebSocketStatus } from "@hocuspocus/provider";
+import { EditorContent, EditorProvider, useEditor } from "@tiptap/react";
 import {
   collabExtensions,
   mainExtensions,
@@ -18,14 +18,16 @@ import { useAtom } from "jotai";
 import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
 import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
-import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
+import {
+  pageEditorAtom,
+  yjsConnectionStatusAtom,
+} from "@/features/editor/atoms/editor-atoms";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
 import {
   activeCommentIdAtom,
   showCommentPopupAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentDialog from "@/features/comment/components/comment-dialog";
-import EditorSkeleton from "@/features/editor/components/editor-skeleton";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
@@ -43,9 +45,14 @@ import DrawioMenu from "./components/drawio/drawio-menu";
 interface PageEditorProps {
   pageId: string;
   editable: boolean;
+  content: any;
 }
 
-export default function PageEditor({ pageId, editable }: PageEditorProps) {
+export default function PageEditor({
+  pageId,
+  editable,
+  content,
+}: PageEditorProps) {
   const [token] = useAtom(authTokensAtom);
   const collaborationURL = useCollaborationUrl();
   const [currentUser] = useAtom(currentUserAtom);
@@ -56,8 +63,11 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
   const ydoc = useMemo(() => new Y.Doc(), [pageId]);
   const [isLocalSynced, setLocalSynced] = useState(false);
   const [isRemoteSynced, setRemoteSynced] = useState(false);
-  const documentName = `page.${pageId}`;
+  const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
+    yjsConnectionStatusAtom,
+  );
   const menuContainerRef = useRef(null);
+  const documentName = `page.${pageId}`;
 
   const localProvider = useMemo(() => {
     const provider = new IndexeddbPersistence(documentName, ydoc);
@@ -76,12 +86,21 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
       document: ydoc,
       token: token?.accessToken,
       connect: false,
+      onStatus: (status) => {
+        if (status.status === "connected") {
+          setYjsConnectionStatus(status.status);
+        }
+      },
     });
 
     provider.on("synced", () => {
       setRemoteSynced(true);
     });
 
+    provider.on("disconnect", () => {
+      setYjsConnectionStatus(WebSocketStatus.Disconnected);
+    });
+
     return provider;
   }, [ydoc, pageId, token?.accessToken]);
 
@@ -97,15 +116,18 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
   }, [remoteProvider, localProvider]);
 
   const extensions = [
-    ... mainExtensions,
-    ... collabExtensions(remoteProvider, currentUser.user),
+    ...mainExtensions,
+    ...collabExtensions(remoteProvider, currentUser.user),
   ];
 
   const editor = useEditor(
     {
       extensions,
       editable,
+      immediatelyRender: true,
       editorProps: {
+        scrollThreshold: 80,
+        scrollMargin: 80,
         handleDOMEvents: {
           keydown: (_view, event) => {
             if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
@@ -157,36 +179,51 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
     setAsideState({ tab: "", isAsideOpen: false });
   }, [pageId]);
 
-  const isSynced = isLocalSynced || isRemoteSynced;
+  useEffect(() => {
+    if (editable) {
+      if (yjsConnectionStatus === WebSocketStatus.Connected) {
+        editor.setEditable(true);
+      } else {
+        // disable edits if connection fails
+        editor.setEditable(false);
+      }
+    }
+  }, [yjsConnectionStatus]);
+
+  const isSynced = isLocalSynced && isRemoteSynced;
 
   return isSynced ? (
     <div>
-      {isSynced && (
-        <div ref={menuContainerRef}>
-          <EditorContent editor={editor} />
+      <div ref={menuContainerRef}>
+        <EditorContent editor={editor} />
 
-          {editor && editor.isEditable && (
-            <div>
-              <EditorBubbleMenu editor={editor} />
-              <TableMenu editor={editor} />
-              <TableCellMenu editor={editor} appendTo={menuContainerRef} />
-              <ImageMenu editor={editor} />
-              <VideoMenu editor={editor} />
-              <CalloutMenu editor={editor} />
-              <ExcalidrawMenu editor={editor} />
-              <DrawioMenu editor={editor} />
-              <LinkMenu editor={editor} appendTo={menuContainerRef} />
-            </div>
-          )}
+        {editor && editor.isEditable && (
+          <div>
+            <EditorBubbleMenu editor={editor} />
+            <TableMenu editor={editor} />
+            <TableCellMenu editor={editor} appendTo={menuContainerRef} />
+            <ImageMenu editor={editor} />
+            <VideoMenu editor={editor} />
+            <CalloutMenu editor={editor} />
+            <ExcalidrawMenu editor={editor} />
+            <DrawioMenu editor={editor} />
+            <LinkMenu editor={editor} appendTo={menuContainerRef} />
+          </div>
+        )}
 
-          {showCommentPopup && (
-            <CommentDialog editor={editor} pageId={pageId} />
-          )}
-        </div>
-      )}
-      <div onClick={() => editor.commands.focus('end')} style={{ paddingBottom: '20vh' }}></div>
+        {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
+      </div>
+
+      <div
+        onClick={() => editor.commands.focus("end")}
+        style={{ paddingBottom: "20vh" }}
+      ></div>
     </div>
   ) : (
-    <EditorSkeleton />
+    <EditorProvider
+      editable={false}
+      extensions={mainExtensions}
+      content={content}
+    ></EditorProvider>
   );
 }

apps/client/src/features/editor/styles/media.css

@@ -2,6 +2,10 @@
   img {
     max-width: 100%;
     height: auto;
+
+    @media print {
+      break-inside: avoid;
+    }
   }
 
   .node-image, .node-video, .node-excalidraw, .node-drawio {

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

@@ -38,7 +38,7 @@ export function TitleEditor({
 }: TitleEditorProps) {
   const { t } = useTranslation();
   const [debouncedTitleState, setDebouncedTitleState] = useState(null);
-  const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 500);
+  const [debouncedTitle] = useDebouncedValue(debouncedTitleState, 700);
   const {
     data: updatedPageData,
     mutate: updatePageMutation,
@@ -81,6 +81,8 @@ export function TitleEditor({
     },
     editable: editable,
     content: title,
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
   });
 
   useEffect(() => {