Quill Extension for Emoji Selection
npm install quill-emojiTo 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.
#### This module is still in active development
`sh`
yarn add quill-emoji
`javascript`
const toolbarOptions = {
container: [
['bold', 'italic', 'underline', 'strike'],
['emoji'],
],
handlers: {'emoji': function() {}}
}
const quill = new Quill(editor, {
// ...
modules: {
// ...
toolbar: toolbarOptions,
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
}
});
or
`javascript
import * as Emoji from "quill-emoji";
Quill.register("modules/emoji", Emoji);
theme="snow"
modules={{
toolbar: toolbarOptions,
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
}}
value={quill_data.delta}
/>
`
Styles are present under
`javascript`
import "quill-emoji/dist/quill-emoji.css";
#### Example options
`javascript
// Custom emoji-list
const emojiList = [ / emojiList / ];
// MDI emojicon instead of default icon
const emojiIcon = '';
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
}
}
});
`
#### New emoji blot
`javascript
import Quill from 'quill';
const Embed = Quill.import('blots/embed');
class EmojiBlot extends Embed {
// Customized version of src/format-emoji-blot.js
// ...
}
EmojiBlot.blotName = 'emoji';
EmojiBlot.tagName = 'span';
Quill.register({
'formats/emoji': EmojiBlot
}, true);
``
Please check out our contributing guidelines.
)