WIP: clipboard

Author: Rafferty97

src/lib/clipboard.ts

@@ -0,0 +1,83 @@
+export async function copyTableToClipboard(table: string[][]) {
+  const textData = table.map(row => row.map(s => s.replace(/[\t\r\n]/g, '')).join('\t')).join('\n')
+
+  const htmlTable = document.createElement('table')
+  for (const row of table) {
+    const htmlRow = document.createElement('tr')
+    htmlTable.appendChild(htmlRow)
+    for (const cell of row) {
+      const htmlCell = document.createElement('td')
+      htmlRow.appendChild(htmlCell)
+      htmlCell.innerText = cell
+    }
+  }
+  const htmlData = htmlTable.outerHTML
+
+  const textBlob = new Blob([textData], { type: 'text/plain' })
+  const htmlBlob = new Blob([htmlData], { type: 'text/html' })
+
+  const clipboardItem = new ClipboardItem({
+    'text/plain': textBlob,
+    'text/html': htmlBlob,
+  })
+
+  await navigator.clipboard.write([clipboardItem])
+}
+
+export async function pasteTableFromClipboard(): Promise<string[][] | null> {
+  try {
+    const clipboardItems = await navigator.clipboard.read()
+
+    for (const item of clipboardItems) {
+      if (item.types.includes('text/html')) {
+        const blob = await item.getType('text/html')
+        const html = await blob.text()
+        return parseHtmlTable(html)
+      }
+    }
+
+    for (const item of clipboardItems) {
+      if (item.types.includes('text/plain')) {
+        const blob = await item.getType('text/plain')
+        const text = await blob.text()
+        return parseTextTable(text)
+      }
+    }
+  } catch (e) {
+    // Ignore error, try readText
+  }
+
+  try {
+    const text = await navigator.clipboard.readText()
+    return parseTextTable(text)
+  } catch (e) {
+    console.error('Failed to read clipboard', e)
+    return null
+  }
+}
+
+function parseHtmlTable(html: string): string[][] {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, 'text/html')
+  const table = doc.querySelector('table')
+
+  if (!table) return []
+
+  const data: string[][] = []
+  for (const row of Array.from(table.rows)) {
+    const rowData: string[] = []
+    for (const cell of Array.from(row.cells)) {
+      rowData.push(cell.innerText)
+    }
+    data.push(rowData)
+  }
+  return data
+}
+
+function parseTextTable(text: string): string[][] {
+  const rows = text.split(/\r\n|\n|\r/)
+  if (rows[rows.length - 1] === '') {
+    rows.pop()
+  }
+  return rows.map(row => row.split('\t'))
+}

src/table/Table.tsx

@@ -16,6 +16,7 @@ import { AddColumnButton } from './AddColumnButton'
 import { RowHeader } from './RowHeader'
 import { isEqual } from 'radashi'
 import { textContent } from 'src/components/CellContent'
+import { copyTableToClipboard, pasteTableFromClipboard } from 'src/lib/clipboard'
 import './Table.css'
 
 const DEFAULT_COLUMN_SIZE = 80
@@ -443,17 +444,45 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
     const range = activeRange()
     if (!range) return
 
-    props.onCopy?.(range.min, range.max)
+    if (props.onCopy) {
+      props.onCopy(range.min, range.max)
+    } else {
+      const table: string[][] = []
+      for (let i = range.min[0]; i <= range.max[0]; i++) {
+        const row: string[] = []
+        for (let j = range.min[1]; j <= range.max[1]; j++) {
+          row.push(String(props.getCellValue(i, props.columns[j]!)))
+        }
+        table.push(row)
+      }
+      copyTableToClipboard(table)
+    }
   }
 
   const handlePaste = async (ev?: ClipboardEvent) => {
     ev?.preventDefault()
-    if (!props.rowsEditable) return
+    // if (!props.rowsEditable) return
 
     const range = activeRange()
     if (!range) return
 
-    props.onPaste?.(range.min, range.max)
+    if (props.onPaste) {
+      props.onPaste(range.min, range.max)
+    } else {
+      pasteTableFromClipboard().then(table => {
+        if (!props.setCellValue) return
+        if (!table) return
+        let i = range.min[0]
+        for (const row of table) {
+          let j = range.min[1]
+          for (const cell of row) {
+            props.setCellValue(i, props.columns[j]!, cell as any)
+            j += 1
+          }
+          i += 1
+        }
+      })
+    }
   }
 
   // Handle keyboard events
@@ -564,7 +593,7 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
       onPointerUp={onCellUp}
       tabIndex={-1}
     >
-      <div ref={focusEl} class="solid-tabular/focus-proxy" tabIndex={-1} contentEditable />
+      <div ref={focusEl} class="solid-tabular/focus-proxy" tabIndex={-1} />
 
       {/* Corner box */}
       <div class="solid-tabular/corner-box">