= (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}
/>
)}
/>