fix: rich text issue description editor

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -8,7 +8,7 @@ import { IssueWidget } from "@/extensions";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
-import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
+import { useCollaborativeDocumentEditor } from "@/hooks/use-collaborative-document-editor";
 // types
 import { EditorRefApi, ICollaborativeDocumentEditor } from "@/types";
 
@@ -44,7 +44,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   }
 
   // use document editor
-  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeDocumentEditor({
     disabledExtensions,
     editable,
     editorClassName,

packages/editor/src/core/components/editors/rich-text/collaborative-editor.tsx

@@ -30,6 +30,7 @@ const CollaborativeRichTextEditor = (props: ICollaborativeRichTextEditor) => {
   const { editor } = useCollaborativeRichTextEditor({
     disabledExtensions,
     editorClassName,
+    editable: true,
     fileHandler,
     forwardedRef,
     id,

packages/editor/src/core/hooks/use-collaborative-editor.ts → packages/editor/src/core/hooks/use-collaborative-document-editor.ts

@@ -9,9 +9,9 @@ import { useEditor } from "@/hooks/use-editor";
 // plane editor extensions
 import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import { TCollaborativeEditorProps } from "@/types";
+import { TCollaborativeDocumentEditorHookProps } from "@/types";
 
-export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
+export const useCollaborativeDocumentEditor = (props: TCollaborativeDocumentEditorHookProps) => {
   const {
     onTransaction,
     disabledExtensions,

packages/editor/src/core/hooks/use-collaborative-rich-text-editor.ts

@@ -13,6 +13,7 @@ import { TCollaborativeRichTextEditorHookProps } from "@/types";
 export const useCollaborativeRichTextEditor = (props: TCollaborativeRichTextEditorHookProps) => {
   const {
     disabledExtensions,
+    editable,
     editorClassName,
     editorProps = {},
     extensions,
@@ -51,6 +52,7 @@ export const useCollaborativeRichTextEditor = (props: TCollaborativeRichTextEdit
   const editor = useEditor({
     id,
     disabledExtensions,
+    editable,
     editorProps,
     editorClassName,
     enableHistory: false,

packages/editor/src/core/types/collaboration-hook.ts

@@ -27,13 +27,9 @@ type TCollaborativeEditorHookCommonProps = {
   extensions?: Extensions;
   handleEditorReady?: (value: boolean) => void;
   id: string;
-  realtimeConfig: TRealtimeConfig;
-  serverHandler?: TServerHandler;
-  user: TUserDetails;
 };
 
 type TCollaborativeEditorHookProps = TCollaborativeEditorHookCommonProps & {
-  onTransaction?: () => void;
   embedHandler?: TEmbedConfig;
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
@@ -48,24 +44,19 @@ type TCollaborativeReadOnlyEditorHookProps = TCollaborativeEditorHookCommonProps
   mentionHandler: TReadOnlyMentionHandler;
 };
 
-export type TCollaborativeRichTextEditorHookProps = TCollaborativeEditorHookProps & {
-  onChange: (updatedDescription: Uint8Array) => void;
-  value: Uint8Array;
-};
-
-export type TCollaborativeRichTextReadOnlyEditorHookProps = TCollaborativeReadOnlyEditorHookProps & {
-  value: Uint8Array;
-};
-
 export type TCollaborativeDocumentEditorHookProps = TCollaborativeEditorHookProps & {
+  onTransaction?: () => void;
   embedHandler?: TEmbedConfig;
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
   user: TUserDetails;
 };
 
-export type TCollaborativeDocumentReadOnlyEditorHookProps = TCollaborativeReadOnlyEditorHookProps & {
-  realtimeConfig: TRealtimeConfig;
-  serverHandler?: TServerHandler;
-  user: TUserDetails;
+export type TCollaborativeRichTextEditorHookProps = TCollaborativeEditorHookProps & {
+  onChange: (updatedDescription: Uint8Array) => void;
+  value: Uint8Array;
+};
+
+export type TCollaborativeRichTextReadOnlyEditorHookProps = TCollaborativeReadOnlyEditorHookProps & {
+  value: Uint8Array;
 };

web/core/components/editor/rich-text-editor/collaborative-editor.tsx

@@ -2,43 +2,35 @@ import React, { forwardRef } from "react";
 // editor
 import { CollaborativeRichTextEditorWithRef, EditorRefApi, ICollaborativeRichTextEditor } from "@plane/editor";
 // types
-import { IUserLite } from "@plane/types";
+import { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { useMember, useMention, useUser } from "@/hooks/store";
+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";
 
 interface Props extends Omit<ICollaborativeRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
   key: string;
   projectId: string;
+  searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
   uploadFile: (file: File) => Promise<string>;
   workspaceId: string;
   workspaceSlug: string;
 }
 
 export const CollaborativeRichTextEditor = forwardRef<EditorRefApi, Props>((props, ref) => {
-  const { containerClassName, workspaceSlug, workspaceId, projectId, uploadFile, ...rest } = props;
-  // store hooks
-  const { data: currentUser } = useUser();
-  const {
-    getUserDetails,
-    project: { getProjectMemberIds },
-  } = useMember();
+  const { containerClassName, workspaceSlug, workspaceId, projectId, searchMentionCallback, uploadFile, ...rest } =
+    props;
   // editor flaggings
   const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
-  // derived values
-  const projectMemberIds = getProjectMemberIds(projectId);
-  const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
-  // use-mention
-  const { mentionHighlights, mentionSuggestions } = useMention({
-    workspaceSlug,
-    projectId,
-    members: projectMemberDetails,
-    user: currentUser,
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    searchEntity: async (payload) => await searchMentionCallback(payload),
   });
   // file size
   const { maxFileSize } = useFileSize();
@@ -55,8 +47,12 @@ export const CollaborativeRichTextEditor = forwardRef<EditorRefApi, Props>((prop
         workspaceSlug,
       })}
       mentionHandler={{
-        highlights: mentionHighlights,
-        suggestions: mentionSuggestions,
+        searchCallback: async (query) => {
+          const res = await fetchMentions(query);
+          if (!res) throw new Error("Failed in fetching mentions");
+          return res;
+        },
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
       }}
       {...rest}
       containerClassName={cn("relative pl-3", containerClassName)}

web/core/components/editor/rich-text-editor/collaborative-read-only-editor.tsx

@@ -7,11 +7,12 @@ import {
 } from "@plane/editor";
 // plane ui
 import { Loader } from "@plane/ui";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { useMention } from "@/hooks/store";
 import { useIssueDescription } from "@/hooks/use-issue-description";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
@@ -30,8 +31,6 @@ export const CollaborativeRichTextReadOnlyEditor = React.forwardRef<
   EditorReadOnlyRefApi,
   RichTextReadOnlyEditorWrapperProps
 >(({ descriptionBinary: savedDescriptionBinary, descriptionHTML, projectId, workspaceSlug, ...props }, ref) => {
-  // store hooks
-  const { mentionHighlights } = useMention({});
   // editor flaggings
   const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
 
@@ -57,7 +56,7 @@ export const CollaborativeRichTextReadOnlyEditor = React.forwardRef<
         workspaceSlug,
       })}
       mentionHandler={{
-        highlights: mentionHighlights,
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
       }}
       {...props}
       // overriding the containerClassName to add relative class passed

web/core/components/issues/description-input.tsx

@@ -15,8 +15,11 @@ import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 import { useIssueDescription } from "@/hooks/use-issue-description";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
 // services
 import { FileService } from "@/services/file.service";
+const workspaceService = new WorkspaceService();
 const fileService = new FileService();
 
 export type IssueDescriptionInputProps = {
@@ -109,6 +112,12 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
           placeholder={placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)}
           projectId={projectId}
           ref={editorRef}
+          searchMentionCallback={async (payload) =>
+            await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+              ...payload,
+              project_id: projectId?.toString() ?? "",
+            })
+          }
           uploadFile={async (file) => {
             try {
               const { asset_id } = await fileService.uploadProjectAsset(