From f0335751b31c5d2693145ff08d74c4bf2e5b2ef9 Mon Sep 17 00:00:00 2001
From: Henit Chobisa <chobisa.henit@gmail.com>
Date: Sat, 4 Nov 2023 01:57:57 +0530
Subject: [PATCH] fix: mentions enter error (#2646)

* fix: fixed readonly lite text editor not rendering highlights

* fix: removed enter extension in lite text editor
---
 packages/editor/core/src/ui/mentions/MentionList.tsx        | 6 ++----
 .../editor/lite-text-editor/src/ui/extensions/index.tsx     | 2 +-
 packages/editor/lite-text-editor/src/ui/read-only/index.tsx | 3 +++
 web/components/issues/comment/comment-card.tsx              | 1 +
 .../issues/issue-peek-overview/activity/comment-card.tsx    | 1 +
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/editor/core/src/ui/mentions/MentionList.tsx b/packages/editor/core/src/ui/mentions/MentionList.tsx
index e8bee47d1..48aebaa11 100644
--- a/packages/editor/core/src/ui/mentions/MentionList.tsx
+++ b/packages/editor/core/src/ui/mentions/MentionList.tsx
@@ -27,8 +27,6 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
   const selectItem = (index: number) => {
     const item = props.items[index];
 
-    console.log(props.command);
-
     if (item) {
       props.command({
         id: item.id,
@@ -71,7 +69,7 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
 
       if (event.key === "Enter") {
         enterHandler();
-        return false;
+        return true;
       }
 
       return false;
@@ -79,7 +77,7 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
   }));
 
   return props.items && props.items.length !== 0 ? (
-    <div className="absolute max-h-40 bg-custom-background-100 rounded-md shadow-custom-shadow-sm text-custom-text-300 text-sm overflow-y-auto w-48 p-1 space-y-0.5">
+    <div className="mentions absolute max-h-40 bg-custom-background-100 rounded-md shadow-custom-shadow-sm text-custom-text-300 text-sm overflow-y-auto w-48 p-1 space-y-0.5">
       {props.items.length ? (
         props.items.map((item, index) => (
           <div
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
index 358f15294..4531e9516 100644
--- a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
@@ -1,5 +1,5 @@
 import { EnterKeyExtension } from "./enter-key-extension";
 
 export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
-  EnterKeyExtension(onEnterKeyPress),
+  // EnterKeyExtension(onEnterKeyPress),
 ];
diff --git a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
index 3990cb734..5dccbe977 100644
--- a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@@ -8,6 +8,7 @@ interface ICoreReadOnlyEditor {
   noBorder?: boolean;
   borderOnFocus?: boolean;
   customClassName?: string;
+  mentionHighlights: string[]
 }
 
 interface EditorCoreProps extends ICoreReadOnlyEditor {
@@ -26,10 +27,12 @@ const LiteReadOnlyEditor = ({
   customClassName,
   value,
   forwardedRef,
+  mentionHighlights
 }: EditorCoreProps) => {
   const editor = useReadOnlyEditor({
     value,
     forwardedRef,
+    mentionHighlights
   });
 
   const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
index 9adff158e..e409122e9 100644
--- a/web/components/issues/comment/comment-card.tsx
+++ b/web/components/issues/comment/comment-card.tsx
@@ -147,6 +147,7 @@ export const CommentCard: React.FC<Props> = ({
               ref={showEditorRef}
               value={comment.comment_html}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={editorSuggestions.mentionHighlights}
             />
             <CommentReaction projectId={comment.project} commentId={comment.id} />
           </div>
diff --git a/web/components/issues/issue-peek-overview/activity/comment-card.tsx b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
index 39b4e11f7..fc8fbf179 100644
--- a/web/components/issues/issue-peek-overview/activity/comment-card.tsx
+++ b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
@@ -158,6 +158,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
               ref={showEditorRef}
               value={comment.comment_html}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={editorSuggestions.mentionHighlights}
             />
 
             <div className="mt-1">