# quill-emoji

> Quill Extension for Emoji Selection

Latest version **0.2.0** (published 2021-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install quill-emoji
pnpm add quill-emoji
yarn add quill-emoji
bun add quill-emoji
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-03-31 |
| First published | 2017-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 278 |
| Author | contentco |
| Maintainers | contentco |
| Keywords | content, emoji, quill, editor |

## Links

- npm: https://www.npmjs.com/package/quill-emoji
- Repository: https://github.com/contentco/quill-emoji
- Homepage: https://github.com/contentco/quill-emoji#readme
- Issues: https://github.com/contentco/quill-emoji/issues
- npm.io page: https://npm.io/package/quill-emoji

## Dependencies (2)

- [fuse.js](https://npm.io/package/fuse.js.md) ^3.3.0
- [emoji-data-css](https://npm.io/package/emoji-data-css.md) ^1.0.1

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.2.0 (latest) — 2021-03-31
- 0.1.8 — 2020-08-06
- 0.1.7 — 2019-03-06
- 0.1.6 — 2019-02-28
- 0.1.5 — 2018-12-27
- 0.1.4 — 2018-10-17
- 0.1.3 — 2018-10-07
- 0.1.2 — 2018-09-21
- 0.1.1 — 2018-09-15
- 0.0.9 — 2017-06-06
- 0.0.8 — 2017-06-06

## README

# Quill Emoji Selector
Module extension for [Quill.js](https://github.com/quilljs/quill) 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](/demo/screenshot.png)

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.




#### This module is still in active development

## Installation

```sh
yarn add quill-emoji
```

## Usage
### Webpack/ES6

```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);

<Quill
  defaultValue=""
  theme="snow"
  modules={{
    toolbar: toolbarOptions,
    "emoji-toolbar": true,
    "emoji-textarea": true,
    "emoji-shortname": true,
  }}
  value={quill_data.delta}
/>
```

### Import styles

Styles are present under

```javascript
import "quill-emoji/dist/quill-emoji.css";
```



### Examples
- [Classic HTML/JS](demo/index.html)
- [AngularJS](demo/angular.html) using [ng-quill](https://github.com/KillerCodeMonkey/ng-quill)

### Options
See [emoji-list.js](src/emoji-list.js) for emoji list example

#### Example options
```javascript
// 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](src/format-emoji-blot.js) by creating a new blot or extending the default emoji blot.

#### 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);
```

## Contributing

Please check out our [contributing guidelines](CONTRIBUTING.md).
)

---
_Source: https://npm.io/package/quill-emoji · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._