[PE-31] feat: Add lock unlock archive restore realtime sync

live/src/core/hocuspocus-server.ts

@@ -4,6 +4,10 @@ import { v4 as uuidv4 } from "uuid";
 import { handleAuthentication } from "@/core/lib/authentication.js";
 // extensions
 import { getExtensions } from "@/core/extensions/index.js";
+import {
+  DocumentEventsServer,
+  documentEventResponses,
+} from "@plane/editor/lib";
 
 export const getHocusPocusServer = async () => {
   const extensions = await getExtensions();
@@ -37,7 +41,13 @@ export const getHocusPocusServer = async () => {
         throw Error("Authentication unsuccessful!");
       }
     },
+    async onStateless({ payload, document }) {
+      const response = documentEventResponses[payload as DocumentEventsServer];
+      if (response) {
+        document.broadcastStateless(response);
+      }
+    },
     extensions,
-    debounce: 10000
+    debounce: 10000,
   });
 };

packages/editor/src/core/helpers/document-events.ts

@@ -0,0 +1,9 @@
+export const documentEventResponses = {
+  lock: "locked",
+  unlock: "unlocked",
+  archive: "archived",
+  unarchive: "unarchived",
+} as const;
+
+export type DocumentEventsServer = keyof typeof documentEventResponses;
+export type DocumentEventsClient = (typeof documentEventResponses)[DocumentEventsServer];

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

@@ -43,6 +43,9 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
         onClose: (data) => {
           if (data.event.code === 1006) serverHandler?.onServerError?.();
         },
+        onSynced: () => {
+          serverHandler?.onSynced?.();
+        },
       }),
     [id, realtimeConfig, serverHandler, user.id]
   );

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

@@ -17,6 +17,7 @@ import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 import { CoreEditorProps } from "@/props";
 // types
 import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TEditorCommands, TFileHandler } from "@/types";
+import { DocumentEventsServer } from "src/lib";
 
 export interface CustomEditorProps {
   editorClassName: string;
@@ -34,11 +35,11 @@ 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
   value?: string | null | undefined;
+  provider?: HocuspocusProvider;
 }
 
 export const useEditor = (props: CustomEditorProps) => {
@@ -55,9 +56,9 @@ export const useEditor = (props: CustomEditorProps) => {
     mentionHandler,
     onChange,
     placeholder,
-    provider,
     tabIndex,
     value,
+    provider,
   } = props;
   // states
   const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
@@ -230,7 +231,7 @@ export const useEditor = (props: CustomEditorProps) => {
         if (empty) return null;
 
         const nodesArray: string[] = [];
-        state.doc.nodesBetween(from, to, (node, pos, parent) => {
+        state.doc.nodesBetween(from, to, (node, _pos, parent) => {
           if (parent === state.doc && editorRef.current) {
             const serializer = DOMSerializer.fromSchema(editorRef.current?.schema);
             const dom = serializer.serializeNode(node);
@@ -271,6 +272,8 @@ export const useEditor = (props: CustomEditorProps) => {
         if (!document) return;
         Y.applyUpdate(document, value);
       },
+      emitRealTimeUpdate: (message: DocumentEventsServer) => provider?.sendStateless(message),
+      listenToRealTimeUpdate: () => provider,
     }),
     [editorRef, savedSelection]
   );

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

@@ -32,9 +32,13 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
         onClose: (data) => {
           if (data.event.code === 1006) serverHandler?.onServerError?.();
         },
+        onSynced: () => {
+          serverHandler?.onSynced?.();
+        },
       }),
-    [id, realtimeConfig, user.id]
+    [id, realtimeConfig, serverHandler, user.id]
   );
+
   // destroy and disconnect connection on unmount
   useEffect(
     () => () => {

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

@@ -112,6 +112,14 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
         editorRef.current?.off("update");
       };
     },
+    emitRealTimeUpdate: (message: string) => {
+      if (provider) {
+        provider.sendStateless(message);
+      }
+    },
+    listenToRealTimeUpdate: () => {
+      return provider;
+    },
     getHeadings: () => editorRef?.current?.storage.headingList.headings,
   }));
 

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

@@ -17,6 +17,7 @@ import {
 export type TServerHandler = {
   onConnect?: () => void;
   onServerError?: () => void;
+  onSynced?: () => void;
 };
 
 type TCollaborativeEditorHookProps = {

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

@@ -13,6 +13,8 @@ import {
   TFileHandler,
   TServerHandler,
 } from "@/types";
+import { DocumentEventsServer } from "src/lib";
+import { HocuspocusProvider } from "@hocuspocus/provider";
 
 // editor refs
 export type EditorReadOnlyRefApi = {
@@ -30,8 +32,8 @@ export type EditorReadOnlyRefApi = {
     paragraphs: number;
     words: number;
   };
-  onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
-  getHeadings: () => IMarking[];
+  emitRealTimeUpdate: (message: DocumentEventsServer) => void;
+  listenToRealTimeUpdate: () => HocuspocusProvider;
 };
 
 export interface EditorRefApi extends EditorReadOnlyRefApi {

packages/editor/src/lib.ts

@@ -1 +1,2 @@
 export * from "@/extensions/core-without-props";
+export * from "@/helpers/document-events";

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // document-editor
@@ -7,7 +7,6 @@ import {
   CollaborativeDocumentReadOnlyEditorWithRef,
   EditorReadOnlyRefApi,
   EditorRefApi,
-  IMarking,
   TAIMenuProps,
   TDisplayConfig,
   TRealtimeConfig,
@@ -57,6 +56,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     readOnlyEditorRef,
     sidePeekVisible,
   } = props;
+  // states
+  const [isSynced, setIsSynced] = useState(false);
+
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
@@ -67,7 +69,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     project: { getProjectMemberIds },
   } = useMember();
   // derived values
-  const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
+  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
   const pageId = page?.id;
   const pageTitle = page?.name ?? "";
   const { isContentEditable, updateTitle, setIsSubmitting } = page;
@@ -105,10 +107,15 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     handleConnectionStatus(true);
   }, []);
 
+  const handleServerSynced = useCallback(() => {
+    setIsSynced(true);
+  }, []);
+
   const serverHandler: TServerHandler = useMemo(
     () => ({
       onConnect: handleServerConnect,
       onServerError: handleServerError,
+      onSynced: handleServerSynced,
     }),
     []
   );

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

@@ -2,9 +2,11 @@
 
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
 import { ArchiveRestoreIcon, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { DocumentEventsClient } from "@plane/editor/lib";
 // ui
 import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // helpers
@@ -23,6 +25,42 @@ type Props = {
 
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, page } = props;
+  // create a local state to track if the current action is being processed
+  const [localAction, setLocalAction] = useState<string | null>(null);
+
+  // listen to real time updates from the live server
+  useEffect(() => {
+    const provider = editorRef?.listenToRealTimeUpdate();
+
+    const handleStatelessMessage = (message: { payload: DocumentEventsClient }) => {
+      if (localAction === message.payload) {
+        setLocalAction(null);
+        return;
+      }
+
+      switch (message.payload) {
+        case "locked":
+          handleLockPage(false);
+          break;
+        case "unlocked":
+          handleUnlockPage(false);
+          break;
+        case "archived":
+          handleArchivePage(false);
+          break;
+        case "unarchived":
+          handleRestorePage(false);
+          break;
+      }
+    };
+
+    provider?.on("stateless", handleStatelessMessage);
+
+    return () => {
+      provider?.off("stateless", handleStatelessMessage);
+    };
+  }, [editorRef, localAction]);
+
   // router
   const router = useRouter();
   // store values
@@ -45,41 +83,85 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   // update query params
   const { updateQueryParams } = useQueryParams();
 
-  const handleArchivePage = async () =>
-    await archive().catch(() =>
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Page could not be archived. Please try again later.",
+  const handleArchivePage = async (isLocal: boolean = true) => {
+    await archive()
+      .then(() => {
+        if (isLocal) {
+          setLocalAction("archived");
+        }
       })
-    );
-
-  const handleRestorePage = async () =>
-    await restore().catch(() =>
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Page could not be restored. Please try again later.",
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Page could not be archived. Please try again later.",
+        });
+      });
+  };
+
+  // watch for changes in localAction
+  useEffect(() => {
+    if (localAction === "archived") {
+      editorRef?.emitRealTimeUpdate("archive");
+    }
+    if (localAction === "unarchived") {
+      editorRef?.emitRealTimeUpdate("unarchive");
+    }
+    if (localAction === "locked") {
+      editorRef?.emitRealTimeUpdate("lock");
+    }
+    if (localAction === "unlocked") {
+      editorRef?.emitRealTimeUpdate("unlock");
+    }
+  }, [localAction, editorRef]);
+
+  const handleRestorePage = async (isLocal: boolean = true) => {
+    await restore()
+      .then(() => {
+        if (isLocal) {
+          setLocalAction("unarchived");
+        }
       })
-    );
-
-  const handleLockPage = async () =>
-    await lock().catch(() =>
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Page could not be locked. Please try again later.",
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Page could not be restored. Please try again later.",
+        })
+      );
+  };
+
+  const handleLockPage = async (isLocal: boolean = true) => {
+    await lock()
+      .then(() => {
+        if (isLocal) {
+          setLocalAction("locked");
+        }
       })
-    );
-
-  const handleUnlockPage = async () =>
-    await unlock().catch(() =>
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Page could not be unlocked. Please try again later.",
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Page could not be locked. Please try again later.",
+        })
+      );
+  };
+
+  const handleUnlockPage = async (isLocal: boolean = true) => {
+    await unlock()
+      .then(() => {
+        if (isLocal) {
+          setLocalAction("unlocked");
+        }
       })
-    );
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Page could not be unlocked. Please try again later.",
+        })
+      );
+  };
 
   // menu items list
   const MENU_ITEMS: {