Quote selection

Install a keyboard shortcut r to append selected text to a <textarea> as a Markdown quote.

Installation

$ npm install @github/quote-selection

Usage

<div class="my-quote-region">
  <p>Text to quote</p>
  <textarea></textarea>
</div>

import {install} from '@github/quote-selection'

install(document.querySelector('.my-quote-region'))

This sets up a keyboard event handler so that selecting any text within .my-quote-region and pressing r appends the quoted representation of the selected text into the first applicable <textarea> element.

Preserving Markdown syntax

install(element, {
  quoteMarkdown: true,
  copyMarkdown: false,
  scopeSelector: '.comment-body'
})

The optional scopeSelector parameter ensures that even if the user selection bleeds outside of the scoped element, the quoted portion will always be contained inside the scope. This is useful to avoid accidentally quoting parts of the UI that might be interspersed between quotable content.

In copyMarkdown: true mode, the browser clipboard copy action is intercepted for user selections within element and the Markdown representation of the content is placed on clipboard under the text/x-gfm MIME-type.

Events

• quote-selection-markdown (bubbles: true, cancelable: false) - fired on the quote region to optionally inject custom syntax into the fragment element in quoteMarkdown: true mode
• quote-selection (bubbles: true, cancelable: true) - fired on the quote region before text is appended to a textarea

For example, reveal a textarea so it can be found:

region.addEventListener('quote-selection', function(event) {
  const {selection, selectionText} = event.detail
  console.log('Quoted text', selection, selectionText)

  const textarea = event.target.querySelector('textarea')
  textarea.hidden = false

  // Cancel the quote behavior.
  // event.preventDefault()
})

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.