chore: realtime updates fix

apps/live/src/extensions/database.ts

@@ -27,6 +27,17 @@ const fetchDocument = async ({ context, documentName: pageId, instance }: FetchP
       const pageDetails = await service.fetchDetails(pageId);
       const convertedBinaryData = getBinaryDataFromDocumentEditorHTMLString(pageDetails.description_html ?? "<p></p>");
       if (convertedBinaryData) {
+        // save the converted binary data back to the database
+        const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
+          convertedBinaryData,
+          true
+        );
+        const payload = {
+          description_binary: contentBinaryEncoded,
+          description_html: contentHTML,
+          description: contentJSON,
+        };
+        await service.updateDescriptionBinary(pageId, payload);
         return convertedBinaryData;
       }
     }
@@ -52,8 +63,10 @@ const storeDocument = async ({
   try {
     const service = getPageService(context.documentType, context);
     // convert binary data to all formats
-    const { contentBinaryEncoded, contentHTML, contentJSON } =
-      getAllDocumentFormatsFromDocumentEditorBinaryData(pageBinaryData);
+    const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
+      pageBinaryData,
+      true
+    );
     // create payload
     const payload = {
       description_binary: contentBinaryEncoded,

apps/live/src/extensions/title-sync.ts

@@ -0,0 +1,175 @@
+// hocuspocus
+import type { Extension, Hocuspocus, Document } from "@hocuspocus/server";
+import { TiptapTransformer } from "@hocuspocus/transformer";
+import type * as Y from "yjs";
+// editor extensions
+import { TITLE_EDITOR_EXTENSIONS, createRealtimeEvent } from "@plane/editor";
+import { logger } from "@plane/logger";
+import { AppError } from "@/lib/errors";
+// helpers
+import { getPageService } from "@/services/page/handler";
+import type { HocusPocusServerContext, OnLoadDocumentPayloadWithContext } from "@/types";
+import { generateTitleProsemirrorJson } from "@/utils";
+import { broadcastMessageToPage } from "@/utils/broadcast-message";
+import { TitleUpdateManager } from "./title-update/title-update-manager";
+import { extractTextFromHTML } from "./title-update/title-utils";
+
+/**
+ * Hocuspocus extension for synchronizing document titles
+ */
+export class TitleSyncExtension implements Extension {
+  // Maps document names to their observers and update managers
+  private titleObservers: Map<string, (events: Y.YEvent<any>[]) => void> = new Map();
+  private titleUpdateManagers: Map<string, TitleUpdateManager> = new Map();
+  // Store minimal data needed for each document's title observer (prevents closure memory leaks)
+  private titleObserverData: Map<
+    string,
+    {
+      parentId?: string | null;
+      userId: string;
+      workspaceSlug: string | null;
+      instance: Hocuspocus;
+    }
+  > = new Map();
+
+  /**
+   * Handle document loading - migrate old titles if needed
+   */
+  async onLoadDocument({ context, document, documentName }: OnLoadDocumentPayloadWithContext) {
+    try {
+      // initially for on demand migration of old titles to a new title field
+      // in the yjs binary
+      if (document.isEmpty("title")) {
+        const service = getPageService(context.documentType, context);
+        // const title = await service.fe
+        const title = (await service.fetchDetails?.(documentName)).name;
+        if (title == null) return;
+        const titleField = TiptapTransformer.toYdoc(
+          generateTitleProsemirrorJson(title),
+          "title",
+          // editor
+          TITLE_EDITOR_EXTENSIONS as any
+        );
+        document.merge(titleField);
+      }
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "onLoadDocument", documentName },
+      });
+      logger.error("Error loading document title", appError);
+    }
+  }
+  /**
+   * Set up title synchronization for a document after it's loaded
+   */
+  async afterLoadDocument({
+    document,
+    documentName,
+    context,
+    instance,
+  }: {
+    document: Document;
+    documentName: string;
+    context: HocusPocusServerContext;
+    instance: Hocuspocus;
+  }) {
+    // Create a title update manager for this document
+    const updateManager = new TitleUpdateManager(documentName, context);
+
+    // Store the manager
+    this.titleUpdateManagers.set(documentName, updateManager);
+
+    // Store minimal data needed for the observer (prevents closure memory leak)
+    this.titleObserverData.set(documentName, {
+      userId: context.userId,
+      workspaceSlug: context.workspaceSlug,
+      instance: instance,
+    });
+
+    // Create observer using bound method to avoid closure capturing heavy objects
+    const titleObserver = this.handleTitleChange.bind(this, documentName);
+
+    // Observe the title field
+    document.getXmlFragment("title").observeDeep(titleObserver);
+    this.titleObservers.set(documentName, titleObserver);
+  }
+
+  /**
+   * Handle title changes for a document
+   * This is a separate method to avoid closure memory leaks
+   */
+  private handleTitleChange(documentName: string, events: Y.YEvent<any>[]) {
+    let title = "";
+    events.forEach((event) => {
+      title = extractTextFromHTML(event.currentTarget.toJSON() as string);
+    });
+
+    // Get the manager for this document
+    const manager = this.titleUpdateManagers.get(documentName);
+
+    // Get the stored data for this document
+    const data = this.titleObserverData.get(documentName);
+
+    // Broadcast to parent page if it exists
+    if (data?.parentId && data.workspaceSlug && data.instance) {
+      const event = createRealtimeEvent({
+        user_id: data.userId,
+        workspace_slug: data.workspaceSlug,
+        action: "property_updated",
+        page_id: documentName,
+        data: { name: title },
+        descendants_ids: [],
+      });
+
+      // Use the instance from stored data (guaranteed to be set)
+      broadcastMessageToPage(data.instance, data.parentId, event);
+    }
+
+    // Schedule the title update
+    if (manager) {
+      manager.scheduleUpdate(title);
+    }
+  }
+
+  /**
+   * Force save title before unloading the document
+   */
+  async beforeUnloadDocument({ documentName }: { documentName: string }) {
+    const updateManager = this.titleUpdateManagers.get(documentName);
+    if (updateManager) {
+      // Force immediate save and wait for it to complete
+      await updateManager.forceSave();
+      // Clean up the manager
+      this.titleUpdateManagers.delete(documentName);
+    }
+  }
+
+  /**
+   * Remove observers after document unload
+   */
+  async afterUnloadDocument({ documentName, document }: { documentName: string; document?: Document }) {
+    // Clean up observer when document is unloaded
+    const observer = this.titleObservers.get(documentName);
+    if (observer) {
+      // unregister observer from Y.js document to prevent memory leak
+      if (document) {
+        try {
+          document.getXmlFragment("title").unobserveDeep(observer);
+        } catch (error) {
+          logger.error("Failed to unobserve title field", new AppError(error, { context: { documentName } }));
+        }
+      }
+      this.titleObservers.delete(documentName);
+    }
+
+    // Clean up the observer data map to prevent memory leak
+    this.titleObserverData.delete(documentName);
+
+    // Ensure manager is cleaned up if beforeUnloadDocument somehow didn't run
+    if (this.titleUpdateManagers.has(documentName)) {
+      const manager = this.titleUpdateManagers.get(documentName)!;
+      manager.cancel();
+      this.titleUpdateManagers.delete(documentName);
+    }
+  }
+}

apps/live/src/extensions/title-update/debounce.ts

@@ -0,0 +1,277 @@
+import { logger } from "@plane/logger";
+
+/**
+ * DebounceState - Tracks the state of a debounced function
+ */
+export interface DebounceState {
+  lastArgs: any[] | null;
+  timerId: ReturnType<typeof setTimeout> | null;
+  lastCallTime: number | undefined;
+  lastExecutionTime: number;
+  inProgress: boolean;
+  abortController: AbortController | null;
+}
+
+/**
+ * Creates a new DebounceState object
+ */
+export const createDebounceState = (): DebounceState => ({
+  lastArgs: null,
+  timerId: null,
+  lastCallTime: undefined,
+  lastExecutionTime: 0,
+  inProgress: false,
+  abortController: null,
+});
+
+/**
+ * DebounceOptions - Configuration options for debounce
+ */
+export interface DebounceOptions {
+  /** The wait time in milliseconds */
+  wait: number;
+
+  /** Optional logging prefix for debug messages */
+  logPrefix?: string;
+}
+
+/**
+ * Enhanced debounce manager with abort support
+ * Manages the state and timing of debounced function calls
+ */
+export class DebounceManager {
+  private state: DebounceState;
+  private wait: number;
+  private logPrefix: string;
+
+  /**
+   * Creates a new DebounceManager
+   * @param options Debounce configuration options
+   */
+  constructor(options: DebounceOptions) {
+    this.state = createDebounceState();
+    this.wait = options.wait;
+    this.logPrefix = options.logPrefix || "";
+  }
+
+  /**
+   * Schedule a debounced function call
+   * @param func The function to call
+   * @param args The arguments to pass to the function
+   */
+  schedule(func: (...args: any[]) => Promise<void>, ...args: any[]): void {
+    // Always update the last arguments
+    this.state.lastArgs = args;
+
+    const time = Date.now();
+    this.state.lastCallTime = time;
+
+    // If an operation is in progress, just store the new args and start the timer
+    if (this.state.inProgress) {
+      // Always restart the timer for the new call, even if an operation is in progress
+      if (this.state.timerId) {
+        clearTimeout(this.state.timerId);
+      }
+
+      this.state.timerId = setTimeout(() => {
+        this.timerExpired(func);
+      }, this.wait);
+      return;
+    }
+
+    // If already scheduled, update the args and restart the timer
+    if (this.state.timerId) {
+      clearTimeout(this.state.timerId);
+      this.state.timerId = setTimeout(() => {
+        this.timerExpired(func);
+      }, this.wait);
+      return;
+    }
+
+    // Start the timer for the trailing edge execution
+    this.state.timerId = setTimeout(() => {
+      this.timerExpired(func);
+    }, this.wait);
+  }
+
+  /**
+   * Called when the timer expires
+   */
+  private timerExpired(func: (...args: any[]) => Promise<void>): void {
+    const time = Date.now();
+
+    // Check if this timer expiration represents the end of the debounce period
+    if (this.shouldInvoke(time)) {
+      // Execute the function
+      this.executeFunction(func, time);
+      return;
+    }
+
+    // Otherwise restart the timer
+    this.state.timerId = setTimeout(() => {
+      this.timerExpired(func);
+    }, this.remainingWait(time));
+  }
+
+  /**
+   * Execute the debounced function
+   */
+  private executeFunction(func: (...args: any[]) => Promise<void>, time: number): void {
+    this.state.timerId = null;
+    this.state.lastExecutionTime = time;
+
+    // Execute the function asynchronously
+    this.performFunction(func).catch((error) => {
+      logger.error(`${this.logPrefix}: Error in execution:`, error);
+    });
+  }
+
+  /**
+   * Perform the actual function call, handling any in-progress operations
+   */
+  private async performFunction(func: (...args: any[]) => Promise<void>): Promise<void> {
+    const args = this.state.lastArgs;
+    if (!args) return;
+
+    // Store the args we're about to use
+    const currentArgs = [...args];
+
+    // If another operation is in progress, abort it
+    await this.abortOngoingOperation();
+
+    // Mark that we're starting a new operation
+    this.state.inProgress = true;
+    this.state.abortController = new AbortController();
+
+    try {
+      // Add the abort signal to the arguments if the function can use it
+      const execArgs = [...currentArgs];
+      execArgs.push(this.state.abortController.signal);
+
+      await func(...execArgs);
+
+      // Only clear lastArgs if they haven't been changed during this operation
+      if (this.state.lastArgs && this.arraysEqual(this.state.lastArgs, currentArgs)) {
+        this.state.lastArgs = null;
+
+        // Clear any timer as we've successfully processed the latest args
+        if (this.state.timerId) {
+          clearTimeout(this.state.timerId);
+          this.state.timerId = null;
+        }
+      } else if (this.state.lastArgs) {
+        // If lastArgs have changed during this operation, the timer should already be running
+        // but let's make sure it is
+        if (!this.state.timerId) {
+          this.state.timerId = setTimeout(() => {
+            this.timerExpired(func);
+          }, this.wait);
+        }
+      }
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        // Nothing to do here, the new operation will be triggered by the timer expiration
+      } else {
+        logger.error(`${this.logPrefix}: Error during operation:`, error);
+
+        // On error (not abort), make sure we have a timer running to retry
+        if (!this.state.timerId && this.state.lastArgs) {
+          this.state.timerId = setTimeout(() => {
+            this.timerExpired(func);
+          }, this.wait);
+        }
+      }
+    } finally {
+      this.state.inProgress = false;
+      this.state.abortController = null;
+    }
+  }
+
+  /**
+   * Abort any ongoing operation
+   */
+  private async abortOngoingOperation(): Promise<void> {
+    if (this.state.inProgress && this.state.abortController) {
+      this.state.abortController.abort();
+
+      // Small delay to ensure the abort has had time to propagate
+      await new Promise((resolve) => setTimeout(resolve, 20));
+
+      // Double-check that state has been reset, force it if not
+      if (this.state.inProgress || this.state.abortController) {
+        this.state.inProgress = false;
+        this.state.abortController = null;
+      }
+    }
+  }
+
+  /**
+   * Determine if we should invoke the function now
+   */
+  private shouldInvoke(time: number): boolean {
+    // Either this is the first call, or we've waited long enough since the last call
+    return this.state.lastCallTime === undefined || time - this.state.lastCallTime >= this.wait;
+  }
+
+  /**
+   * Calculate how much longer we should wait
+   */
+  private remainingWait(time: number): number {
+    const timeSinceLastCall = time - (this.state.lastCallTime || 0);
+    return Math.max(0, this.wait - timeSinceLastCall);
+  }
+
+  /**
+   * Force immediate execution
+   */
+  async flush(func: (...args: any[]) => Promise<void>): Promise<void> {
+    // Clear any pending timeout
+    if (this.state.timerId) {
+      clearTimeout(this.state.timerId);
+      this.state.timerId = null;
+    }
+
+    // Reset timing state
+    this.state.lastCallTime = undefined;
+
+    // Perform the function immediately
+    if (this.state.lastArgs) {
+      await this.performFunction(func);
+    }
+  }
+
+  /**
+   * Cancel any pending operations without executing
+   */
+  cancel(): void {
+    // Clear any pending timeout
+    if (this.state.timerId) {
+      clearTimeout(this.state.timerId);
+      this.state.timerId = null;
+    }
+
+    // Reset timing state
+    this.state.lastCallTime = undefined;
+
+    // Abort any in-progress operation
+    if (this.state.inProgress && this.state.abortController) {
+      this.state.abortController.abort();
+      this.state.inProgress = false;
+      this.state.abortController = null;
+    }
+
+    // Clear args
+    this.state.lastArgs = null;
+  }
+
+  /**
+   * Compare two arrays for equality
+   */
+  private arraysEqual(a: any[], b: any[]): boolean {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+}

apps/live/src/extensions/title-update/title-update-manager.ts

@@ -0,0 +1,90 @@
+import { logger } from "@plane/logger";
+import { AppError } from "@/lib/errors";
+import { getPageService } from "@/services/page/handler";
+import type { HocusPocusServerContext } from "@/types";
+import { DebounceManager } from "./debounce";
+
+/**
+ * Manages title update operations for a single document
+ * Handles debouncing, aborting, and force saving title updates
+ */
+export class TitleUpdateManager {
+  private documentName: string;
+  private context: HocusPocusServerContext;
+  private debounceManager: DebounceManager;
+  private lastTitle: string | null = null;
+
+  /**
+   * Create a new TitleUpdateManager instance
+   */
+  constructor(documentName: string, context: HocusPocusServerContext, wait: number = 5000) {
+    this.documentName = documentName;
+    this.context = context;
+
+    // Set up debounce manager with logging
+    this.debounceManager = new DebounceManager({
+      wait,
+      logPrefix: `TitleManager[${documentName.substring(0, 8)}]`,
+    });
+  }
+
+  /**
+   * Schedule a debounced title update
+   */
+  scheduleUpdate(title: string): void {
+    // Store the latest title
+    this.lastTitle = title;
+
+    // Schedule the update with the debounce manager
+    this.debounceManager.schedule(this.updateTitle.bind(this), title);
+  }
+
+  /**
+   * Update the title - will be called by the debounce manager
+   */
+  private async updateTitle(title: string, signal?: AbortSignal): Promise<void> {
+    const service = getPageService(this.context.documentType, this.context);
+    if (!service.updatePageProperties) {
+      logger.warn(`No updateTitle method found for document ${this.documentName}`);
+      return;
+    }
+
+    try {
+      await service.updatePageProperties(this.documentName, {
+        data: { name: title },
+        abortSignal: signal,
+      });
+
+      // Clear last title only if it matches what we just updated
+      if (this.lastTitle === title) {
+        this.lastTitle = null;
+      }
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "updateTitle", documentName: this.documentName },
+      });
+      logger.error("Error updating title", appError);
+    }
+  }
+
+  /**
+   * Force save the current title immediately
+   */
+  async forceSave(): Promise<void> {
+    // Ensure we have the current title
+    if (!this.lastTitle) {
+      return;
+    }
+
+    // Use the debounce manager to flush the operation
+    await this.debounceManager.flush(this.updateTitle.bind(this));
+  }
+
+  /**
+   * Cancel any pending updates
+   */
+  cancel(): void {
+    this.debounceManager.cancel();
+    this.lastTitle = null;
+  }
+}

apps/live/src/extensions/title-update/title-utils.ts

@@ -0,0 +1,11 @@
+import { sanitizeHTML } from "@plane/utils";
+
+/**
+ * Utility function to extract text from HTML content
+ */
+export const extractTextFromHTML = (html: string): string => {
+  // Use sanitizeHTML to safely extract text and remove all HTML tags
+  // This is more secure than regex as it handles edge cases and prevents injection
+  // Note: sanitizeHTML trims whitespace, which is acceptable for title extraction
+  return sanitizeHTML(html) || "";
+};

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -10,6 +10,7 @@ import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { PageAccessIcon } from "@/components/common/page-access-icon";
 import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
 import { PageHeaderActions } from "@/components/pages/header/actions";
+import { PageSyncingBadge } from "@/components/pages/header/syncing-badge";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -95,6 +96,7 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
         </div>
       </Header.LeftItem>
       <Header.RightItem>
+        <PageSyncingBadge syncStatus={page.isSyncingWithServer} />
         <PageDetailsHeaderExtraActions page={page} storeType={storeType} />
         <PageHeaderActions page={page} storeType={storeType} />
       </Header.RightItem>

apps/web/core/components/pages/editor/content-limit-banner.tsx

@@ -0,0 +1,35 @@
+import { TriangleAlert } from "lucide-react";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+  onDismiss?: () => void;
+};
+
+export const ContentLimitBanner: React.FC<Props> = ({ className, onDismiss }) => (
+  <div
+    className={cn(
+      "flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
+      className
+    )}
+  >
+    <div className="flex items-center gap-2 text-custom-text-200 mx-auto">
+      <span className="text-amber-500">
+        <TriangleAlert />
+      </span>
+      <span className="font-medium">
+        Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing.
+      </span>
+    </div>
+    {onDismiss && (
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="ml-auto text-custom-text-300 hover:text-custom-text-200"
+        aria-label="Dismiss content limit warning"
+      >
+        ✕
+      </button>
+    )}
+  </div>
+);

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

@@ -1,11 +1,12 @@
-import type { Dispatch, SetStateAction } from "react";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { LIVE_BASE_PATH, LIVE_BASE_URL } from "@plane/constants";
 import { CollaborativeDocumentEditorWithRef } from "@plane/editor";
 import type {
+  CollaborationState,
   EditorRefApi,
+  EditorTitleRefApi,
   TAIMenuProps,
   TDisplayConfig,
   TFileHandler,
@@ -26,6 +27,8 @@ import { useUser } from "@/hooks/store/user";
 import { usePageFilters } from "@/hooks/use-page-filters";
 import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web imports
+import type { TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
+import { useRealtimePageEvents } from "@/hooks/use-realtime-page-events";
 import { EditorAIMenu } from "@/plane-web/components/pages";
 import type { TExtendedEditorExtensionsConfig } from "@/plane-web/hooks/pages";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -51,7 +54,6 @@ type Props = {
   config: TEditorBodyConfig;
   editorReady: boolean;
   editorForwardRef: React.RefObject<EditorRefApi>;
-  handleConnectionStatus: Dispatch<SetStateAction<boolean>>;
   handleEditorReady: (status: boolean) => void;
   handleOpenNavigationPane: () => void;
   handlers: TEditorBodyHandlers;
@@ -61,14 +63,16 @@ type Props = {
   projectId?: string;
   workspaceSlug: string;
   storeType: EPageStoreType;
+  customRealtimeEventHandlers?: TCustomEventHandlers;
   extendedEditorProps: TExtendedEditorExtensionsConfig;
+  isFetchingFallbackBinary?: boolean;
+  onCollaborationStateChange?: (state: CollaborationState) => void;
 };
 
 export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   const {
     config,
     editorForwardRef,
-    handleConnectionStatus,
     handleEditorReady,
     handleOpenNavigationPane,
     handlers,
@@ -79,7 +83,11 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     projectId,
     workspaceSlug,
     extendedEditorProps,
+    isFetchingFallbackBinary,
+    onCollaborationStateChange,
   } = props;
+  // refs
+  const titleEditorRef = useRef<EditorTitleRefApi>(null);
   // store hooks
   const { data: currentUser } = useUser();
   const { getWorkspaceBySlug } = useWorkspace();
@@ -87,10 +95,9 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   // derived values
   const {
     id: pageId,
-    name: pageTitle,
     isContentEditable,
-    updateTitle,
     editor: { editorRef, updateAssetsList },
+    setSyncingStatus,
   } = page;
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
   // use editor mention
@@ -123,6 +130,24 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     [fontSize, fontStyle, isFullWidth]
   );
 
+  // Use the new hook to handle page events
+  const { updatePageProperties } = useRealtimePageEvents({
+    storeType,
+    page,
+    getUserDetails,
+    handlers,
+  });
+
+  // Set syncing status when page changes and reset collaboration state
+  useEffect(() => {
+    setSyncingStatus("syncing");
+    onCollaborationStateChange?.({
+      stage: { kind: "connecting" },
+      isServerSynced: false,
+      isServerDisconnected: false,
+    });
+  }, [pageId, setSyncingStatus, onCollaborationStateChange]);
+
   const getAIMenu = useCallback(
     ({ isOpen, onClose }: TAIMenuProps) => (
       <EditorAIMenu
@@ -136,20 +161,25 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     [editorRef, workspaceId, workspaceSlug]
   );
 
-  const handleServerConnect = useCallback(() => {
-    handleConnectionStatus(false);
-  }, [handleConnectionStatus]);
-
-  const handleServerError = useCallback(() => {
-    handleConnectionStatus(true);
-  }, [handleConnectionStatus]);
-
   const serverHandler: TServerHandler = useMemo(
     () => ({
-      onConnect: handleServerConnect,
-      onServerError: handleServerError,
+      onStateChange: (state) => {
+        // Pass full state to parent
+        onCollaborationStateChange?.(state);
+
+        // Map collaboration stage to UI syncing status
+        // Stage → UI mapping: disconnected → error | synced → synced | all others → syncing
+        if (state.stage.kind === "disconnected") {
+          setSyncingStatus("error");
+        } else if (state.stage.kind === "synced") {
+          setSyncingStatus("synced");
+        } else {
+          // initial, connecting, awaiting-sync, reconnecting → show as syncing
+          setSyncingStatus("syncing");
+        }
+      },
     }),
-    [handleServerConnect, handleServerError]
+    [setSyncingStatus, onCollaborationStateChange]
   );
 
   const realtimeConfig: TRealtimeConfig | undefined = useMemo(() => {
@@ -194,7 +224,9 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     }
   );
 
-  if (pageId === undefined || !realtimeConfig) return <PageContentLoader className={blockWidthClassName} />;
+  const isPageLoading = pageId === undefined || !realtimeConfig;
+
+  if (isPageLoading) return <PageContentLoader className={blockWidthClassName} />;
 
   return (
     <Row
@@ -225,12 +257,6 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
         <div className="page-header-container group/page-header">
           <div className={blockWidthClassName}>
             <PageEditorHeaderRoot page={page} projectId={projectId} />
-            <PageEditorTitle
-              editorRef={editorRef}
-              readOnly={!isContentEditable}
-              title={pageTitle}
-              updateTitle={updateTitle}
-            />
           </div>
         </div>
         <CollaborativeDocumentEditorWithRef
@@ -239,6 +265,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
           fileHandler={config.fileHandler}
           handleEditorReady={handleEditorReady}
           ref={editorForwardRef}
+          titleRef={titleEditorRef}
           containerClassName="h-full p-0 pb-64"
           displayConfig={displayConfig}
           getEditorMetaData={getEditorMetaData}
@@ -251,6 +278,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
             renderComponent: (props) => <EditorMentionsRoot {...props} />,
             getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
           }}
+          updatePageProperties={updatePageProperties}
           realtimeConfig={realtimeConfig}
           serverHandler={serverHandler}
           user={userConfig}
@@ -261,6 +289,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
           }}
           onAssetChange={updateAssetsList}
           extendedEditorProps={extendedEditorProps}
+          isFetchingFallbackBinary={isFetchingFallbackBinary}
         />
       </div>
     </Row>

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

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { EditorRefApi } from "@plane/editor";
+import type { CollaborationState, EditorRefApi } from "@plane/editor";
 import type { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryParams } from "@plane/types";
 // hooks
-import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFallback } from "@/hooks/use-page-fallback";
 // plane web import
+import type { PageUpdateHandler, TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
 import { PageModals } from "@/plane-web/components/pages";
 import { usePagesPaneExtensions, useExtendedEditorProps } from "@/plane-web/hooks/pages";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -16,6 +16,7 @@ import type { TPageInstance } from "@/store/pages/base-page";
 import { PageNavigationPaneRoot } from "../navigation-pane";
 import { PageVersionsOverlay } from "../version";
 import { PagesVersionEditor } from "../version/editor";
+import { ContentLimitBanner } from "./content-limit-banner";
 import { PageEditorBody } from "./editor-body";
 import type { TEditorBodyConfig, TEditorBodyHandlers } from "./editor-body";
 import { PageEditorToolbarRoot } from "./toolbar";
@@ -23,7 +24,7 @@ import { PageEditorToolbarRoot } from "./toolbar";
 export type TPageRootHandlers = {
   create: (payload: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
   fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
-  fetchDescriptionBinary: () => Promise<any>;
+  fetchDescriptionBinary: () => Promise<ArrayBuffer>;
   fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
   restoreVersion: (pageId: string, versionId: string) => Promise<void>;
   updateDescription: (document: TDocumentPayload) => Promise<void>;
@@ -39,27 +40,36 @@ type TPageRootProps = {
   webhookConnectionParams: TWebhookConnectionQueryParams;
   projectId?: string;
   workspaceSlug: string;
+  customRealtimeEventHandlers?: TCustomEventHandlers;
 };
 
-export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
-  const { config, handlers, page, projectId, storeType, webhookConnectionParams, workspaceSlug } = props;
+export const PageRoot = observer((props: TPageRootProps) => {
+  const {
+    config,
+    handlers,
+    page,
+    projectId,
+    storeType,
+    webhookConnectionParams,
+    workspaceSlug,
+    customRealtimeEventHandlers,
+  } = props;
   // states
   const [editorReady, setEditorReady] = useState(false);
-  const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
+  const [collaborationState, setCollaborationState] = useState<CollaborationState | null>(null);
+  const [showContentTooLargeBanner, setShowContentTooLargeBanner] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
-  // router
-  const router = useAppRouter();
   // derived values
   const {
     isContentEditable,
     editor: { setEditorRef },
   } = page;
   // page fallback
-  usePageFallback({
+  const { isFetchingFallbackBinary } = usePageFallback({
     editorRef,
     fetchPageDescription: handlers.fetchDescriptionBinary,
-    hasConnectionFailed,
+    collaborationState,
     updatePageDescription: handlers.updateDescription,
   });
 
@@ -91,6 +101,24 @@ export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
     editorRef,
   });
 
+  // Type-safe error handler for content too large errors
+  const errorHandler: PageUpdateHandler<"error"> = (params) => {
+    const { data } = params;
+
+    // Check if it's content too large error
+    if (data.error_code === "content_too_large") {
+      setShowContentTooLargeBanner(true);
+    }
+
+    // Call original error handler if exists
+    customRealtimeEventHandlers?.error?.(params);
+  };
+
+  const mergedCustomEventHandlers: TCustomEventHandlers = {
+    ...customRealtimeEventHandlers,
+    error: errorHandler,
+  };
+
   // Get extended editor extensions configuration
   const extendedEditorProps = useExtendedEditorProps({
     workspaceSlug,
@@ -134,11 +162,12 @@ export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
           isNavigationPaneOpen={isNavigationPaneOpen}
           page={page}
         />
+        {showContentTooLargeBanner && <ContentLimitBanner className="px-page-x" />}
         <PageEditorBody
           config={config}
+          customRealtimeEventHandlers={mergedCustomEventHandlers}
           editorReady={editorReady}
           editorForwardRef={editorRef}
-          handleConnectionStatus={setHasConnectionFailed}
           handleEditorReady={handleEditorReady}
           handleOpenNavigationPane={handleOpenNavigationPane}
           handlers={handlers}
@@ -149,6 +178,8 @@ export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
           webhookConnectionParams={webhookConnectionParams}
           workspaceSlug={workspaceSlug}
           extendedEditorProps={extendedEditorProps}
+          isFetchingFallbackBinary={isFetchingFallbackBinary}
+          onCollaborationStateChange={setCollaborationState}
         />
       </div>
       <PageNavigationPaneRoot

apps/web/core/components/pages/header/syncing-badge.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import { CloudOff } from "lucide-react";
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  syncStatus: "syncing" | "synced" | "error";
+};
+
+export const PageSyncingBadge = ({ syncStatus }: Props) => {
+  const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
+  const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
+
+  useEffect(() => {
+    // Only handle transitions when there's a change
+    if (prevSyncStatus !== syncStatus) {
+      if (syncStatus === "synced") {
+        // Delay hiding to allow exit animation to complete
+        setTimeout(() => {
+          setIsVisible(false);
+        }, 300); // match animation duration
+      } else {
+        setIsVisible(true);
+      }
+      setPrevSyncStatus(syncStatus);
+    }
+  }, [syncStatus, prevSyncStatus]);
+
+  if (!isVisible || syncStatus === "synced") return null;
+
+  const badgeContent = {
+    syncing: {
+      label: "Syncing...",
+      tooltipHeading: "Syncing...",
+      tooltipContent: "Your changes are being synced with the server. You can continue making changes.",
+      bgColor: "bg-custom-primary-100/20",
+      textColor: "text-custom-primary-100",
+      pulseColor: "bg-custom-primary-100",
+      pulseBgColor: "bg-custom-primary-100/30",
+      icon: null,
+    },
+    error: {
+      label: "Connection lost",
+      tooltipHeading: "Connection lost",
+      tooltipContent:
+        "We're having trouble connecting to the websocket server. Your changes will be synced and saved every 10 seconds.",
+      bgColor: "bg-red-500/20",
+      textColor: "text-red-500",
+      icon: <CloudOff className="size-3" />,
+    },
+  };
+
+  // This way we guarantee badgeContent is defined
+  const content = badgeContent[syncStatus];
+
+  return (
+    <Tooltip tooltipHeading={content.tooltipHeading} tooltipContent={content.tooltipContent}>
+      <div
+        className={`flex-shrink-0 h-6 flex items-center gap-1.5 px-2 rounded ${content.textColor} ${content.bgColor} animate-quickFadeIn`}
+      >
+        {syncStatus === "syncing" ? (
+          <div className="relative flex-shrink-0">
+            <div className="absolute -inset-0.5 rounded-full bg-custom-primary-100/30 animate-ping" />
+            <div className="relative h-1.5 w-1.5 rounded-full bg-custom-primary-100" />
+          </div>
+        ) : (
+          content.icon
+        )}
+        <span className="text-xs font-medium">{content.label}</span>
+      </div>
+    </Tooltip>
+  );
+};

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

@@ -1,7 +1,9 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { EditorRefApi, CollaborationState } from "@plane/editor";
 // plane editor
 import { convertBinaryDataToBase64String, getBinaryDataFromDocumentEditorHTMLString } from "@plane/editor";
-import type { EditorRefApi } from "@plane/editor";
+// plane propel
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 // plane types
 import type { TDocumentPayload } from "@plane/types";
 // hooks
@@ -10,19 +12,38 @@ import useAutoSave from "@/hooks/use-auto-save";
 type TArgs = {
   editorRef: React.RefObject<EditorRefApi>;
   fetchPageDescription: () => Promise<ArrayBuffer>;
-  hasConnectionFailed: boolean;
+  collaborationState: CollaborationState | null;
   updatePageDescription: (data: TDocumentPayload) => Promise<void>;
 };
 
 export const usePageFallback = (args: TArgs) => {
-  const { editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription } = args;
+  const { editorRef, fetchPageDescription, collaborationState, updatePageDescription } = args;
+  const hasShownFallbackToast = useRef(false);
+
+  const [isFetchingFallbackBinary, setIsFetchingFallbackBinary] = useState(false);
+
+  // Derive connection failure from collaboration state
+  const hasConnectionFailed = collaborationState?.stage.kind === "disconnected";
 
   const handleUpdateDescription = useCallback(async () => {
     if (!hasConnectionFailed) return;
     const editor = editorRef.current;
     if (!editor) return;
 
+    // Show toast notification when fallback mechanism kicks in (only once)
+    if (!hasShownFallbackToast.current) {
+      // setToast({
+      //   type: TOAST_TYPE.WARNING,
+      //   title: "Connection lost",
+      //   message: "Your changes are being saved using backup mechanism. ",
+      // });
+      console.log("Connection lost");
+      hasShownFallbackToast.current = true;
+    }
+
     try {
+      setIsFetchingFallbackBinary(true);
+
       const latestEncodedDescription = await fetchPageDescription();
       let latestDecodedDescription: Uint8Array;
       if (latestEncodedDescription && latestEncodedDescription.byteLength > 0) {
@@ -41,16 +62,28 @@ export const usePageFallback = (args: TArgs) => {
         description_html: html,
         description: json,
       });
-    } catch (error) {
-      console.error("Error in updating description using fallback logic:", error);
+    } catch (error: any) {
+      console.error(error);
+      // setToast({
+      //   type: TOAST_TYPE.ERROR,
+      //   title: "Error",
+      //   message: `Failed to update description using backup mechanism, ${error?.message}`,
+      // });
+    } finally {
+      setIsFetchingFallbackBinary(false);
     }
   }, [editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription]);
 
   useEffect(() => {
     if (hasConnectionFailed) {
       handleUpdateDescription();
+    } else {
+      // Reset toast flag when connection is restored
+      hasShownFallbackToast.current = false;
     }
   }, [handleUpdateDescription, hasConnectionFailed]);
 
   useAutoSave(handleUpdateDescription);
+
+  return { isFetchingFallbackBinary };
 };

apps/web/core/store/pages/base-page.ts

@@ -13,6 +13,7 @@ import { PageEditorInstance } from "./page-editor-info";
 export type TBasePage = TPage & {
   // observables
   isSubmitting: TNameDescriptionLoader;
+  isSyncingWithServer: "syncing" | "synced" | "error";
   // computed
   asJSON: TPage | undefined;
   isCurrentUserOwner: boolean;
@@ -35,6 +36,7 @@ export type TBasePage = TPage & {
   removePageFromFavorites: () => Promise<void>;
   duplicate: () => Promise<TPage | undefined>;
   mutateProperties: (data: Partial<TPage>, shouldUpdateName?: boolean) => void;
+  setSyncingStatus: (status: "syncing" | "synced" | "error") => void;
   // sub-store
   editor: PageEditorInstance;
 };
@@ -73,6 +75,7 @@ export type TPageInstance = TBasePage &
 export class BasePage extends ExtendedBasePage implements TBasePage {
   // loaders
   isSubmitting: TNameDescriptionLoader = "saved";
+  isSyncingWithServer: "syncing" | "synced" | "error" = "syncing";
   // page properties
   id: string | undefined;
   name: string | undefined;
@@ -155,6 +158,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       created_at: observable.ref,
       updated_at: observable.ref,
       deleted_at: observable.ref,
+      isSyncingWithServer: observable.ref,
       // helpers
       oldName: observable.ref,
       setIsSubmitting: action,
@@ -535,4 +539,10 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       set(this, key, value);
     });
   };
+
+  setSyncingStatus = (status: "syncing" | "synced" | "error") => {
+    runInAction(() => {
+      this.isSyncingWithServer = status;
+    });
+  };
 }