Skip to content
Jayden Smith edited this page Sep 8, 2026 · 4 revisions

Addons

The 2.x editor and viewer accept addons as a flat readonly array of immutable descriptors. Use the addon factories instead of the previous addons={{ mentions: … }} configuration map.

import {
    createMentionsAddon,
    RichTextEditor,
    type EditorAddons,
} from '@apollohg/react-native-rich-text-editor';

const mentions = createMentionsAddon({
    trigger: '@',
    suggestions: [{ key: 'ada', title: 'Ada Lovelace', label: '@ada' }],
});

const addons = [mentions] satisfies EditorAddons;

<RichTextEditor documentHandle={documentHandle} addons={addons} />;

For this example, create documentHandle with schema: withMentionsSchema(defaultSchema) as shown in Mentions. Addons configure view behavior; they do not modify an existing document handle's schema.

Available capabilities

Capability Factory and package Editor / viewer behavior
Mentions createMentionsAddon from @apollohg/react-native-rich-text-editor Editor suggestions and insertion callbacks; viewer prefixes and press callbacks; shared chip styling.
Code syntax highlighting createCodeHighlightingAddon from @apollohg/react-native-rich-text-editor-code-highlighting Native token highlighting in code blocks on both views. Optional package and native rebuild required.

createMentionsAddon() accepts an optional MentionsAddonOptions object. This includes editor trigger/suggestions/callbacks, theme, and viewer prefix/onPress. See Mentions for the complete flow and Code Syntax Highlighting for installation and supported languages.

Composition and updates

Entries may be descriptors, false, null, or undefined, so features can be conditional:

const addons = [mentionsEnabled && mentions, null] satisfies EditorAddons;

The array must be flat: nested arrays are rejected. A view accepts at most one descriptor per capability. Two mentions descriptors or two highlighting descriptors throw an error; their configurations do not merge. Combine mention options in one factory call, and replace that descriptor when suggestions or callbacks change.

Factories return frozen descriptors. createMentionsAddon copies and freezes nested plain objects and arrays; configuration cycles or class instances are rejected. Treat addon configuration as immutable, and create a new descriptor when it changes. Memoizing descriptors with the inputs as dependencies can keep their identity stable between React renders.

The same EditorAddons type is accepted by RichTextEditor and RichTextViewer. Sharing descriptors does not change editability: suggestion/insertion callbacks serve the editor, while prefix and onPress serve the viewer. The viewer composes the standard mention schema automatically; editor handles still require withMentionsSchema before creation.

Omit an addon to disable that capability for a view. Removing a highlighting descriptor stops view-specific work but does not remove its installed native engine from the application; uninstall the package and rebuild to remove those assets.

Descriptor version: 1 identifies the addon interface format, not the editor package version. Only the supported mentions and code-highlighting capabilities are accepted by the current public union. An arbitrary descriptor is not a general plugin registration API.

Clone this wiki locally