[WIKI-539] refactor: remove lite text read only editor (#7481)

* refactor: remove lite text read only editor

* chore: update types

packages/editor/src/ce/extensions/core/index.ts

@@ -1,2 +1 @@
 export * from "./extensions";
-export * from "./read-only-extensions";

packages/editor/src/ce/extensions/core/read-only-extensions.ts

@@ -1,15 +0,0 @@
-import type { Extensions } from "@tiptap/core";
-// types
-import type { IReadOnlyEditorProps } from "@/types";
-
-export type TCoreReadOnlyEditorAdditionalExtensionsProps = Pick<
-  IReadOnlyEditorProps,
-  "disabledExtensions" | "flaggedExtensions"
->;
-
-export const CoreReadOnlyEditorAdditionalExtensions = (
-  props: TCoreReadOnlyEditorAdditionalExtensionsProps
-): Extensions => {
-  const {} = props;
-  return [];
-};

packages/editor/src/ce/extensions/rich-text/read-only-extensions.tsx

@@ -1,31 +0,0 @@
-import { AnyExtension, Extensions } from "@tiptap/core";
-// types
-import { IReadOnlyEditorProps, TExtensions } from "@/types";
-
-export type TRichTextReadOnlyEditorAdditionalExtensionsProps = Pick<
-  IReadOnlyEditorProps,
-  "disabledExtensions" | "flaggedExtensions" | "fileHandler"
->;
-
-/**
- * Registry entry configuration for extensions
- */
-export type TRichTextReadOnlyEditorAdditionalExtensionsRegistry = {
-  /** Determines if the extension should be enabled based on disabled extensions */
-  isEnabled: (disabledExtensions: TExtensions[]) => boolean;
-  /** Returns the extension instance(s) when enabled */
-  getExtension: (props: TRichTextReadOnlyEditorAdditionalExtensionsProps) => AnyExtension | undefined;
-};
-
-const extensionRegistry: TRichTextReadOnlyEditorAdditionalExtensionsRegistry[] = [];
-
-export const RichTextReadOnlyEditorAdditionalExtensions = (props: TRichTextReadOnlyEditorAdditionalExtensionsProps) => {
-  const { disabledExtensions } = props;
-
-  const extensions: Extensions = extensionRegistry
-    .filter((config) => config.isEnabled(disabledExtensions))
-    .map((config) => config.getExtension(props))
-    .filter((extension): extension is AnyExtension => extension !== undefined);
-
-  return extensions;
-};

packages/editor/src/core/components/editors/index.ts

@@ -4,4 +4,3 @@ export * from "./rich-text";
 export * from "./editor-container";
 export * from "./editor-content";
 export * from "./editor-wrapper";
-export * from "./read-only-editor-wrapper";

packages/editor/src/core/components/editors/lite-text/editor.tsx

@@ -19,7 +19,7 @@ const LiteTextEditor: React.FC<ILiteTextEditorProps> = (props) => {
     return resolvedExtensions;
   }, [externalExtensions, disabledExtensions, onEnterKeyPress]);
 
-  return <EditorWrapper {...props} editable extensions={extensions} />;
+  return <EditorWrapper {...props} extensions={extensions} />;
 };
 
 const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditorProps>((props, ref) => (

packages/editor/src/core/components/editors/lite-text/index.ts

@@ -1,2 +1 @@
 export * from "./editor";
-export * from "./read-only-editor";

packages/editor/src/core/components/editors/lite-text/read-only-editor.tsx

@@ -1,13 +0,0 @@
-import { forwardRef } from "react";
-// components
-import { ReadOnlyEditorWrapper } from "@/components/editors";
-// types
-import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditorProps } from "@/types";
-
-const LiteTextReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, ILiteTextReadOnlyEditorProps>((props, ref) => (
-  <ReadOnlyEditorWrapper {...props} forwardedRef={ref as React.MutableRefObject<EditorReadOnlyRefApi | null>} />
-));
-
-LiteTextReadOnlyEditorWithRef.displayName = "LiteReadOnlyEditorWithRef";
-
-export { LiteTextReadOnlyEditorWithRef };

packages/editor/src/core/components/editors/read-only-editor-wrapper.tsx

@@ -1,56 +0,0 @@
-// components
-import { EditorContainer, EditorContentWrapper } from "@/components/editors";
-// constants
-import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// helpers
-import { getEditorClassNames } from "@/helpers/common";
-// hooks
-import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
-// types
-import { IReadOnlyEditorProps } from "@/types";
-
-export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
-  const {
-    containerClassName,
-    disabledExtensions,
-    displayConfig = DEFAULT_DISPLAY_CONFIG,
-    editorClassName = "",
-    extensions,
-    fileHandler,
-    flaggedExtensions,
-    forwardedRef,
-    id,
-    initialValue,
-    mentionHandler,
-  } = props;
-
-  const editor = useReadOnlyEditor({
-    disabledExtensions,
-    editorClassName,
-    extensions,
-    fileHandler,
-    flaggedExtensions,
-    forwardedRef,
-    initialValue,
-    mentionHandler,
-  });
-
-  const editorContainerClassName = getEditorClassNames({
-    containerClassName,
-  });
-
-  if (!editor) return null;
-
-  return (
-    <EditorContainer
-      displayConfig={displayConfig}
-      editor={editor}
-      editorContainerClassName={editorContainerClassName}
-      id={id}
-    >
-      <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} id={id} />
-      </div>
-    </EditorContainer>
-  );
-};

packages/editor/src/core/components/editors/rich-text/editor.tsx

@@ -5,7 +5,7 @@ import { EditorBubbleMenu } from "@/components/menus";
 // extensions
 import { SideMenuExtension } from "@/extensions";
 // plane editor imports
-import { RichTextEditorAdditionalExtensions } from "@/plane-editor/extensions/rich-text/extensions";
+import { RichTextEditorAdditionalExtensions } from "@/plane-editor/extensions/rich-text-extensions";
 // types
 import { EditorRefApi, IRichTextEditorProps } from "@/types";
 

packages/editor/src/core/extensions/callout/extension.tsx

@@ -1,6 +1,6 @@
 import { findParentNodeClosestToPos, Predicate, ReactNodeViewRenderer } from "@tiptap/react";
 // extensions
-import { CustomCalloutBlock, CustomCalloutNodeViewProps } from "@/extensions/callout";
+import { CustomCalloutBlock, CustomCalloutNodeViewProps } from "@/extensions/callout/block";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // config

packages/editor/src/core/extensions/callout/index.ts

@@ -1,3 +1 @@
-export * from "./block";
 export * from "./extension";
-export * from "./read-only-extension";

packages/editor/src/core/extensions/callout/read-only-extension.tsx

@@ -1,16 +0,0 @@
-import { ReactNodeViewRenderer } from "@tiptap/react";
-// extensions
-import { CustomCalloutBlock, CustomCalloutNodeViewProps } from "@/extensions/callout";
-// config
-import { CustomCalloutExtensionConfig } from "./extension-config";
-
-export const CustomCalloutReadOnlyExtension = CustomCalloutExtensionConfig.extend({
-  selectable: false,
-  draggable: false,
-
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => (
-      <CustomCalloutBlock {...props} node={props.node as CustomCalloutNodeViewProps["node"]} />
-    ));
-  },
-});

packages/editor/src/core/extensions/custom-image/extension.tsx

@@ -6,14 +6,14 @@ import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
 import { isFileValid } from "@/helpers/file";
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // types
-import type { TFileHandler, TReadOnlyFileHandler } from "@/types";
+import type { TFileHandler } from "@/types";
 // local imports
 import { CustomImageNodeView, CustomImageNodeViewProps } from "./components/node-view";
 import { CustomImageExtensionConfig } from "./extension-config";
 import { getImageComponentImageFileMap } from "./utils";
 
 type Props = {
-  fileHandler: TFileHandler | TReadOnlyFileHandler;
+  fileHandler: TFileHandler;
   isEditable: boolean;
 };
 

packages/editor/src/core/extensions/image/extension.tsx

@@ -2,7 +2,7 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // types
-import type { TFileHandler, TReadOnlyFileHandler } from "@/types";
+import type { TFileHandler } from "@/types";
 // local imports
 import { CustomImageNodeView, CustomImageNodeViewProps } from "../custom-image/components/node-view";
 import { ImageExtensionConfig } from "./extension-config";
@@ -12,7 +12,7 @@ export type ImageExtensionStorage = {
 };
 
 type Props = {
-  fileHandler: TFileHandler | TReadOnlyFileHandler;
+  fileHandler: TFileHandler;
 };
 
 export const ImageExtension = (props: Props) => {

packages/editor/src/core/extensions/index.ts

@@ -17,7 +17,6 @@ export * from "./headings-list";
 export * from "./horizontal-rule";
 export * from "./keymap";
 export * from "./quote";
-export * from "./read-only-extensions";
 export * from "./side-menu";
 export * from "./text-align";
 export * from "./utility";

packages/editor/src/core/extensions/read-only-extensions.ts

@@ -1,102 +0,0 @@
-import { Extensions } from "@tiptap/core";
-import CharacterCount from "@tiptap/extension-character-count";
-import TaskItem from "@tiptap/extension-task-item";
-import TaskList from "@tiptap/extension-task-list";
-import TextStyle from "@tiptap/extension-text-style";
-import TiptapUnderline from "@tiptap/extension-underline";
-import { Markdown } from "tiptap-markdown";
-// extensions
-import {
-  CustomQuoteExtension,
-  CustomHorizontalRule,
-  CustomLinkExtension,
-  CustomTypographyExtension,
-  CustomCodeBlockExtension,
-  CustomCodeInlineExtension,
-  TableHeader,
-  TableCell,
-  TableRow,
-  Table,
-  CustomMentionExtension,
-  CustomTextAlignExtension,
-  CustomCalloutReadOnlyExtension,
-  CustomColorExtension,
-  UtilityExtension,
-  ImageExtension,
-} from "@/extensions";
-// plane editor extensions
-import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
-// types
-import type { IReadOnlyEditorProps } from "@/types";
-// local imports
-import { CustomImageExtension } from "./custom-image/extension";
-import { EmojiExtension } from "./emoji/extension";
-import { CustomStarterKitExtension } from "./starter-kit";
-
-type Props = Pick<IReadOnlyEditorProps, "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "mentionHandler">;
-
-export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
-  const { disabledExtensions, fileHandler, flaggedExtensions, mentionHandler } = props;
-
-  const extensions = [
-    CustomStarterKitExtension({
-      enableHistory: false,
-    }),
-    EmojiExtension,
-    CustomQuoteExtension,
-    CustomHorizontalRule,
-    CustomLinkExtension,
-    CustomTypographyExtension,
-    TiptapUnderline,
-    TextStyle,
-    TaskList.configure({
-      HTMLAttributes: {
-        class: "not-prose pl-2 space-y-2",
-      },
-    }),
-    TaskItem.configure({
-      HTMLAttributes: {
-        class: "relative pointer-events-none",
-      },
-      nested: true,
-    }),
-    CustomCodeBlockExtension,
-    CustomCodeInlineExtension,
-    Markdown.configure({
-      html: true,
-      transformCopiedText: false,
-    }),
-    Table,
-    TableHeader,
-    TableCell,
-    TableRow,
-    CustomMentionExtension(mentionHandler),
-    CharacterCount,
-    CustomColorExtension,
-    CustomTextAlignExtension,
-    CustomCalloutReadOnlyExtension,
-    UtilityExtension({
-      disabledExtensions,
-      fileHandler,
-      isEditable: false,
-    }),
-    ...CoreReadOnlyEditorAdditionalExtensions({
-      disabledExtensions,
-      flaggedExtensions,
-    }),
-  ];
-
-  if (!disabledExtensions.includes("image")) {
-    extensions.push(
-      ImageExtension({
-        fileHandler,
-      }),
-      CustomImageExtension({
-        fileHandler,
-        isEditable: false,
-      })
-    );
-  }
-
-  return extensions;
-};

packages/editor/src/core/extensions/utility.ts

@@ -10,7 +10,7 @@ import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
 // types
 
-import type { IEditorProps, TEditorAsset, TFileHandler, TReadOnlyFileHandler } from "@/types";
+import type { IEditorProps, TEditorAsset, TFileHandler } from "@/types";
 type TActiveDropbarExtensions = CORE_EXTENSIONS.MENTION | CORE_EXTENSIONS.EMOJI | TAdditionalActiveDropbarExtensions;
 
 declare module "@tiptap/core" {
@@ -38,7 +38,7 @@ export interface UtilityExtensionStorage {
 }
 
 type Props = Pick<IEditorProps, "disabledExtensions"> & {
-  fileHandler: TFileHandler | TReadOnlyFileHandler;
+  fileHandler: TFileHandler;
   isEditable: boolean;
 };
 

packages/editor/src/core/helpers/editor-ref.ts

@@ -1,22 +1,26 @@
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { Editor } from "@tiptap/core";
+import { DOMSerializer } from "@tiptap/pm/model";
 import * as Y from "yjs";
+// components
+import { getEditorMenuItems } from "@/components/menus";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 import { CORE_EDITOR_META } from "@/constants/meta";
 // types
-import { EditorReadOnlyRefApi } from "@/types";
+import type { EditorRefApi, TEditorCommands } from "@/types";
 // local imports
 import { getParagraphCount } from "./common";
 import { getExtensionStorage } from "./get-extension-storage";
-import { scrollSummary } from "./scroll-to-node";
+import { insertContentAtSavedSelection } from "./insert-content-at-cursor-position";
+import { scrollSummary, scrollToNodeViaDOMCoordinates } from "./scroll-to-node";
 
 type TArgs = {
   editor: Editor | null;
   provider: HocuspocusProvider | undefined;
 };
 
-export const getEditorRefHelpers = (args: TArgs): EditorReadOnlyRefApi => {
+export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
   const { editor, provider } = args;
 
   return {
@@ -51,5 +55,147 @@ export const getEditorRefHelpers = (args: TArgs): EditorReadOnlyRefApi => {
     setEditorValue: (content, emitUpdate = false) => {
       editor?.commands.setContent(content, emitUpdate, { preserveWhitespace: true });
     },
+    blur: () => editor?.commands.blur(),
+    emitRealTimeUpdate: (message) => provider?.sendStateless(message),
+    executeMenuItemCommand: (props) => {
+      const { itemKey } = props;
+      const editorItems = getEditorMenuItems(editor);
+
+      const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
+
+      const item = getEditorMenuItem(itemKey);
+      if (item) {
+        item.command(props);
+      } else {
+        console.warn(`No command found for item: ${itemKey}`);
+      }
+    },
+    getCurrentCursorPosition: () => editor?.state.selection.from,
+    getSelectedText: () => {
+      if (!editor) return null;
+
+      const { state } = editor;
+      const { from, to, empty } = state.selection;
+
+      if (empty) return null;
+
+      const nodesArray: string[] = [];
+      state.doc.nodesBetween(from, to, (node, _pos, parent) => {
+        if (parent === state.doc && editor) {
+          const serializer = DOMSerializer.fromSchema(editor.schema);
+          const dom = serializer.serializeNode(node);
+          const tempDiv = document.createElement("div");
+          tempDiv.appendChild(dom);
+          nodesArray.push(tempDiv.innerHTML);
+        }
+      });
+      const selection = nodesArray.join("");
+      return selection;
+    },
+    insertText: (contentHTML, insertOnNextLine) => {
+      if (!editor) return;
+      const { from, to, empty } = editor.state.selection;
+      if (empty) return;
+      if (insertOnNextLine) {
+        // move cursor to the end of the selection and insert a new line
+        editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
+      } else {
+        // replace selected text with the content provided
+        editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+      }
+    },
+    isEditorReadyToDiscard: () =>
+      !!editor && getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY)?.uploadInProgress === false,
+    isMenuItemActive: (props) => {
+      const { itemKey } = props;
+      const editorItems = getEditorMenuItems(editor);
+
+      const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
+      const item = getEditorMenuItem(itemKey);
+      if (!item) return false;
+
+      return item.isActive(props);
+    },
+    listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
+    onDocumentInfoChange: (callback) => {
+      const handleDocumentInfoChange = () => {
+        if (!editor) return;
+        callback({
+          characters: editor ? getExtensionStorage(editor, CORE_EXTENSIONS.CHARACTER_COUNT)?.characters?.() : 0,
+          paragraphs: getParagraphCount(editor?.state),
+          words: editor ? getExtensionStorage(editor, CORE_EXTENSIONS.CHARACTER_COUNT)?.words?.() : 0,
+        });
+      };
+
+      // Subscribe to update event emitted from character count extension
+      editor?.on("update", handleDocumentInfoChange);
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editor?.off("update", handleDocumentInfoChange);
+      };
+    },
+    onHeadingChange: (callback) => {
+      const handleHeadingChange = () => {
+        if (!editor) return;
+        const headings = getExtensionStorage(editor, CORE_EXTENSIONS.HEADINGS_LIST)?.headings;
+        if (headings) {
+          callback(headings);
+        }
+      };
+
+      // Subscribe to update event emitted from headers extension
+      editor?.on("update", handleHeadingChange);
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editor?.off("update", handleHeadingChange);
+      };
+    },
+    onStateChange: (callback) => {
+      // Subscribe to editor state changes
+      editor?.on("transaction", callback);
+
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editor?.off("transaction", callback);
+      };
+    },
+    scrollToNodeViaDOMCoordinates(behavior, pos) {
+      const resolvedPos = pos ?? editor?.state.selection.from;
+      if (!editor || !resolvedPos) return;
+      scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
+    },
+    setEditorValueAtCursorPosition: (content) => {
+      if (editor?.state.selection) {
+        insertContentAtSavedSelection(editor, content);
+      }
+    },
+    setFocusAtPosition: (position) => {
+      if (!editor || editor.isDestroyed) {
+        console.error("Editor reference is not available or has been destroyed.");
+        return;
+      }
+      try {
+        const docSize = editor.state.doc.content.size;
+        const safePosition = Math.max(0, Math.min(position, docSize));
+        editor
+          .chain()
+          .insertContentAt(safePosition, [{ type: CORE_EXTENSIONS.PARAGRAPH }])
+          .focus()
+          .run();
+      } catch (error) {
+        console.error("An error occurred while setting focus at position:", error);
+      }
+    },
+    setProviderDocument: (value) => {
+      const document = provider?.document;
+      if (!document) return;
+      Y.applyUpdate(document, value);
+    },
   };
 };

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

@@ -1,23 +1,16 @@
-import { DOMSerializer } from "@tiptap/pm/model";
 import { useEditorState, useEditor as useTiptapEditor } from "@tiptap/react";
 import { useImperativeHandle, useEffect } from "react";
-import * as Y from "yjs";
-// components
-import { getEditorMenuItems } from "@/components/menus";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { CoreEditorExtensions } from "@/extensions";
 // helpers
-import { getParagraphCount } from "@/helpers/common";
 import { getEditorRefHelpers } from "@/helpers/editor-ref";
 import { getExtensionStorage } from "@/helpers/get-extension-storage";
-import { insertContentAtSavedSelection } from "@/helpers/insert-content-at-cursor-position";
-import { scrollToNodeViaDOMCoordinates } from "@/helpers/scroll-to-node";
 // props
 import { CoreEditorProps } from "@/props";
 // types
-import type { TEditorCommands, TEditorHookProps } from "@/types";
+import type { TEditorHookProps } from "@/types";
 
 export const useEditor = (props: TEditorHookProps) => {
   const {
@@ -124,155 +117,7 @@ export const useEditor = (props: TEditorHookProps) => {
     onAssetChange(assets);
   }, [assetsList?.assets, onAssetChange]);
 
-  useImperativeHandle(
-    forwardedRef,
-    () => ({
-      ...getEditorRefHelpers({ editor, provider }),
-      blur: () => editor?.commands.blur(),
-      emitRealTimeUpdate: (message) => provider?.sendStateless(message),
-      executeMenuItemCommand: (props) => {
-        const { itemKey } = props;
-        const editorItems = getEditorMenuItems(editor);
-
-        const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
-
-        const item = getEditorMenuItem(itemKey);
-        if (item) {
-          item.command(props);
-        } else {
-          console.warn(`No command found for item: ${itemKey}`);
-        }
-      },
-      getCurrentCursorPosition: () => editor?.state.selection.from,
-      getSelectedText: () => {
-        if (!editor) return null;
-
-        const { state } = editor;
-        const { from, to, empty } = state.selection;
-
-        if (empty) return null;
-
-        const nodesArray: string[] = [];
-        state.doc.nodesBetween(from, to, (node, _pos, parent) => {
-          if (parent === state.doc && editor) {
-            const serializer = DOMSerializer.fromSchema(editor.schema);
-            const dom = serializer.serializeNode(node);
-            const tempDiv = document.createElement("div");
-            tempDiv.appendChild(dom);
-            nodesArray.push(tempDiv.innerHTML);
-          }
-        });
-        const selection = nodesArray.join("");
-        return selection;
-      },
-      insertText: (contentHTML, insertOnNextLine) => {
-        if (!editor) return;
-        const { from, to, empty } = editor.state.selection;
-        if (empty) return;
-        if (insertOnNextLine) {
-          // move cursor to the end of the selection and insert a new line
-          editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
-        } else {
-          // replace selected text with the content provided
-          editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
-        }
-      },
-      isEditorReadyToDiscard: () =>
-        !!editor && getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY)?.uploadInProgress === false,
-      isMenuItemActive: (props) => {
-        const { itemKey } = props;
-        const editorItems = getEditorMenuItems(editor);
-
-        const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
-        const item = getEditorMenuItem(itemKey);
-        if (!item) return false;
-
-        return item.isActive(props);
-      },
-      listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
-      onDocumentInfoChange: (callback) => {
-        const handleDocumentInfoChange = () => {
-          if (!editor) return;
-          callback({
-            characters: editor ? getExtensionStorage(editor, CORE_EXTENSIONS.CHARACTER_COUNT)?.characters?.() : 0,
-            paragraphs: getParagraphCount(editor?.state),
-            words: editor ? getExtensionStorage(editor, CORE_EXTENSIONS.CHARACTER_COUNT)?.words?.() : 0,
-          });
-        };
-
-        // Subscribe to update event emitted from character count extension
-        editor?.on("update", handleDocumentInfoChange);
-        // Return a function to unsubscribe to the continuous transactions of
-        // the editor on unmounting the component that has subscribed to this
-        // method
-        return () => {
-          editor?.off("update", handleDocumentInfoChange);
-        };
-      },
-      onHeadingChange: (callback) => {
-        const handleHeadingChange = () => {
-          if (!editor) return;
-          const headings = getExtensionStorage(editor, CORE_EXTENSIONS.HEADINGS_LIST)?.headings;
-          if (headings) {
-            callback(headings);
-          }
-        };
-
-        // Subscribe to update event emitted from headers extension
-        editor?.on("update", handleHeadingChange);
-        // Return a function to unsubscribe to the continuous transactions of
-        // the editor on unmounting the component that has subscribed to this
-        // method
-        return () => {
-          editor?.off("update", handleHeadingChange);
-        };
-      },
-      onStateChange: (callback) => {
-        // Subscribe to editor state changes
-        editor?.on("transaction", callback);
-
-        // Return a function to unsubscribe to the continuous transactions of
-        // the editor on unmounting the component that has subscribed to this
-        // method
-        return () => {
-          editor?.off("transaction", callback);
-        };
-      },
-      scrollToNodeViaDOMCoordinates(behavior, pos) {
-        const resolvedPos = pos ?? editor?.state.selection.from;
-        if (!editor || !resolvedPos) return;
-        scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
-      },
-      setEditorValueAtCursorPosition: (content) => {
-        if (editor?.state.selection) {
-          insertContentAtSavedSelection(editor, content);
-        }
-      },
-      setFocusAtPosition: (position) => {
-        if (!editor || editor.isDestroyed) {
-          console.error("Editor reference is not available or has been destroyed.");
-          return;
-        }
-        try {
-          const docSize = editor.state.doc.content.size;
-          const safePosition = Math.max(0, Math.min(position, docSize));
-          editor
-            .chain()
-            .insertContentAt(safePosition, [{ type: CORE_EXTENSIONS.PARAGRAPH }])
-            .focus()
-            .run();
-        } catch (error) {
-          console.error("An error occurred while setting focus at position:", error);
-        }
-      },
-      setProviderDocument: (value) => {
-        const document = provider?.document;
-        if (!document) return;
-        Y.applyUpdate(document, value);
-      },
-    }),
-    [editor, provider]
-  );
+  useImperativeHandle(forwardedRef, () => getEditorRefHelpers({ editor, provider }), [editor, provider]);
 
   if (!editor) {
     return null;

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

@@ -1,69 +0,0 @@
-import { useEditor as useTiptapEditor } from "@tiptap/react";
-import { useImperativeHandle, useEffect } from "react";
-// extensions
-import { CoreReadOnlyEditorExtensions } from "@/extensions";
-// helpers
-import { getEditorRefHelpers } from "@/helpers/editor-ref";
-// props
-import { CoreReadOnlyEditorProps } from "@/props";
-// types
-import type { TReadOnlyEditorHookProps } from "@/types";
-
-export const useReadOnlyEditor = (props: TReadOnlyEditorHookProps) => {
-  const {
-    disabledExtensions,
-    editorClassName = "",
-    editorProps = {},
-    extensions = [],
-    fileHandler,
-    flaggedExtensions,
-    forwardedRef,
-    handleEditorReady,
-    initialValue,
-    mentionHandler,
-    provider,
-  } = props;
-
-  const editor = useTiptapEditor({
-    editable: false,
-    immediatelyRender: false,
-    shouldRerenderOnTransaction: false,
-    content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
-    parseOptions: { preserveWhitespace: true },
-    editorProps: {
-      ...CoreReadOnlyEditorProps({
-        editorClassName,
-      }),
-      ...editorProps,
-    },
-    onCreate: async () => {
-      handleEditorReady?.(true);
-    },
-    extensions: [
-      ...CoreReadOnlyEditorExtensions({
-        disabledExtensions,
-        fileHandler,
-        flaggedExtensions,
-        mentionHandler,
-      }),
-      ...extensions,
-    ],
-    onDestroy: () => {
-      handleEditorReady?.(false);
-    },
-  });
-
-  // for syncing swr data on tab refocus etc
-  useEffect(() => {
-    if (initialValue === null || initialValue === undefined) return;
-    if (editor && !editor.isDestroyed) editor?.commands.setContent(initialValue, false, { preserveWhitespace: true });
-  }, [editor, initialValue]);
-
-  useImperativeHandle(forwardedRef, () => getEditorRefHelpers({ editor, provider }));
-
-  if (!editor) {
-    return null;
-  }
-
-  return editor;
-};

packages/editor/src/core/plugins/file/root.ts

@@ -1,14 +1,14 @@
 import { Editor } from "@tiptap/core";
 import { Plugin } from "@tiptap/pm/state";
 // types
-import { TFileHandler, TReadOnlyFileHandler } from "@/types";
+import { TFileHandler } from "@/types";
 // local imports
 import { TrackFileDeletionPlugin } from "./delete";
 import { TrackFileRestorationPlugin } from "./restore";
 
 type TArgs = {
   editor: Editor;
-  fileHandler: TFileHandler | TReadOnlyFileHandler;
+  fileHandler: TFileHandler;
   isEditable: boolean;
 };
 

packages/editor/src/core/props.ts

@@ -2,11 +2,11 @@ import { EditorProps } from "@tiptap/pm/view";
 // plane utils
 import { cn } from "@plane/utils";
 
-export type TCoreEditorProps = {
+type TArgs = {
   editorClassName: string;
 };
 
-export const CoreEditorProps = (props: TCoreEditorProps): EditorProps => {
+export const CoreEditorProps = (props: TArgs): EditorProps => {
   const { editorClassName } = props;
 
   return {

packages/editor/src/core/props/index.ts

@@ -1,2 +0,0 @@
-export * from "./props";
-export * from "./read-only";

packages/editor/src/core/props/read-only.tsx

@@ -1,18 +0,0 @@
-import { EditorProps } from "@tiptap/pm/view";
-// plane utils
-import { cn } from "@plane/utils";
-// props
-import { TCoreEditorProps } from "@/props";
-
-export const CoreReadOnlyEditorProps = (props: TCoreEditorProps): EditorProps => {
-  const { editorClassName } = props;
-
-  return {
-    attributes: {
-      class: cn(
-        "prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none",
-        editorClassName
-      ),
-    },
-  };
-};

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

@@ -1,17 +1,14 @@
 // plane imports
 import { TWebhookConnectionQueryParams } from "@plane/types";
 
-export type TReadOnlyFileHandler = {
+export type TFileHandler = {
+  assetsUploadStatus: Record<string, number>; // blockId => progress percentage
+  cancel: () => void;
   checkIfAssetExists: (assetId: string) => Promise<boolean>;
+  delete: (assetSrc: string) => Promise<void>;
   getAssetDownloadSrc: (path: string) => Promise<string>;
   getAssetSrc: (path: string) => Promise<string>;
   restore: (assetSrc: string) => Promise<void>;
-};
-
-export type TFileHandler = TReadOnlyFileHandler & {
-  assetsUploadStatus: Record<string, number>; // blockId => progress percentage
-  cancel: () => void;
-  delete: (assetSrc: string) => Promise<void>;
   upload: (blockId: string, file: File) => Promise<string>;
   validation: {
     /**

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

@@ -15,8 +15,6 @@ import type {
   TExtensions,
   TFileHandler,
   TMentionHandler,
-  TReadOnlyFileHandler,
-  TReadOnlyMentionHandler,
   TRealtimeConfig,
   TServerHandler,
   TUserDetails,
@@ -83,9 +81,12 @@ export type TDocumentInfo = {
   words: number;
 };
 
-// editor refs
-export type EditorReadOnlyRefApi = {
+export type EditorRefApi = {
+  blur: () => void;
   clearEditor: (emitUpdate?: boolean) => void;
+  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
+  executeMenuItemCommand: <T extends TEditorCommands>(props: TCommandWithPropsWithItemKey<T>) => void;
+  getCurrentCursorPosition: () => number | undefined;
   getDocument: () => {
     binary: Uint8Array | null;
     html: string;
@@ -94,15 +95,6 @@ export type EditorReadOnlyRefApi = {
   getDocumentInfo: () => TDocumentInfo;
   getHeadings: () => IMarking[];
   getMarkDown: () => string;
-  scrollSummary: (marking: IMarking) => void;
-  setEditorValue: (content: string, emitUpdate?: boolean) => void;
-};
-
-export interface EditorRefApi extends EditorReadOnlyRefApi {
-  blur: () => void;
-  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
-  executeMenuItemCommand: <T extends TEditorCommands>(props: TCommandWithPropsWithItemKey<T>) => void;
-  getCurrentCursorPosition: () => number | undefined;
   getSelectedText: () => string | null;
   insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
   isEditorReadyToDiscard: () => boolean;
@@ -111,12 +103,14 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
   onDocumentInfoChange: (callback: (documentInfo: TDocumentInfo) => void) => () => void;
   onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
   onStateChange: (callback: () => void) => () => void;
+  scrollSummary: (marking: IMarking) => void;
   // eslint-disable-next-line no-undef
   scrollToNodeViaDOMCoordinates: (behavior?: ScrollBehavior, position?: number) => void;
+  setEditorValue: (content: string, emitUpdate?: boolean) => void;
   setEditorValueAtCursorPosition: (content: string) => void;
   setFocusAtPosition: (position: number) => void;
   setProviderDocument: (value: Uint8Array) => void;
-}
+};
 
 // editor props
 export interface IEditorProps {
@@ -125,6 +119,7 @@ export interface IEditorProps {
   containerClassName?: string;
   displayConfig?: TDisplayConfig;
   disabledExtensions: TExtensions[];
+  editable: boolean;
   editorClassName?: string;
   extensions?: Extensions;
   flaggedExtensions: TExtensions[];
@@ -147,13 +142,11 @@ export type ILiteTextEditorProps = IEditorProps;
 
 export type IRichTextEditorProps = IEditorProps & {
   dragDropEnabled?: boolean;
-  editable: boolean;
 };
 
 export interface ICollaborativeDocumentEditorProps
   extends Omit<IEditorProps, "extensions" | "initialValue" | "onEnterKeyPress" | "value"> {
   aiHandler?: TAIHandler;
-  editable: boolean;
   embedHandler: TEmbedConfig;
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
@@ -162,33 +155,11 @@ export interface ICollaborativeDocumentEditorProps
 
 export interface IDocumentEditorProps extends Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> {
   aiHandler?: TAIHandler;
-  editable: boolean;
   embedHandler: TEmbedConfig;
   user?: TUserDetails;
   value: Content;
 }
 
-// read only editor props
-export interface IReadOnlyEditorProps
-  extends Pick<
-    IEditorProps,
-    | "containerClassName"
-    | "disabledExtensions"
-    | "flaggedExtensions"
-    | "displayConfig"
-    | "editorClassName"
-    | "extensions"
-    | "handleEditorReady"
-    | "id"
-    | "initialValue"
-  > {
-  fileHandler: TReadOnlyFileHandler;
-  forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
-  mentionHandler: TReadOnlyMentionHandler;
-}
-
-export type ILiteTextReadOnlyEditorProps = IReadOnlyEditorProps;
-
 export interface EditorEvents {
   beforeCreate: never;
   create: never;

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

@@ -2,7 +2,7 @@ import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Content } from "@tiptap/core";
 import type { EditorProps } from "@tiptap/pm/view";
 // local imports
-import type { ICollaborativeDocumentEditorProps, IEditorProps, IReadOnlyEditorProps } from "./editor";
+import type { ICollaborativeDocumentEditorProps, IEditorProps } from "./editor";
 
 type TCoreHookProps = Pick<
   IEditorProps,
@@ -47,7 +47,3 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "tabIndex"
   > &
   Pick<ICollaborativeDocumentEditorProps, "embedHandler" | "realtimeConfig" | "serverHandler" | "user">;
-
-export type TReadOnlyEditorHookProps = TCoreHookProps &
-  Pick<TEditorHookProps, "initialValue" | "provider"> &
-  Pick<IReadOnlyEditorProps, "fileHandler" | "forwardedRef" | "mentionHandler">;

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

@@ -18,11 +18,8 @@ export type TMentionSection = {
 
 export type TMentionComponentProps = Pick<TMentionSuggestion, "entity_identifier" | "entity_name">;
 
-export type TReadOnlyMentionHandler = {
-  renderComponent: (props: TMentionComponentProps) => React.ReactNode;
+export type TMentionHandler = {
   getMentionedEntityDetails?: (entity_identifier: string) => { display_name: string } | undefined;
-};
-
-export type TMentionHandler = TReadOnlyMentionHandler & {
+  renderComponent: (props: TMentionComponentProps) => React.ReactNode;
   searchCallback?: (query: string) => Promise<TMentionSection[]>;
 };

packages/editor/src/index.ts

@@ -11,7 +11,6 @@ export {
   CollaborativeDocumentEditorWithRef,
   DocumentEditorWithRef,
   LiteTextEditorWithRef,
-  LiteTextReadOnlyEditorWithRef,
   RichTextEditorWithRef,
 } from "@/components/editors";