[WIKI-539] refactor: remove lite text read only editor

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

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

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

@@ -1,36 +1,42 @@
 import React from "react";
 // plane imports
-import { EditorRefApi, ILiteTextEditorProps, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
-import { MakeOptional } from "@plane/types";
+import { type EditorRefApi, type ILiteTextEditorProps, LiteTextEditorWithRef, type TFileHandler } from "@plane/editor";
+import type { MakeOptional } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
 import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { isCommentEmpty } from "@/helpers/string.helper";
 
-interface LiteTextEditorWrapperProps
-  extends MakeOptional<
-    Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
-    "disabledExtensions" | "flaggedExtensions"
-  > {
+type LiteTextEditorWrapperProps = MakeOptional<
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
+  "disabledExtensions" | "flaggedExtensions"
+> & {
   anchor: string;
-  workspaceId: string;
   isSubmitting?: boolean;
   showSubmitButton?: boolean;
-  uploadFile: TFileHandler["upload"];
-}
+  workspaceId: string;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
   const {
     anchor,
     containerClassName,
-    workspaceId,
-    isSubmitting = false,
-    showSubmitButton = true,
-    uploadFile,
     disabledExtensions,
+    editable,
     flaggedExtensions,
+    isSubmitting = false,
+    showSubmitButton = true,
+    workspaceId,
     ...rest
   } = props;
   function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
@@ -46,9 +52,10 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
         ref={ref}
         disabledExtensions={disabledExtensions ?? []}
         flaggedExtensions={flaggedExtensions ?? []}
+        editable={editable}
         fileHandler={getEditorFileHandlers({
           anchor,
-          uploadFile,
+          uploadFile: editable ? props.uploadFile : async () => "",
           workspaceId,
         })}
         mentionHandler={{

apps/space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -75,6 +75,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
           control={control}
           render={({ field: { value, onChange } }) => (
             <LiteTextEditor
+              editable
               onEnterKeyPress={(e) => {
                 if (currentUser) handleSubmit(onSubmit)(e);
               }}

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -8,7 +8,7 @@ import { EditorRefApi } from "@plane/editor";
 import { TIssuePublicComment } from "@plane/types";
 import { getFileURL } from "@plane/utils";
 // components
-import { LiteTextEditor, LiteTextReadOnlyEditor } from "@/components/editor";
+import { LiteTextEditor } from "@/components/editor";
 import { CommentReactions } from "@/components/issues/peek-overview";
 // helpers
 import { timeAgo } from "@/helpers/date-time.helper";
@@ -102,6 +102,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
                   <LiteTextEditor
+                    editable
                     anchor={anchor}
                     workspaceId={workspaceID?.toString() ?? ""}
                     onEnterKeyPress={handleSubmit(handleCommentUpdate)}
@@ -138,7 +139,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <LiteTextReadOnlyEditor
+            <LiteTextEditor
+              editable={false}
               anchor={anchor}
               workspaceId={workspaceID?.toString() ?? ""}
               ref={showEditorRef}

apps/web/core/components/comments/card/display.tsx

@@ -3,12 +3,12 @@ import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Globe2, Lock } from "lucide-react";
 // plane imports
-import type { EditorReadOnlyRefApi } from "@plane/editor";
+import type { EditorRefApi } from "@plane/editor";
 import { useHashScroll } from "@plane/hooks";
 import { EIssueCommentAccessSpecifier, type TCommentsOperations, type TIssueComment } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
-import { LiteTextReadOnlyEditor } from "@/components/editor";
+import { LiteTextEditor } from "@/components/editor/lite-text";
 // local imports
 import { CommentReactions } from "../comment-reaction";
 
@@ -17,7 +17,7 @@ type Props = {
   comment: TIssueComment;
   disabled: boolean;
   projectId?: string;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  readOnlyEditorRef: React.RefObject<EditorRefApi>;
   showAccessSpecifier: boolean;
   workspaceId: string;
   workspaceSlug: string;
@@ -67,7 +67,8 @@ export const CommentCardDisplay: React.FC<Props> = observer((props) => {
           )}
         </div>
       )}
-      <LiteTextReadOnlyEditor
+      <LiteTextEditor
+        editable={false}
         ref={readOnlyEditorRef}
         id={comment.id}
         initialValue={comment.comment_html ?? ""}

apps/web/core/components/comments/card/edit-form.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 import { Check, X } from "lucide-react";
 // plane imports
-import type { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import type { EditorRefApi } from "@plane/editor";
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
 import { isCommentEmpty } from "@plane/utils";
 // components
@@ -14,7 +14,7 @@ type Props = {
   comment: TIssueComment;
   isEditing: boolean;
   projectId?: string;
-  readOnlyEditorRef: EditorReadOnlyRefApi | null;
+  readOnlyEditorRef: EditorRefApi | null;
   setIsEditing: (isEditing: boolean) => void;
   workspaceId: string;
   workspaceSlug: string;
@@ -75,6 +75,7 @@ export const CommentCardEditForm: React.FC<Props> = observer((props) => {
         }}
       >
         <LiteTextEditor
+          editable
           workspaceId={workspaceId}
           workspaceSlug={workspaceSlug}
           ref={editorRef}

apps/web/core/components/comments/card/root.tsx

@@ -3,7 +3,7 @@
 import { FC, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { EditorReadOnlyRefApi } from "@plane/editor";
+import type { EditorRefApi } from "@plane/editor";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 // plane web imports
 import { CommentBlock } from "@/plane-web/components/comments";
@@ -34,9 +34,10 @@ export const CommentCard: FC<TCommentCard> = observer((props) => {
     disabled = false,
     projectId,
   } = props;
-  const readOnlyEditorRef = useRef<EditorReadOnlyRefApi>(null);
   // states
   const [isEditing, setIsEditing] = useState(false);
+  // refs
+  const readOnlyEditorRef = useRef<EditorRefApi>(null);
   // derived values
   const workspaceId = comment?.workspace;
 

apps/web/core/components/comments/comment-create.tsx

@@ -113,6 +113,7 @@ export const CommentCreate: FC<TCommentCreate> = observer((props) => {
             control={control}
             render={({ field: { value, onChange } }) => (
               <LiteTextEditor
+                editable
                 workspaceId={workspaceId}
                 id={"add_comment_" + entityId}
                 value={"<p></p>"}

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

@@ -1,30 +1,25 @@
 import React, { useState } from "react";
-// plane constants
+// plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
-// plane editor
-import { EditorRefApi, ILiteTextEditorProps, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
-// i18n
+import { type EditorRefApi, type ILiteTextEditorProps, LiteTextEditorWithRef, type TFileHandler } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-// components
-import { MakeOptional } from "@plane/types";
+import type { MakeOptional } from "@plane/types";
 import { cn, isCommentEmpty } from "@plane/utils";
+// components
 import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
-// helpers
 // hooks
 import { useEditorConfig, useEditorMention } from "@/hooks/editor";
-// store hooks
 import { useMember } from "@/hooks/store";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 // plane web services
 import { WorkspaceService } from "@/plane-web/services";
 const workspaceService = new WorkspaceService();
 
-interface LiteTextEditorWrapperProps
-  extends MakeOptional<
-    Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
-    "disabledExtensions" | "flaggedExtensions"
-  > {
+type LiteTextEditorWrapperProps = MakeOptional<
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
+  "disabledExtensions" | "flaggedExtensions"
+> & {
   workspaceSlug: string;
   workspaceId: string;
   projectId?: string;
@@ -35,15 +30,23 @@ interface LiteTextEditorWrapperProps
   isSubmitting?: boolean;
   showToolbarInitially?: boolean;
   showToolbar?: boolean;
-  uploadFile: TFileHandler["upload"];
   issue_id?: string;
   parentClassName?: string;
-}
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
   const { t } = useTranslation();
   const {
     containerClassName,
+    editable,
     workspaceSlug,
     workspaceId,
     projectId,
@@ -57,7 +60,6 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     showToolbar = true,
     parentClassName = "",
     placeholder = t("issue.comments.placeholder"),
-    uploadFile,
     disabledExtensions: additionalDisabledExtensions = [],
     ...rest
   } = props;
@@ -70,10 +72,10 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
   // use editor mention
   const { fetchMentions } = useEditorMention({
     searchEntity: async (payload) =>
-      await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+      await workspaceService.searchEntity(workspaceSlug, {
         ...payload,
-        project_id: projectId?.toString() ?? "",
-        issue_id: issue_id,
+        project_id: projectId,
+        issue_id,
       }),
   });
   // editor config
@@ -94,10 +96,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
       <LiteTextEditorWithRef
         ref={ref}
         disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
+        editable={editable}
         flaggedExtensions={liteTextEditorExtensions.flagged}
         fileHandler={getEditorFileHandlers({
           projectId,
-          uploadFile,
+          uploadFile: editable ? props.uploadFile : async () => "",
           workspaceId,
           workspaceSlug,
         })}
@@ -107,8 +110,10 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
             if (!res) throw new Error("Failed in fetching mentions");
             return res;
           },
-          renderComponent: (props) => <EditorMentionsRoot {...props} />,
-          getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
+          renderComponent: EditorMentionsRoot,
+          getMentionedEntityDetails: (id) => ({
+            display_name: getUserDetails(id)?.display_name ?? "",
+          }),
         }}
         placeholder={placeholder}
         containerClassName={cn(containerClassName, "relative")}

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

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