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;