replaced all read-only instances

packages/editor/core/src/ui/index.tsx

@@ -6,8 +6,8 @@ import { DeleteImage } from '@/types/delete-image';
 import { getEditorClassNames } from '@/lib/utils';
 import { EditorProps } from '@tiptap/pm/view';
 import { useEditor } from './hooks/useEditor';
-import { EditorContainer } from '@/ui/editor-container';
-import { EditorContentWrapper } from '@/ui/editor-content';
+import { EditorContainer } from '@/ui/components/editor-container';
+import { EditorContentWrapper } from '@/ui/components/editor-content';
 
 interface ICoreEditor {
   value: string;

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

@@ -9,7 +9,7 @@ import { Menu, Transition } from "@headlessui/react";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import { LiteReadOnlyEditorWithRef, LiteTextEditorWithRef } from "@plane/lite-text-editor";
 
 import { CommentReactions } from "components/issues/peek-overview";
 // icons
@@ -103,7 +103,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 control={control}
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
-                  <RichTextEditorWithRef
+                  <LiteTextEditorWithRef
                     uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
                     deleteFile={fileService.deleteImage}
                     ref={editorRef}
@@ -135,12 +135,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <RichTextEditorWithRef
-              uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-              deleteFile={fileService.deleteImage}
+            <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
               value={comment.comment_html}
-              editable={false}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
             />
             <CommentReactions commentId={comment.id} projectId={comment.project} />

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

@@ -1,43 +1,28 @@
 import { IssueReactions } from "components/issues/peek-overview";
-import { RichTextEditor } from "@plane/rich-text-editor";
-import { useRouter } from "next/router";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types/issue";
-// services
-import fileService from "@/services/file.service";
 
 type Props = {
   issueDetails: IIssue;
 };
 
-export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
-  const router = useRouter();
-  const { workspace_slug } = router.query;
-
-  return (
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => (
   <div className="space-y-2">
     <h6 className="font-medium text-custom-text-200">
       {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
     </h6>
     <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
     {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
-        <RichTextEditor
-          uploadFile={fileService.getUploadFileFunction(workspace_slug as string)}
-          deleteFile={fileService.deleteImage}
-          value={
-            !issueDetails.description_html ||
+      <RichReadOnlyEditor
+        value={!issueDetails.description_html ||
           issueDetails.description_html === "" ||
           (typeof issueDetails.description_html === "object" &&
             Object.keys(issueDetails.description_html).length === 0)
           ? "<p></p>"
-              : issueDetails.description_html
-          }
-          customClassName="p-3 min-h-[50px] shadow-sm"
-          debouncedUpdatesEnabled={false}
-          editable={false}
-        />
+          : issueDetails.description_html}
+        customClassName="p-3 min-h-[50px] shadow-sm" />
     )}
     <IssueReactions />
   </div>
-  );
-};
+);

web/components/core/modals/gpt-assistant-modal.tsx

@@ -11,11 +11,9 @@ import useUserAuth from "hooks/use-user-auth";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
 // components
-import { RichTextEditor, RichTextEditorWithRef } from "@plane/rich-text-editor";
+import { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 // types
 import { IIssue, IPageBlock } from "types";
-// services
-import fileService from "@/services/file.service";
 
 type Props = {
   isOpen: boolean;
@@ -136,21 +134,17 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
-        isOpen ? "block" : "hidden"
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
         }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
           Content:
-          <RichTextEditorWithRef
-            uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-            deleteFile={fileService.deleteImage}
+          <RichReadOnlyEditorWithRef
             value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
             noBorder
             borderOnFocus={false}
-            editable={false}
             ref={editorRef}
           />
         </div>
@@ -158,14 +152,11 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <RichTextEditor
-            uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-            deleteFile={fileService.deleteImage}
+          <RichReadOnlyEditor
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
             noBorder
             borderOnFocus={false}
-            editable={false}
           />
         </div>
       )}
@@ -179,8 +170,7 @@ export const GptAssistantModal: React.FC<Props> = ({
         type="text"
         name="task"
         register={register}
-        placeholder={`${
-          content && content !== ""
+        placeholder={`${content && content !== ""
           ? "Tell AI what action to perform on this content..."
           : "Ask AI anything..."
           }`}

web/pages/[workspaceSlug]/me/profile/activity.tsx

@@ -9,7 +9,7 @@ import userService from "services/user.service";
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
-import { RichTextEditor } from "@plane/rich-text-editor";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // icons
 import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
 // ui
@@ -98,9 +98,7 @@ const ProfileActivity = () => {
                               </p>
                             </div>
                             <div className="issue-comments-section p-0">
-                              <RichTextEditor
-                                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                                deleteFile={fileService.deleteImage}
+                              <RichReadOnlyEditor
                                 value={
                                   activityItem?.new_value !== ""
                                     ? activityItem.new_value
@@ -109,7 +107,6 @@ const ProfileActivity = () => {
                                 customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
                                 noBorder
                                 borderOnFocus={false}
-                                editable={false}
                               />
                             </div>
                           </div>