use util/copy-to-clipboard!

logseq · Mar 8, 2023 · 0a89ac5 · 0a89ac5
1 parent 316fa2f
commit 0a89ac5
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 10 deletions.
diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs
@@ -93,6 +93,7 @@
    :isMobile util/mobile?
    :saveAsset save-asset-handler
    :makeAssetUrl editor-handler/make-asset-url
+   :copyToClipboard (fn [text, html] (util/copy-to-clipboard! text html))
    :getRedirectPageName (fn [page-name-or-uuid] (model/get-redirect-page-name page-name-or-uuid))
    :insertFirstPageBlock (fn [page-name] (editor-handler/insert-first-page-block-if-not-exists! page-name {:redirect? false}))
    :addNewWhiteboard (fn [page-name]

diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TLDocumentModel } from '@tldraw/core'
+import type { TLDocumentModel } from '@tldraw/core'
 import {
   AppCanvas,
   AppProvider,
@@ -15,6 +15,7 @@ import { ContextMenu } from './components/ContextMenu'
 import { QuickLinks } from './components/QuickLinks'
 import { useDrop } from './hooks/useDrop'
 import { usePaste } from './hooks/usePaste'
+import { useCopy } from './hooks/useCopy'
 import { useQuickAdd } from './hooks/useQuickAdd'
 import {
   BoxTool,
@@ -95,6 +96,7 @@ const AppInner = ({
 }: Omit<LogseqTldrawProps, 'renderers' | 'handlers'>) => {
   const onDrop = useDrop()
   const onPaste = usePaste()
+  const onCopy = useCopy()
   const onQuickAdd = useQuickAdd()
 
   const onPersistOnDiff: TLReactCallbacks<Shape>['onPersist'] = React.useCallback(
@@ -110,6 +112,7 @@ const AppInner = ({
       Tools={tools}
       onDrop={onDrop}
       onPaste={onPaste}
+      onCopy={onCopy}
       onCanvasDBClick={onQuickAdd}
       onPersist={onPersistOnDiff}
       model={model}

diff --git a/tldraw/apps/tldraw-logseq/src/hooks/useCopy.ts b/tldraw/apps/tldraw-logseq/src/hooks/useCopy.ts
@@ -0,0 +1,11 @@
+import type { TLReactCallbacks } from '@tldraw/react'
+import * as React from 'react'
+import { LogseqContext } from '../lib/logseq-context'
+
+export function useCopy() {
+  const { handlers } = React.useContext(LogseqContext)
+
+  return React.useCallback<TLReactCallbacks['onCopy']>((app, {text, html}) => {
+    handlers.copyToClipboard(text, html)
+  }, [])
+}
diff --git a/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts b/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts
@@ -55,6 +55,7 @@ export interface LogseqContextValue {
     makeAssetUrl: (relativeUrl: string) => string
     sidebarAddBlock: (uuid: string, type: 'block' | 'page') => void
     redirectToPage: (uuidOrPageName: string) => void
+    copyToClipboard: (text:string, html: string) => void
   }
 }
 

diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
@@ -560,15 +560,10 @@ export class TLApp<
 
       const shapeBlockRefs = this.selectedShapesArray.map(s => `((${s.props.id}))`).join(' ')
 
-      // FIXME: use `writeClipboard` in frontend.utils
-      navigator.clipboard.write([
-        new ClipboardItem({
-          'text/html': new Blob([tldrawString], { type: 'text/html' }),
-          'text/plain': new Blob([shapeBlockRefs], {
-            type: 'text/plain',
-          }),
-        }),
-      ])
+      this.notify('copy', {
+        text: shapeBlockRefs,
+        html: tldrawString
+      })
     }
   }
 

diff --git a/tldraw/packages/core/src/types/types.ts b/tldraw/packages/core/src/types/types.ts
@@ -141,6 +141,11 @@ export type TLPasteEventInfo = {
   fromDrop?: boolean
 }
 
+export type TLCopyEventInfo = {
+  text: string
+  html: string
+}
+
 /* --------------------- Events --------------------- */
 
 export type TLSubscriptionEvent =
@@ -188,6 +193,10 @@ export type TLSubscriptionEvent =
       event: 'drop'
       info: { dataTransfer: DataTransfer; point: number[] }
     }
+    | {
+      event: 'copy'
+      info: TLCopyEventInfo
+    }
   | {
       event: 'paste'
       info: TLPasteEventInfo

diff --git a/tldraw/packages/react/src/hooks/useSetup.ts b/tldraw/packages/react/src/hooks/useSetup.ts
@@ -20,6 +20,7 @@ export function useSetup<
     onDeleteShapes,
     onDrop,
     onPaste,
+    onCopy,
     onCanvasDBClick,
   } = props
 
@@ -51,6 +52,7 @@ export function useSetup<
     if (onDeleteAssets) unsubs.push(app.subscribe('delete-assets', onDeleteAssets))
     if (onDrop) unsubs.push(app.subscribe('drop', onDrop))
     if (onPaste) unsubs.push(app.subscribe('paste', onPaste))
+    if (onCopy) unsubs.push(app.subscribe('copy', onCopy))
     if (onCanvasDBClick) unsubs.push(app.subscribe('canvas-dbclick', onCanvasDBClick))
     // Kind of unusual, is this the right pattern?
     return () => unsubs.forEach(unsub => unsub())

diff --git a/tldraw/packages/react/src/types/TLReactSubscriptions.tsx b/tldraw/packages/react/src/types/TLReactSubscriptions.tsx
@@ -41,4 +41,5 @@ export interface TLReactCallbacks<
   onDrop: TLReactCallback<S, R, 'drop'>
   onCanvasDBClick: TLReactCallback<S, R, 'canvas-dbclick'>
   onPaste: TLReactCallback<S, R, 'paste'>
+  onCopy: TLReactCallback<S, R, 'copy'>
 }