Skip to content
Activates a suggestion menu to expand text snippets as you type.
Branch: master
Clone or download
Latest commit 0b96914 Jun 12, 2019

README.md

<text-expander> element

Activates a suggestion menu to expand text snippets as you type.

Installation

$ npm install --save @github/text-expander-element

Usage

import '@github/text-expander-element'
<text-expander keys=": @ #">
  <textarea></textarea>
</text-expander>

Attributes

  • keys is a space separated list of menu activation keys

Events

const expander = document.querySelector('text-expander')

expander.addEventListener('text-expander-change', function(event) {
  const {key, provide} = event.detail
  if (key === ':') {
    const menu = document.createElement('ul')
    const item = document.createElement('li')
    item.textContent = '🐈'
    item.role = 'option'
    menu.append(item)
    provide(Promise.resolve({matched: true, fragment: menu}))
  }
})

expander.addEventListener('text-expander-value', function(event) {
  const {key, item}  = event.detail
  if (key === ':') {
    event.detail.value = '🐈'
  }
})

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

You can’t perform that action at this time.