From 07c4699b0204e475b1cab1802cbcaa98ba656a0e Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Thu, 11 Jan 2024 13:06:32 +0530 Subject: [PATCH] refactor: change all RichTextEditor and RichTextEditorWithRef instances in web --- .../inbox/modals/create-issue-modal.tsx | 26 +++++--------- web/components/issues/description-form.tsx | 22 ++++-------- web/components/issues/draft-issue-form.tsx | 36 ++++++++----------- web/components/issues/issue-modal/form.tsx | 34 +++++++----------- .../issues/peek-overview/issue-detail.tsx | 23 ++++-------- 5 files changed, 47 insertions(+), 94 deletions(-) diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx index 3e56f575a..c46e15871 100644 --- a/web/components/inbox/modals/create-issue-modal.tsx +++ b/web/components/inbox/modals/create-issue-modal.tsx @@ -1,19 +1,18 @@ -import { Fragment, useRef, useState } from "react"; -import { useRouter } from "next/router"; -import { observer } from "mobx-react-lite"; import { Dialog, Transition } from "@headlessui/react"; -import { Controller, useForm } from "react-hook-form"; -import { RichTextEditorWithRef } from "@plane/rich-text-editor"; import { Sparkle } from "lucide-react"; +import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; +import { Fragment, useRef, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; // hooks -import { useApplication, useWorkspace, useInboxIssues, useMention } from "hooks/store"; +import { useApplication, useInboxIssues, useWorkspace } from "hooks/store"; import useToast from "hooks/use-toast"; // services -import { FileService } from "services/file.service"; import { AIService } from "services/ai.service"; // components -import { PriorityDropdown } from "components/dropdowns"; import { GptAssistantPopover } from "components/core"; +import { PriorityDropdown } from "components/dropdowns"; +import { RichTextEditorWrapper } from "components/editor/rich-text-wrapper"; // ui import { Button, Input, ToggleSwitch } from "@plane/ui"; // types @@ -34,7 +33,6 @@ const defaultValues: Partial = { // services const aiService = new AIService(); -const fileService = new FileService(); export const CreateInboxIssueModal: React.FC = observer((props) => { const { isOpen, onClose } = props; @@ -46,7 +44,6 @@ export const CreateInboxIssueModal: React.FC = observer((props) => { const editorRef = useRef(null); // toast alert const { setToastAlert } = useToast(); - const { mentionHighlights, mentionSuggestions } = useMention(); // router const router = useRouter(); const { workspaceSlug, projectId, inboxId } = router.query as { @@ -274,11 +271,8 @@ export const CreateInboxIssueModal: React.FC = observer((props) => { name="description_html" control={control} render={({ field: { value, onChange } }) => ( -

" : value} @@ -286,8 +280,6 @@ export const CreateInboxIssueModal: React.FC = observer((props) => { onChange={(description, description_html: string) => { onChange(description_html); }} - mentionSuggestions={mentionSuggestions} - mentionHighlights={mentionHighlights} /> )} /> diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx index cd678735d..d638aa024 100644 --- a/web/components/issues/description-form.tsx +++ b/web/components/issues/description-form.tsx @@ -5,13 +5,10 @@ import useReloadConfirmations from "hooks/use-reload-confirmation"; import debounce from "lodash/debounce"; // components import { TextArea } from "@plane/ui"; -import { RichTextEditor } from "@plane/rich-text-editor"; +import { RichTextEditorWrapper } from "components/editor/rich-text-wrapper"; // types import { TIssue } from "@plane/types"; import { TIssueOperations } from "./issue-detail"; -// services -import { FileService } from "services/file.service"; -import { useMention } from "hooks/store"; export interface IssueDescriptionFormValues { name: string; @@ -34,16 +31,12 @@ export interface IssueDetailsProps { setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void; } -const fileService = new FileService(); - export const IssueDescriptionForm: FC = (props) => { const { workspaceSlug, projectId, issueId, issue, issueOperations, isAllowed, isSubmitting, setIsSubmitting } = props; // states const [characterLimit, setCharacterLimit] = useState(false); const { setShowAlert } = useReloadConfirmations(); - // store hooks - const { mentionHighlights, mentionSuggestions } = useMention(); // form info const { handleSubmit, @@ -157,17 +150,16 @@ export const IssueDescriptionForm: FC = (props) => { )} - {errors.name ? errors.name.message : null} + + <>{errors.name ? errors.name.message : null} +
( - = (props) => { onChange(description_html); debouncedFormSave(); }} - mentionSuggestions={mentionSuggestions} - mentionHighlights={mentionHighlights} /> )} /> diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx index 9c6a9bb04..9b3f03d66 100644 --- a/web/components/issues/draft-issue-form.tsx +++ b/web/components/issues/draft-issue-form.tsx @@ -1,22 +1,16 @@ -import React, { FC, useState, useEffect, useRef } from "react"; -import { useRouter } from "next/router"; -import { Controller, useForm } from "react-hook-form"; -import { observer } from "mobx-react-lite"; import { Sparkle, X } from "lucide-react"; +import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; +import React, { FC, useEffect, useRef, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; // hooks -import { useApplication, useEstimate, useMention, useProject } from "hooks/store"; -import useToast from "hooks/use-toast"; +import { useApplication, useEstimate, useProject } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; +import useToast from "hooks/use-toast"; // services import { AIService } from "services/ai.service"; -import { FileService } from "services/file.service"; // components import { GptAssistantPopover } from "components/core"; -import { ParentIssuesListModal } from "components/issues"; -import { IssueLabelSelect } from "components/issues/select"; -import { CreateStateModal } from "components/states"; -import { CreateLabelModal } from "components/labels"; -import { RichTextEditorWithRef } from "@plane/rich-text-editor"; import { CycleDropdown, DateDropdown, @@ -27,15 +21,19 @@ import { ProjectMemberDropdown, StateDropdown, } from "components/dropdowns"; +import { ParentIssuesListModal } from "components/issues"; +import { IssueLabelSelect } from "components/issues/select"; +import { CreateLabelModal } from "components/labels"; +import { CreateStateModal } from "components/states"; +import { RichTextEditorWrapper } from "components/editor/rich-text-wrapper"; // ui import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui"; // helpers import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types -import type { IUser, TIssue, ISearchIssueResponse } from "@plane/types"; +import type { ISearchIssueResponse, IUser, TIssue } from "@plane/types"; const aiService = new AIService(); -const fileService = new FileService(); const defaultValues: Partial = { project_id: "", @@ -106,7 +104,6 @@ export const DraftIssueForm: FC = observer((props) => { const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false); // store hooks const { areEstimatesEnabledForProject } = useEstimate(); - const { mentionHighlights, mentionSuggestions } = useMention(); // hooks const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {}); const { setToastAlert } = useToast(); @@ -431,11 +428,8 @@ export const DraftIssueForm: FC = observer((props) => { name="description_html" control={control} render={({ field: { value, onChange } }) => ( - = observer((props) => { onChange={(description: Object, description_html: string) => { onChange(description_html); }} - mentionHighlights={mentionHighlights} - mentionSuggestions={mentionSuggestions} /> )} /> diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx index 687e32302..068920fd7 100644 --- a/web/components/issues/issue-modal/form.tsx +++ b/web/components/issues/issue-modal/form.tsx @@ -1,21 +1,16 @@ -import React, { FC, useState, useRef } from "react"; -import { useRouter } from "next/router"; -import { observer } from "mobx-react-lite"; -import { Controller, useForm } from "react-hook-form"; import { LayoutPanelTop, Sparkle, X } from "lucide-react"; -// editor -import { RichTextEditorWithRef } from "@plane/rich-text-editor"; +import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; +import { FC, useRef, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; // hooks -import { useApplication, useEstimate, useMention, useProject } from "hooks/store"; +import { useApplication, useEstimate, useProject } from "hooks/store"; import useToast from "hooks/use-toast"; // services import { AIService } from "services/ai.service"; -import { FileService } from "services/file.service"; // components +import { RichTextEditorWrapper } from "components/editor/rich-text-wrapper"; import { GptAssistantPopover } from "components/core"; -import { ParentIssuesListModal } from "components/issues"; -import { IssueLabelSelect } from "components/issues/select"; -import { CreateLabelModal } from "components/labels"; import { CycleDropdown, DateDropdown, @@ -26,12 +21,15 @@ import { ProjectMemberDropdown, StateDropdown, } from "components/dropdowns"; +import { ParentIssuesListModal } from "components/issues"; +import { IssueLabelSelect } from "components/issues/select"; +import { CreateLabelModal } from "components/labels"; // ui import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui"; // helpers import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types -import type { TIssue, ISearchIssueResponse } from "@plane/types"; +import type { ISearchIssueResponse, TIssue } from "@plane/types"; const defaultValues: Partial = { project_id: "", @@ -59,7 +57,6 @@ export interface IssueFormProps { // services const aiService = new AIService(); -const fileService = new FileService(); export const IssueFormRoot: FC = observer((props) => { const { data, onChange, onClose, onSubmit, projectId } = props; @@ -81,7 +78,6 @@ export const IssueFormRoot: FC = observer((props) => { } = useApplication(); const { getProjectById } = useProject(); const { areEstimatesEnabledForProject } = useEstimate(); - const { mentionHighlights, mentionSuggestions } = useMention(); // toast alert const { setToastAlert } = useToast(); // form info @@ -326,11 +322,8 @@ export const IssueFormRoot: FC = observer((props) => { name="description_html" control={control} render={({ field: { value, onChange } }) => ( - = observer((props) => { onChange(description_html); handleFormChange(); }} - mentionHighlights={mentionHighlights} - mentionSuggestions={mentionSuggestions} - // tabIndex={2} /> )} /> diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx index 3eb7037f2..028e2ae92 100644 --- a/web/components/issues/peek-overview/issue-detail.tsx +++ b/web/components/issues/peek-overview/issue-detail.tsx @@ -1,24 +1,19 @@ +import debounce from "lodash/debounce"; import { ChangeEvent, FC, useCallback, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; -import debounce from "lodash/debounce"; -// packages -import { RichTextEditor } from "@plane/rich-text-editor"; // hooks -import { useMention, useProject, useUser } from "hooks/store"; +import { useProject, useUser } from "hooks/store"; import useReloadConfirmations from "hooks/use-reload-confirmation"; // components +import { RichTextEditorWrapper } from "components/editor/rich-text-wrapper"; import { IssuePeekOverviewReactions } from "components/issues"; // ui import { TextArea } from "@plane/ui"; // types -import { TIssue, IUser } from "@plane/types"; -// services -import { FileService } from "services/file.service"; +import { IUser, TIssue } from "@plane/types"; // constants import { EUserProjectRoles } from "constants/project"; -const fileService = new FileService(); - interface IPeekOverviewIssueDetails { workspaceSlug: string; issue: TIssue; @@ -49,7 +44,6 @@ export const PeekOverviewIssueDetails: FC = (props) = const { membership: { currentProjectRole }, } = useUser(); - const { mentionHighlights, mentionSuggestions } = useMention(); const { getProjectById } = useProject(); // derived values const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; @@ -181,11 +175,8 @@ export const PeekOverviewIssueDetails: FC = (props) = name="description_html" control={control} render={({ field: { onChange } }) => ( - = (props) = onChange(description_html); debouncedFormSave(); }} - mentionSuggestions={mentionSuggestions} - mentionHighlights={mentionHighlights} /> )} />