feat(comment-editor): sends comment when pressing Enter

resolve #326

Press 'Enter' t osend comment.
Press 'Shift-Enter' to add new line.

packages/legacy-editor/src/components/editorViews/Discussion/Conversation/useConversationEffects.ts

@@ -23,7 +23,7 @@ export function useConversationEffects(
         await addComment?.(conversationItem.id, content)
       }
 
-      editor.commands.clearContent(true)
+      editor.commands.clearContent()
     },
     [addComment, addConversation, conversationItem]
   )

packages/legacy-editor/src/editors/commentEditor/commentEditor.tsx

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, useCallback, useEffect } from 'react'
+import { FC, MouseEvent, useCallback, useEffect, useRef } from 'react'
 import { Editor, JSONContent } from '@tiptap/core'
 import { Button } from '@mashcard/design-system'
 import { MashcardEventBus, DiscussionMarkInactive } from '@mashcard/schema'
@@ -18,15 +18,32 @@ export interface CommentEditorProps {
 
 export const CommentEditorContent: FC<CommentEditorProps> = ({ markId, onSend, mentionCommandsOptions }) => {
   const [t] = useEditorI18n()
-  const editor = useCommentEditor({ defaultContent: getDraft(markId), mentionCommands: mentionCommandsOptions })
-  const [placeholder] = usePlaceholder(editor)
 
-  useContentUpdated(editor, markId)
+  const editor = useRef<Editor | null>(null)
+
+  const handleSend = useCallback(
+    (event?: MouseEvent) => {
+      event?.stopPropagation()
+      console.log('editor', editor)
+      if (!editor.current) return
+      onSend?.(editor.current, getDraft(markId))
+    },
+    [markId, onSend]
+  )
+
+  editor.current = useCommentEditor({
+    defaultContent: getDraft(markId),
+    mentionCommands: mentionCommandsOptions,
+    onSendComment: handleSend
+  })
+  const [placeholder] = usePlaceholder(editor.current)
+
+  useContentUpdated(editor.current, markId)
 
   useEffect(() => {
     // setTimeout for avoiding scroll event conflict with discussion mark
     setTimeout(() => {
-      if (editor?.isFocused) editor?.commands.scrollIntoView()
+      if (editor.current?.isFocused) editor.current?.commands.scrollIntoView()
     }, 70)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -40,15 +57,6 @@ export const CommentEditorContent: FC<CommentEditorProps> = ({ markId, onSend, m
     [markId]
   )
 
-  const handleSend = useCallback(
-    (event: MouseEvent) => {
-      event.stopPropagation()
-      if (!editor) return
-      onSend?.(editor, getDraft(markId))
-    },
-    [editor, markId, onSend]
-  )
-
   const handleContainerClick = useCallback((event: MouseEvent) => {
     event.stopPropagation()
   }, [])
@@ -57,9 +65,9 @@ export const CommentEditorContent: FC<CommentEditorProps> = ({ markId, onSend, m
     <>
       <EditorContainer onClick={handleContainerClick}>
         <EditorAvatar size="sm" />
-        <EditorInput editor={editor} data-placeholder={placeholder} />
+        <EditorInput editor={editor.current} data-placeholder={placeholder} />
       </EditorContainer>
-      {!editor?.isEmpty && (
+      {!editor.current?.isEmpty && (
         <ActionsRow onClick={handleContainerClick}>
           <Button onClick={handleCancel} size="sm">
             {t('discussion.editor.cancel')}

packages/legacy-editor/src/editors/commentEditor/useCommentEditor.ts

@@ -1,13 +1,19 @@
 import { Editor, Content } from '@tiptap/core'
 import { useEditor } from '../../tiptapRefactor'
+import { Comment } from '../../extensions'
 import { Base, BaseOptions } from '../../extensions/base'
 
 export interface CommentEditorOptions {
   defaultContent?: Content
+  onSendComment: () => void
   mentionCommands: BaseOptions['mentionCommands']
 }
 
-export function useCommentEditor({ defaultContent, mentionCommands }: CommentEditorOptions): Editor | null {
+export function useCommentEditor({
+  defaultContent,
+  mentionCommands,
+  onSendComment
+}: CommentEditorOptions): Editor | null {
   return useEditor({
     autofocus: 'end',
     content: defaultContent,
@@ -34,6 +40,9 @@ export function useCommentEditor({ defaultContent, mentionCommands }: CommentEdi
         user: {
           size: 'sm'
         }
+      }),
+      Comment.configure({
+        onSendComment
       })
     ]
   })

packages/legacy-editor/src/extensions/extensions/comment/comment.ts

@@ -0,0 +1,40 @@
+import { Extension } from '@tiptap/core'
+import { meta, CommentOptions, CommentAttributes } from './meta'
+
+export const Comment = Extension.create<CommentOptions, CommentAttributes>({
+  name: meta.name,
+
+  addKeyboardShortcuts() {
+    const handleShiftEnter = (): boolean =>
+      this.editor.commands.first(({ commands }) => [
+        () => commands.newlineInCode(),
+        () => commands.createParagraphNear(),
+        () => commands.liftEmptyBlock(),
+        () => commands.splitBlock()
+      ])
+
+    const handleEnter = (): boolean => {
+      if (this.options.onSendComment) {
+        this.options.onSendComment()
+      }
+      return true
+    }
+
+    return {
+      Enter: handleEnter,
+      'Shift-Enter': handleShiftEnter
+    }
+  },
+
+  addCommands() {
+    return {
+      insertBlockAt:
+        (content, position) =>
+        ({ chain }) => {
+          return position === undefined
+            ? chain().insertContent(content).run()
+            : chain().insertContentAt(position, content).run()
+        }
+    }
+  }
+})

packages/legacy-editor/src/extensions/extensions/comment/index.ts

@@ -0,0 +1 @@
+export * from './comment'

packages/legacy-editor/src/extensions/extensions/comment/meta.ts

@@ -0,0 +1,12 @@
+import { ExtensionMeta } from '../../common'
+
+export interface CommentOptions {
+  onSendComment?: () => void
+}
+
+export interface CommentAttributes {}
+
+export const meta: ExtensionMeta = {
+  name: 'comment',
+  extensionType: 'extension'
+}

packages/legacy-editor/src/extensions/extensions/index.ts

@@ -1,6 +1,7 @@
 export * from './brickList'
 export * from './bubbleMenu'
 export * from './commandHelper'
+export * from './comment'
 export * from './dropBlock'
 export * from './dropcursor'
 export * from './eventHandler'