feat(UI):Comments support quote and copy

moon/apps/web/components/Issues/IssueDetailPage.tsx

@@ -384,7 +384,7 @@ export default function IssueDetailPage({ link }: { link: string }) {
                     <LoadingSpinner />
                   </div>
                 ) : (
-                  <TimelineItems detail={issueDetail} id={link} type='issue' />
+                  <TimelineItems detail={issueDetail} id={link} type='issue' editorRef={editorRef}/>
                 )}
 
                 {info && info.status === 'open' && (

moon/apps/web/components/MrView/CommentDropdownMenu.tsx

@@ -18,17 +18,25 @@ import { useDeleteIssueComment } from '@/hooks/issues/useDeleteIssueComment'
 import { useDeleteMrCommentDelete } from '@/hooks/useDeleteMrCommentDelete'
 
 import { editIdAtom } from '../Issues/utils/store'
+import { SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent';
+import { generateJSON } from '@tiptap/core';
+import toast from 'react-hot-toast';
 
 interface CommentDropdownMenuProps {
   id: string
   Conversation: ConversationItem
   CommentType: 'mr' | 'issue' | (string & {})
+  editorRef: React.RefObject<SimpleNoteContentRef>
 }
 
-export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDropdownMenuProps) {
+
+export function CommentDropdownMenu({ Conversation, id, CommentType, editorRef }: CommentDropdownMenuProps) {
   const { mutate: deleteComment } = useDeleteMrCommentDelete(id)
   const { mutate: deleteIssueComment } = useDeleteIssueComment(id)
   const [_editId, setEditId] = useAtom(editIdAtom)
+  const commentContent = typeof Conversation.comment === 'string' 
+  ? Conversation.comment 
+  : String(Conversation.comment)
 
   const handleDelete = () => {
     switch (CommentType) {
@@ -43,16 +51,107 @@ export function CommentDropdownMenu({ Conversation, id, CommentType }: CommentDr
     }
   }
 
+  const handleQuote = () => {
+    if (!editorRef?.current?.editor || !Conversation.comment) return
+
+    try {
+      const jsonContent = generateJSON(commentContent, editorRef.current.editor.extensionManager.extensions)
+
+      editorRef.current.editor.chain().insertContent([
+        {
+          type: 'blockquote',
+          content: jsonContent.content,
+        },
+        {
+          type: 'paragraph',
+          content: []
+        }
+      ]).run()
+
+      setTimeout(() => {
+        const editorDom = editorRef.current?.editor?.view?.dom
+
+        if (editorDom) {
+          editorDom.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+          setTimeout(() => {
+            editorRef.current?.editor?.commands.focus('end', { scrollIntoView: false })
+          }, 150)
+        }
+      }, 300)
+
+    } catch (error) {
+      toast.error('Quote failed, Please try again later.')
+    }
+  }
+
+
+    const handleCopy = () => {
+    let value = commentContent;
+
+    if (value.includes('<') && value.includes('>')) {
+      const tempDiv = document.createElement('div');
+
+      tempDiv.innerHTML = value;
+      value = tempDiv.textContent || tempDiv.innerText || '';
+    }
+
+    value = value.trim();
+
+    if (!value) return;
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(value)
+      .catch(() => {
+        toast.error('Copy failed, Please try again later.')
+      })
+    } else {
+      const textArea = document.createElement('textarea');
+
+      textArea.value = value;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-9999px';
+      textArea.style.top = '-9999px';
+      textArea.style.opacity = '0';
+      textArea.style.pointerEvents = 'none';
+      textArea.style.zIndex = '-1000';
+      document.body.appendChild(textArea);
+
+      setTimeout(() => {
+        try {
+          textArea.focus();
+
+          setTimeout(() => {
+            textArea.select();
+            textArea.setSelectionRange(0, textArea.value.length);
+
+            const successful = document.execCommand('copy');
+
+            if (!successful) {
+              toast.error('Copy failed, Please try again later.')
+            }
+
+            document.body.removeChild(textArea);
+          }, 10);
+        } catch (err) {
+          document.body.removeChild(textArea);
+        }
+      }, 10);
+    }
+  };
+
   const items = buildMenuItems([
     {
       type: 'item',
       label: 'Copy',
-      leftSlot: <CopyIcon />
+      leftSlot: <CopyIcon />,
+      onSelect: () => handleCopy(),
     },
     {
       type: 'item',
       label: 'Quote',
-      leftSlot: <QuoteIcon />
+      leftSlot: <QuoteIcon />,
+      onSelect: () => handleQuote(),
     },
     {
       type: 'item',

moon/apps/web/components/MrView/MRComment.tsx

@@ -32,9 +32,10 @@ interface CommentProps {
   conv: ConversationItem
   id: string
   whoamI: string
+  editorRef: React.RefObject<SimpleNoteContentRef>
 }
 
-const Comment = ({ conv, id, whoamI }: CommentProps) => {
+const Comment = ({ conv, id, whoamI, editorRef }: CommentProps) => {
   const { data: member } = useGetOrganizationMember({ username: conv.username })
 
   const extensions = useMemo(() => getNoteExtensions({ linkUnfurl: {} }), [])
@@ -93,7 +94,7 @@ const Comment = ({ conv, id, whoamI }: CommentProps) => {
             }
             onReactionSelect={handleReactionSelect}
           />
-          <CommentDropdownMenu id={id} Conversation={conv} CommentType={whoamI} />
+          <CommentDropdownMenu id={id} Conversation={conv} CommentType={whoamI} editorRef={editorRef} />
         </div>
       </div>
 

moon/apps/web/components/MrView/TimelineItems.tsx

@@ -22,6 +22,7 @@ import MergedItem from './MergedItem'
 import ReopenItem from './ReopenItem'
 import LabelItem from '@/components/MrView/LabelItem'
 import ForcePushItem from './item/ForcePushItem'
+import { SimpleNoteContentRef } from '../SimpleNoteEditor/SimpleNoteContent'
 
 interface TimelineItemProps {
   badge?: React.ReactNode
@@ -68,7 +69,7 @@ const TimelineWrapper: React.FC<TimelineWrapperProps> = ({ convItems = [] }) =>
   )
 }
 
-const TimelineItems: React.FC<{ detail: any; id: string; type: string }> = ({ detail, id, type }) => {
+const TimelineItems: React.FC<{ detail: any; id: string; type: string; editorRef: React.RefObject<SimpleNoteContentRef> }> = ({ detail, id, type, editorRef }) => {
   const convItems: ConvItem[] = detail.conversations.map((conv: ConversationItem) => {
     let icon
     let children
@@ -77,7 +78,7 @@ const TimelineItems: React.FC<{ detail: any; id: string; type: string }> = ({ de
     switch (conv.conv_type) {
       case 'Comment':
         icon = <CommentIcon />
-        children = <MRComment conv={conv} id={id} whoamI={type} />
+        children = <MRComment conv={conv} id={id} whoamI={type} editorRef={editorRef} />
         break
       case 'Merged':
         icon = <FeedMergedIcon size={24} className='text-purple-500' />

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

@@ -160,7 +160,7 @@ export const SimpleNoteContent = memo(
     }, [editor, onChange])
 
     return (
-      <div ref={containerRef} className='relative mb-2 h-[95%] min-h-[100px] overflow-auto'>
+      <div ref={containerRef} className='relative mb-2 h-[95%] min-h-[100px]'>
         <LayeredHotkeys
           keys={ADD_ATTACHMENT_SHORTCUT}
           callback={() => {

moon/apps/web/pages/[org]/mr/[link]/index.tsx

@@ -290,7 +290,7 @@ const MRDetailPage: PageWithLayout<any> = () => {
                         <LoadingSpinner />
                       </div>
                     ) : (
-                      mrDetail && <TimelineItems detail={mrDetail} id={id} type='mr' />
+                      mrDetail && <TimelineItems detail={mrDetail} id={id} type='mr' editorRef={editorRef} />
                     )}
                     <div style={{ marginTop: '12px' }} className='prose'>
                       <div className='flex'>