[WEB-1116] chore: add fallback for the live server (#5622)

* chore: add fallback for the live server

* fix: update provider document after patch request

* chore: make the health check call only on connection fail

* chore: update debounce interval

* refactor: remove useSwr call for healtch check

* fix: pages fallback init

live/src/core/hocuspocus-server.ts

@@ -34,5 +34,6 @@ export const getHocusPocusServer = async () => {
       }
     },
     extensions,
+    debounce: 10000
   });
 };

packages/editor/src/core/helpers/yjs.ts

@@ -0,0 +1,16 @@
+import * as Y from "yjs";
+
+/**
+ * @description apply updates to a doc and return the updated doc in base64(binary) format
+ * @param {Uint8Array} document
+ * @param {Uint8Array} updates
+ * @returns {string} base64(binary) form of the updated doc
+ */
+export const applyUpdates = (document: Uint8Array, updates: Uint8Array): Uint8Array => {
+  const yDoc = new Y.Doc();
+  Y.applyUpdate(yDoc, document);
+  Y.applyUpdate(yDoc, updates);
+
+  const encodedDoc = Y.encodeStateAsUpdate(yDoc);
+  return encodedDoc;
+};

packages/editor/src/core/hooks/use-collaborative-editor.ts

@@ -68,10 +68,6 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     editorProps,
     editorClassName,
     enableHistory: false,
-    fileHandler,
-    handleEditorReady,
-    forwardedRef,
-    mentionHandler,
     extensions: [
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),
@@ -88,7 +84,12 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
         userDetails: user,
       }),
     ],
+    fileHandler,
+    handleEditorReady,
+    forwardedRef,
+    mentionHandler,
     placeholder,
+    provider,
     tabIndex,
   });
 

packages/editor/src/core/hooks/use-editor.ts

@@ -1,8 +1,10 @@
 import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
+import { HocuspocusProvider } from "@hocuspocus/provider";
 import { DOMSerializer } from "@tiptap/pm/model";
 import { Selection } from "@tiptap/pm/state";
 import { EditorProps } from "@tiptap/pm/view";
 import { useEditor as useTiptapEditor, Editor } from "@tiptap/react";
+import * as Y from "yjs";
 // components
 import { getEditorMenuItems } from "@/components/menus";
 // extensions
@@ -32,6 +34,7 @@ export interface CustomEditorProps {
   };
   onChange?: (json: object, html: string) => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  provider?: HocuspocusProvider;
   tabIndex?: number;
   // undefined when prop is not passed, null if intentionally passed to stop
   // swr syncing
@@ -52,6 +55,7 @@ export const useEditor = (props: CustomEditorProps) => {
     mentionHandler,
     onChange,
     placeholder,
+    provider,
     tabIndex,
     value,
   } = props;
@@ -186,9 +190,16 @@ export const useEditor = (props: CustomEditorProps) => {
         const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
         return markdownOutput;
       },
-      getHTML: (): string => {
+      getDocument: () => {
-        const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
+        const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
-        return htmlOutput;
+        const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
+        const documentJSON = editorRef.current?.getJSON() ?? null;
+
+        return {
+          binary: documentBinary,
+          html: documentHTML,
+          json: documentJSON,
+        };
       },
       scrollSummary: (marking: IMarking): void => {
         if (!editorRef.current) return;
@@ -259,6 +270,11 @@ export const useEditor = (props: CustomEditorProps) => {
           words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
         };
       },
+      setProviderDocument: (value) => {
+        const document = provider?.document;
+        if (!document) return;
+        Y.applyUpdate(document, value);
+      },
     }),
     [editorRef, savedSelection]
   );

packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts

@@ -54,15 +54,16 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
   const editor = useReadOnlyEditor({
     editorProps,
     editorClassName,
-    forwardedRef,
-    handleEditorReady,
-    mentionHandler,
     extensions: [
       ...(extensions ?? []),
       Collaboration.configure({
         document: provider.document,
       }),
     ],
+    forwardedRef,
+    handleEditorReady,
+    mentionHandler,
+    provider,
   });
 
   return { editor, isIndexedDbSynced: true };

packages/editor/src/core/hooks/use-read-only-editor.ts

@@ -1,6 +1,8 @@
 import { useImperativeHandle, useRef, MutableRefObject, useEffect } from "react";
+import { HocuspocusProvider } from "@hocuspocus/provider";
 import { EditorProps } from "@tiptap/pm/view";
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
+import * as Y from "yjs";
 // extensions
 import { CoreReadOnlyEditorExtensions } from "@/extensions";
 // helpers
@@ -21,9 +23,11 @@ interface CustomReadOnlyEditorProps {
   mentionHandler: {
     highlights: () => Promise<IMentionHighlight[]>;
   };
+  provider?: HocuspocusProvider;
 }
 
-export const useReadOnlyEditor = ({
+export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
+  const {
     initialValue,
     editorClassName,
     forwardedRef,
@@ -31,7 +35,9 @@ export const useReadOnlyEditor = ({
     editorProps = {},
     handleEditorReady,
     mentionHandler,
-}: CustomReadOnlyEditorProps) => {
+    provider,
+  } = props;
+
   const editor = useCustomEditor({
     editable: false,
     content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
@@ -74,9 +80,16 @@ export const useReadOnlyEditor = ({
       const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
       return markdownOutput;
     },
-    getHTML: (): string => {
+    getDocument: () => {
-      const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
+      const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
-      return htmlOutput;
+      const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
+      const documentJSON = editorRef.current?.getJSON() ?? null;
+
+      return {
+        binary: documentBinary,
+        html: documentHTML,
+        json: documentJSON,
+      };
     },
     scrollSummary: (marking: IMarking): void => {
       if (!editorRef.current) return;

packages/editor/src/core/types/editor.ts

@@ -1,3 +1,4 @@
+import { JSONContent } from "@tiptap/core";
 // helpers
 import { IMarking } from "@/helpers/scroll-to-node";
 // types
@@ -16,7 +17,11 @@ import {
 // editor refs
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
-  getHTML: () => string;
+  getDocument: () => {
+    binary: Uint8Array | null;
+    html: string;
+    json: JSONContent | null;
+  };
   clearEditor: (emitUpdate?: boolean) => void;
   setEditorValue: (content: string) => void;
   scrollSummary: (marking: IMarking) => void;
@@ -38,6 +43,7 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
   isEditorReadyToDiscard: () => boolean;
   getSelectedText: () => string | null;
   insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
+  setProviderDocument: (value: Uint8Array) => void;
 }
 
 // editor props

packages/editor/src/index.ts

@@ -21,6 +21,7 @@ export { isCellSelection } from "@/extensions/table/table/utilities/is-cell-sele
 // helpers
 export * from "@/helpers/common";
 export * from "@/helpers/editor-commands";
+export * from "@/helpers/yjs";
 export * from "@/extensions/table/table";
 
 // components

packages/types/src/pages.d.ts

@@ -64,3 +64,9 @@ export type TPageVersion = {
   updated_by: string;
   workspace: string;
 }
+
+export type TDocumentPayload = {
+  description_binary: string;
+  description_html: string;
+  description: object;
+}

web/core/components/pages/editor/editor-body.tsx

@@ -205,7 +205,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 },
               }}
               realtimeConfig={realtimeConfig}
-              serverHandler={serverHandler}
               user={{
                 id: currentUser?.id ?? "",
                 name: currentUser?.display_name ?? "",

web/core/components/pages/editor/header/extra-options.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { CircleAlert } from "lucide-react";
 // editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // ui
@@ -19,13 +18,12 @@ import { IPage } from "@/store/pages/page";
 type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
-  hasConnectionFailed: boolean;
   page: IPage;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, hasConnectionFailed, page, readOnlyEditorRef } = props;
+  const { editorRef, handleDuplicatePage, page, readOnlyEditorRef } = props;
   // derived values
   const {
     archived_at,
@@ -79,17 +77,6 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           </div>
         </Tooltip>
       )}
-      {hasConnectionFailed && isOnline && (
-        <Tooltip
-          tooltipHeading="Connection failed"
-          tooltipContent="All changes made will be saved locally and will be synced when the connection is re-established."
-        >
-          <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-red-500/20 px-3 py-0.5 text-xs font-medium text-red-500">
-            <CircleAlert className="flex-shrink-0 size-3" />
-            <span>Server error</span>
-          </div>
-        </Tooltip>
-      )}
       {canCurrentUserFavoritePage && (
         <FavoriteStar
           selected={is_favorite}

web/core/components/pages/editor/header/mobile-root.tsx

@@ -12,7 +12,6 @@ type Props = {
   editorReady: boolean;
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
-  hasConnectionFailed: boolean;
   page: IPage;
   readOnlyEditorReady: boolean;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
@@ -25,7 +24,6 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
     editorReady,
     editorRef,
     handleDuplicatePage,
-    hasConnectionFailed,
     page,
     readOnlyEditorReady,
     readOnlyEditorRef,
@@ -53,7 +51,6 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
-          hasConnectionFailed={hasConnectionFailed}
           page={page}
           readOnlyEditorRef={readOnlyEditorRef}
         />

web/core/components/pages/editor/header/root.tsx

@@ -14,7 +14,6 @@ type Props = {
   editorReady: boolean;
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
-  hasConnectionFailed: boolean;
   page: IPage;
   readOnlyEditorReady: boolean;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
@@ -27,7 +26,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
     editorReady,
     editorRef,
     handleDuplicatePage,
-    hasConnectionFailed,
     page,
     readOnlyEditorReady,
     readOnlyEditorRef,
@@ -67,7 +65,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
-          hasConnectionFailed={hasConnectionFailed}
           page={page}
           readOnlyEditorRef={readOnlyEditorRef}
         />
@@ -79,7 +76,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           editorReady={editorReady}
           readOnlyEditorReady={readOnlyEditorReady}
           handleDuplicatePage={handleDuplicatePage}
-          hasConnectionFailed={hasConnectionFailed}
           page={page}
           sidePeekVisible={sidePeekVisible}
           setSidePeekVisible={setSidePeekVisible}

web/core/components/pages/editor/page-root.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // editor
-import { EditorRefApi } from "@plane/editor";
+import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // types
 import { TPage } from "@plane/types";
 // ui
@@ -12,9 +12,11 @@ import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay, PagesVersion
 // hooks
 import { useProjectPages } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
+import { usePageFallback } from "@/hooks/use-page-fallback";
 import { useQueryParams } from "@/hooks/use-query-params";
 // services
-import { ProjectPageVersionService } from "@/services/page";
+import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
+const projectPageService = new ProjectPageService();
 const projectPageVersionService = new ProjectPageVersionService();
 // store
 import { IPage } from "@/store/pages/page";
@@ -29,8 +31,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
   const { projectId, workspaceSlug, page } = props;
   // states
   const [editorReady, setEditorReady] = useState(false);
-  const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
   const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
+  const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
   const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
   const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
@@ -43,8 +45,17 @@ export const PageRoot = observer((props: TPageRootProps) => {
   // store hooks
   const { createPage } = useProjectPages();
   // derived values
-  const { access, description_html, name, isContentEditable } = page;
+  const { access, description_html, name, isContentEditable, updateDescription } = page;
-
+  // page fallback
+  usePageFallback({
+    editorRef,
+    fetchPageDescription: async () => {
+      if (!page.id) return;
+      return await projectPageService.fetchDescriptionBinary(workspaceSlug, projectId, page.id);
+    },
+    hasConnectionFailed,
+    updatePageDescription: async (data) => await updateDescription(data),
+  });
   // update query params
   const { updateQueryParams } = useQueryParams();
 
@@ -53,7 +64,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
   const handleDuplicatePage = async () => {
     const formData: Partial<TPage> = {
       name: "Copy of " + name,
-      description_html: editorRef.current?.getHTML() ?? description_html ?? "<p></p>",
+      description_html: editorRef.current?.getDocument().html ?? description_html ?? "<p></p>",
       access,
     };
 
@@ -89,8 +100,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
     editorRef.current?.setEditorValue(descriptionHTML);
   };
   const currentVersionDescription = isContentEditable
-    ? editorRef.current?.getHTML()
+    ? editorRef.current?.getDocument().html
-    : readOnlyEditorRef.current?.getHTML();
+    : readOnlyEditorRef.current?.getDocument().html;
 
   return (
     <>
@@ -125,7 +136,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
         editorReady={editorReady}
         editorRef={editorRef}
         handleDuplicatePage={handleDuplicatePage}
-        hasConnectionFailed={hasConnectionFailed}
         page={page}
         readOnlyEditorReady={readOnlyEditorReady}
         readOnlyEditorRef={readOnlyEditorRef}

web/core/hooks/use-auto-save.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from "react";
 import { debounce } from "lodash";
 
-const AUTO_SAVE_TIME = 10000;
+const AUTO_SAVE_TIME = 30000;
 
-const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?: Uint8Array) => void) => {
+const useAutoSave = (handleSaveDescription: () => void) => {
   const intervalIdRef = useRef<any>(null);
   const handleSaveDescriptionRef = useRef(handleSaveDescription);
 
@@ -16,7 +16,7 @@ const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?:
   useEffect(() => {
     intervalIdRef.current = setInterval(() => {
       try {
-        handleSaveDescriptionRef.current(true);
+        handleSaveDescriptionRef.current();
       } catch (error) {
         console.error("Autosave before manual save failed:", error);
       }
@@ -43,7 +43,7 @@ const useAutoSave = (handleSaveDescription: (forceSync?: boolean, yjsAsUpdate?:
         clearInterval(intervalIdRef.current);
         intervalIdRef.current = setInterval(() => {
           try {
-            handleSaveDescriptionRef.current(true);
+            handleSaveDescriptionRef.current();
           } catch (error) {
             console.error("Autosave after manual save failed:", error);
           }

web/core/hooks/use-page-fallback.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect } from "react";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane types
+import { TDocumentPayload } from "@plane/types";
+// hooks
+import useAutoSave from "@/hooks/use-auto-save";
+
+type TArgs = {
+  editorRef: React.RefObject<EditorRefApi>;
+  fetchPageDescription: () => Promise<any>;
+  hasConnectionFailed: boolean;
+  updatePageDescription: (data: TDocumentPayload) => Promise<void>;
+};
+
+export const usePageFallback = (args: TArgs) => {
+  const { editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription } = args;
+
+  const handleUpdateDescription = useCallback(async () => {
+    if (!hasConnectionFailed) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    const latestEncodedDescription = await fetchPageDescription();
+    const latestDecodedDescription = latestEncodedDescription
+      ? new Uint8Array(latestEncodedDescription)
+      : new Uint8Array();
+
+    editor.setProviderDocument(latestDecodedDescription);
+    const { binary, html, json } = editor.getDocument();
+    if (!binary || !json) return;
+    const encodedBinary = Buffer.from(binary).toString("base64");
+
+    await updatePageDescription({
+      description_binary: encodedBinary,
+      description_html: html,
+      description: json,
+    });
+  }, [hasConnectionFailed]);
+
+  useEffect(() => {
+    if (hasConnectionFailed) {
+      handleUpdateDescription();
+    }
+  }, [hasConnectionFailed]);
+
+  useAutoSave(handleUpdateDescription);
+};

web/core/services/page/project-page.service.ts

@@ -1,5 +1,5 @@
 // types
-import { TPage } from "@plane/types";
+import { TDocumentPayload, TPage } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
@@ -128,7 +128,7 @@ export class ProjectPageService extends APIService {
       });
   }
 
-  async fetchDescriptionYJS(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
+  async fetchDescriptionBinary(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, {
       headers: {
         "Content-Type": "application/octet-stream",
@@ -145,10 +145,7 @@ export class ProjectPageService extends APIService {
     workspaceSlug: string,
     projectId: string,
     pageId: string,
-    data: {
+    data: TDocumentPayload
-      description_binary: string;
-      description_html: string;
-    }
   ): Promise<any> {
     return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, data)
       .then((response) => response?.data)

web/core/store/pages/page.ts

@@ -1,7 +1,7 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 // types
-import { TLogoProps, TPage } from "@plane/types";
+import { TDocumentPayload, TLogoProps, TPage } from "@plane/types";
 // constants
 import { EPageAccess } from "@/constants/page";
 import { EUserPermissions } from "@/plane-web/constants/user-permissions";
@@ -33,7 +33,7 @@ export interface IPage extends TPage {
   // actions
   update: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
   updateTitle: (title: string) => void;
-  updateDescription: (binaryString: string, descriptionHTML: string) => Promise<void>;
+  updateDescription: (document: TDocumentPayload) => Promise<void>;
   makePublic: () => Promise<void>;
   makePrivate: () => Promise<void>;
   lock: () => Promise<void>;
@@ -367,23 +367,19 @@ export class Page implements IPage {
 
   /**
    * @description update the page description
-   * @param {string} binaryString
+   * @param {TDocumentPayload} document
-   * @param {string} descriptionHTML
    */
-  updateDescription = async (binaryString: string, descriptionHTML: string) => {
+  updateDescription = async (document: TDocumentPayload) => {
     const { workspaceSlug, projectId } = this.store.router;
     if (!workspaceSlug || !projectId || !this.id) return undefined;
 
     const currentDescription = this.description_html;
     runInAction(() => {
-      this.description_html = descriptionHTML;
+      this.description_html = document.description_html;
     });
 
     try {
-      await this.pageService.updateDescriptionYJS(workspaceSlug, projectId, this.id, {
+      await this.pageService.updateDescriptionYJS(workspaceSlug, projectId, this.id, document);
-        description_binary: binaryString,
-        description_html: descriptionHTML,
-      });
     } catch (error) {
       runInAction(() => {
         this.description_html = currentDescription;