Fix comment editor

packages/legacy-editor/__snapshots__/components/editorViews/Discussion/__tests__/Comment.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`DiscussionList > Comment renders UserBlock content normally 1`] = `
         </span>
       </div>
       <div
-        class="mc-c-lbvXeI"
+        class="mc-c-kgyTAE"
       >
         <span
           class="mc-c-dUBPbm"
@@ -74,7 +74,7 @@ exports[`DiscussionList > Comment renders paragraph content normally 1`] = `
         </span>
       </div>
       <div
-        class="mc-c-lbvXeI"
+        class="mc-c-kgyTAE"
       >
         <p>
           <span>
@@ -115,7 +115,7 @@ exports[`DiscussionList > Comment renders text content normally 1`] = `
         </span>
       </div>
       <div
-        class="mc-c-lbvXeI"
+        class="mc-c-kgyTAE"
       >
         <span>
           text

packages/legacy-editor/__snapshots__/components/editorViews/Discussion/__tests__/Conversation/Conversation.test.tsx.snap

@@ -88,7 +88,7 @@ exports[`DiscussionList > Conversation matches correct snapshot 1`] = `
         </span>
       </span>
       <div
-        class="mc-c-iXznah"
+        class="mc-c-hrjnum"
         data-placeholder=""
       >
         <div

packages/legacy-editor/__snapshots__/editors/commentEditor/__tests__/commentEditor.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`commentEditor renders commentEditor correctly 1`] = `
       </span>
     </span>
     <div
-      class="mc-c-iXznah"
+      class="mc-c-hrjnum"
       data-placeholder="discussion.editor.placeholder"
     >
       <div

packages/legacy-editor/src/components/editorViews/Discussion/Comment.tsx

@@ -43,7 +43,8 @@ const CommentContent = styled('div', {
     fontSize: theme.fontSizes.callout,
     fontWeight: 400,
     lineHeight: '1.125rem',
-    marginBottom: 0
+    marginBottom: 0,
+    wordBreak: 'break-all'
   }
 })
 

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.style.ts

@@ -23,7 +23,8 @@ export const EditorInput = styled(EditorContent, {
     '& p': {
       fontSize: theme.fontSizes.callout,
       lineHeight: '1rem',
-      marginBottom: 0
+      margin: 0,
+      wordBreak: 'break-all'
     }
   }
 })

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'