tldraw/state/clipboard.ts

import { getShapeUtils } from './shape-utils'
import { Data, Shape } from 'types'
import { getCommonBounds } from 'utils'
import tld from 'utils/tld'
import state from './state'

class Clipboard {
  current: string
  fallback = false

  copy = (shapes: Shape[], onComplete?: () => void) => {
    if (shapes === undefined) return

    this.current = JSON.stringify({ id: 'tldr', shapes })

    if ('permissions' in navigator && 'clipboard' in navigator) {
      navigator.permissions
        .query({ name: 'clipboard-write' })
        .then((result) => {
          if (result.state == 'granted' || result.state == 'prompt') {
            navigator.clipboard.writeText(this.current).then(onComplete, () => {
              console.warn('Error, could not copy to clipboard. Fallback?')
              this.fallback = true
            })
          } else {
            this.fallback = true
          }
        })
    }
  }

  paste = () => {
    try {
      navigator.clipboard.readText().then(this.sendPastedTextToState)
    } catch (e) {
      this.fallback = true
    }

    return this
  }

  sendPastedTextToState = (text = this.current) => {
    if (text === undefined) return

    try {
      const clipboardData = JSON.parse(text)

      state.send('PASTED_SHAPES_FROM_CLIPBOARD', {
        shapes: clipboardData.shapes,
      })
    } catch (e) {
      // The text wasn't valid JSON, or it wasn't ours, so paste it as a text object
      state.send('PASTED_TEXT_FROM_CLIPBOARD', { text })
    }

    return this
  }

  clear = () => {
    this.current = undefined

    return this
  }

  copySelectionToSvg(data: Data) {
    const shapes = tld.getSelectedShapes(data)
    const shapesToCopy = shapes.length > 0 ? shapes : tld.getShapes(data)

    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

    if (shapesToCopy.length === 0) return

    shapesToCopy
      .sort((a, b) => a.childIndex - b.childIndex)
      .forEach((shape) => {
        const group = document.getElementById(shape.id)

        const groupClone = group.cloneNode(true)

        // TODO: Add children if the shape is a group

        svg.appendChild(groupClone)
      })

    const bounds = getCommonBounds(
      ...shapesToCopy.map((shape) => getShapeUtils(shape).getBounds(shape))
    )

    // No content
    if (!bounds) return

    const padding = 16

    // Resize the element to the bounding box
    svg.setAttribute(
      'viewBox',
      [
        bounds.minX - padding,
        bounds.minY - padding,
        bounds.width + padding * 2,
        bounds.height + padding * 2,
      ].join(' ')
    )

    svg.setAttribute('width', String(bounds.width))
    svg.setAttribute('height', String(bounds.height))

    // Take a snapshot of the element
    const s = new XMLSerializer()
    const svgString = s
      .serializeToString(svg)
      .replaceAll('
      ', '')
      .replaceAll(/((\s|")[0-9]*\.[0-9]{2})([0-9]*)(\b|"|\))/g, '$1')

    // Copy to clipboard!
    try {
      navigator.clipboard.writeText(svgString)
    } catch (e) {
      this.copyStringToClipboard(svgString)
    }

    return this
  }

  copyStringToClipboard = (string: string) => {
    try {
      navigator.clipboard.writeText(string)
    } catch (e) {
      const textarea = document.createElement('textarea')
      textarea.setAttribute('position', 'fixed')
      textarea.setAttribute('top', '0')
      textarea.setAttribute('readonly', 'true')
      textarea.setAttribute('contenteditable', 'true')
      textarea.style.position = 'fixed'
      textarea.value = string
      document.body.appendChild(textarea)
      textarea.focus()
      textarea.select()

      try {
        const range = document.createRange()
        range.selectNodeContents(textarea)

        const sel = window.getSelection()
        sel.removeAllRanges()
        sel.addRange(range)

        textarea.setSelectionRange(0, textarea.value.length)
      } catch (err) {
        null // Could not copy to clipboard
      } finally {
        document.body.removeChild(textarea)
      }
    }

    return this
  }
}

export default new Clipboard()