[PE-92] fix: removing readonly collaborative document editor (#6209)

* fix: removing readonly editor * fix: sync state * fix: indexeddb sync loader added * fix: remove node error fixed * style: page title and checkbox * chore: removing the syncing logic * revert: is editable check removed in display message * fix: editable field optional * fix: editable removed as optional prop * fix: extra options import fix --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2024-12-18 12:58:18 +05:30 · 2024-12-18 12:58:18 +05:30 · e33bae2125
commit e33bae2125
parent 580c4b1930
28 changed files with 215 additions and 460 deletions
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@ -19,6 +19,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
    containerClassName,
    disabledExtensions,
    displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
    editorClassName = "",
    embedHandler,
    fileHandler,
@ -44,8 +45,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {

  // use document editor
  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
-    onTransaction,
    disabledExtensions,
+    editable,
    editorClassName,
    embedHandler,
    extensions,
@ -54,6 +55,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
    handleEditorReady,
    id,
    mentionHandler,
+    onTransaction,
    placeholder,
    realtimeConfig,
    serverHandler,
--- a/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
@ -1,81 +0,0 @@
-import { forwardRef, MutableRefObject } from "react";
-// components
-import { DocumentContentLoader, PageRenderer } from "@/components/editors";
-// constants
-import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// extensions
-import { IssueWidget } from "@/extensions";
-// helpers
-import { getEditorClassNames } from "@/helpers/common";
-// hooks
-import { useReadOnlyCollaborativeEditor } from "@/hooks/use-read-only-collaborative-editor";
-// types
-import { EditorReadOnlyRefApi, ICollaborativeDocumentReadOnlyEditor } from "@/types";
-
-const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOnlyEditor) => {
-  const {
-    containerClassName,
-    disabledExtensions,
-    displayConfig = DEFAULT_DISPLAY_CONFIG,
-    editorClassName = "",
-    embedHandler,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  } = props;
-  const extensions = [];
-  if (embedHandler?.issue) {
-    extensions.push(
-      IssueWidget({
-        widgetCallback: embedHandler.issue.widgetCallback,
-      })
-    );
-  }
-
-  const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
-    disabledExtensions,
-    editorClassName,
-    extensions,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  });
-
-  const editorContainerClassName = getEditorClassNames({
-    containerClassName,
-  });
-
-  if (!editor) return null;
-
-  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
-
-  return (
-    <PageRenderer
-      displayConfig={displayConfig}
-      id={id}
-      editor={editor}
-      editorContainerClassName={editorContainerClassName}
-    />
-  );
-};
-
-const CollaborativeDocumentReadOnlyEditorWithRef = forwardRef<
-  EditorReadOnlyRefApi,
-  ICollaborativeDocumentReadOnlyEditor
->((props, ref) => (
-  <CollaborativeDocumentReadOnlyEditor {...props} forwardedRef={ref as MutableRefObject<EditorReadOnlyRefApi | null>} />
-));
-
-CollaborativeDocumentReadOnlyEditorWithRef.displayName = "CollaborativeDocumentReadOnlyEditorWithRef";
-
-export { CollaborativeDocumentReadOnlyEditorWithRef };
--- a/packages/editor/src/core/components/editors/document/index.ts
+++ b/packages/editor/src/core/components/editors/document/index.ts
@ -1,5 +1,4 @@
 export * from "./collaborative-editor";
-export * from "./collaborative-read-only-editor";
 export * from "./loader";
 export * from "./page-renderer";
 export * from "./read-only-editor";
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@ -140,10 +140,10 @@ export const PageRenderer = (props: IPageRenderer) => {
        >
          <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
          {editor.isEditable && (
-            <>
+            <div>
              <BlockMenu editor={editor} />
              <AIFeaturesMenu menu={aiHandler?.menu} />
-            </>
+            </div>
          )}
        </EditorContainer>
      </div>
--- a/packages/editor/src/core/components/editors/editor-wrapper.tsx
+++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@ -38,6 +38,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
  } = props;

  const editor = useEditor({
+    editable: true,
    disabledExtensions,
    editorClassName,
    enableHistory: true,
--- a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
@ -127,7 +127,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
      return "Uploading...";
    }

-    if (draggedInside) {
+    if (draggedInside && editor.isEditable) {
      return "Drop image here";
    }

@ -137,14 +137,16 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
  return (
    <div
      className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 hover:text-custom-text-200 bg-custom-background-90 hover:bg-custom-background-80 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 bg-custom-background-90 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
        {
-          "hover:text-custom-text-200 cursor-pointer": editor.isEditable,
-          "bg-custom-background-80 text-custom-text-200": draggedInside,
-          "text-custom-primary-200 bg-custom-primary-100/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200 border-custom-primary-200/10":
-            selected,
-          "text-red-500 cursor-default hover:text-red-500": failedToLoadImage,
-          "bg-red-500/10 hover:bg-red-500/10": failedToLoadImage && selected,
+          "hover:text-custom-text-200 hover:bg-custom-background-80 cursor-pointer": editor.isEditable,
+          "bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
+          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
+            selected && editor.isEditable,
+          "text-red-500 cursor-default": failedToLoadImage,
+          "hover:text-red-500": failedToLoadImage && editor.isEditable,
+          "bg-red-500/10": failedToLoadImage && selected,
+          "hover:bg-red-500/10": failedToLoadImage && selected && editor.isEditable,
        }
      )}
      onDrop={onDrop}
--- a/packages/editor/src/core/extensions/drop.tsx
+++ b/packages/editor/src/core/extensions/drop.tsx
@ -2,8 +2,7 @@ import { Extension, Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";

-export const DropHandlerExtension = () =>
-  Extension.create({
+export const DropHandlerExtension = Extension.create({
  name: "dropHandler",
  priority: 1000,

@ -14,7 +13,12 @@ export const DropHandlerExtension = () =>
        key: new PluginKey("drop-handler-plugin"),
        props: {
          handlePaste: (view: EditorView, event: ClipboardEvent) => {
-              if (event.clipboardData && event.clipboardData.files && event.clipboardData.files.length > 0) {
+            if (
+              editor.isEditable &&
+              event.clipboardData &&
+              event.clipboardData.files &&
+              event.clipboardData.files.length > 0
+            ) {
              event.preventDefault();
              const files = Array.from(event.clipboardData.files);
              const imageFiles = files.filter((file) => file.type.startsWith("image"));
@ -28,7 +32,13 @@ export const DropHandlerExtension = () =>
            return false;
          },
          handleDrop: (view: EditorView, event: DragEvent, _slice: any, moved: boolean) => {
-              if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+            if (
+              editor.isEditable &&
+              !moved &&
+              event.dataTransfer &&
+              event.dataTransfer.files &&
+              event.dataTransfer.files.length > 0
+            ) {
              event.preventDefault();
              const files = Array.from(event.dataTransfer.files);
              const imageFiles = files.filter((file) => file.type.startsWith("image"));
@ -53,7 +63,6 @@ export const DropHandlerExtension = () =>
    ];
  },
 });
-
 export const insertImagesSafely = async ({
  editor,
  files,
--- a/packages/editor/src/core/extensions/extensions.tsx
+++ b/packages/editor/src/core/extensions/extensions.tsx
@ -47,10 +47,11 @@ type TArguments = {
  };
  placeholder?: string | ((isFocused: boolean, value: string) => string);
  tabIndex?: number;
+  editable: boolean;
 };

 export const CoreEditorExtensions = (args: TArguments): Extensions => {
-  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
+  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex, editable } = args;

  return [
    StarterKit.configure({
@ -89,7 +90,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
      ...(enableHistory ? {} : { history: false }),
    }),
    CustomQuoteExtension,
-    DropHandlerExtension(),
+    DropHandlerExtension,
    CustomHorizontalRule.configure({
      HTMLAttributes: {
        class: "py-4 border-custom-border-400",
@ -137,6 +138,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
    CustomCodeInlineExtension,
    Markdown.configure({
      html: true,
+      transformCopiedText: true,
      transformPastedText: true,
      breaks: true,
    }),
@ -145,12 +147,14 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
    TableCell,
    TableRow,
    CustomMention({
-      mentionSuggestions: mentionConfig.mentionSuggestions,
+      mentionSuggestions: editable ? mentionConfig.mentionSuggestions : undefined,
      mentionHighlights: mentionConfig.mentionHighlights,
-      readonly: false,
+      readonly: !editable,
    }),
    Placeholder.configure({
      placeholder: ({ editor, node }) => {
+        if (!editor.isEditable) return;
+
        if (node.type.name === "heading") return `Heading ${node.attrs.level}`;

        if (editor.storage.imageComponent.uploadInProgress) return "";
--- a/packages/editor/src/core/extensions/read-only-extensions.tsx
+++ b/packages/editor/src/core/extensions/read-only-extensions.tsx
@ -20,7 +20,6 @@ import {
  TableRow,
  Table,
  CustomMention,
-  HeadingListExtension,
  CustomReadOnlyImageExtension,
  CustomTextAlignExtension,
  CustomCalloutReadOnlyExtension,
@ -139,7 +138,6 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
    }),
    CharacterCount,
    CustomColorExtension,
-    HeadingListExtension,
    CustomTextAlignExtension,
    CustomCalloutReadOnlyExtension,
    ...CoreReadOnlyEditorAdditionalExtensions({
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@ -15,6 +15,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
  const {
    onTransaction,
    disabledExtensions,
+    editable,
    editorClassName,
    editorProps = {},
    embedHandler,
@ -75,7 +76,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
  const editor = useEditor({
    disabledExtensions,
    id,
-    onTransaction,
+    editable,
    editorProps,
    editorClassName,
    enableHistory: false,
@ -97,9 +98,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
      }),
    ],
    fileHandler,
-    handleEditorReady,
    forwardedRef,
+    handleEditorReady,
    mentionHandler,
+    onTransaction,
    placeholder,
    provider,
    tabIndex,
--- a/packages/editor/src/core/hooks/use-editor.ts
+++ b/packages/editor/src/core/hooks/use-editor.ts
@ -27,6 +27,7 @@ import type {
 } from "@/types";

 export interface CustomEditorProps {
+  editable: boolean;
  editorClassName: string;
  editorProps?: EditorProps;
  enableHistory: boolean;
@ -55,6 +56,7 @@ export interface CustomEditorProps {
 export const useEditor = (props: CustomEditorProps) => {
  const {
    disabledExtensions,
+    editable = true,
    editorClassName,
    editorProps = {},
    enableHistory,
@ -74,12 +76,13 @@ export const useEditor = (props: CustomEditorProps) => {
    autofocus = false,
  } = props;
  // states
-
  const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
  // refs
  const editorRef: MutableRefObject<Editor | null> = useRef(null);
  const savedSelectionRef = useRef(savedSelection);
-  const editor = useTiptapEditor({
+  const editor = useTiptapEditor(
+    {
+      editable,
      autofocus,
      editorProps: {
        ...CoreEditorProps({
@ -89,6 +92,7 @@ export const useEditor = (props: CustomEditorProps) => {
      },
      extensions: [
        ...CoreEditorExtensions({
+          editable,
          disabledExtensions,
          enableHistory,
          fileHandler,
@ -109,7 +113,9 @@ export const useEditor = (props: CustomEditorProps) => {
      },
      onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
      onDestroy: () => handleEditorReady?.(false),
-  });
+    },
+    [editable]
+  );

  // Update the ref whenever savedSelection changes
  useEffect(() => {
--- a/packages/editor/src/core/hooks/use-file-upload.ts
+++ b/packages/editor/src/core/hooks/use-file-upload.ts
@ -105,7 +105,7 @@ export const useDropZone = (args: TDropzoneArgs) => {
    async (e: DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      setDraggedInside(false);
-      if (e.dataTransfer.files.length === 0) {
+      if (e.dataTransfer.files.length === 0 || !editor.isEditable) {
        return;
      }
      const filesList = e.dataTransfer.files;
--- a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
@ -1,92 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { HocuspocusProvider } from "@hocuspocus/provider";
-import Collaboration from "@tiptap/extension-collaboration";
-import { IndexeddbPersistence } from "y-indexeddb";
-// extensions
-import { HeadingListExtension } from "@/extensions";
-// hooks
-import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
-// types
-import { TReadOnlyCollaborativeEditorProps } from "@/types";
-
-export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEditorProps) => {
-  const {
-    disabledExtensions,
-    editorClassName,
-    editorProps = {},
-    extensions,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  } = props;
-  // states
-  const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
-  const [hasServerSynced, setHasServerSynced] = useState(false);
-  // initialize Hocuspocus provider
-  const provider = useMemo(
-    () =>
-      new HocuspocusProvider({
-        name: id,
-        url: realtimeConfig.url,
-        token: JSON.stringify(user),
-        parameters: realtimeConfig.queryParams,
-        onAuthenticationFailed: () => {
-          serverHandler?.onServerError?.();
-          setHasServerConnectionFailed(true);
-        },
-        onConnect: () => serverHandler?.onConnect?.(),
-        onClose: (data) => {
-          if (data.event.code === 1006) {
-            serverHandler?.onServerError?.();
-            setHasServerConnectionFailed(true);
-          }
-        },
-        onSynced: () => setHasServerSynced(true),
-      }),
-    [id, realtimeConfig, serverHandler, user]
-  );
-
-  // indexed db integration for offline support
-  const localProvider = useMemo(
-    () => (id ? new IndexeddbPersistence(id, provider.document) : undefined),
-    [id, provider]
-  );
-
-  // destroy and disconnect connection on unmount
-  useEffect(
-    () => () => {
-      provider.destroy();
-      localProvider?.destroy();
-    },
-    [provider, localProvider]
-  );
-
-  const editor = useReadOnlyEditor({
-    disabledExtensions,
-    editorProps,
-    editorClassName,
-    extensions: [
-      ...(extensions ?? []),
-      HeadingListExtension,
-      Collaboration.configure({
-        document: provider.document,
-      }),
-    ],
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    mentionHandler,
-    provider,
-  });
-
-  return {
-    editor,
-    hasServerConnectionFailed,
-    hasServerSynced,
-  };
-};
--- a/packages/editor/src/core/types/collaboration.ts
+++ b/packages/editor/src/core/types/collaboration.ts
@ -21,6 +21,7 @@ export type TServerHandler = {

 type TCollaborativeEditorHookProps = {
  disabledExtensions: TExtensions[];
+  editable?: boolean;
  editorClassName: string;
  editorProps?: EditorProps;
  extensions?: Extensions;
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@ -138,6 +138,7 @@ export interface IRichTextEditor extends IEditorProps {

 export interface ICollaborativeDocumentEditor
  extends Omit<IEditorProps, "initialValue" | "onChange" | "onEnterKeyPress" | "value"> {
+  editable: boolean;
  aiHandler?: TAIHandler;
  embedHandler: TEmbedConfig;
  handleEditorReady?: (value: boolean) => void;
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@ -9,7 +9,6 @@ import "./styles/drag-drop.css";
 // editors
 export {
  CollaborativeDocumentEditorWithRef,
-  CollaborativeDocumentReadOnlyEditorWithRef,
  DocumentReadOnlyEditorWithRef,
  LiteTextEditorWithRef,
  LiteTextReadOnlyEditorWithRef,
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@ -111,8 +111,12 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
  transform: scale(1.05);
 }

-ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
-  background-color: rgba(var(--color-background-80)) !important;
+.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
+  background-color: rgba(var(--color-background-80));
+}
+
+.ProseMirror[contenteditable="false"] input[type="checkbox"] {
+  pointer-events: none;
 }

 ul[data-type="taskList"] li > label input[type="checkbox"][checked] {
@ -151,10 +155,6 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
  margin-right: 0.2rem;
  margin-top: 0.15rem;

-  &:hover {
-    background-color: rgb(var(--color-background-80));
-  }
-
  &:active {
    background-color: rgb(var(--color-background-90));
  }
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@ -1,11 +1,9 @@
-import { useCallback, useMemo } from "react";
+import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // document-editor
 import {
  CollaborativeDocumentEditorWithRef,
-  CollaborativeDocumentReadOnlyEditorWithRef,
-  EditorReadOnlyRefApi,
  EditorRefApi,
  TAIMenuProps,
  TDisplayConfig,
@ -20,7 +18,7 @@ import { Row } from "@plane/ui";
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn, LIVE_BASE_PATH, LIVE_BASE_URL } from "@/helpers/common.helper";
-import { getEditorFileHandlers, getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
+import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { generateRandomColor } from "@/helpers/string.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
@ -42,24 +40,14 @@ const fileService = new FileService();
 type Props = {
  editorRef: React.RefObject<EditorRefApi>;
  editorReady: boolean;
-  handleConnectionStatus: (status: boolean) => void;
-  handleEditorReady: (value: boolean) => void;
-  handleReadOnlyEditorReady: (value: boolean) => void;
+  handleConnectionStatus: Dispatch<SetStateAction<boolean>>;
+  handleEditorReady: Dispatch<SetStateAction<boolean>>;
  page: IPage;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
  sidePeekVisible: boolean;
 };

 export const PageEditorBody: React.FC<Props> = observer((props) => {
-  const {
-    editorRef,
-    handleConnectionStatus,
-    handleEditorReady,
-    handleReadOnlyEditorReady,
-    page,
-    readOnlyEditorRef,
-    sidePeekVisible,
-  } = props;
+  const { editorRef, handleConnectionStatus, handleEditorReady, page, sidePeekVisible } = props;
  // router
  const { workspaceSlug, projectId } = useParams();
  // store hooks
@ -112,11 +100,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {

  const handleServerConnect = useCallback(() => {
    handleConnectionStatus(false);
-  }, []);
+  }, [handleConnectionStatus]);

  const handleServerError = useCallback(() => {
    handleConnectionStatus(true);
-  }, []);
+  }, [handleConnectionStatus]);

  const serverHandler: TServerHandler = useMemo(
    () => ({
@ -169,18 +157,16 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
          "w-[5%]": isFullWidth,
        })}
      >
-        {!isFullWidth && (
-          <PageContentBrowser editorRef={(isContentEditable ? editorRef : readOnlyEditorRef)?.current} />
-        )}
+        {!isFullWidth && <PageContentBrowser editorRef={editorRef.current} />}
      </Row>
      <div
-        className={cn("h-full w-full pt-5 duration-200", {
+        className={cn("size-full pt-5 duration-200", {
          "md:w-[calc(100%-10rem)] xl:w-[calc(100%-28rem)]": !isFullWidth,
          "md:w-[90%]": isFullWidth,
        })}
      >
-        <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
-          <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
+        <div className="size-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
+          <div className="relative w-full flex-shrink-0 md:pl-5 px-4 h-[38px]">
            <PageEditorTitle
              editorRef={editorRef}
              title={pageTitle}
@ -188,8 +174,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
              readOnly={!isContentEditable}
            />
          </div>
-          {isContentEditable ? (
          <CollaborativeDocumentEditorWithRef
+            editable={isContentEditable}
            id={pageId}
            fileHandler={getEditorFileHandlers({
              maxFileSize,
@ -229,31 +215,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
              menu: getAIMenu,
            }}
          />
-          ) : (
-            <CollaborativeDocumentReadOnlyEditorWithRef
-              id={pageId}
-              ref={readOnlyEditorRef}
-              disabledExtensions={disabledExtensions}
-              fileHandler={getReadOnlyEditorFileHandlers({
-                projectId: projectId?.toString() ?? "",
-                workspaceSlug: workspaceSlug?.toString() ?? "",
-              })}
-              handleEditorReady={handleReadOnlyEditorReady}
-              containerClassName="p-0 pb-64 border-none"
-              displayConfig={displayConfig}
-              editorClassName="pl-10"
-              mentionHandler={{
-                highlights: mentionHighlights,
-              }}
-              embedHandler={{
-                issue: {
-                  widgetCallback: issueEmbedProps.widgetCallback,
-                },
-              }}
-              realtimeConfig={realtimeConfig}
-              user={userConfig}
-            />
-          )}
        </div>
      </div>
      <div
--- a/web/core/components/pages/editor/header/extra-options.tsx
+++ b/web/core/components/pages/editor/header/extra-options.tsx
@ -2,7 +2,7 @@

 import { observer } from "mobx-react";
 // editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, FavoriteStar, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // components
@ -19,11 +19,10 @@ type Props = {
  editorRef: React.RefObject<EditorRefApi>;
  handleDuplicatePage: () => void;
  page: IPage;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
 };

 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, page, readOnlyEditorRef } = props;
+  const { editorRef, handleDuplicatePage, page } = props;
  // derived values
  const {
    archived_at,
@ -85,12 +84,8 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
          iconClassName="text-custom-text-100"
        />
      )}
-      <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
-      <PageOptionsDropdown
-        editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
-        handleDuplicatePage={handleDuplicatePage}
-        page={page}
-      />
+      <PageInfoPopover editorRef={editorRef?.current} />
+      <PageOptionsDropdown editorRef={editorRef?.current} handleDuplicatePage={handleDuplicatePage} page={page} />
    </div>
  );
 });
--- a/web/core/components/pages/editor/header/info-popover.tsx
+++ b/web/core/components/pages/editor/header/info-popover.tsx
@ -2,12 +2,12 @@ import { useState } from "react";
 import { usePopper } from "react-popper";
 import { Info } from "lucide-react";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // helpers
 import { getReadTimeFromWordsCount } from "@/helpers/date-time.helper";

 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
 };

 export const PageInfoPopover: React.FC<Props> = (props) => {
--- a/web/core/components/pages/editor/header/mobile-root.tsx
+++ b/web/core/components/pages/editor/header/mobile-root.tsx
@ -13,52 +13,34 @@ type Props = {
  editorRef: React.RefObject<EditorRefApi>;
  handleDuplicatePage: () => void;
  page: IPage;
-  readOnlyEditorReady: boolean;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
  setSidePeekVisible: (sidePeekState: boolean) => void;
  sidePeekVisible: boolean;
 };

 export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
-  const {
-    editorReady,
-    editorRef,
-    handleDuplicatePage,
-    page,
-    readOnlyEditorReady,
-    readOnlyEditorRef,
-    setSidePeekVisible,
-    sidePeekVisible,
-  } = props;
+  const { editorReady, editorRef, handleDuplicatePage, page, setSidePeekVisible, sidePeekVisible } = props;
  // derived values
  const { isContentEditable } = page;
  // page filters
  const { isFullWidth } = usePageFilters();

-  if (!editorRef.current && !readOnlyEditorRef.current) return null;
+  if (!editorRef.current) return null;

  return (
    <>
      <Header variant={EHeaderVariant.SECONDARY}>
        <div className="flex-shrink-0 my-auto">
          <PageSummaryPopover
-            editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+            editorRef={editorRef.current}
            isFullWidth={isFullWidth}
            sidePeekVisible={sidePeekVisible}
            setSidePeekVisible={setSidePeekVisible}
          />
        </div>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          readOnlyEditorRef={readOnlyEditorRef}
-        />
+        <PageExtraOptions editorRef={editorRef} handleDuplicatePage={handleDuplicatePage} page={page} />
      </Header>
      <Header variant={EHeaderVariant.TERNARY}>
-        {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
-          <PageToolbar editorRef={editorRef?.current} />
-        )}
+        {editorReady && isContentEditable && editorRef.current && <PageToolbar editorRef={editorRef?.current} />}
      </Header>
    </>
  );
--- a/web/core/components/pages/editor/header/options-dropdown.tsx
+++ b/web/core/components/pages/editor/header/options-dropdown.tsx
@ -15,7 +15,7 @@ import {
  LucideIcon,
 } from "lucide-react";
 // document editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, CustomMenu, type ISvgIcons, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
@ -30,7 +30,7 @@ import { useQueryParams } from "@/hooks/use-query-params";
 import { IPage } from "@/store/pages/page";

 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
  handleDuplicatePage: () => void;
  page: IPage;
 };
--- a/web/core/components/pages/editor/header/root.tsx
+++ b/web/core/components/pages/editor/header/root.tsx
@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
@ -15,35 +15,24 @@ type Props = {
  editorRef: React.RefObject<EditorRefApi>;
  handleDuplicatePage: () => void;
  page: IPage;
-  readOnlyEditorReady: boolean;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
  setSidePeekVisible: (sidePeekState: boolean) => void;
  sidePeekVisible: boolean;
 };

 export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
-  const {
-    editorReady,
-    editorRef,
-    handleDuplicatePage,
-    page,
-    readOnlyEditorReady,
-    readOnlyEditorRef,
-    setSidePeekVisible,
-    sidePeekVisible,
-  } = props;
+  const { editorReady, editorRef, setSidePeekVisible, sidePeekVisible, handleDuplicatePage, page } = props;
  // derived values
  const { isContentEditable } = page;
  // page filters
  const { isFullWidth } = usePageFilters();

-  if (!editorRef.current && !readOnlyEditorRef.current) return null;
+  if (!editorRef.current) return null;

  return (
    <>
      <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
        <Header.LeftItem className="gap-0 w-full">
-          {(editorReady || readOnlyEditorReady) && (
+          {editorReady && (
            <div
              className={cn("flex-shrink-0 my-auto", {
                "w-40 lg:w-56": !isFullWidth,
@ -51,30 +40,21 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
              })}
            >
              <PageSummaryPopover
-                editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+                editorRef={editorRef.current}
                isFullWidth={isFullWidth}
                sidePeekVisible={sidePeekVisible}
                setSidePeekVisible={setSidePeekVisible}
              />
            </div>
          )}
-          {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
-            <PageToolbar editorRef={editorRef?.current} />
-          )}
+          {editorReady && isContentEditable && editorRef.current && <PageToolbar editorRef={editorRef?.current} />}
        </Header.LeftItem>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          readOnlyEditorRef={readOnlyEditorRef}
-        />
+        <PageExtraOptions editorRef={editorRef} handleDuplicatePage={handleDuplicatePage} page={page} />
      </Header>
      <div className="md:hidden">
        <PageEditorMobileHeaderRoot
          editorRef={editorRef}
-          readOnlyEditorRef={readOnlyEditorRef}
          editorReady={editorReady}
-          readOnlyEditorReady={readOnlyEditorReady}
          handleDuplicatePage={handleDuplicatePage}
          page={page}
          sidePeekVisible={sidePeekVisible}
--- a/web/core/components/pages/editor/page-root.tsx
+++ b/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 { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // types
 import { TPage } from "@plane/types";
 // ui
@ -32,12 +32,10 @@ export const PageRoot = observer((props: TPageRootProps) => {
  // states
  const [editorReady, setEditorReady] = 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
  const editorRef = useRef<EditorRefApi>(null);
-  const readOnlyEditorRef = useRef<EditorReadOnlyRefApi>(null);
  // router
  const router = useAppRouter();
  // search params
@ -99,9 +97,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
    editorRef.current?.clearEditor();
    editorRef.current?.setEditorValue(descriptionHTML);
  };
-  const currentVersionDescription = isContentEditable
-    ? editorRef.current?.getDocument().html
-    : readOnlyEditorRef.current?.getDocument().html;
+  const currentVersionDescription = editorRef.current?.getDocument().html;

  return (
    <>
@ -137,19 +133,15 @@ export const PageRoot = observer((props: TPageRootProps) => {
        editorRef={editorRef}
        handleDuplicatePage={handleDuplicatePage}
        page={page}
-        readOnlyEditorReady={readOnlyEditorReady}
-        readOnlyEditorRef={readOnlyEditorRef}
        setSidePeekVisible={(state) => setSidePeekVisible(state)}
        sidePeekVisible={sidePeekVisible}
      />
      <PageEditorBody
        editorReady={editorReady}
        editorRef={editorRef}
-        handleConnectionStatus={(status) => setHasConnectionFailed(status)}
-        handleEditorReady={(val) => setEditorReady(val)}
-        handleReadOnlyEditorReady={() => setReadOnlyEditorReady(true)}
+        handleConnectionStatus={setHasConnectionFailed}
+        handleEditorReady={setEditorReady}
        page={page}
-        readOnlyEditorRef={readOnlyEditorRef}
        sidePeekVisible={sidePeekVisible}
      />
    </>
--- a/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/web/core/components/pages/editor/summary/content-browser.tsx
@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
+import { EditorRefApi, IMarking } from "@plane/editor";
 // components
 import { OutlineHeading1, OutlineHeading2, OutlineHeading3 } from "./heading-components";

 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
  setSidePeekVisible?: (sidePeekState: boolean) => void;
 };

--- a/web/core/components/pages/editor/summary/popover.tsx
+++ b/web/core/components/pages/editor/summary/popover.tsx
@ -2,14 +2,14 @@ import { useState } from "react";
 import { usePopper } from "react-popper";
 import { List } from "lucide-react";
 // document editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // components
 import { PageContentBrowser } from "./content-browser";

 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
  isFullWidth: boolean;
  sidePeekVisible: boolean;
  setSidePeekVisible: (sidePeekState: boolean) => void;
--- a/web/core/components/pages/modals/export-page-modal.tsx
+++ b/web/core/components/pages/modals/export-page-modal.tsx
@ -4,7 +4,7 @@ import { useState } from "react";
 import { PageProps, pdf } from "@react-pdf/renderer";
 import { Controller, useForm } from "react-hook-form";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // plane ui
 import { Button, CustomSelect, EModalPosition, EModalWidth, ModalCore, setToast, TOAST_TYPE } from "@plane/ui";
 // components
@ -16,7 +16,7 @@ import {
 } from "@/helpers/editor.helper";

 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
  isOpen: boolean;
  onClose: () => void;
  pageTitle: string;
--- a/web/core/hooks/use-collaborative-page-actions.tsx
+++ b/web/core/hooks/use-collaborative-page-actions.tsx
@ -50,6 +50,10 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
      try {
        await actionDetails.execute(isPerformedByCurrentUser);
        if (isPerformedByCurrentUser) {
+          const serverEventName = getServerEventName(clientAction);
+          if (serverEventName) {
+            editorRef?.emitRealTimeUpdate(serverEventName);
+          }
          setCurrentActionBeingProcessed(clientAction);
        }
      } catch {
@ -60,18 +64,9 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
        });
      }
    },
-    [actionHandlerMap]
+    [actionHandlerMap, editorRef]
  );

-  useEffect(() => {
-    if (currentActionBeingProcessed) {
-      const serverEventName = getServerEventName(currentActionBeingProcessed);
-      if (serverEventName) {
-        editorRef?.emitRealTimeUpdate(serverEventName);
-      }
-    }
-  }, [currentActionBeingProcessed, editorRef]);
-
  useEffect(() => {
    const realTimeStatelessMessageListener = editorRef?.listenToRealTimeUpdate();

@ -95,6 +90,5 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead

  return {
    executeCollaborativeAction,
-    EVENT_ACTION_DETAILS_MAP: actionHandlerMap,
  };
 };