# Emoji Plugin 😀😀😀

This plugin provides support for convenient insertion of emojis in a unified, platform-independent way. Emojis can be inserted by typing codes based on Unicode Short Names in the editor, or by using a button on the toolbar that opens a dropdown list of emojis.

The emoji dropdown allows you to filter the list, navigate through categories, or search for suitable emojis.

The keyword matching feature ensures that when searching for a term (e.g., "doctor"), related matches will also be displayed (such as ":face_with_medical_mask:", ":man_health_worker:", ":woman_health_worker:", ":hospital:" or ":pill").

The Emoji plugin implements an autocomplete feature. It includes an autocomplete component that will display available emojis after the user types a colon (":") in the editor content.

## Installation

Add "emoji" to your Jodit editor's plugin list:

```js
const editor = Jodit.make('#editor', {
    extraPlugins: ['emoji']
});
```

## Usage

### Via Toolbar

The plugin adds an "Emoji" button to the editor toolbar in the "insert" group. When you click on this button, a dropdown list with emojis grouped by categories opens.

```js
const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji']
});
```

### Via Autocomplete

If the `enableAutoComplete` option is enabled (by default), you can type emojis starting with a colon (":") followed by the emoji name. For example, `:smile:` or `:heart:`.

## Data Parsing

By default, the emoji list is loaded from a built-in JSON file that was created based on `https://raw.githubusercontent.com/github/gemoji/master/db/emoji.json` and processed.
You can run the `node utils/parse.js` file to get the latest version of this list.

## Options

### enableAutoComplete

- Type: Boolean
- Default: true

Enables or disables the emoji autocomplete feature. If enabled, the user can type emojis starting with a colon (":").

```js
Jodit.make('#editor', {
    emoji: {
        enableAutoComplete: true // Start with : to insert emoji. Type at least 2 characters, e.g., :sm
    }
});
```

### recentCountLimit

- Type: Number
- Default: 10

Defines the maximum number of recently used emojis that will be displayed in the "Recent" section.

```js
Jodit.make('#editor', {
    emoji: {
        recentCountLimit: 100 // Show the last 100 selected emojis
    }
});
```

### data

- Type: Function
- Default: Built-in emoji list

A function that returns emoji data. It can return an object or a Promise that resolves to an object with emoji data.

Data format:

```typescript
// Full type definitions for emoji data structures

// Compressed format (used in JSON data files for size optimization)
interface IShortEmoji {
    e: string;      // emoji character (e.g., '😀')
    d: string;      // description (e.g., 'grinning face')
    c: number;      // category index
    a?: string[];   // aliases (optional) - alternative names
    t?: string[];   // tags (optional) - search keywords
}

// Normalized format (used internally after processing)
interface IEmoji {
    emoji: string;       // emoji character
    description: string; // full description
    category: number;    // category index
    aliases?: string[];  // alternative names
    tags?: string[];     // search keywords
}

// Type for emoji lists that can contain either format
type IEmojiList = Array<IEmoji | IShortEmoji>;

// Main data structure for emoji configuration
interface IEmojiData<T = IEmojiList> {
    categories: string[];  // Array of category names
    emoji: T;              // Array of emoji items
}
```

**Important Notes:**
- The `IShortEmoji` format is used in JSON files to reduce file size (shortened property names)
- The `IEmoji` format is the normalized internal representation with full property names
- The plugin automatically converts between these formats using internal normalization
- When providing custom data, you can use either format

#### Example with Local Data

```js
Jodit.make('#editor', {
    emoji: {
        data: () => ({
            categories: ['Smileys & Emotion'],
            emoji: [
                {
                    e: '😀',
                    d: 'grinning face',
                    c: 0,
                    a: ['grinning'],
                    t: ['smile', 'happy']
                },
                {
                    e: '😃',
                    d: 'grinning face with big eyes',
                    c: 0,
                    a: ['smiley'],
                    t: ['happy', 'joy', 'haha']
                }
            ]
        })
    }
});
```

#### Example with Remote Data Source

```js
Jodit.make('#editor', {
    emoji: {
        data: () =>
            fetch('https://some.com/emoji.json').then((res) => res.json())
    }
});
```

## Examples

### Basic Usage

```js
const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji']
});
```

### Configuring Recent Emoji Limit and Disabling Autocomplete

```js
const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji'],
    emoji: {
        enableAutoComplete: false, // Disable autocomplete
        recentCountLimit: 20 // Show 20 recent emojis
    }
});
```

### Using a Custom Emoji Set

```js
const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji'],
    emoji: {
        data: () => ({
            categories: ['Favorites', 'Animals'],
            emoji: [
                {
                    e: '❤️',
                    d: 'heart',
                    c: 0,
                    a: ['love'],
                    t: ['love', 'red']
                },
                {
                    e: '👍',
                    d: 'thumbs up',
                    c: 0,
                    a: ['like'],
                    t: ['good', 'approve']
                },
                {
                    e: '🐱',
                    d: 'cat',
                    c: 1,
                    a: ['kitty'],
                    t: ['animal', 'pet']
                },
                {
                    e: '🐶',
                    d: 'dog',
                    c: 1,
                    a: ['puppy'],
                    t: ['animal', 'pet']
                }
            ]
        })
    }
});