github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: change all RichTextEditor and RichTextEditorWithRef instances in web

Browse Source
This commit is contained in:
Palanikannan1437 2024-01-11 13:06:32 +05:30
parent 7c0711dc90
commit 07c4699b02
5 changed files with 47 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/components/inbox/modals/create-issue-modal.tsx
View File

@ -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<TIssue> = {
// services
const aiService = new AIService();
const fileService = new FileService();
export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose } = props;
@ -46,7 +44,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
const editorRef = useRef<any>(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<Props> = observer((props) => {
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditorWithRef
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
<RichTextEditorWrapper
workspaceSlug={workspaceSlug}
ref={editorRef}
debouncedUpdatesEnabled={false}
value={!value || value === "" ? "<p></p>" : value}
@ -286,8 +280,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
onChange={(description, description_html: string) => {
onChange(description_html);
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
)}
/>

22
web/components/issues/description-form.tsx
View File

@ -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<IssueDetailsProps> = (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<IssueDetailsProps> = (props) => {
</div>
)}
</div>
<span>{errors.name ? errors.name.message : null}</span>
<span>
<>{errors.name ? errors.name.message : null}</>
</span>
<div className="relative">
<Controller
name="description_html"
control={control}
render={({ field: { onChange } }) => (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
<RichTextEditorWrapper
workspaceSlug={workspaceSlug}
value={localIssueDescription.description_html}
rerenderOnPropsChange={localIssueDescription}
setShouldShowAlert={setShowAlert}
@ -181,8 +173,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
onChange(description_html);
debouncedFormSave();
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
)}
/>

36
web/components/issues/draft-issue-form.tsx
View File

@ -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<TIssue> = {
project_id: "",
@ -106,7 +104,6 @@ export const DraftIssueForm: FC<IssueFormProps> = 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<IssueFormProps> = observer((props) => {
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditorWithRef
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
<RichTextEditorWrapper
workspaceSlug={workspaceSlug as string}
ref={editorRef}
debouncedUpdatesEnabled={false}
value={
@ -447,8 +441,6 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
onChange={(description: Object, description_html: string) => {
onChange(description_html);
}}
mentionHighlights={mentionHighlights}
mentionSuggestions={mentionSuggestions}
/>
)}
/>

34
web/components/issues/issue-modal/form.tsx
View File

@ -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<TIssue> = {
project_id: "",
@ -59,7 +57,6 @@ export interface IssueFormProps {
// services
const aiService = new AIService();
const fileService = new FileService();
export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const { data, onChange, onClose, onSubmit, projectId } = props;
@ -81,7 +78,6 @@ export const IssueFormRoot: FC<IssueFormProps> = 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<IssueFormProps> = observer((props) => {
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditorWithRef
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
<RichTextEditorWrapper
workspaceSlug={workspaceSlug as string}
ref={editorRef}
debouncedUpdatesEnabled={false}
value={
@ -343,9 +336,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
onChange(description_html);
handleFormChange();
}}
mentionHighlights={mentionHighlights}
mentionSuggestions={mentionSuggestions}
// tabIndex={2}
/>
)}
/>

23
web/components/issues/peek-overview/issue-detail.tsx
View File

@ -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<IPeekOverviewIssueDetails> = (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<IPeekOverviewIssueDetails> = (props) =
name="description_html"
control={control}
render={({ field: { onChange } }) => (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
<RichTextEditorWrapper
workspaceSlug={workspaceSlug}
value={localIssueDescription.description_html}
rerenderOnPropsChange={localIssueDescription}
setShouldShowAlert={setShowAlert}
@ -199,8 +190,6 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
onChange(description_html);
debouncedFormSave();
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
)}
/>