Merge pull request #19 from github/dont-throw-away-text-around-table

Retain other text around HTML tables

Author: koddsson

src/paste-markdown-table.ts

@@ -1,5 +1,3 @@
-/* @flow strict */
-
 import {insertText} from './text'
 
 export function install(el: HTMLElement): void {
@@ -17,18 +15,17 @@ export function uninstall(el: HTMLElement): void {
 function onDrop(event: DragEvent) {
   const transfer = event.dataTransfer
   if (!transfer) return
-
   if (hasFile(transfer)) return
 
-  const table = hasTable(transfer)
-  if (!table) return
+  const textToPaste = generateText(transfer)
+  if (!textToPaste) return
 
   event.stopPropagation()
   event.preventDefault()
 
   const field = event.currentTarget
   if (field instanceof HTMLTextAreaElement) {
-    insertText(field, tableMarkdown(table))
+    insertText(field, textToPaste)
   }
 }
 
@@ -40,15 +37,15 @@ function onDragover(event: DragEvent) {
 function onPaste(event: ClipboardEvent) {
   if (!event.clipboardData) return
 
-  const table = hasTable(event.clipboardData)
-  if (!table) return
+  const textToPaste = generateText(event.clipboardData)
+  if (!textToPaste) return
 
   event.stopPropagation()
   event.preventDefault()
 
   const field = event.currentTarget
   if (field instanceof HTMLTextAreaElement) {
-    insertText(field, tableMarkdown(table))
+    insertText(field, textToPaste)
   }
 }
 
@@ -84,18 +81,19 @@ function tableMarkdown(node: Element): string {
   return `\n${header}${body}\n\n`
 }
 
-function parseTable(html: string): HTMLElement | null {
+function generateText(transfer: DataTransfer): string | undefined {
+  if (Array.from(transfer.types).indexOf('text/html') === -1) return
+
+  const html = transfer.getData('text/html')
+  if (!/<table/i.test(html)) return
+
   const el = document.createElement('div')
   el.innerHTML = html
-  return el.querySelector('table')
-}
-
-function hasTable(transfer: DataTransfer): HTMLElement | null {
-  if (Array.from(transfer.types).indexOf('text/html') === -1) return null
+  let table = el.querySelector('table')
+  table = !table || table.closest('[data-paste-markdown-skip]') ? null : table
+  if (!table) return
 
-  const html = transfer.getData('text/html')
-  if (!/<table/i.test(html)) return null
+  const formattedTable = tableMarkdown(table)
 
-  const table = parseTable(html)
-  return !table || table.closest('[data-paste-markdown-skip]') ? null : table
+  return html.replace(/<meta.*?>/, '').replace(/<table[.\S\s]*<\/table>/, `\n${formattedTable}`)
 }

test/test.js

@@ -38,6 +38,29 @@ describe('paste-markdown', function () {
       assert.include(textarea.value, 'name | origin\n-- | --\nhubot | github\nbender | futurama')
     })
 
+    it('retains text around tables', async function () {
+      const data = {
+        'text/html': `
+        <p>Here is a cool table</p>
+        <table>
+          <thead><tr><th>name</th><th>origin</th></tr></thead>
+          <tbody>
+            <tr><td>hubot</td><td>github</td></tr>
+            <tr><td>bender</td><td>futurama</td></tr>
+          </tbody>
+        </table>
+        <p>Very cool</p>
+        `
+      }
+
+      paste(textarea, data)
+      assert.equal(
+        textarea.value.trim(),
+        // eslint-disable-next-line github/unescaped-html-literal
+        '<p>Here is a cool table</p>\n        \n\nname | origin\n-- | --\nhubot | github\nbender | futurama\n\n\n        <p>Very cool</p>'
+      )
+    })
+
     it('rejects layout tables', function () {
       const data = {
         'text/html': `
@@ -51,6 +74,9 @@ describe('paste-markdown', function () {
         `
       }
       paste(textarea, data)
+
+      // Synthetic paste events don't manipulate the DOM. A empty textarea
+      // means that the event handler didn't fire and normal paste happened.
       assert.equal(textarea.value, '')
     })