removed comments and cleaned up types

packages/editor/core/src/hooks/use-editor.tsx

@@ -48,7 +48,6 @@ export const useEditor = ({
   mentionHighlights,
   mentionSuggestions,
 }: CustomEditorProps) => {
-  console.log("the mentions", mentionHighlights);
   const editor = useCustomEditor(
     {
       editorProps: {

packages/editor/core/src/hooks/use-read-only-editor.tsx

@@ -3,7 +3,7 @@ import { useImperativeHandle, useRef, MutableRefObject } from "react";
 import { CoreReadOnlyEditorExtensions } from "src/ui/read-only/extensions";
 import { CoreReadOnlyEditorProps } from "src/ui/read-only/props";
 import { EditorProps } from "@tiptap/pm/view";
-import { IMentionSuggestion } from "src/types/mention-suggestion";
+import { IMentionHighlight, IMentionSuggestion } from "src/types/mention-suggestion";
 
 interface CustomReadOnlyEditorProps {
   value: string;
@@ -14,8 +14,8 @@ interface CustomReadOnlyEditorProps {
     id: string;
     description_html: string;
   };
-  mentionHighlights?: string[];
-  mentionSuggestions?: IMentionSuggestion[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
 }
 
 export const useReadOnlyEditor = ({
@@ -37,8 +37,8 @@ export const useReadOnlyEditor = ({
       },
       extensions: [
         ...CoreReadOnlyEditorExtensions({
-          mentionSuggestions: mentionSuggestions ?? [],
-          mentionHighlights: mentionHighlights ?? [],
+          mentionSuggestions: mentionSuggestions,
+          mentionHighlights: mentionHighlights,
         }),
         ...extensions,
       ],

packages/editor/core/src/types/mention-suggestion.ts

@@ -2,6 +2,8 @@ import { Editor, Range } from "@tiptap/react";
 export type IMentionSuggestion = {
   id: string;
   type: string;
+  entity_name: string;
+  entity_identifier: string;
   avatar: string;
   title: string;
   subtitle: string;

packages/editor/core/src/ui/extensions/index.tsx

@@ -109,5 +109,9 @@ export const CoreEditorExtensions = (
   TableHeader,
   TableCell,
   TableRow,
-  Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false),
+  Mentions({
+    mentionSuggestions: mentionConfig.mentionSuggestions,
+    mentionHighlights: mentionConfig.mentionHighlights,
+    readonly: false,
+  }),
 ];

packages/editor/core/src/ui/mentions/index.tsx

@@ -7,11 +7,15 @@ import tippy from "tippy.js";
 import { v4 as uuidv4 } from "uuid";
 import { MentionList } from "src/ui/mentions/mention-list";
 
-export const Mentions = (
-  mentionSuggestions: () => Promise<IMentionSuggestion[]>,
-  mentionHighlights: () => Promise<IMentionHighlight[]>,
-  readonly: boolean
-) =>
+export const Mentions = ({
+  mentionHighlights,
+  mentionSuggestions,
+  readonly,
+}: {
+  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  readonly: boolean;
+}) =>
   CustomMention.configure({
     HTMLAttributes: {
       class: "mention",
@@ -20,7 +24,10 @@ export const Mentions = (
     mentionHighlights: mentionHighlights,
     suggestion: {
       items: async ({ query }) => {
-        const suggestions = await mentionSuggestions();
+        const suggestions = await mentionSuggestions?.();
+        if (!suggestions) {
+          return [];
+        }
         const mappedSuggestions: IMentionSuggestion[] = suggestions.map((suggestion): IMentionSuggestion => {
           const transactionId = uuidv4();
           return {
@@ -37,7 +44,7 @@ export const Mentions = (
       },
       // @ts-ignore
       render: () => {
-        let reactRenderer: ReactRenderer | null = null;
+        let component: ReactRenderer | null = null;
         let popup: any | null = null;
 
         const hidePopup = () => {
@@ -48,7 +55,7 @@ export const Mentions = (
             if (!props.clientRect) {
               return;
             }
-            reactRenderer = new ReactRenderer(MentionList, {
+            component = new ReactRenderer(MentionList, {
               props,
               editor: props.editor,
             });
@@ -57,16 +64,16 @@ export const Mentions = (
             popup = tippy("body", {
               getReferenceClientRect: props.clientRect,
               appendTo: () => document.body,
-              content: reactRenderer.element,
+              content: component.element,
               showOnCreate: true,
               interactive: true,
               trigger: "manual",
               placement: "bottom-start",
             });
-            // document.addEventListener("scroll", hidePopup, true);
+            document.addEventListener("scroll", hidePopup, true);
           },
           onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
-            reactRenderer?.updateProps(props);
+            component?.updateProps(props);
 
             if (!props.clientRect) {
               return;
@@ -89,7 +96,7 @@ export const Mentions = (
 
             if (navigationKeys.includes(props.event.key)) {
               // @ts-ignore
-              reactRenderer?.ref?.onKeyDown(props);
+              component?.ref?.onKeyDown(props);
               event?.stopPropagation();
               return true;
             }
@@ -98,9 +105,9 @@ export const Mentions = (
           onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
             props.editor.storage.mentionsOpen = false;
             popup?.[0].destroy();
-            reactRenderer?.destroy();
+            component?.destroy();
 
-            // document.removeEventListener("scroll", hidePopup, true);
+            document.removeEventListener("scroll", hidePopup, true);
           },
         };
       },

packages/editor/core/src/ui/mentions/mention-list.tsx

@@ -4,15 +4,20 @@ import { IMentionSuggestion } from "src/types/mention-suggestion";
 
 interface MentionListProps {
   items: IMentionSuggestion[];
-  command: (item: { id: string; label: string; target: string; redirect_uri: string }) => void;
+  command: (item: {
+    id: string;
+    label: string;
+    entity_name: string;
+    entity_identifier: string;
+    target: string;
+    redirect_uri: string;
+  }) => void;
   editor: Editor;
 }
 
-// eslint-disable-next-line react/display-name
 export const MentionList = forwardRef((props: MentionListProps, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
-  console.log("props", props);
   const selectItem = (index: number) => {
     const item = props.items[index];
 

packages/editor/core/src/ui/mentions/mention-node-view.tsx

@@ -9,17 +9,15 @@ import { useEffect, useState } from "react";
 // eslint-disable-next-line import/no-anonymous-default-export
 export const MentionNodeView = (props) => {
   const router = useRouter();
-  // const highlights = props.extension.options.mentionHighlights as IMentionHighlight[];
-  const [highlightsState, setHighlightsState] = useState();
+  const [highlightsState, setHighlightsState] = useState<IMentionHighlight[]>();
 
   useEffect(() => {
-    console.log("hightlights type", props.extension.options.mentionHighlights);
     const hightlights = async () => {
       const userId = await props.extension.options.mentionHighlights();
       setHighlightsState(userId);
     };
     hightlights();
-  }, []);
+  }, [props.extension.options]);
 
   const handleClick = () => {
     if (!props.extension.options.readonly) {
@@ -27,7 +25,6 @@ export const MentionNodeView = (props) => {
     }
   };
 
-  console.log("state of highlight", highlightsState);
   return (
     <NodeViewWrapper className="mention-component inline w-fit">
       <span

packages/editor/core/src/ui/read-only/extensions.tsx

@@ -15,12 +15,12 @@ import { TableRow } from "src/ui/extensions/table/table-row/table-row";
 import { ReadOnlyImageExtension } from "src/ui/extensions/image/read-only-image";
 import { isValidHttpUrl } from "src/lib/utils";
 import { Mentions } from "src/ui/mentions";
-import { IMentionSuggestion } from "src/types/mention-suggestion";
+import { IMentionHighlight, IMentionSuggestion } from "src/types/mention-suggestion";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
 
 export const CoreReadOnlyEditorExtensions = (mentionConfig: {
-  mentionSuggestions: IMentionSuggestion[];
-  mentionHighlights: string[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
 }) => [
   StarterKit.configure({
     bulletList: {
@@ -95,5 +95,9 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   TableHeader,
   TableCell,
   TableRow,
-  Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
+  Mentions({
+    mentionSuggestions: mentionConfig.mentionSuggestions,
+    mentionHighlights: mentionConfig.mentionHighlights,
+    readonly: true,
+  }),
 ];

packages/editor/document-editor/src/ui/index.tsx

@@ -7,6 +7,7 @@ import {
   getEditorClassNames,
   useEditor,
   IMentionSuggestion,
+  IMentionHighlight,
 } from "@plane/editor-core";
 import { DocumentEditorExtensions } from "src/ui/extensions";
 import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "src/types/menu-actions";
@@ -50,17 +51,14 @@ interface IDocumentEditor {
   debouncedUpdatesEnabled?: boolean;
   isSubmitting: "submitting" | "submitted" | "saved";
 
-  mentionHighlights?: string[];
-  mentionSuggestions?: IMentionSuggestion[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
 
   // embed configuration
   duplicationConfig?: IDuplicationConfig;
   pageLockConfig?: IPageLockConfig;
   pageArchiveConfig?: IPageArchiveConfig;
 }
-interface DocumentEditorProps extends IDocumentEditor {
-  forwardedRef?: React.Ref<EditorHandle>;
-}
 
 interface EditorHandle {
   clearEditor: () => void;
@@ -126,7 +124,6 @@ const DocumentEditor = ({
     extensions: DocumentEditorExtensions(uploadFile, setHideDragHandleFunction, setIsSubmitting),
   });
 
-  console.log("in document editor", mentionHighlights);
   if (!editor) {
     return null;
   }

packages/editor/document-editor/src/ui/readonly/index.tsx

@@ -1,4 +1,4 @@
-import { getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
+import { getEditorClassNames, IMentionHighlight, useReadOnlyEditor } from "@plane/editor-core";
 import { useRouter } from "next/router";
 import { useState, forwardRef, useEffect } from "react";
 import { EditorHeader } from "src/ui/components/editor-header";
@@ -22,7 +22,7 @@ interface IDocumentReadOnlyEditor {
   documentDetails: DocumentDetails;
   pageLockConfig?: IPageLockConfig;
   pageArchiveConfig?: IPageArchiveConfig;
-  mentionHighlights?: string[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
 
   pageDuplicationConfig?: IDuplicationConfig;
   onActionCompleteHandler: (action: {
@@ -71,6 +71,7 @@ const DocumentReadOnlyEditor = ({
     if (editor) {
       updateMarkings(editor.getJSON());
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 
   if (!editor) {

packages/editor/extensions/src/extensions/slash-commands.tsx

@@ -330,7 +330,7 @@ const renderItems = () => {
         appendTo: () => document.body,
         content: component.element,
         showOnCreate: true,
-        // interactive: true,
+        interactive: true,
         trigger: "manual",
         placement: "bottom-start",
       });

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -8,6 +8,7 @@ import {
   EditorContentWrapper,
   getEditorClassNames,
   useEditor,
+  IMentionHighlight,
 } from "@plane/editor-core";
 import { FixedMenu } from "src/ui/menus/fixed-menu";
 import { LiteTextEditorExtensions } from "src/ui/extensions";
@@ -39,8 +40,8 @@ interface ILiteTextEditor {
   };
   onEnterKeyPress?: (e?: any) => void;
   cancelUploadImage?: () => any;
-  mentionHighlights?: string[];
-  mentionSuggestions?: IMentionSuggestion[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
   submitButton?: React.ReactNode;
 }
 

packages/editor/lite-text-editor/src/ui/read-only/index.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  IMentionHighlight,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
 
 interface ICoreReadOnlyEditor {
   value: string;
@@ -7,7 +13,7 @@ interface ICoreReadOnlyEditor {
   noBorder?: boolean;
   borderOnFocus?: boolean;
   customClassName?: string;
-  mentionHighlights: string[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
 }
 
 interface EditorCoreProps extends ICoreReadOnlyEditor {

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -4,6 +4,7 @@ import {
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
+  IMentionHighlight,
   IMentionSuggestion,
   RestoreImage,
   UploadImage,
@@ -33,8 +34,8 @@ export type IRichTextEditor = {
   setShouldShowAlert?: (showAlert: boolean) => void;
   forwardedRef?: any;
   debouncedUpdatesEnabled?: boolean;
-  mentionHighlights?: string[];
-  mentionSuggestions?: IMentionSuggestion[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
 };
 
 export interface RichTextEditorProps extends IRichTextEditor {

packages/editor/rich-text-editor/src/ui/read-only/index.tsx

@@ -1,5 +1,11 @@
 "use client";
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  IMentionHighlight,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
 import * as React from "react";
 
 interface IRichTextReadOnlyEditor {
@@ -8,7 +14,7 @@ interface IRichTextReadOnlyEditor {
   noBorder?: boolean;
   borderOnFocus?: boolean;
   customClassName?: string;
-  mentionHighlights?: string[];
+  mentionHighlights?: () => Promise<IMentionHighlight[]>;
 }
 
 interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {

web/hooks/store/use-mention.ts

@@ -48,7 +48,6 @@ export const useMention = ({ workspaceSlug, projectId }: { workspaceSlug: string
     });
 
   const mentionHighlights = async () => {
-    console.log("isme aaya highlights");
     if (!userDataLoading && userRef.current) {
       return [userRef.current.id];
     } else {
@@ -85,7 +84,6 @@ export const useMention = ({ workspaceSlug, projectId }: { workspaceSlug: string
     } else {
       // Wait for data to be available
       const members = await waitForData();
-      console.log("isme aaya", members);
       return members.map((memberDetails) => ({
         entity_name: "user_mention",
         entity_identifier: `${memberDetails?.member?.id}`,