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

@windmillcode/quill-emoji

v2.0.1000

Published

Quill Extension for Emoji Selection

Downloads

7,164

Readme

Notes

  • shorthand does not work make a PR to fix and make an option
  • everything seems to export as [name].default and all the usual properties exist on [name].default need assistance in order to make truly tree shakable
  • built for Quill 2.0.0 lsb version will be based on version starting with 2.0.0000
    • [2.0.0] - is the quill version
    • [000] - is the major minor patch version of our library
    • meaning we only have 9 digits avaialble for major,minor and patch before we have to wait for qull library to update hopefully it does not come to that
    • however according to the semver spec the there cant be trailing zeros so for 2.0.0 there will be patch updates until 2.x.x comes out
    • for every new version of quill down to its patch there will be new release hopefully on the same day
  • there is no testing but minimal modification from quill emoji to get things to work with quill 2.0.0 feel free to add test cases and open a PR
  • cant copy emojis open a PR as necessary

Windmillcode Quill Emoji Selector

Module extension for Quill.js that handles emojis in the toolbar. Through this extension, you can add emojis through the toolbar at the top, or by typing the emoji code.

Screenshot

To add an emoji via emoji code, type : followed by the first few letters, and an autocomplete menu will appear. You can then select or tab to the preferred emoji.

Installation

npm install  @windmillcode/quill-emoji

Usage

// someone can contribute and make ShortNameEmoji work
// itseems the only emoji needed is text area
import Quill from 'quill';
import {
// ShortNameEmoji
// EmojiBlot
// ToolbarEmoji
  TextAreaEmoji }from "@windmillcode/quill-emoji";


// Quill.register(EmojiBlot)
// Quill.register('modules/emoji-shortname', ShortNameEmoji,true)
// Quill.register('modules/emoji-toolbar', ToolbarEmoji,true)
Quill.register('modules/emoji-textarea', TextAreaEmoji,true)

Import styles

Styles are present under

import "@windmillcode/quill-emoji/quill-emoji.css";

Options

See emoji-list.js for emoji list example

Example options

// Custom emoji-list
const emojiList = [ /* emojiList */ ];

// MDI emojicon instead of default icon
const emojiIcon = '<svg class="i" viewBox="0 0 24 24"><use href="#emoticon-happy"></use></svg>';

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    "emoji-shortname": {
      emojiList: emojiList,
      fuse: {
        shouldSort: true,
        threshold: 0.1,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
          "shortname"
        ]
      },
      onOpen: function() { /* ... */ },
      onClose: function(emojiListItem) { /* ... */ }
    },
    "emoji-toolbar": {
      buttonIcon: emojiIcon
    },
    "emoji-textarea": {
      buttonIcon: emojiIcon
    }

  }
});

Custom Emoji Blot

If you need to display the emojis in a different way, you can customize the emoji blot by creating a new blot or extending the default emoji blot.

Contributing

Please check out our contributing guidelines.