Merge pull request #20 from github/support-multiple-tables

Parse all tables in clipboard payload

Author: koddsson

src/paste-markdown-table.ts

@@ -84,16 +84,22 @@ function tableMarkdown(node: Element): string {
 function generateText(transfer: DataTransfer): string | undefined {
   if (Array.from(transfer.types).indexOf('text/html') === -1) return
 
-  const html = transfer.getData('text/html')
+  let html = transfer.getData('text/html')
   if (!/<table/i.test(html)) return
 
+  html = html.replace(/<meta.*?>/, '')
+
   const el = document.createElement('div')
   el.innerHTML = html
-  let table = el.querySelector('table')
-  table = !table || table.closest('[data-paste-markdown-skip]') ? null : table
-  if (!table) return
-
-  const formattedTable = tableMarkdown(table)
+  const tables = el.querySelectorAll('table')
+
+  for (const table of tables) {
+    if (table.closest('[data-paste-markdown-skip]')) {
+      table.replaceWith(new Text(table.textContent || ''))
+    }
+    const formattedTable = tableMarkdown(table)
+    table.replaceWith(new Text(formattedTable))
+  }
 
-  return html.replace(/<meta.*?>/, '').replace(/<table[.\S\s]*<\/table>/, `\n${formattedTable}`)
+  return el.innerHTML
 }

test/test.js

@@ -57,7 +57,37 @@ describe('paste-markdown', function () {
       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>'
+        '<p>Here is a cool table</p>\n        \nname | origin\n-- | --\nhubot | github\nbender | futurama\n\n\n        <p>Very cool</p>'
+      )
+    })
+
+    it('pastes multiple 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>Another very 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>
+        `
+      }
+
+      paste(textarea, data)
+      assert.equal(
+        textarea.value.trim(),
+        // eslint-disable-next-line github/unescaped-html-literal
+        '<p>Here is a cool table</p>\n        \nname | origin\n-- | --\nhubot | github\nbender | futurama\n\n\n        <p>Another very cool table</p>\n        \nname | origin\n-- | --\nhubot | github\nbender | futurama'
       )
     })
 
@@ -75,9 +105,10 @@ 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, '')
+      assert.equal(
+        textarea.value,
+        '\n        \n          nameorigin\n          \n            hubotgithub\n            benderfuturama\n          \n        \n        '
+      )
     })
 
     it('accepts x-gfm', function () {

tsconfig.json

@@ -4,7 +4,8 @@
     "target": "es2017",
     "lib": [
       "es2018",
-      "dom"
+      "dom",
+      "dom.iterable"
     ],
     "strict": true,
     "declaration": true,