[WIKI-466] refactor: remove rich text read only editor (#7241)

* refactor: remove rich text read only editor

* fix: type imports

apps/space/core/components/editor/index.ts

@@ -1,5 +1,5 @@
 export * from "./embeds";
 export * from "./lite-text-editor";
 export * from "./lite-text-read-only-editor";
-export * from "./rich-text-read-only-editor";
+export * from "./rich-text-editor";
 export * from "./toolbar";

apps/space/core/components/editor/rich-text-editor.tsx

@@ -9,18 +9,24 @@ import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // store hooks
 import { useMember } from "@/hooks/store";
 
-interface RichTextEditorWrapperProps
-  extends MakeOptional<
-    Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler">,
-    "disabledExtensions" | "flaggedExtensions"
-  > {
+type RichTextEditorWrapperProps = MakeOptional<
+  Omit<IRichTextEditorProps, "editable" | "fileHandler" | "mentionHandler">,
+  "disabledExtensions" | "flaggedExtensions"
+> & {
   anchor: string;
-  uploadFile: TFileHandler["upload"];
   workspaceId: string;
-}
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
-  const { anchor, containerClassName, uploadFile, workspaceId, disabledExtensions, flaggedExtensions, ...rest } = props;
+  const { anchor, containerClassName, editable, workspaceId, disabledExtensions, flaggedExtensions, ...rest } = props;
   const { getMemberById } = useMember();
   return (
     <RichTextEditorWithRef
@@ -32,9 +38,10 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
       }}
       ref={ref}
       disabledExtensions={disabledExtensions ?? []}
+      editable={editable}
       fileHandler={getEditorFileHandlers({
         anchor,
-        uploadFile,
+        uploadFile: editable ? props.uploadFile : async () => "",
         workspaceId,
       })}
       flaggedExtensions={flaggedExtensions ?? []}

apps/space/core/components/editor/rich-text-read-only-editor.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-// plane imports
-import { EditorReadOnlyRefApi, IRichTextReadOnlyEditorProps, RichTextReadOnlyEditorWithRef } from "@plane/editor";
-import { MakeOptional } from "@plane/types";
-import { cn } from "@plane/utils";
-// components
-import { EditorMentionsRoot } from "@/components/editor";
-// helpers
-import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
-// store hooks
-import { useMember } from "@/hooks/store";
-
-type RichTextReadOnlyEditorWrapperProps = MakeOptional<
-  Omit<IRichTextReadOnlyEditorProps, "fileHandler" | "mentionHandler">,
-  "disabledExtensions" | "flaggedExtensions"
-> & {
-  anchor: string;
-  workspaceId: string;
-};
-
-export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
-  ({ anchor, workspaceId, disabledExtensions, flaggedExtensions, ...props }, ref) => {
-    const { getMemberById } = useMember();
-
-    return (
-      <RichTextReadOnlyEditorWithRef
-        ref={ref}
-        disabledExtensions={disabledExtensions ?? []}
-        flaggedExtensions={flaggedExtensions ?? []}
-        fileHandler={getReadOnlyEditorFileHandlers({
-          anchor,
-          workspaceId,
-        })}
-        mentionHandler={{
-          renderComponent: (props) => <EditorMentionsRoot {...props} />,
-          getMentionedEntityDetails: (id: string) => ({
-            display_name: getMemberById(id)?.member__display_name ?? "",
-          }),
-        }}
-        {...props}
-        // overriding the customClassName to add relative class passed
-        containerClassName={cn("relative p-0 border-none", props.containerClassName)}
-      />
-    );
-  }
-);
-
-RichTextReadOnlyEditor.displayName = "RichTextReadOnlyEditor";

apps/space/core/components/issues/peek-overview/issue-details.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 // components
-import { RichTextReadOnlyEditor } from "@/components/editor";
+import { RichTextEditor } from "@/components/editor";
 import { IssueReactions } from "@/components/issues/peek-overview";
 import { usePublish } from "@/hooks/store";
 // types
@@ -25,7 +25,8 @@ export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
       </h6>
       <h4 className="break-words text-2xl font-medium">{issueDetails.name}</h4>
       {description !== "" && description !== "<p></p>" && (
-        <RichTextReadOnlyEditor
+        <RichTextEditor
+          editable={false}
           anchor={anchor}
           id={issueDetails.id}
           initialValue={