Merge pull request #39 from imjohnbo/imjohnbo/fix-github-paste

Fix "special" link paste in GitHub

Author: theinterned

.eslintrc.json

@@ -12,7 +12,8 @@
       "rules": {
         "import/extensions": "off",
         "import/no-unresolved": "off",
-        "github/no-inner-html": "off"
+        "github/no-inner-html": "off",
+        "eslint-comments/no-use": "off"
       }
     }
   ]

src/paste-markdown-html.ts

@@ -22,14 +22,16 @@ function onPaste(event: ClipboardEvent) {
   // Get the plaintext and html version of clipboard contents
   let text = transfer.getData('text/plain')
   const textHTML = transfer.getData('text/html')
+  // Replace Unicode equivalent of "&nbsp" with a space
+  const textHTMLClean = textHTML.replace(/\u00A0/g, ' ')
   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 doc = parser.parseFromString(textHTMLClean, 'text/html')
 
   const a = doc.getElementsByTagName('a')
   const markdown = transform(a, text, linkify as MarkdownTransformer)
@@ -83,6 +85,43 @@ function hasHTML(transfer: DataTransfer): boolean {
   return transfer.types.includes('text/html')
 }
 
+// Makes markdown link from a link element, avoiding special GitHub links
 function linkify(element: HTMLAnchorElement): string {
-  return `[${element.textContent}](${element.href})`
+  const label = element.textContent || ''
+  const url = element.href || ''
+  let markdown = ''
+
+  // Don't linkify user mentions like "@octocat"
+  if (isUserMention(element)) {
+    markdown = label
+    // Don't linkify things like "#123" or commit comparisons
+  } else if (isSpecialLink(element) || areEqualLinks(url, label)) {
+    markdown = url
+    // Otherwise, make a markdown link
+  } else {
+    markdown = `[${label}](${url})`
+  }
+
+  return markdown
+}
+
+// Special GitHub links have either a hover card or certain class name
+function isSpecialLink(link: HTMLAnchorElement): boolean {
+  return (
+    link.className.indexOf('commit-link') >= 0 ||
+    (!!link.getAttribute('data-hovercard-type') && link.getAttribute('data-hovercard-type') !== 'user')
+  )
+}
+
+// Browsers sometimes copy a stray "/" at the end of a link
+// Also, unequal string casing shouldn't disqualify links from being equal
+function areEqualLinks(link1: string, link2: string) {
+  link1 = link1.slice(-1) === '/' ? link1.slice(0, -1) : link1
+  link2 = link2.slice(-1) === '/' ? link2.slice(0, -1) : link2
+  return link1.toLowerCase() === link2.toLowerCase()
+}
+
+// User mentions have a "@" and a hovercard attribute of type "user"
+function isUserMention(link: HTMLAnchorElement): boolean {
+  return link.textContent?.slice(0, 1) === '@' && link.getAttribute('data-hovercard-type') === 'user'
 }

test/test.js

@@ -164,6 +164,45 @@ describe('paste-markdown', function () {
       paste(textarea, {'text/html': link, 'text/plain': plaintextLink, 'text/link-preview': linkPreviewLink})
       assert.equal(textarea.value, '')
     })
+
+    it("doesn't render any markdown for GitHub handles", function () {
+      // eslint-disable-next-line github/unescaped-html-literal
+      const link = `<meta charset='utf-8'><a href="https://github.com/octocat" data-hovercard-type="user">@octocat</a>`
+      const plaintextLink = '@octocat'
+
+      paste(textarea, {'text/html': link, 'text/plain': plaintextLink})
+      assert.equal(textarea.value, '')
+    })
+
+    it('retains urls of special GitHub links', function () {
+      const href = 'https://github.com/octocat/repo/issues/1'
+      // eslint-disable-next-line github/unescaped-html-literal
+      const link = `<meta charset='utf-8'><a href=${href} data-hovercard-type="issue">#1</a>`
+      const plaintextLink = '#1'
+
+      paste(textarea, {'text/html': link, 'text/plain': plaintextLink})
+      assert.equal(textarea.value, href)
+    })
+
+    it('leaves plaintext links alone', 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>https://github.com</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>https://github.com/</span></a></b>`
+      /* eslint-disable i18n-text/no-en */
+      const plaintextSentence =
+        'This is a https://github.com and another link\n\nLink at the beginning, link at the https://github.com/'
+      /* eslint-enable i18n-text/no-en */
+      const markdownSentence =
+        'This is a 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 https://github.com/'
+
+      paste(textarea, {'text/html': sentence, 'text/plain': plaintextSentence})
+      assert.equal(textarea.value, markdownSentence)
+    })
   })
 })