diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts
index c37d45039..18c4252dd 100644
--- a/packages/editor/lite-text-editor/src/index.ts
+++ b/packages/editor/lite-text-editor/src/index.ts
@@ -1,3 +1,4 @@
export { LiteTextEditor, LiteTextEditorWithRef } from "src/ui";
export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "src/ui/read-only";
-export type { IMentionSuggestion, IMentionHighlight } from "@plane/editor-core";
+export type { LiteTextEditorProps, ILiteTextEditor } from "src/ui";
+export type { LiteTextEditorReadOnlyProps, ILiteReadOnlyEditor } from "src/ui/read-only";
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index 57774ab5d..571bcad4b 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -12,12 +12,11 @@ import {
import { FixedMenu } from "src/ui/menus/fixed-menu";
import { LiteTextEditorExtensions } from "src/ui/extensions";
-interface ILiteTextEditor {
+export type ILiteTextEditor = {
value: string;
uploadFile: UploadImage;
deleteFile: DeleteImage;
restoreFile: RestoreImage;
-
noBorder?: boolean;
borderOnFocus?: boolean;
customClassName?: string;
@@ -42,9 +41,9 @@ interface ILiteTextEditor {
mentionHighlights?: string[];
mentionSuggestions?: IMentionSuggestion[];
submitButton?: React.ReactNode;
-}
+};
-interface LiteTextEditorProps extends ILiteTextEditor {
+export interface LiteTextEditorProps extends ILiteTextEditor {
forwardedRef?: React.Ref;
}
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 66ce79059..8c227e98c 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,16 +1,16 @@
import * as React from "react";
import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
-interface ICoreReadOnlyEditor {
+export type ILiteReadOnlyEditor = {
value: string;
editorContentCustomClassNames?: string;
noBorder?: boolean;
borderOnFocus?: boolean;
customClassName?: string;
mentionHighlights: string[];
-}
+};
-interface EditorCoreProps extends ICoreReadOnlyEditor {
+export interface LiteTextEditorReadOnlyProps extends ILiteReadOnlyEditor {
forwardedRef?: React.Ref;
}
@@ -27,7 +27,7 @@ const LiteReadOnlyEditor = ({
value,
forwardedRef,
mentionHighlights,
-}: EditorCoreProps) => {
+}: LiteTextEditorReadOnlyProps) => {
const editor = useReadOnlyEditor({
value,
forwardedRef,
@@ -51,7 +51,7 @@ const LiteReadOnlyEditor = ({
);
};
-const LiteReadOnlyEditorWithRef = React.forwardRef((props, ref) => (
+const LiteReadOnlyEditorWithRef = React.forwardRef((props, ref) => (
));
diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts
index eb745c45b..110dc48dc 100644
--- a/packages/editor/rich-text-editor/src/index.ts
+++ b/packages/editor/rich-text-editor/src/index.ts
@@ -1,4 +1,3 @@
export { RichTextEditor, RichTextEditorWithRef } from "src/ui";
export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "src/ui/read-only";
export type { RichTextEditorProps, IRichTextEditor } from "src/ui";
-export type { IMentionHighlight, IMentionSuggestion } from "@plane/editor-core";
diff --git a/web/components/editor/lite-text-editor.tsx b/web/components/editor/lite-text-editor.tsx
new file mode 100644
index 000000000..da42c3043
--- /dev/null
+++ b/web/components/editor/lite-text-editor.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { LiteTextEditorWithRef, ILiteTextEditor } from "@plane/lite-text-editor";
+
+import { useMention } from "hooks/store";
+
+import { FileService } from "services/file.service";
+
+interface EditorHandle {
+ clearEditor: () => void;
+ setEditorValue: (content: string) => void;
+}
+
+interface LiteTextEditorWrapperProps
+ extends Omit<
+ ILiteTextEditor,
+ "uploadFile" | "deleteFile" | "restoreFile" | "mentionSuggestions" | "mentionHighlights"
+ > {
+ workspaceSlug: string;
+}
+
+const fileService = new FileService();
+
+export const LiteTextEditor = React.forwardRef(
+ ({ workspaceSlug, ...props }, ref) => {
+ const editorSuggestions = useMention();
+
+ return (
+
+ );
+ }
+);
+
+LiteTextEditor.displayName = "LiteTextEditor";
diff --git a/web/components/editor/lite-text-read-only-editor.tsx b/web/components/editor/lite-text-read-only-editor.tsx
new file mode 100644
index 000000000..b36e62d69
--- /dev/null
+++ b/web/components/editor/lite-text-read-only-editor.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { ILiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+
+import { useMention } from "hooks/store";
+
+interface EditorHandle {
+ clearEditor: () => void;
+ setEditorValue: (content: string) => void;
+}
+
+interface LiteTextReadOnlyEditorWrapperProps extends Omit {}
+
+export const LiteTextReadOnlyEditor = React.forwardRef(
+ ({ ...props }, ref) => {
+ const editorSuggestions = useMention();
+
+ return ;
+ }
+);
+
+LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor";
diff --git a/web/components/editor/rich-text-wrapper.tsx b/web/components/editor/rich-text-editor.tsx
similarity index 100%
rename from web/components/editor/rich-text-wrapper.tsx
rename to web/components/editor/rich-text-editor.tsx
diff --git a/web/components/editor/rich-text-read-only-editor.tsx b/web/components/editor/rich-text-read-only-editor.tsx
new file mode 100644
index 000000000..32056a927
--- /dev/null
+++ b/web/components/editor/rich-text-read-only-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(
+ ({ workspaceSlug, ...props }, ref) => {
+ const editorSuggestions = useMention();
+
+ return (
+
+ );
+ }
+);
+
+RichTextEditor.displayName = "RichTextEditor";
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index 96aef71dc..a9041bfb9 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -12,7 +12,7 @@ import { AIService } from "services/ai.service";
// components
import { GptAssistantPopover } from "components/core";
import { PriorityDropdown } from "components/dropdowns";
-import { RichTextEditor } from "components/editor/rich-text-wrapper";
+import { RichTextEditor } from "components/editor/rich-text-editor";
// ui
import { Button, Input, ToggleSwitch } from "@plane/ui";
// types
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index 1bd2c83d6..4ecb25d92 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -1,12 +1,8 @@
import React from "react";
import { useRouter } from "next/router";
import { useForm, Controller } from "react-hook-form";
-// hooks
-import { useMention } from "hooks/store";
-// services
-import { FileService } from "services/file.service";
// components
-import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import { LiteTextEditor } from "components/editor/lite-text-editor";
// ui
import { Button } from "@plane/ui";
import { Globe2, Lock } from "lucide-react";
@@ -42,17 +38,12 @@ const commentAccess: commentAccessType[] = [
},
];
-// services
-const fileService = new FileService();
-
export const AddComment: React.FC = ({ disabled = false, onSubmit, showAccessSpecifier = false }) => {
// refs
const editorRef = React.useRef(null);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
- // store hooks
- const { mentionHighlights, mentionSuggestions } = useMention();
// form info
const {
control,
@@ -82,25 +73,19 @@ export const AddComment: React.FC = ({ disabled = false, onSubmit, showAc
name="comment_html"
control={control}
render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
-
" : commentValue}
customClassName="p-2 h-full"
editorContentCustomClassNames="min-h-[35px]"
- debouncedUpdatesEnabled={false}
onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
commentAccessSpecifier={
showAccessSpecifier
? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess }
: undefined
}
- mentionSuggestions={mentionSuggestions}
- mentionHighlights={mentionHighlights}
submitButton={