Text Editor - Emoji Plugin

Convert :shortcode: to emoji during input, with an insert command for picker UIs.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
import { emojiPlugin } from './emoji-plugin';
<TextEditor.Root v-model="value" :plugins="[emojiPlugin]">
    <TextEditor.Toolbar v-slot="{ plugins }">
        <button @click="plugins.emoji?.insert('fire')">🔥</button>
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

The Emoji plugin rewrites :shortcode: to the matching emoji during input, and exposes an insert(shortcode) command so picker buttons can insert emoji at the caret. The shortcode map is small and overridable through options for extension or replacement.

#Options

OptionTypeDefaultDescription
mapRecord<string, string>—Extra/override shortcode → emoji entries, merged over the built-in set
const plugins = [[emojiPlugin, { map: { shipit: '🚀', party: '🥳' } }]];

#Commands

CommandSignatureDescription
insert(shortcodeOrEmoji: string) => voidInserts the emoji for a shortcode (or a literal emoji)
list() => { shortcode, emoji }[]Returns the full shortcode → emoji map for picker UIs

#Plugin Definition

import { defineTextEditorPlugin } from '@primeui/vue-texteditor';
import { InputRule, inputRules } from 'prosemirror-inputrules';

const DEFAULT_MAP: Record<string, string> = {
    fire: '🔥',
    rocket: '🚀',
    tada: '🎉',
    sparkles: '✨'
    // ...
};

export const emojiPlugin = defineTextEditorPlugin('emoji', (ctx) => {
    const map = { ...DEFAULT_MAP, ...ctx.options?.map };

    const rule = new InputRule(/:([a-z0-9_+-]+):$/, (state, match, start, end) => {
        const emoji = map[match[1]];

        return emoji ? state.tr.insertText(emoji, start, end) : null;
    });

    const remove = ctx.registerProseMirrorPlugin(inputRules({ rules: [rule] }));

    ctx.onUnmounted(remove);

    return {
        commands: {
            insert: (code: string) => ctx.replaceSelection(map[code.replace(/:/g, '')] ?? code),
            list: () => Object.entries(map).map(([shortcode, emoji]) => ({ shortcode, emoji }))
        }
    };
});

#Example

Type :fire: or use the buttons.

Loading Demo...