diff --git a/apps/client/src/features/comment/components/comment-actions.tsx b/apps/client/src/features/comment/components/comment-actions.tsx index e5c4f1a2..882c6f74 100644 --- a/apps/client/src/features/comment/components/comment-actions.tsx +++ b/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 ( {isCommentEditor && ( diff --git a/apps/client/src/features/comment/components/comment-dialog.tsx b/apps/client/src/features/comment/components/comment-dialog.tsx index 080c731f..7a4b55aa 100644 --- a/apps/client/src/features/comment/components/comment-dialog.tsx +++ b/apps/client/src/features/comment/components/comment-dialog.tsx @@ -124,6 +124,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) { { + 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()); }, diff --git a/apps/client/src/features/comment/components/comment-list-item.tsx b/apps/client/src/features/comment/components/comment-list-item.tsx index 9e136a1d..cbf2a4e9 100644 --- a/apps/client/src/features/comment/components/comment-list-item.tsx +++ b/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} /> diff --git a/apps/client/src/features/comment/components/comment-list.tsx b/apps/client/src/features/comment/components/comment-list.tsx index 6f0d877a..1aded495 100644 --- a/apps/client/src/features/comment/components/comment-list.tsx +++ b/apps/client/src/features/comment/components/comment-list.tsx @@ -151,6 +151,7 @@ const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => { {focused && } diff --git a/apps/client/src/features/comment/components/comment.module.css b/apps/client/src/features/comment/components/comment.module.css index 5679c9b2..dad0d94a 100644 --- a/apps/client/src/features/comment/components/comment.module.css +++ b/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; } diff --git a/apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts b/apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts index ba035a8b..82fb24a9 100644 --- a/apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts +++ b/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: {