🚜 refactor: added lite text editor and rich text editor for space as well

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { LiteTextEditorWithRef, ILiteTextEditor } from "@plane/lite-text-editor";
+
+import fileService from "services/file.service";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+interface LiteTextEditorWrapperProps
+  extends Omit<
+    ILiteTextEditor,
+    "uploadFile" | "deleteFile" | "restoreFile" | "mentionSuggestions" | "mentionHighlights"
+  > {
+  workspaceSlug: string;
+}
+
+export const LiteTextEditor = React.forwardRef<EditorHandle, LiteTextEditorWrapperProps>(
+  ({ workspaceSlug, ...props }, ref) => {
+    const mentionsConfig = useEditorSuggestions();
+
+    return (
+      <LiteTextEditorWithRef
+        ref={ref}
+        uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+        deleteFile={fileService.deleteImage}
+        restoreFile={fileService.restoreImage}
+        mentionHighlights={mentionsConfig.mentionHighlights}
+        {...props}
+      />
+    );
+  }
+);
+
+LiteTextEditor.displayName = "LiteTextEditor";

space/components/editor/lite-text-read-only-editor.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ILiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+
+import { useMention } from "hooks/store";
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+interface LiteTextReadOnlyEditorWrapperProps extends Omit<ILiteTextReadOnlyEditor, "mentionHighlights"> {}
+
+export const LiteTextReadOnlyEditor = React.forwardRef<EditorHandle, LiteTextReadOnlyEditorWrapperProps>(
+  ({ ...props }, ref) => {
+    const editorSuggestions = useMention();
+
+    return (
+      <LiteTextReadOnlyEditorWithRef ref={ref} mentionHighlights={editorSuggestions.mentionHighlights} {...props} />
+    );
+  }
+);
+
+LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor";

space/components/editor/rich-text-editor.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { RichTextEditorWithRef, IRichTextEditor } 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;
+}
+
+const fileService = new FileService();
+
+export const RichTextEditor = React.forwardRef<EditorHandle, RichTextEditorWrapperProps>(
+  ({ workspaceSlug, ...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}
+      />
+    );
+  }
+);
+
+RichTextEditor.displayName = "RichTextEditor";

space/components/editor/rich-text-read-only-editor.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { IRichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef } from "@plane/rich-text-editor";
+
+import { useMention } from "hooks/store";
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+interface RichTextReadOnlyEditorWrapperProps extends Omit<IRichTextReadOnlyEditor, "mentionHighlights"> {}
+
+export const RichTextReadOnlyEditor = React.forwardRef<EditorHandle, RichTextReadOnlyEditorWrapperProps>(
+  ({ ...props }, ref) => {
+    const editorSuggestions = useMention();
+
+    return (
+      <RichTextReadOnlyEditorWithRef ref={ref} mentionHighlights={editorSuggestions.mentionHighlights} {...props} />
+    );
+  }
+);
+
+RichTextReadOnlyEditor.displayName = "RichTextReadOnlyEditor";

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

@@ -11,9 +11,7 @@ import { Button } from "@plane/ui";
 // types
 import { Comment } from "types/issue";
 // components
-import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import { LiteTextEditor } from "components/editor/lite-text-editor";
-// service
-import fileService from "services/file.service";
 
 const defaultValues: Partial<Comment> = {
   comment_html: "",
@@ -70,16 +68,13 @@ export const AddComment: React.FC<Props> = observer((props) => {
           name="comment_html"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <LiteTextEditorWithRef
+            <LiteTextEditor
+              workspaceSlug={workspace_slug}
               onEnterKeyPress={(e) => {
                 userStore.requiredLogin(() => {
                   handleSubmit(onSubmit)(e);
                 });
               }}
-              cancelUploadImage={fileService.cancelUpload}
-              uploadFile={fileService.getUploadFileFunction(workspace_slug as string)}
-              deleteFile={fileService.deleteImage}
-              restoreFile={fileService.restoreImage}
               ref={editorRef}
               value={
                 !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)

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

@@ -6,16 +6,12 @@ import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { LiteReadOnlyEditorWithRef, LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import { LiteTextEditor } from "components/editor/lite-text-editor";
-
 import { CommentReactions } from "components/issues/peek-overview";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import { Comment } from "types/issue";
-// services
-import fileService from "services/file.service";
-import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   workspaceSlug: string;
@@ -29,8 +25,6 @@ export const CommentCard: React.FC<Props> = observer((props) => {
   // states
   const [isEditing, setIsEditing] = useState(false);
 
-  const mentionsConfig = useEditorSuggestions();
-
   const editorRef = React.useRef<any>(null);
 
   const showEditorRef = React.useRef<any>(null);
@@ -101,15 +95,11 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 control={control}
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
-                  <LiteTextEditorWithRef
+                  <LiteTextEditor
+                    workspaceSlug={workspaceSlug}
                     onEnterKeyPress={handleSubmit(handleCommentUpdate)}
-                    cancelUploadImage={fileService.cancelUpload}
-                    uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-                    deleteFile={fileService.deleteImage}
-                    restoreFile={fileService.restoreImage}
                     ref={editorRef}
                     value={value}
-                    debouncedUpdatesEnabled={false}
                     customClassName="min-h-[50px] p-3 shadow-sm"
                     onChange={(comment_json: Object, comment_html: string) => {
                       onChange(comment_html);

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

@@ -1,5 +1,5 @@
+import { RichTextReadOnlyEditor } from "components/editor/rich-text-read-only-editor";
 import { IssueReactions } from "components/issues/peek-overview";
-import { RichTextReadOnlyEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types/issue";
 

web/components/editor/lite-text-read-only-editor.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ILiteReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+import { ILiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 
 import { useMention } from "hooks/store";
 
@@ -8,7 +8,7 @@ interface EditorHandle {
   setEditorValue: (content: string) => void;
 }
 
-interface LiteTextReadOnlyEditorWrapperProps extends Omit<ILiteReadOnlyEditor, "mentionHighlights"> {}
+interface LiteTextReadOnlyEditorWrapperProps extends Omit<ILiteTextReadOnlyEditor, "mentionHighlights"> {}
 
 export const LiteTextReadOnlyEditor = React.forwardRef<EditorHandle, LiteTextReadOnlyEditorWrapperProps>(
   ({ ...props }, ref) => {