Code Monkey home page Code Monkey logo

quote-selection's Introduction

Quote selection

Helpers for quoting selected text, appending the text into 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 {Quote} from '@github/quote-selection'

document.addEventListener('keydown', event => {
  if (event.key == 'r') {
    const quote = new Quote()
    if (quote.closest('.my-quote-region')) {
      quote.insert(document.querySelector('textarea'))
    }
  }
})

Quote will take the currently selected HTML from the specified quote region, convert it to markdown, and create a quoted representation of the selection.

insert will insert the string representation of a selected text into the specified text area field.

Preserving Markdown syntax

const quote = new MarkdownQuote('.comment-body')
quote.select(document.querySelector('.comment-body'))
if (quote.closest('.my-quote-region')) {
  quote.insert(quote, document.querySelector('textarea'))
}

Using MarkdownQuote instead of Quote will ensure markdown syntax is preserved.

The optional scopeSelector parameter of MarkdownQuote 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.

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

quote-selection's People

Contributors

actions-user avatar akenneth avatar alondahari avatar arunsathiya avatar dependabot[bot] avatar dgraham avatar dgreif avatar jfuchs avatar keithamus avatar khiga8 avatar koddsson avatar manuelpuyol avatar mattcosta7 avatar mislav avatar muan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

quote-selection's Issues

[Feature Request] Add append & prepend options

Hi! We would like to make the quote insertion more customizable by adding options to append and prepend strings to the quotes. I imagine the usage can look something like this:

quote(selection.toString(), selection.getRangeAt(0), {
  prepend: 'before quote', 
  append: 'after quote' 
})

which would insert the following text to the textarea:

before quote

> intelligent thing that was quoted

after quote

For our use case, we only need these additional options for the quote function, but perhaps it will make sense to also allow these options to be set at install?

To set expectations, our team would be happy to take on the work to actually build out this feature, but we'd like to first get your ๐Ÿ‘ on the approach and direction!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.