fix: adding back enter key extension with mentions (#3499)

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

@@ -10,6 +10,11 @@ export interface CustomMentionOptions extends MentionOptions {
 }
 
 export const CustomMention = Mention.extend<CustomMentionOptions>({
+  addStorage(this) {
+    return {
+      mentionsOpen: false,
+    };
+  },
   addAttributes() {
     return {
       id: {

packages/editor/core/src/ui/mentions/suggestion.ts

@@ -14,6 +14,7 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
 
     return {
       onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+        props.editor.storage.mentionsOpen = true;
         reactRenderer = new ReactRenderer(MentionList, {
           props,
           editor: props.editor,
@@ -45,10 +46,18 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
           return true;
         }
 
-        // @ts-ignore
-        return reactRenderer?.ref?.onKeyDown(props);
+        const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+
+        if (navigationKeys.includes(props.event.key)) {
+          // @ts-ignore
+          reactRenderer?.ref?.onKeyDown(props);
+          event?.stopPropagation();
+          return true;
+        }
+        return false;
       },
-      onExit: () => {
+      onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
+        props.editor.storage.mentionsOpen = false;
         popup?.[0].destroy();
         reactRenderer?.destroy();
       },

packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx

@@ -4,13 +4,16 @@ export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
   Extension.create({
     name: "enterKey",
 
-    addKeyboardShortcuts() {
+    addKeyboardShortcuts(this) {
       return {
         Enter: () => {
-          if (onEnterKeyPress) {
-            onEnterKeyPress();
+          if (!this.editor.storage.mentionsOpen) {
+            if (onEnterKeyPress) {
+              onEnterKeyPress();
+            }
+            return true;
           }
-          return true;
+          return false;
         },
         "Shift-Enter": ({ editor }) =>
           editor.commands.first(({ commands }) => [

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

@@ -1,5 +1,3 @@
 import { EnterKeyExtension } from "src/ui/extensions/enter-key-extension";
 
-export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
-  // EnterKeyExtension(onEnterKeyPress),
-];
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [EnterKeyExtension(onEnterKeyPress)];