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={