Skip to main content

extension-emoji

package @remirror/extension-emoji

class EmojiExtension

Signature:

export declare class EmojiExtension extends NodeExtension<EmojiOptions> 

Extends: NodeExtension<EmojiOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

property moji

Signature:

get moji(): Moji;

property name

The name is dynamically generated based on the passed in type.

Signature:

get name(): "emoji";

method addEmoji

Insert an emoji into the document at the requested location by name

The range is optional and if not specified the emoji will be inserted at the current selection.

Signature:

addEmoji(identifier: string, options?: AddEmojiCommandOptions): CommandFunction;

Parameters:

ParameterTypeDescription
identifierstringthe hexcode | unicode | shortcode | emoticon of the emoji to insert.
optionsAddEmojiCommandOptions(Optional) the options when inserting the emoji.

Returns:

CommandFunction

method createInputRules

Manage input rules for emoticons.

Signature:

createInputRules(): InputRule[];

Returns:

InputRule[]

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes
overrideNodeSpecOverride

Returns:

NodeExtensionSpec

method createSuggesters

Emojis can be selected via : the colon key (by default). This sets the configuration using prosemirror-suggest

Signature:

createSuggesters(): Suggester;

Returns:

Suggester

method createTags

Signature:

createTags(): "inline"[];

Returns:

"inline"[]

method handleEnterKey

Signature:

handleEnterKey({ tr, next }: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
{ tr, next }KeyBindingProps

Returns:

boolean

method suggestEmoji

Inserts the suggestion character into the current position in the editor in order to activate the suggestion popup.

Signature:

suggestEmoji(selection?: PrimitiveSelection): CommandFunction;

Parameters:

ParameterTypeDescription
selectionPrimitiveSelection(Optional)

Returns:

CommandFunction

variable EMOJI_DATA_ATTRIBUTE

Signature:

EMOJI_DATA_ATTRIBUTE = "data-remirror-emoji"

interface AddEmojiCommandOptions

Signature:

export interface AddEmojiCommandOptions 

property selection

Signature:

selection?: PrimitiveSelection;

interface EmojiOptions

Signature:

export interface EmojiOptions extends Pick<Suggester, 'supportedCharacters'> 

Extends: Pick<Suggester, 'supportedCharacters'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property data

The list of emoji data to make available to the user. This is used to create the underlying instance of the Moji which is used for searching and generating CDN urls.

If you provide your own Moji instance then you can set this to an empty array [].

import data from 'svgmoji/emoji.json';

const emojiExtension = new EmojiExtension({ data, moji: 'noto' });

Signature:

data: FlatEmoji[];

property fallback

The fallback emoji. This is only used when moji is not provided or is a string.

Signature:

fallback?: AcceptUndefined<string>;

property identifier

The default representation for the emoji identifier.

  • emoji for the unicode representation of the emoji 👍 - hexcode for the hexcode representation 1F44D

This is the value that is assigned to the emoji attributes and will be stored in the RemirrorJSON output. If you're backend does not support unicode then you should set this to hexcode.

Signature:

identifier?: 'emoji' | 'hexcode';

property moji

Under the hood the EmojiExtension use svgmoji to manage the custom emoji assets.

The available options are 'noto' | 'openmoji' | 'twemoji' | 'blob'

Signature:

moji?: NamedMojiType | Moji;

property plainText

When true, emoji will be rendered as plain text instead of atom nodes.

This is a static property and can only be set at the creation of the emoji extension.

Signature:

plainText?: Static<boolean>;

property suggestEmoji

A handler which will be called when the suggestions are activated.

Signature:

suggestEmoji?: Handler<EmojiSuggestHandler>;

property suggestionCharacter

The character which will activate the suggestion query callback.

Signature:

suggestionCharacter?: string;

interface EmojiSuggestHandlerProps

Signature:

export interface EmojiSuggestHandlerProps 

property apply

A function that takes the current suggested area and applies the command for the current range.

Signature:

apply: EmojiSuggestHandlerCommand;

property change

true when the update to the suggestion was caused by a change to the query, or cursor position in the matching position.

This can be true while exit is true if a change was caused by jumping between matching suggestion positions.

Signature:

change: boolean;

property exit

true when this change was triggered by an exit. Both exit and change can be true when jumping between matching suggestion positions in the document.

Signature:

exit: boolean;

property moji

The Moji instance which can be used for searching for relevant emoji or finding an emoji that matches the constraints of the user.

Signature:

moji: Moji;

property query

The query value after the activation character.

Signature:

query: string;

property range

The range of the matching suggestion.

Signature:

range: FromToProps;

property text

The full text value of the queried match.

Signature:

text: string;

type EmojiAttributes

Signature:

export type EmojiAttributes = ProsemirrorAttributes<{
code: string;
}>;

References: ProsemirrorAttributes

type EmojiSuggestHandler

Signature:

export type EmojiSuggestHandler = (props: EmojiSuggestHandlerProps) => void;

References: EmojiSuggestHandlerProps

type EmojiSuggestHandlerCommand

The emoji command. Pass in the unique identifier which can either be a shortcode, hexcode, emoji etc and it find the matching emoji for you.

Signature:

export type EmojiSuggestHandlerCommand = (emoji: string) => void;

type NamedMojiType

Signature:

export type NamedMojiType = keyof typeof DefaultMoji;