From 4c3811731677ba55c0ef24cbb27864c033278a84 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Thu, 11 Jan 2024 18:47:51 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9C=20refactor:=20added=20a=20common?=
 =?UTF-8?q?=20place=20for=20rich=20text=20and=20lite=20text=20read=20only?=
 =?UTF-8?q?=20editors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/lite-text-editor/src/index.ts |  4 +--
 .../src/ui/read-only/index.tsx                | 16 +++++-----
 packages/editor/rich-text-editor/src/index.ts |  3 +-
 .../src/ui/read-only/index.tsx                | 12 ++++----
 .../issues/peek-overview/issue-details.tsx    |  8 ++---
 .../core/modals/gpt-assistant-popover.tsx     |  6 ++--
 .../editor/lite-text-read-only-editor.tsx     |  6 ++--
 .../editor/rich-text-read-only-editor.tsx     | 30 ++++---------------
 web/pages/profile/activity.tsx                |  6 ++--
 9 files changed, 36 insertions(+), 55 deletions(-)

diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts
index 18c4252dd..4cd5af2ee 100644
--- a/packages/editor/lite-text-editor/src/index.ts
+++ b/packages/editor/lite-text-editor/src/index.ts
@@ -1,4 +1,4 @@
 export { LiteTextEditor, LiteTextEditorWithRef } from "src/ui";
-export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "src/ui/read-only";
+export { LiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "src/ui/read-only";
 export type { LiteTextEditorProps, ILiteTextEditor } from "src/ui";
-export type { LiteTextEditorReadOnlyProps, ILiteReadOnlyEditor } from "src/ui/read-only";
+export type { LiteTextReadOnlyEditorProps, ILiteTextReadOnlyEditor } from "src/ui/read-only";
diff --git a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
index 8c227e98c..1d54ba588 100644
--- a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
 
-export type ILiteReadOnlyEditor = {
+export type ILiteTextReadOnlyEditor = {
   value: string;
   editorContentCustomClassNames?: string;
   noBorder?: boolean;
@@ -10,7 +10,7 @@ export type ILiteReadOnlyEditor = {
   mentionHighlights: string[];
 };
 
-export interface LiteTextEditorReadOnlyProps extends ILiteReadOnlyEditor {
+export interface LiteTextReadOnlyEditorProps extends ILiteTextReadOnlyEditor {
   forwardedRef?: React.Ref<EditorHandle>;
 }
 
@@ -19,7 +19,7 @@ interface EditorHandle {
   setEditorValue: (content: string) => void;
 }
 
-const LiteReadOnlyEditor = ({
+const LiteTextReadOnlyEditor = ({
   editorContentCustomClassNames,
   noBorder,
   borderOnFocus,
@@ -27,7 +27,7 @@ const LiteReadOnlyEditor = ({
   value,
   forwardedRef,
   mentionHighlights,
-}: LiteTextEditorReadOnlyProps) => {
+}: LiteTextReadOnlyEditorProps) => {
   const editor = useReadOnlyEditor({
     value,
     forwardedRef,
@@ -51,10 +51,10 @@ const LiteReadOnlyEditor = ({
   );
 };
 
-const LiteReadOnlyEditorWithRef = React.forwardRef<EditorHandle, ILiteReadOnlyEditor>((props, ref) => (
-  <LiteReadOnlyEditor {...props} forwardedRef={ref} />
+const LiteTextReadOnlyEditorWithRef = React.forwardRef<EditorHandle, ILiteTextReadOnlyEditor>((props, ref) => (
+  <LiteTextReadOnlyEditor {...props} forwardedRef={ref} />
 ));
 
-LiteReadOnlyEditorWithRef.displayName = "LiteReadOnlyEditorWithRef";
+LiteTextReadOnlyEditorWithRef.displayName = "LiteTextReadOnlyEditorWithRef";
 
-export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef };
+export { LiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef };
diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts
index 110dc48dc..7cdfb3cd4 100644
--- a/packages/editor/rich-text-editor/src/index.ts
+++ b/packages/editor/rich-text-editor/src/index.ts
@@ -1,3 +1,4 @@
 export { RichTextEditor, RichTextEditorWithRef } from "src/ui";
-export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "src/ui/read-only";
+export { RichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef } from "src/ui/read-only";
 export type { RichTextEditorProps, IRichTextEditor } from "src/ui";
+export type { IRichTextReadOnlyEditor } from "src/ui/read-only";
diff --git a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
index 9b0f43f57..6c77d2ca4 100644
--- a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@@ -2,7 +2,7 @@
 import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
 import * as React from "react";
 
-interface IRichTextReadOnlyEditor {
+export interface IRichTextReadOnlyEditor {
   value: string;
   editorContentCustomClassNames?: string;
   noBorder?: boolean;
@@ -20,7 +20,7 @@ interface EditorHandle {
   setEditorValue: (content: string) => void;
 }
 
-const RichReadOnlyEditor = ({
+const RichTextReadOnlyEditor = ({
   editorContentCustomClassNames,
   noBorder,
   borderOnFocus,
@@ -52,10 +52,10 @@ const RichReadOnlyEditor = ({
   );
 };
 
-const RichReadOnlyEditorWithRef = React.forwardRef<EditorHandle, IRichTextReadOnlyEditor>((props, ref) => (
-  <RichReadOnlyEditor {...props} forwardedRef={ref} />
+const RichTextReadOnlyEditorWithRef = React.forwardRef<EditorHandle, IRichTextReadOnlyEditor>((props, ref) => (
+  <RichTextReadOnlyEditor {...props} forwardedRef={ref} />
 ));
 
-RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef";
+RichTextReadOnlyEditorWithRef.displayName = "RichTextReadOnlyEditorWithRef";
 
-export { RichReadOnlyEditor, RichReadOnlyEditorWithRef };
+export { RichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef };
diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx
index d84103388..316b8474d 100644
--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/space/components/issues/peek-overview/issue-details.tsx
@@ -1,16 +1,13 @@
 import { IssueReactions } from "components/issues/peek-overview";
-import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+import { RichTextReadOnlyEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types/issue";
-import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   issueDetails: IIssue;
 };
 
 export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
-  const mentionConfig = useEditorSuggestions();
-
   return (
     <div className="space-y-2">
       <h6 className="font-medium text-custom-text-200">
@@ -18,7 +15,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
       </h6>
       <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
       {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
-        <RichReadOnlyEditor
+        <RichTextReadOnlyEditor
           value={
             !issueDetails.description_html ||
             issueDetails.description_html === "" ||
@@ -28,7 +25,6 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
               : issueDetails.description_html
           }
           customClassName="p-3 min-h-[50px] shadow-sm"
-          mentionHighlights={mentionConfig.mentionHighlights}
         />
       )}
       <IssueReactions />
diff --git a/web/components/core/modals/gpt-assistant-popover.tsx b/web/components/core/modals/gpt-assistant-popover.tsx
index 3afd6d1b9..dedf7cbd8 100644
--- a/web/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/components/core/modals/gpt-assistant-popover.tsx
@@ -8,10 +8,10 @@ import { usePopper } from "react-popper";
 // ui
 import { Button, Input } from "@plane/ui";
 // components
-import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 import { Popover, Transition } from "@headlessui/react";
 // types
 import { Placement } from "@popperjs/core";
+import { RichTextReadOnlyEditor } from "components/editor/rich-text-read-only-editor";
 
 type Props = {
   isOpen: boolean;
@@ -203,7 +203,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
             {prompt && (
               <div className="text-sm">
                 Content:
-                <RichReadOnlyEditorWithRef
+                <RichTextReadOnlyEditor
                   value={prompt}
                   customClassName="-m-3"
                   noBorder
@@ -215,7 +215,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
             {response !== "" && (
               <div className="page-block-section text-sm max-h-[8rem]">
                 Response:
-                <RichReadOnlyEditorWithRef
+                <RichTextReadOnlyEditor
                   value={`<p>${response}</p>`}
                   customClassName={response ? "-mx-3 -my-3" : ""}
                   noBorder
diff --git a/web/components/editor/lite-text-read-only-editor.tsx b/web/components/editor/lite-text-read-only-editor.tsx
index b36e62d69..3d85c51ab 100644
--- a/web/components/editor/lite-text-read-only-editor.tsx
+++ b/web/components/editor/lite-text-read-only-editor.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ILiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+import { ILiteReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 
 import { useMention } from "hooks/store";
 
@@ -14,7 +14,9 @@ export const LiteTextReadOnlyEditor = React.forwardRef<EditorHandle, LiteTextRea
   ({ ...props }, ref) => {
     const editorSuggestions = useMention();
 
-    return <LiteReadOnlyEditorWithRef ref={ref} mentionHighlights={editorSuggestions.mentionHighlights} {...props} />;
+    return (
+      <LiteTextReadOnlyEditorWithRef ref={ref} mentionHighlights={editorSuggestions.mentionHighlights} {...props} />
+    );
   }
 );
 
diff --git a/web/components/editor/rich-text-read-only-editor.tsx b/web/components/editor/rich-text-read-only-editor.tsx
index 32056a927..7e35ad1b2 100644
--- a/web/components/editor/rich-text-read-only-editor.tsx
+++ b/web/components/editor/rich-text-read-only-editor.tsx
@@ -1,41 +1,23 @@
 import React from "react";
-import { RichTextEditorWithRef, IRichTextEditor } from "@plane/rich-text-editor";
+import { IRichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 
 import { useMention } from "hooks/store";
 
-import { FileService } from "services/file.service";
-
 interface EditorHandle {
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
 }
 
-interface RichTextEditorWrapperProps
-  extends Omit<
-    IRichTextEditor,
-    "uploadFile" | "deleteFile" | "restoreFile" | "mentionSuggestions" | "mentionHighlights"
-  > {
-  workspaceSlug: string;
-}
+interface RichTextReadOnlyEditorWrapperProps extends Omit<IRichTextReadOnlyEditor, "mentionHighlights"> {}
 
-const fileService = new FileService();
-
-export const RichTextEditor = React.forwardRef<EditorHandle, RichTextEditorWrapperProps>(
-  ({ workspaceSlug, ...props }, ref) => {
+export const RichTextReadOnlyEditor = React.forwardRef<EditorHandle, RichTextReadOnlyEditorWrapperProps>(
+  ({ ...props }, ref) => {
     const editorSuggestions = useMention();
 
     return (
-      <RichTextEditorWithRef
-        ref={ref}
-        uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-        deleteFile={fileService.deleteImage}
-        restoreFile={fileService.restoreImage}
-        mentionSuggestions={editorSuggestions.mentionSuggestions}
-        mentionHighlights={editorSuggestions.mentionHighlights}
-        {...props}
-      />
+      <RichTextReadOnlyEditorWithRef ref={ref} mentionHighlights={editorSuggestions.mentionHighlights} {...props} />
     );
   }
 );
 
-RichTextEditor.displayName = "RichTextEditor";
+RichTextReadOnlyEditor.displayName = "RichTextReadOnlyEditor";
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index 0cd010905..ca45dd673 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -7,7 +7,7 @@ import { UserService } from "services/user.service";
 import { ProfileSettingsLayout } from "layouts/settings-layout";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
-import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+import { RichTextReadOnlyEditor } from "components/editor/rich-text-read-only-editor";
 // icons
 import { History, MessageSquare } from "lucide-react";
 // ui
@@ -74,11 +74,11 @@ const ProfileActivityPage: NextPageWithLayout = () => {
                           </p>
                         </div>
                         <div className="issue-comments-section p-0">
-                          <RichReadOnlyEditor
-                            value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
+                          <RichTextReadOnlyEditor
                             customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
                             noBorder
                             borderOnFocus={false}
+                            value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
                           />
                         </div>
                       </div>