@windmillcode/quill-emoji
v2.0.1000
Published
Quill Extension for Emoji Selection
Downloads
7,164
Maintainers
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.
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.