feat: comment editor emoji picker and ctrl+enter action (#1121)

* commenteditor-emoji-picker

* capture Mac command key
* remove tooltip

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/src/features/comment/components/comment-actions.tsx

@@ -1,4 +1,4 @@
-import { Button, Group } from "@mantine/core";
+import { Button, Group, Tooltip } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 type CommentActionsProps = {
@@ -15,7 +15,7 @@ function CommentActions({
   isCommentEditor,
 }: CommentActionsProps) {
   const { t } = useTranslation();
-  
+
   return (
     <Group justify="flex-end" pt="sm" wrap="nowrap">
       {isCommentEditor && (

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -124,6 +124,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
 
         <CommentEditor
           onUpdate={handleCommentEditorChange}
+          onSave={handleAddComment}
           placeholder={t("Write a comment")}
           editable={true}
           autofocus={true}

apps/client/src/features/comment/components/comment-editor.tsx

@@ -8,10 +8,12 @@ import { useFocusWithin } from "@mantine/hooks";
 import clsx from "clsx";
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 import { useTranslation } from "react-i18next";
+import EmojiCommand from "@/features/editor/extensions/emoji-command";
 
 interface CommentEditorProps {
   defaultContent?: any;
   onUpdate?: any;
+  onSave?: any;
   editable: boolean;
   placeholder?: string;
   autofocus?: boolean;
@@ -22,6 +24,7 @@ const CommentEditor = forwardRef(
     {
       defaultContent,
       onUpdate,
+      onSave,
       editable,
       placeholder,
       autofocus,
@@ -42,7 +45,35 @@ const CommentEditor = forwardRef(
         }),
         Underline,
         Link,
+        EmojiCommand,
       ],
+      editorProps: {
+        handleDOMEvents: {
+          keydown: (_view, event) => {
+            if (
+              [
+                "ArrowUp",
+                "ArrowDown",
+                "ArrowLeft",
+                "ArrowRight",
+                "Enter",
+              ].includes(event.key)
+            ) {
+              const emojiCommand = document.querySelector("#emoji-command");
+              if (emojiCommand) {
+                return true;
+              }
+            }
+
+            if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+              event.preventDefault();
+              if (onSave) onSave();
+
+              return true;
+            }
+          },
+        },
+      },
       onUpdate({ editor }) {
         if (onUpdate) onUpdate(editor.getJSON());
       },

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -140,6 +140,7 @@ function CommentListItem({ comment, pageId }: CommentListItemProps) {
               defaultContent={content}
               editable={true}
               onUpdate={(newContent: any) => setContent(newContent)}
+              onSave={handleUpdateComment}
               autofocus={true}
             />
 

apps/client/src/features/comment/components/comment-list.tsx

@@ -151,6 +151,7 @@ const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
       <CommentEditor
         ref={commentEditorRef}
         onUpdate={setContent}
+        onSave={handleSave}
         editable={true}
       />
       {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}

apps/client/src/features/comment/components/comment.module.css

@@ -17,17 +17,19 @@
 .commentEditor {
 
     .focused {
+        border-radius: var(--mantine-radius-sm);
         box-shadow: 0 0 0 2px var(--mantine-color-blue-3);
     }
 
     .ProseMirror :global(.ProseMirror){
+        border-radius: var(--mantine-radius-sm);
         max-width: 100%;
         white-space: pre-wrap;
         word-break: break-word;
         max-height: 20vh;
         padding-left: 6px;
         padding-right: 6px;
-        margin-top: 2px;
+        margin-top: 10px;
         margin-bottom: 2px;
         overflow: hidden auto;
     }

apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts

@@ -33,7 +33,7 @@ const renderEmojiItems = () => {
         showOnCreate: true,
         interactive: true,
         trigger: "manual",
-        placement: "bottom-start",
+        placement: "bottom",
       });
     },
     onStart: (props: {