From 8823bf1a241889aa901bf6c2d9efe6d4cd12a16d Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 20 Dec 2024 15:44:32 +0530 Subject: [PATCH] refactor: accept generic function to search mentions --- .../editor/rich-text-editor/rich-text-editor.tsx | 12 ++++++------ .../inbox/modals/create-modal/issue-description.tsx | 5 +++++ web/core/components/issues/description-input.tsx | 9 +++++++++ .../issue-modal/components/description-editor.tsx | 9 +++++++++ 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/web/core/components/editor/rich-text-editor/rich-text-editor.tsx b/web/core/components/editor/rich-text-editor/rich-text-editor.tsx index 41d67a1c645..e3b5aa7a313 100644 --- a/web/core/components/editor/rich-text-editor/rich-text-editor.tsx +++ b/web/core/components/editor/rich-text-editor/rich-text-editor.tsx @@ -1,6 +1,8 @@ import React, { forwardRef } from "react"; // editor import { EditorRefApi, IRichTextEditor, RichTextEditorWithRef } from "@plane/editor"; +// plane types +import { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types"; // components import { EditorMentionsRoot } from "@/components/editor"; // helpers @@ -11,12 +13,10 @@ import { useEditorMention } from "@/hooks/use-editor-mention"; // plane web hooks import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging"; import { useFileSize } from "@/plane-web/hooks/use-file-size"; -// services -import { ProjectService } from "@/services/project"; -const projectService = new ProjectService(); interface RichTextEditorWrapperProps extends Omit { + searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise; workspaceSlug: string; workspaceId: string; projectId?: string; @@ -24,13 +24,13 @@ interface RichTextEditorWrapperProps } export const RichTextEditor = forwardRef((props, ref) => { - const { containerClassName, workspaceSlug, workspaceId, projectId, uploadFile, ...rest } = props; + const { containerClassName, workspaceSlug, workspaceId, projectId, searchMentionCallback, uploadFile, ...rest } = + props; // editor flaggings const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString()); // use editor mention const { fetchMentions } = useEditorMention({ - searchEntity: async (payload) => - await projectService.searchEntity(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "", payload), + searchEntity: async (payload) => await searchMentionCallback(payload), }); // file size const { maxFileSize } = useFileSize(); diff --git a/web/core/components/inbox/modals/create-modal/issue-description.tsx b/web/core/components/inbox/modals/create-modal/issue-description.tsx index b9bad6c11ac..14816cbc0d2 100644 --- a/web/core/components/inbox/modals/create-modal/issue-description.tsx +++ b/web/core/components/inbox/modals/create-modal/issue-description.tsx @@ -21,7 +21,9 @@ import { useProjectInbox } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; // services import { FileService } from "@/services/file.service"; +import { ProjectService } from "@/services/project"; const fileService = new FileService(); +const projectService = new ProjectService(); type TInboxIssueDescription = { containerClassName?: string; @@ -72,6 +74,9 @@ export const InboxIssueDescription: FC = observer((props dragDropEnabled={false} onChange={(_description: object, description_html: string) => handleData("description_html", description_html)} placeholder={getDescriptionPlaceholder} + searchMentionCallback={async (payload) => + await projectService.searchEntity(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "", payload) + } containerClassName={containerClassName} onEnterKeyPress={onEnterKeyPress} tabIndex={getIndex("description_html")} diff --git a/web/core/components/issues/description-input.tsx b/web/core/components/issues/description-input.tsx index 9b9abe0387f..32964cec1f6 100644 --- a/web/core/components/issues/description-input.tsx +++ b/web/core/components/issues/description-input.tsx @@ -18,7 +18,9 @@ import { getDescriptionPlaceholder } from "@/helpers/issue.helper"; import { useWorkspace } from "@/hooks/store"; // services import { FileService } from "@/services/file.service"; +import { ProjectService } from "@/services/project"; const fileService = new FileService(); +const projectService = new ProjectService(); export type IssueDescriptionInputProps = { containerClassName?: string; @@ -118,6 +120,13 @@ export const IssueDescriptionInput: FC = observer((p placeholder={ placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value) } + searchMentionCallback={async (payload) => + await projectService.searchEntity( + workspaceSlug?.toString() ?? "", + projectId?.toString() ?? "", + payload + ) + } containerClassName={containerClassName} uploadFile={async (file) => { try { diff --git a/web/core/components/issues/issue-modal/components/description-editor.tsx b/web/core/components/issues/issue-modal/components/description-editor.tsx index 316668d0107..19ddbc1f40a 100644 --- a/web/core/components/issues/issue-modal/components/description-editor.tsx +++ b/web/core/components/issues/issue-modal/components/description-editor.tsx @@ -26,6 +26,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; // services import { AIService } from "@/services/ai.service"; import { FileService } from "@/services/file.service"; +import { ProjectService } from "@/services/project"; type TIssueDescriptionEditorProps = { control: Control; @@ -49,6 +50,7 @@ type TIssueDescriptionEditorProps = { // services const aiService = new AIService(); const fileService = new FileService(); +const projectService = new ProjectService(); export const IssueDescriptionEditor: React.FC = observer((props) => { const { @@ -188,6 +190,13 @@ export const IssueDescriptionEditor: React.FC = ob ref={editorRef} tabIndex={getIndex("description_html")} placeholder={getDescriptionPlaceholder} + searchMentionCallback={async (payload) => + await projectService.searchEntity( + workspaceSlug?.toString() ?? "", + projectId?.toString() ?? "", + payload + ) + } containerClassName="pt-3 min-h-[120px]" uploadFile={async (file) => { try {