From aa09724ec45f9b4471dca3137648ebf41706f275 Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Thu, 11 Jan 2024 20:01:29 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9C=20refactor:=20added=20lite=20text?= =?UTF-8?q?=20editor=20and=20rich=20text=20editor=20for=20space=20as=20wel?= =?UTF-8?q?l?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- space/components/editor/lite-text-editor.tsx | 37 +++++++++++++++++ .../editor/lite-text-read-only-editor.tsx | 23 +++++++++++ space/components/editor/rich-text-editor.tsx | 41 +++++++++++++++++++ .../editor/rich-text-read-only-editor.tsx | 23 +++++++++++ .../peek-overview/comment/add-comment.tsx | 11 ++--- .../comment/comment-detail-card.tsx | 16 ++------ .../issues/peek-overview/issue-details.tsx | 2 +- .../editor/lite-text-read-only-editor.tsx | 4 +- 8 files changed, 133 insertions(+), 24 deletions(-) create mode 100644 space/components/editor/lite-text-editor.tsx create mode 100644 space/components/editor/lite-text-read-only-editor.tsx create mode 100644 space/components/editor/rich-text-editor.tsx create mode 100644 space/components/editor/rich-text-read-only-editor.tsx diff --git a/space/components/editor/lite-text-editor.tsx b/space/components/editor/lite-text-editor.tsx new file mode 100644 index 000000000..eb7489e3f --- /dev/null +++ b/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( + ({ workspaceSlug, ...props }, ref) => { + const mentionsConfig = useEditorSuggestions(); + + return ( + + ); + } +); + +LiteTextEditor.displayName = "LiteTextEditor"; diff --git a/space/components/editor/lite-text-read-only-editor.tsx b/space/components/editor/lite-text-read-only-editor.tsx new file mode 100644 index 000000000..28fde2cf2 --- /dev/null +++ b/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 {} + +export const LiteTextReadOnlyEditor = React.forwardRef( + ({ ...props }, ref) => { + const editorSuggestions = useMention(); + + return ( + + ); + } +); + +LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor"; diff --git a/space/components/editor/rich-text-editor.tsx b/space/components/editor/rich-text-editor.tsx new file mode 100644 index 000000000..32056a927 --- /dev/null +++ b/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( + ({ workspaceSlug, ...props }, ref) => { + const editorSuggestions = useMention(); + + return ( + + ); + } +); + +RichTextEditor.displayName = "RichTextEditor"; diff --git a/space/components/editor/rich-text-read-only-editor.tsx b/space/components/editor/rich-text-read-only-editor.tsx new file mode 100644 index 000000000..7e35ad1b2 --- /dev/null +++ b/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 {} + +export const RichTextReadOnlyEditor = React.forwardRef( + ({ ...props }, ref) => { + const editorSuggestions = useMention(); + + return ( + + ); + } +); + +RichTextReadOnlyEditor.displayName = "RichTextReadOnlyEditor"; diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx index d6c3ce4e6..7e5dbe553 100644 --- a/space/components/issues/peek-overview/comment/add-comment.tsx +++ b/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"; -// service -import fileService from "services/file.service"; +import { LiteTextEditor } from "components/editor/lite-text-editor"; const defaultValues: Partial = { comment_html: "", @@ -70,16 +68,13 @@ export const AddComment: React.FC = observer((props) => { name="comment_html" control={control} render={({ field: { value, onChange } }) => ( - { 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) 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 a82165140..2d12c4890 100644 --- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx +++ b/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 = observer((props) => { // states const [isEditing, setIsEditing] = useState(false); - const mentionsConfig = useEditorSuggestions(); - const editorRef = React.useRef(null); const showEditorRef = React.useRef(null); @@ -101,15 +95,11 @@ export const CommentCard: React.FC = observer((props) => { control={control} name="comment_html" render={({ field: { onChange, value } }) => ( - { onChange(comment_html); diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx index 316b8474d..66db5c7bf 100644 --- a/space/components/issues/peek-overview/issue-details.tsx +++ b/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"; diff --git a/web/components/editor/lite-text-read-only-editor.tsx b/web/components/editor/lite-text-read-only-editor.tsx index 3d85c51ab..28fde2cf2 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, 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 {} +interface LiteTextReadOnlyEditorWrapperProps extends Omit {} export const LiteTextReadOnlyEditor = React.forwardRef( ({ ...props }, ref) => {