feat: copy doc to clipboard

Author: HMarzban

packages/webapp/components/TipTap/toolbar/ToolbarDesktop.tsx

@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
-import React, { useCallback, useState } from 'react'
-import { Link, Gear, ClearMark, Filter, Folder } from '@icons'
+import React, { useState } from 'react'
+import { Link, ClearMark } from '@icons'
 import ToolbarButton from '@components/TipTap/toolbar/ToolbarButton'
 import Icon from '@components/TipTap/toolbar/Icon'
 import FilterModal from './FilterModal'
@@ -11,8 +11,16 @@ import Dropdown from '@components/ui/Dropdown'
 import Loading from '@components/ui/Loading'
 import Modal from '@components/ui/Modal'
 import ToolbarSkeleton from '@components/skeleton/ToolbarLoader'
-import { MdAddComment } from 'react-icons/md'
+import {
+  MdAddComment,
+  MdOutlineFileCopy,
+  MdOutlinePrint,
+  MdOutlineFolder,
+  MdOutlineSettings,
+  MdFilterAlt
+} from 'react-icons/md'
 import useTurnSelectedTextIntoComment from '@pages/document/hooks/useTurnSelectedTextIntoComment'
+import useCopyDocumentToClipboard from '@pages/document/hooks/useCopyDocumentToClipboard'
 import { FaDiscord } from 'react-icons/fa'
 
 const ControlCenter = dynamic(() => import('@components/ControlCenter'), {
@@ -25,15 +33,15 @@ const GearModal = dynamic(() => import('./GearModal'), {
 const FilterButton = () => {
   return (
     <ToolbarButton tooltip="Filter Document" position="tooltip-left">
-      <Filter fill="rgba(0,0,0,.7)" size={20} />
+      <MdFilterAlt fill="rgba(0,0,0,.7)" size={20} />
     </ToolbarButton>
   )
 }
 
 const GearButton = () => {
   return (
     <ToolbarButton tooltip="Document Settings" position="tooltip-left">
-      <Gear fill="rgba(0,0,0,.7)" size={16} />
+      <MdOutlineSettings fill="rgba(0,0,0,.7)" size={20} />
     </ToolbarButton>
   )
 }
@@ -47,6 +55,7 @@ const ToolbarDesktop = () => {
   const user = useAuthStore((state) => state.profile)
 
   const { createComment } = useTurnSelectedTextIntoComment()
+  const { copyDocumentToClipboard } = useCopyDocumentToClipboard(editor ?? null)
 
   // TODO: skeleton loading
   if (loading || providerSyncing || !editor) return <ToolbarSkeleton />
@@ -175,13 +184,17 @@ const ToolbarDesktop = () => {
           </ToolbarButton>
 
           <div className="divided"></div>
+          <ToolbarButton tooltip="Copy Document" onClick={copyDocumentToClipboard}>
+            <MdOutlineFileCopy fill="rgba(0,0,0,.7)" size={18} />
+          </ToolbarButton>
 
           <ToolbarButton onClick={() => window.print()} tooltip="Print (⌘+P)">
-            <Icon type="Printer" size={16} />
+            <MdOutlinePrint fill="rgba(0,0,0,.7)" size={20} />
           </ToolbarButton>
+
           {isAuthServiceAvailable && user && (
             <ToolbarButton tooltip="Open" onClick={() => setModalOpen(true)}>
-              <Folder fill="rgba(0,0,0,.7)" size={18} />
+              <MdOutlineFolder fill="rgba(0,0,0,.7)" size={20} />
             </ToolbarButton>
           )}
 

packages/webapp/components/pages/document/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useAdjustEditorSizeForChatRoom'
 export * from './useTOCResize'
 export { default as useScrollSyncToc } from './useScrollSyncToc'
+export { default as useCopyDocumentToClipboard } from './useCopyDocumentToClipboard'

packages/webapp/components/pages/document/hooks/useCopyDocumentToClipboard.tsx

@@ -0,0 +1,38 @@
+import { useCallback } from 'react'
+import { Editor } from '@tiptap/react'
+import * as toast from '@components/toast'
+
+const useCopyDocumentToClipboard = (editor: Editor | null) => {
+  const copyDocumentToClipboard = useCallback(async () => {
+    if (!editor) return
+
+    try {
+      const htmlContent = editor.getHTML()
+      const textContent = editor.getText()
+
+      // Try to copy as both HTML and plain text
+      if (navigator.clipboard && navigator.clipboard.write) {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            'text/html': new Blob([htmlContent], { type: 'text/html' }),
+            'text/plain': new Blob([textContent], { type: 'text/plain' })
+          })
+        ])
+      } else {
+        // Fallback to plain text only
+        await navigator.clipboard.writeText(textContent)
+      }
+
+      toast.Success('Document copied to clipboard')
+    } catch (error) {
+      console.error('Failed to copy document to clipboard:', error)
+      // Fallback: try to select all and copy
+      editor.commands.selectAll()
+      document.execCommand('copy')
+    }
+  }, [editor])
+
+  return { copyDocumentToClipboard }
+}
+
+export default useCopyDocumentToClipboard