refactor: accept generic function to search mentions (#6249)

Author: aaryan610

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,26 +13,24 @@ 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<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
+  searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
   workspaceSlug: string;
   workspaceId: string;
   projectId?: string;
   uploadFile: (file: File) => Promise<string>;
 }
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((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();

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<TInboxIssueDescription> = 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")}

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<IssueDescriptionInputProps> = 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 {

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<TIssue>;
@@ -49,6 +50,7 @@ type TIssueDescriptionEditorProps = {
 // services
 const aiService = new AIService();
 const fileService = new FileService();
+const projectService = new ProjectService();
 
 export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = observer((props) => {
   const {
@@ -188,6 +190,13 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = 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 {