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

makeplane · Jan 31, 2024 · 70172f8 · 70172f8
1 parent 21bc668
commit 70172f8
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/packages/editor/core/src/ui/mentions/custom.tsx b/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: {

diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/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();
       },

diff --git a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx b/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 }) => [

diff --git 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,3 @@
 import { EnterKeyExtension } from "src/ui/extensions/enter-key-extension";
 
-export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
-  // EnterKeyExtension(onEnterKeyPress),
-];
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [EnterKeyExtension(onEnterKeyPress)];
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
@@ -10,7 +10,7 @@ import { TActivityOperations } from "../root";
 import { TIssueComment } from "@plane/types";
 // icons
 import { Globe2, Lock } from "lucide-react";
-import { useWorkspace } from "hooks/store";
+import { useMention, useWorkspace } from "hooks/store";
 
 const fileService = new FileService();
 
@@ -43,6 +43,8 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
 
+  const { mentionHighlights, mentionSuggestions } = useMention();
+
   // refs
   const editorRef = useRef<any>(null);
   // react hook form
@@ -61,7 +63,14 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   };
 
   return (
-    <div>
+    <div
+    // onKeyDown={(e) => {
+    //   if (e.key === "Enter" && !e.shiftKey) {
+    //     e.preventDefault();
+    //     // handleSubmit(onSubmit)(e);
+    //   }
+    // }}
+    >
       <Controller
         name="access"
         control={control}
@@ -72,6 +81,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
             render={({ field: { value, onChange } }) => (
               <LiteTextEditorWithRef
                 onEnterKeyPress={(e) => {
+                  console.log("yo");
                   handleSubmit(onSubmit)(e);
                 }}
                 cancelUploadImage={fileService.cancelUpload}
@@ -86,6 +96,8 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 onChange={(comment_json: Object, comment_html: string) => {
                   onChange(comment_html);
                 }}
+                mentionSuggestions={mentionSuggestions}
+                mentionHighlights={mentionHighlights}
                 commentAccessSpecifier={
                   showAccessSpecifier
                     ? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess }