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

@@ -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

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),
 ];

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 });

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>

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">