npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

medium-editor-phrase

v1.0.2

Published

Phrase button for Medium Editor; useful for adding span tags to text.

Downloads

394

Readme

Medium Editor Phrase

Build Status Coverage Status

Medium Editor Phrase is an extension to add a "phrase" button to Medium Editor.

A "phrase" is a group of one or more words.

This extension can be used to add a button to Medium Editor that adds an HTML tag to the selected text. Generally this means adding a span tag around a phrase that may not have any semantic meaning. The span can be useful for adding styles to the selected phrase. The phraseTagName is an option, so any HTML phasing content tag can be used, e.g. span, em, or code.

In some cases an alternative is MediumButton; however, Medium Editor Phrase has improved handling of selecting/unselecting text and unit tests pass on Chrome, Firefox, Safari, Safari Mobile, and Edge.

Installation

npm install medium-editor-phrase

Initialization options

Options unique to Medium Editor Phrase:

  • phraseTagName: lowercase tagName of the phrase tag, default 'span'
  • phraseClassList: classes applied to each phrase tag, default []

Options inherited from Medium Editor's button:

  • name: name used to reference the button from medium editor, default 'phrase'
  • aria: aria label, default 'phrase'
  • contentDefault: HTML visible to the user in the toolbar button, default 'S'
  • classList: classes added to the button, default []

Example

In this example, selected text will have a span added, e.g. preceding selected succeeding will become preceding <span class="has-footnote">selected</span> succeeding.

<div class="editable"></div>

<script type="text/javascript" src="<path_to_medium-editor>/dist/js/medium-editor.js"></script>
<script type="text/javascript" src="<path_to_medium-editor-phrase>/dist/medium-editor-phrase.js"></script>

<script type="text/javascript" charset="utf-8">
  var editor = new MediumEditor('.editable', {
    toolbar: {
      buttons: ['bold', 'italic', 'phrase']
    },
    extensions: {
      phrase: new MediumEditorPhrase({
         name: 'footnote',
         aria: 'footnote',
         contentDefault: 'F¹',
         phraseClassList: ['has-footnote']
      })
    }
  });
</script>

Terminal commands

  • npm install medium-editor-phrase downloads Medium Editor Phrase.
  • npm test runs both eslint and karma tests configured by karma.conf.js.
  • npm run test-travis runs eslint and karma configured for Travis CI by karma.travis.conf.js to run tests on headless Chrome browser and report code coverage to Coveralls.
  • npm run test-browserstack runs eslint locally and karma tests on BrowserStack configured by karma.browserstack.conf.js. Note: BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environment variables must be set to run tests on BrowserStack.
  • gulp compiles the script to dist/medium-editor-phrase.js and dist/medium-editor-phrase.min.js.

License

MIT