Merge pull request #23 from steffen/paste-urls-as-markdown-links

Add pasting URLs on selected text as Markdown links

Author: srt32

README.md

@@ -1,6 +1,7 @@
 # Paste Markdown objects
 
 - Paste spreadsheet cells and HTML tables as a Markdown tables.
+- Paste URLs on selected text as Markdown links.
 - Paste image URLs as Markdown image links.
 - Paste markdown as markdown. See [`@github/quote-selection`/Preserving markdown syntax](https://github.com/github/quote-selection/tree/9ae5f88f5bc3021f51d2dc9981eca83ce7cfe04f#preserving-markdown-syntax) for details.
 
@@ -13,7 +14,7 @@ $ npm install @github/paste-markdown
 ## Usage
 
 ```js
-import subscribe from '@github/paste-markdown'
+import {subscribe} from '@github/paste-markdown'
 
 // Subscribe the behavior to the textarea.
 subscribe(document.querySelector('textarea[data-paste-markdown]'))
@@ -26,7 +27,7 @@ be applied to any element matching a selector.
 
 ```js
 import {observe} from 'selector-observer'
-import subscribe from '@github/paste-markdown'
+import {subscribe} from '@github/paste-markdown'
 
 // Subscribe the behavior to all matching textareas.
 observe('textarea[data-paste-markdown]', {subscribe})

examples/index.html

@@ -46,12 +46,15 @@
 
   <img src="https://github.com/hubot.png" width="100" alt="hubot">
 
-  <textarea cols="50" rows="10"></textarea>
+  <p>Test by copying this page's URL and then selecting <i>here</i> in the textarea and pasting the URL.</p>
+
+  <textarea cols="50" rows="10">The examples can be found here.</textarea>
 
   <script type="module">
-    // import subscribe from '../dist/index.esm.js'
-    import subscribe from 'https://unpkg.com/@github/paste-markdown/dist/index.esm.js'
+    // import {subscribe} from '../dist/index.esm.js'
+    import {subscribe} from 'https://unpkg.com/@github/paste-markdown/dist/index.esm.js'
     subscribe(document.querySelector('textarea'))
+    installLink(document.querySelector('textarea'))
   </script>
 </body>
 </html>

src/index.ts

@@ -1,21 +1,36 @@
-import {install as installLink, uninstall as uninstallLink} from './paste-markdown-image-link'
+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'
 import {install as installText, uninstall as uninstallText} from './paste-markdown-text'
 
 interface Subscription {
   unsubscribe: () => void
 }
 
-export default function subscribe(el: HTMLElement): Subscription {
+function subscribe(el: HTMLElement): Subscription {
   installTable(el)
+  installImageLink(el)
   installLink(el)
   installText(el)
 
   return {
     unsubscribe: () => {
       uninstallTable(el)
+      uninstallImageLink(el)
       uninstallLink(el)
       uninstallText(el)
     }
   }
 }
+
+export {
+  subscribe,
+  installImageLink,
+  installLink,
+  installTable,
+  installText,
+  uninstallImageLink,
+  uninstallTable,
+  uninstallLink,
+  uninstallText
+}

src/paste-markdown-link.ts

@@ -0,0 +1,52 @@
+import {insertText} from './text'
+
+export function install(el: HTMLElement): void {
+  el.addEventListener('paste', onPaste)
+}
+
+export function uninstall(el: HTMLElement): void {
+  el.removeEventListener('paste', onPaste)
+}
+
+function onPaste(event: ClipboardEvent) {
+  const transfer = event.clipboardData
+  if (!transfer || !hasPlainText(transfer)) return
+
+  const field = event.currentTarget
+  if (!(field instanceof HTMLTextAreaElement)) return
+
+  const text = transfer.getData('text/plain')
+  if (!text) return
+
+  if (isWithinLink(field)) return
+
+  event.stopPropagation()
+  event.preventDefault()
+
+  const selectedText = field.value.substring(field.selectionStart, field.selectionEnd)
+
+  insertText(field, linkify(selectedText, text), {addNewline: false})
+}
+
+function hasPlainText(transfer: DataTransfer): boolean {
+  return Array.from(transfer.types).includes('text/plain')
+}
+
+function isWithinLink(textarea: HTMLTextAreaElement): boolean {
+  const selectionStart = textarea.selectionStart || 0
+
+  if (selectionStart > 1) {
+    const previousChars = textarea.value.substring(selectionStart - 2, selectionStart)
+    return previousChars === ']('
+  } else {
+    return false
+  }
+}
+
+function linkify(selectedText: string, text: string): string {
+  return selectedText.length && isURL(text) ? `[${selectedText}](${text})` : text
+}
+
+function isURL(url: string): boolean {
+  return /^https?:\/\//i.test(url)
+}

src/text.ts

@@ -1,8 +1,12 @@
-export function insertText(textarea: HTMLInputElement | HTMLTextAreaElement, text: string): void {
+export function insertText(
+  textarea: HTMLInputElement | HTMLTextAreaElement,
+  text: string,
+  options = {addNewline: true}
+): void {
   const beginning = textarea.value.substring(0, textarea.selectionStart || 0)
   const remaining = textarea.value.substring(textarea.selectionEnd || 0)
 
-  const newline = beginning.length === 0 || beginning.match(/\n$/) ? '' : '\n'
+  const newline = !options.addNewline || beginning.length === 0 || beginning.match(/\n$/) ? '' : '\n'
   const textBeforeCursor = beginning + newline + text
 
   textarea.value = textBeforeCursor + remaining

test/test.js

@@ -1,4 +1,4 @@
-import subscribe from '../dist/index.esm.js'
+import {subscribe} from '../dist/index.esm.js'
 
 describe('paste-markdown', function () {
   describe('installed on textarea', function () {
@@ -23,6 +23,14 @@ describe('paste-markdown', function () {
       assert.include(textarea.value, '![](https://github.com/github.png)\n\n![](https://github.com/hubot.png)')
     })
 
+    it('turns pasted urls on selected text into markdown links', function () {
+      // eslint-disable-next-line i18n-text/no-en
+      textarea.value = 'The examples can be found here.'
+      textarea.setSelectionRange(26, 30)
+      paste(textarea, {'text/plain': 'https://github.com'})
+      assert.equal(textarea.value, 'The examples can be found [here](https://github.com).')
+    })
+
     it('turns html tables into markdown', function () {
       const data = {
         'text/html': `