From 51e281592f3c73f8f8dd99f073f9575f5633a5b1 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Mon, 2 Oct 2023 16:35:54 +0530
Subject: [PATCH] replaced all read-only instances

---
 packages/editor/core/src/ui/index.tsx         |  4 +-
 .../comment/comment-detail-card.tsx           |  9 +--
 .../issues/peek-overview/issue-details.tsx    | 55 +++++++------------
 .../core/modals/gpt-assistant-modal.tsx       | 32 ++++-------
 .../[workspaceSlug]/me/profile/activity.tsx   | 19 +++----
 5 files changed, 44 insertions(+), 75 deletions(-)

diff --git a/packages/editor/core/src/ui/index.tsx b/packages/editor/core/src/ui/index.tsx
index 2871075a8..93e7b6829 100644
--- a/packages/editor/core/src/ui/index.tsx
+++ b/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;
diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index fc5140af2..cfd7ba493 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/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} />
diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx
index f6f34c5b2..24dd65651 100644
--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/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 (
-    <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 ||
-            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}
-        />
-      )}
-      <IssueReactions />
-    </div>
-  );
-};
+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>" && (
+      <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" />
+    )}
+    <IssueReactions />
+  </div>
+);
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index 236037531..65495805a 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/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,11 +170,10 @@ export const GptAssistantModal: React.FC<Props> = ({
         type="text"
         name="task"
         register={register}
-        placeholder={`${
-          content && content !== ""
-            ? "Tell AI what action to perform on this content..."
-            : "Ask AI anything..."
-        }`}
+        placeholder={`${content && content !== ""
+          ? "Tell AI what action to perform on this content..."
+          : "Ask AI anything..."
+          }`}
         autoComplete="off"
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
@@ -219,8 +209,8 @@ export const GptAssistantModal: React.FC<Props> = ({
             {isSubmitting
               ? "Generating response..."
               : response === ""
-              ? "Generate response"
-              : "Generate again"}
+                ? "Generate response"
+                : "Generate again"}
           </PrimaryButton>
         </div>
       </div>
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index 68e46723d..a50fdde01 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/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>
@@ -120,11 +117,11 @@ const ProfileActivity = () => {
 
                   const message =
                     activityItem.verb === "created" &&
-                    activityItem.field !== "cycles" &&
-                    activityItem.field !== "modules" &&
-                    activityItem.field !== "attachment" &&
-                    activityItem.field !== "link" &&
-                    activityItem.field !== "estimate" ? (
+                      activityItem.field !== "cycles" &&
+                      activityItem.field !== "modules" &&
+                      activityItem.field !== "attachment" &&
+                      activityItem.field !== "link" &&
+                      activityItem.field !== "estimate" ? (
                       <span className="text-custom-text-200">
                         created{" "}
                         <Link
@@ -183,7 +180,7 @@ const ProfileActivity = () => {
                               <div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
                                 <div className="text-sm text-custom-text-200 break-words">
                                   {activityItem.field === "archived_at" &&
-                                  activityItem.new_value !== "restore" ? (
+                                    activityItem.new_value !== "restore" ? (
                                     <span className="text-gray font-medium">Plane</span>
                                   ) : activityItem.actor_detail.is_bot ? (
                                     <span className="text-gray font-medium">