[WIKI-466] refactor: remove rich text read only editor

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/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={

apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx

@@ -4,7 +4,7 @@ import { CircleArrowUp, CornerDownRight, RefreshCcw, Sparkles } from "lucide-rea
 import { Tooltip } from "@plane/ui";
 // components
 import { cn } from "@plane/utils";
-import { RichTextReadOnlyEditor } from "@/components/editor";
+import { RichTextEditor } from "@/components/editor";
 // helpers
 // hooks
 import { useWorkspace } from "@/hooks/store";
@@ -38,7 +38,8 @@ export const AskPiMenu: React.FC<Props> = (props) => {
         </span>
         {response ? (
           <div>
-            <RichTextReadOnlyEditor
+            <RichTextEditor
+              editable={false}
               displayConfig={{
                 fontSize: "small-font",
               }}

apps/web/ce/components/pages/editor/ai/menu.tsx

@@ -8,7 +8,7 @@ import { EditorRefApi } from "@plane/editor";
 import { Tooltip } from "@plane/ui";
 // components
 import { cn } from "@plane/utils";
-import { RichTextReadOnlyEditor } from "@/components/editor";
+import { RichTextEditor } from "@/components/editor";
 // helpers
 // plane web constants
 import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/plane-web/constants/ai";
@@ -208,10 +208,11 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                 </span>
                 {response ? (
                   <div>
-                    <RichTextReadOnlyEditor
+                    <RichTextEditor
                       displayConfig={{
                         fontSize: "small-font",
                       }}
+                      editable={false}
                       id="editor-ai-response"
                       initialValue={response}
                       containerClassName="!p-0 border-none"

apps/web/core/components/core/description-versions/modal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { ChevronLeft, ChevronRight, Copy } from "lucide-react";
 // plane imports
-import { EditorReadOnlyRefApi } from "@plane/editor";
+import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import { TDescriptionVersion } from "@plane/types";
 import {
@@ -19,7 +19,7 @@ import {
 } from "@plane/ui";
 import { calculateTimeAgo, cn, copyTextToClipboard, getFileURL } from "@plane/utils";
 // components
-import { RichTextReadOnlyEditor } from "@/components/editor";
+import { RichTextEditor } from "@/components/editor";
 // hooks
 import { useMember, useWorkspace } from "@/hooks/store";
 
@@ -52,7 +52,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
     workspaceSlug,
   } = props;
   // refs
-  const editorRef = useRef<EditorReadOnlyRefApi>(null);
+  const editorRef = useRef<EditorRefApi>(null);
   // store hooks
   const { getUserDetails } = useMember();
   const { getWorkspaceBySlug } = useWorkspace();
@@ -131,7 +131,8 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
         {/* Version description */}
         <div className="mt-4 pb-4">
           {activeVersionDescription ? (
-            <RichTextReadOnlyEditor
+            <RichTextEditor
+              editable={false}
               containerClassName="p-0 !pl-0 border-none"
               editorClassName="pl-0"
               id={activeVersionId ?? ""}

apps/web/core/components/core/modals/gpt-assistant-popover.tsx

@@ -6,12 +6,11 @@ import { Controller, useForm } from "react-hook-form"; // services
 import { usePopper } from "react-popper";
 import { AlertCircle } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
-// plane editor
-import { EditorReadOnlyRefApi } from "@plane/editor";
-// ui
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { RichTextReadOnlyEditor } from "@/components/editor/rich-text-editor/rich-text-read-only-editor";
+import { RichTextEditor } from "@/components/editor";
 // services
 import { AIService } from "@/services/ai.service";
 const aiService = new AIService();
@@ -55,8 +54,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // refs
-  const editorRef = useRef<EditorReadOnlyRefApi>(null);
-  const responseRef = useRef<any>(null);
+  const editorRef = useRef<EditorRefApi>(null);
+  const responseRef = useRef<EditorRefApi>(null);
   // popper
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "auto",
@@ -217,7 +216,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
             {prompt && (
               <div className="text-sm">
                 Content:
-                <RichTextReadOnlyEditor
+                <RichTextEditor
+                  editable={false}
                   id="ai-assistant-content"
                   initialValue={prompt}
                   containerClassName="-m-3"
@@ -231,7 +231,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
             {response !== "" && (
               <div className="page-block-section max-h-[8rem] text-sm">
                 Response:
-                <RichTextReadOnlyEditor
+                <RichTextEditor
+                  editable={false}
                   id="ai-assistant-response"
                   initialValue={`<p>${response}</p>`}
                   ref={responseRef}

apps/web/core/components/editor/rich-text-editor/index.ts

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

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

@@ -13,26 +13,31 @@ import { useMember } from "@/hooks/store";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
-interface RichTextEditorWrapperProps
-  extends MakeOptional<
-    Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler">,
-    "disabledExtensions" | "flaggedExtensions"
-  > {
-  searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+type RichTextEditorWrapperProps = MakeOptional<
+  Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler">,
+  "disabledExtensions" | "editable" | "flaggedExtensions"
+> & {
   workspaceSlug: string;
   workspaceId: string;
   projectId?: string;
-  uploadFile: TFileHandler["upload"];
-}
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
   const {
     containerClassName,
+    editable,
     workspaceSlug,
     workspaceId,
     projectId,
-    searchMentionCallback,
-    uploadFile,
     disabledExtensions: additionalDisabledExtensions,
     ...rest
   } = props;
@@ -42,7 +47,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
   const { richText: richTextEditorExtensions } = useEditorFlagging(workspaceSlug?.toString());
   // use editor mention
   const { fetchMentions } = useEditorMention({
-    searchEntity: async (payload) => await searchMentionCallback(payload),
+    searchEntity: editable ? async (payload) => await props.searchMentionCallback(payload) : async () => ({}),
   });
   // editor config
   const { getEditorFileHandlers } = useEditorConfig();
@@ -51,10 +56,11 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
     <RichTextEditorWithRef
       ref={ref}
       disabledExtensions={[...richTextEditorExtensions.disabled, ...(additionalDisabledExtensions ?? [])]}
+      editable={editable}
       flaggedExtensions={richTextEditorExtensions.flagged}
       fileHandler={getEditorFileHandlers({
         projectId,
-        uploadFile,
+        uploadFile: editable ? props.uploadFile : async () => "",
         workspaceId,
         workspaceSlug,
       })}

apps/web/core/components/inbox/modals/create-modal/issue-description.tsx

@@ -62,6 +62,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
 
   return (
     <RichTextEditor
+      editable
       id="inbox-modal-editor"
       initialValue={!data?.description_html || data?.description_html === "" ? "<p></p>" : data?.description_html}
       ref={editorRef}