feat(UI):The editor has added the button function

moon/apps/web/components/Reactions/ComposerReactionPicker.tsx

@@ -2,11 +2,12 @@ import { Button, FaceSmilePlusIcon } from '@gitmono/ui'
 
 import { MarkdownEditorRef } from '../MarkdownEditor'
 import { ReactionPicker } from './ReactionPicker'
+import { SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent'
 
 interface ComposerReactionPickerProps {
   open?: boolean
   onOpenChange?: (value: boolean) => void
-  editorRef: React.RefObject<MarkdownEditorRef>
+  editorRef: React.RefObject<MarkdownEditorRef> | React.RefObject<SimpleNoteContentRef>
   disabled?: boolean
 }
 

moon/apps/web/components/SimpleNoteEditor/SimpleNoteContent.tsx

@@ -45,6 +45,8 @@ export interface SimpleNoteContentRef {
   handleDragOver(isOver: boolean, event: DragEvent): void
   editor: TTEditor | null
   clearAndBlur(): void
+  insertReaction: TTEditor['commands']['insertReaction']
+  uploadAndAppendAttachments: (files: File[]) => Promise<void>
 }
 
 export const SimpleNoteContent = memo(
@@ -68,7 +70,7 @@ export const SimpleNoteContent = memo(
       onBlurAtTop
     })
 
-    const { onDrop, onPaste, imperativeHandlers } = useEditorFileHandlers({
+    const { onDrop, onPaste, imperativeHandlers, uploadAndAppendAttachments } = useEditorFileHandlers({
       enabled: canUploadAttachments,
       upload,
       editor
@@ -79,6 +81,7 @@ export const SimpleNoteContent = memo(
       ref,
       () => ({
         clearAndBlur: () => editor.chain().setContent(EMPTY_HTML).blur().run(),
+        insertReaction: (props) => !!editor.commands.insertReaction(props),
         focus: (pos) => {
           if (pos === 'start') {
             editor.commands.focus('start')
@@ -112,10 +115,11 @@ export const SimpleNoteContent = memo(
             }
           }
         },
+        uploadAndAppendAttachments,
         ...imperativeHandlers,
         editor
       }),
-      [editor, imperativeHandlers]
+      [editor, imperativeHandlers, uploadAndAppendAttachments]
     )
 
     const containerRef = useRef<HTMLDivElement>(null)
@@ -126,7 +130,7 @@ export const SimpleNoteContent = memo(
     })
 
     return (
-      <div ref={containerRef} className="relative min-h-[160px]">
+      <div ref={containerRef} className="relative min-h-[100px]">
         <LayeredHotkeys
           keys={ADD_ATTACHMENT_SHORTCUT}
           callback={() => {

moon/apps/web/pages/[org]/mr/[id].tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Card, Tabs, TabsProps,Timeline,} from 'antd';
 // import { CommentOutlined, MergeOutlined, CloseCircleOutlined, PullRequestOutlined } from '@ant-design/icons';
-import { ChevronRightCircleIcon, ChevronSelectIcon,AlarmIcon,ClockIcon} from '@gitmono/ui/Icons'
+import { ChevronRightCircleIcon, ChevronSelectIcon,AlarmIcon,ClockIcon, PicturePlusIcon} from '@gitmono/ui/Icons'
 import { formatDistance, fromUnixTime } from 'date-fns';
 import MRComment from '@/components/MrView/MRComment';
 import { useRouter } from 'next/router';
@@ -27,6 +27,8 @@ import { EMPTY_HTML } from '@/atoms/markdown'
 import { useHandleBottomScrollOffset } from '@/components/NoteEditor/useHandleBottomScrollOffset'
 import { trimHtml } from '@/utils/trimHtml'
 import { toast } from 'react-hot-toast'
+import { ComposerReactionPicker } from '@/components/Reactions/ComposerReactionPicker';
+import { useUploadHelpers } from '@/hooks/useUploadHelpers';
 
 interface MRDetail {
     status: string,
@@ -46,7 +48,7 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
     const { id : tempId, title } = router.query;
     const { scope } = useScope()
     const [login, _setLogin] = useState(true);
-
+    const [isReactionPickerOpen, setIsReactionPickerOpen] = useState(false)
     const id = typeof tempId === 'string' ? tempId : '';
     const { data: MrDetailData } = useGetMrDetail(id)
     const mrDetail = MrDetailData?.data as MRDetail | undefined
@@ -129,6 +131,9 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
     const onKeyDownScrollHandler = useHandleBottomScrollOffset({
       editor: editorRef.current?.editor
     })
+    const { dropzone } = useUploadHelpers({
+      upload: editorRef.current?.uploadAndAppendAttachments
+    })
 
     const tab_items: TabsProps['items'] = [
       {
@@ -138,6 +143,7 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
           <div className="prose flex flex-col w-full">
             <Timeline items={conv_items}/>
             <h2>Add a comment</h2>
+            <input {...dropzone.getInputProps()} />
             <div className='border p-6 rounded-lg'>
               <SimpleNoteContent
                 commentId="temp" //  Temporary filling, replacement later
@@ -147,6 +153,18 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
                 autofocus={true}
                 onKeyDown={onKeyDownScrollHandler}
               />
+              <Button
+                variant='plain'
+                iconOnly={<PicturePlusIcon />}
+                accessibilityLabel='Add files'
+                onClick={dropzone.open}
+                tooltip='Add files'
+              />
+              <ComposerReactionPicker
+                editorRef={editorRef}
+                open={isReactionPickerOpen}
+                onOpenChange={setIsReactionPickerOpen}
+              />
             </div>
             <div className="flex gap-2 justify-end">
               {mrDetail && mrDetail.status === "open" &&