Paste multiple links into markdown via comment box

examples/index.html

@@ -48,6 +48,8 @@
 
   <p>Test by copying this page's URL and then selecting <i>here</i> in the textarea and pasting the URL.</p>
 
+  <p>Or copy and paste a <a href="https://github.com">link</a> and <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">another link</a> and maybe <a href="https://google.com">one more</a> into the textarea.</p>
+
   <textarea cols="50" rows="10">The examples can be found here.</textarea>
 
   <script type="module">

src/index.ts

@@ -1,3 +1,4 @@
+import {install as installHTML, uninstall as uninstallHTML} from './paste-markdown-html'
 import {install as installImageLink, uninstall as uninstallImageLink} from './paste-markdown-image-link'
 import {install as installLink, uninstall as uninstallLink} from './paste-markdown-link'
 import {install as installTable, uninstall as uninstallTable} from './paste-markdown-table'
@@ -12,10 +13,12 @@ function subscribe(el: HTMLElement): Subscription {
   installImageLink(el)
   installLink(el)
   installText(el)
+  installHTML(el)
 
   return {
     unsubscribe: () => {
       uninstallTable(el)
+      uninstallHTML(el)
       uninstallImageLink(el)
       uninstallLink(el)
       uninstallText(el)
@@ -25,10 +28,12 @@ function subscribe(el: HTMLElement): Subscription {
 
 export {
   subscribe,
+  installHTML,
   installImageLink,
   installLink,
   installTable,
   installText,
+  uninstallHTML,
   uninstallImageLink,
   uninstallTable,
   uninstallLink,

src/paste-markdown-html.ts

@@ -0,0 +1,84 @@
+import {insertText} from './text'
+
+export function install(el: HTMLElement): void {
+  el.addEventListener('paste', onPaste)
+}
+
+export function uninstall(el: HTMLElement): void {
+  el.removeEventListener('paste', onPaste)
+}
+
+type MarkdownTransformer = (element: HTMLElement | HTMLAnchorElement, args: string[]) => string
+
+function onPaste(event: ClipboardEvent) {
+  const transfer = event.clipboardData
+  if (!transfer || !hasHTML(transfer)) return
+
+  const field = event.currentTarget
+  if (!(field instanceof HTMLTextAreaElement)) return
+
+  // Get the plaintext and html version of clipboard contents
+  let text = transfer.getData('text/plain')
+  const textHTML = transfer.getData('text/html')
+  if (!textHTML) return
+
+  text = text.trim()
+  if (!text) return
+
+  // Generate DOM tree from HTML string
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(textHTML, 'text/html')
+
+  const a = doc.getElementsByTagName('a')
+  const markdown = transform(a, text, linkify as MarkdownTransformer)
+
+  // If no changes made by transforming
+  if (markdown === text) return
+
+  event.stopPropagation()
+  event.preventDefault()
+
+  insertText(field, markdown)
+}
+
+// Build a markdown string from a DOM tree and plaintext
+function transform(
+  elements: HTMLCollectionOf<HTMLElement>,
+  text: string,
+  transformer: MarkdownTransformer,
+  ...args: string[]
+): string {
+  const markdownParts = []
+  for (const element of elements) {
+    const textContent = element.textContent || ''
+    const {part, index} = trimAfter(text, textContent)
+    markdownParts.push(part.replace(textContent, transformer(element, args)))
+    text = text.slice(index)
+  }
+  markdownParts.push(text)
+  return markdownParts.join('')
+}
+
+// Trim text at index of last character of the first occurrence of "search" and
+// return a new string with the substring until the index
+//  Example: trimAfter('Hello world', 'world') => {part: 'Hello world', index: 11}
+//  Example: trimAfter('Hello world', 'bananas') => {part: '', index: -1}
+function trimAfter(text: string, search = ''): {part: string; index: number} {
+  let index = text.indexOf(search)
+  if (index === -1) return {part: '', index}
+
+  index += search.length
+
+  return {
+    part: text.substring(0, index),
+    index
+  }
+}
+
+function hasHTML(transfer: DataTransfer): boolean {
+  return transfer.types.includes('text/html')
+}
+
+function linkify(element: HTMLAnchorElement): string {
+  return `[${element.textContent}](${element.href})`
+}

test/test.js

@@ -118,6 +118,35 @@ describe('paste-markdown', function () {
       paste(textarea, {'text/plain': 'hello', 'text/x-gfm': '# hello'})
       assert.include(textarea.value, '# hello')
     })
+
+    it('turns one html link into a markdown link', function () {
+      // eslint-disable-next-line github/unescaped-html-literal
+      const link = `<meta charset='utf-8'><meta charset="utf-8">
+        <b><a href="https://github.com/" style="text-decoration:none;"><span>link</span></a></b>`
+      const plaintextLink = 'link'
+      const markdownLink = '[link](https://github.com/)'
+
+      paste(textarea, {'text/html': link, 'text/plain': plaintextLink})
+      assert.equal(textarea.value, markdownLink)
+    })
+
+    it('turns mixed html content containing several links into appropriate markdown', function () {
+      // eslint-disable-next-line github/unescaped-html-literal
+      const sentence = `<meta charset='utf-8'><meta charset="utf-8">
+        <b style="font-weight:normal;"><p dir="ltr"><span>This is a </span>
+        <a href="https://github.com/"><span>link</span></a><span> and </span>
+        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><span>another link</span></a></p>
+        <br /><a href="https://github.com/"><span>Link</span></a><span> at the beginning, link at the </span>
+        <a href="https://github.com/"><span>end</span></a></b>`
+      // eslint-disable-next-line i18n-text/no-en
+      const plaintextSentence = 'This is a link and another link\n\nLink at the beginning, link at the end'
+      const markdownSentence =
+        'This is a [link](https://github.com/) and [another link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)\n\n' +
+        '[Link](https://github.com/) at the beginning, link at the [end](https://github.com/)'
+
+      paste(textarea, {'text/html': sentence, 'text/plain': plaintextSentence})
+      assert.equal(textarea.value, markdownSentence)
+    })
   })
 })
 

tsconfig.json

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