@apollohg/react-native-rich-text-editor 2.0.0

package/src/EditorStyleSheetNormalization.ts

@@ -0,0 +1,219 @@
+import { processColor } from 'react-native';
+import type {
+    EditorStyleMap,
+    NormalizedEditorStyle,
+    NormalizedEditorTheme,
+} from './EditorStyleSheetTypes';
+
+const typography = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'fontStyle',
+    'color',
+    'lineHeight',
+    'letterSpacing',
+    'textDecorationLine',
+    'textDecorationColor',
+    'textDecorationStyle',
+];
+const sides = ['Top', 'Right', 'Bottom', 'Left'];
+const corners = ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'];
+const border = [
+    'borderWidth',
+    'borderColor',
+    'borderStyle',
+    'borderRadius',
+    ...sides.flatMap((side) => [`border${side}Width`, `border${side}Color`]),
+    ...corners.map((corner) => `border${corner}Radius`),
+];
+const spacing = (prefix: string) => [
+    prefix,
+    `${prefix}Horizontal`,
+    `${prefix}Vertical`,
+    ...sides.map((side) => `${prefix}${side}`),
+];
+const surface = ['backgroundColor', ...border, ...spacing('padding')];
+const box = [...surface, ...spacing('margin')];
+const block = [...typography, ...box, 'textAlign'];
+const inline = [...typography, 'backgroundColor'];
+const checkbox = [...border, 'backgroundColor', 'checkColor'];
+const fields: Record<keyof EditorStyleMap, readonly string[]> = {
+    content: surface,
+    text: typography,
+    paragraph: block,
+    h1: block,
+    h2: block,
+    h3: block,
+    h4: block,
+    h5: block,
+    h6: block,
+    blockquote: block,
+    codeBlock: block,
+    bulletList: [...block, 'indent', 'baseIndentMultiplier'],
+    orderedList: [...block, 'indent', 'baseIndentMultiplier'],
+    taskList: [...block, 'indent', 'baseIndentMultiplier'],
+    listItem: block,
+    taskItem: block,
+    listMarker: ['color', 'scale', 'gap', 'ordered'],
+    taskCheckbox: [...checkbox, 'size', 'gap', 'checked'],
+    horizontalRule: [...border, ...spacing('margin'), 'backgroundColor', 'height'],
+    image: [...box, 'resizeMode'],
+    link: inline,
+    inlineCode: inline,
+    bold: inline,
+    italic: inline,
+    underline: inline,
+    strike: inline,
+    mention: [...inline, ...border],
+    placeholder: typography,
+};
+const enums: Record<string, readonly string[]> = {
+    fontStyle: ['normal', 'italic'],
+    fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    textAlign: ['auto', 'left', 'right', 'center', 'justify'],
+    textDecorationLine: ['none', 'underline', 'line-through', 'underline line-through'],
+    textDecorationStyle: ['solid', 'double', 'dotted', 'dashed'],
+    borderStyle: ['solid', 'dashed', 'dotted'],
+    resizeMode: ['contain', 'cover', 'stretch'],
+};
+
+function invalid(path: string, reason: string): never {
+    throw new TypeError(`Invalid editor style ${path}: ${reason}`);
+}
+
+function record(value: unknown): value is Record<string, unknown> {
+    if (value == null || typeof value !== 'object' || Array.isArray(value)) return false;
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+}
+
+export function normalizeEditorColor(value: unknown, path: string): string {
+    if (typeof value !== 'string') return invalid(path, 'expected a color string');
+    const argb = processColor(value);
+    if (typeof argb !== 'number') return invalid(path, 'unrecognized color');
+    const rgba = ((argb << 8) | (argb >>> 24)) >>> 0;
+    return `#${rgba.toString(16).padStart(8, '0')}`;
+}
+
+function orderedMarker(value: unknown, path: string): Record<string, unknown> {
+    if (!record(value)) return invalid(path, 'expected an ordered marker object');
+    const result: Record<string, unknown> = {};
+    for (const [key, entry] of Object.entries(value)) {
+        if (key !== 'schemes' && key !== 'suffix')
+            invalid(`${path}.${key}`, 'unsupported property');
+        if (entry === undefined) continue;
+        if (key === 'suffix') {
+            if (entry !== '.' && entry !== ')') invalid(`${path}.${key}`, 'expected . or )');
+            result[key] = entry;
+        } else {
+            const schemes = ['decimal', 'lowerAlpha', 'upperAlpha', 'lowerRoman', 'upperRoman'];
+            if (
+                !Array.isArray(entry) ||
+                entry.length === 0 ||
+                !entry.every((item) => typeof item === 'string' && schemes.includes(item))
+            ) {
+                invalid(`${path}.${key}`, 'expected a nonempty array of numbering schemes');
+            }
+            result[key] = [...entry];
+        }
+    }
+    return result;
+}
+
+function property(key: string, value: unknown, path: string): unknown {
+    if (value === undefined) return undefined;
+    if (key === 'ordered') return orderedMarker(value, path);
+    if (key === 'checked') return normalizeStyle(value, checkbox, path);
+    if (key === 'color' || key.endsWith('Color')) return normalizeEditorColor(value, path);
+    if (key === 'fontFamily') {
+        if (typeof value !== 'string' || value.length === 0)
+            invalid(path, 'expected a nonempty font family');
+        return value;
+    }
+    if (enums[key]) {
+        const candidate = key === 'fontWeight' && typeof value === 'number' ? String(value) : value;
+        if (typeof candidate !== 'string' || !enums[key].includes(candidate))
+            invalid(path, 'unsupported value');
+        return candidate;
+    }
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        invalid(path, 'expected a finite number');
+    if (['fontSize', 'lineHeight', 'size', 'scale'].includes(key) && value <= 0)
+        invalid(path, 'expected a positive number');
+    if (!key.startsWith('margin') && key !== 'letterSpacing' && value < 0)
+        invalid(path, 'expected a nonnegative number');
+    return value;
+}
+
+function normalizeStyle(
+    value: unknown,
+    allowed: readonly string[],
+    path: string
+): Record<string, unknown> {
+    const raw: Record<string, unknown> = {};
+    const ancestors = new Set<object>();
+    function append(entry: unknown, depth: number): void {
+        if (entry === false || entry == null) return;
+        if (depth > 64) invalid(path, 'style arrays are nested too deeply');
+        if (Array.isArray(entry)) {
+            if (ancestors.has(entry)) invalid(path, 'cyclic style array');
+            ancestors.add(entry);
+            entry.forEach((item) => append(item, depth + 1));
+            ancestors.delete(entry);
+            return;
+        }
+        if (!record(entry)) invalid(path, 'expected a style object or array');
+        for (const [key, field] of Object.entries(entry)) {
+            if (!allowed.includes(key)) invalid(`${path}.${key}`, 'unsupported property');
+            raw[key] = property(key, field, `${path}.${key}`);
+        }
+    }
+    append(value, 0);
+    const result = Object.fromEntries(
+        Object.entries(raw).filter(([, value]) => value !== undefined)
+    );
+    for (const prefix of ['margin', 'padding']) {
+        for (const side of sides) {
+            const axis = side === 'Top' || side === 'Bottom' ? 'Vertical' : 'Horizontal';
+            const resolved = raw[`${prefix}${side}`] ?? raw[`${prefix}${axis}`] ?? raw[prefix];
+            if (resolved !== undefined) result[`${prefix}${side}`] = resolved;
+        }
+        delete result[prefix];
+        delete result[`${prefix}Horizontal`];
+        delete result[`${prefix}Vertical`];
+    }
+    for (const suffix of ['Width', 'Color']) {
+        for (const side of sides) {
+            const resolved = raw[`border${side}${suffix}`] ?? raw[`border${suffix}`];
+            if (resolved !== undefined) result[`border${side}${suffix}`] = resolved;
+        }
+        delete result[`border${suffix}`];
+    }
+    for (const corner of corners) {
+        const resolved = raw[`border${corner}Radius`] ?? raw.borderRadius;
+        if (resolved !== undefined) result[`border${corner}Radius`] = resolved;
+    }
+    delete result.borderRadius;
+    return result;
+}
+
+export function normalizeEditorTheme(theme: unknown): NormalizedEditorTheme {
+    if (!record(theme)) invalid('theme', 'expected a named style map');
+    const styles: Partial<Record<keyof EditorStyleMap, NormalizedEditorStyle>> = {};
+    const result: NormalizedEditorTheme = { version: 1 };
+    for (const [key, value] of Object.entries(theme)) {
+        if (key === 'toolbar') {
+            if (value !== undefined) {
+                if (!record(value)) invalid('toolbar', 'expected toolbar configuration');
+                result.toolbar = { ...value };
+            }
+            continue;
+        }
+        if (!Object.prototype.hasOwnProperty.call(fields, key)) invalid(key, 'unsupported element');
+        const style = normalizeStyle(value, fields[key as keyof EditorStyleMap], key);
+        if (Object.keys(style).length) styles[key as keyof EditorStyleMap] = style;
+    }
+    if (Object.keys(styles).length) result.styles = styles;
+    return result;
+}

package/src/EditorStyleSheetTypes.ts

@@ -0,0 +1,189 @@
+import type { TextStyle } from 'react-native';
+import type { EditorToolbarTheme, EditorFontWeight } from './EditorTheme';
+
+export type EditorStyleProp<T> = T | false | null | undefined | readonly EditorStyleProp<T>[];
+
+export interface EditorTypographyStyle {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: EditorFontWeight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    fontStyle?: 'normal' | 'italic';
+    color?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textDecorationLine?: TextStyle['textDecorationLine'];
+    textDecorationColor?: string;
+    textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
+}
+
+export interface EditorBorderStyle {
+    borderWidth?: number;
+    borderColor?: string;
+    borderStyle?: 'solid' | 'dashed' | 'dotted';
+    borderTopWidth?: number;
+    borderRightWidth?: number;
+    borderBottomWidth?: number;
+    borderLeftWidth?: number;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRadius?: number;
+    borderTopLeftRadius?: number;
+    borderTopRightRadius?: number;
+    borderBottomLeftRadius?: number;
+    borderBottomRightRadius?: number;
+}
+
+export interface EditorPaddingStyle {
+    padding?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+}
+
+export interface EditorMarginStyle {
+    margin?: number;
+    marginHorizontal?: number;
+    marginVertical?: number;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+}
+
+export interface EditorSurfaceStyle extends EditorBorderStyle, EditorPaddingStyle {
+    backgroundColor?: string;
+}
+
+export interface EditorBoxStyle extends EditorSurfaceStyle, EditorMarginStyle {}
+
+export interface EditorTextStyle extends EditorTypographyStyle, EditorBoxStyle {
+    textAlign?: TextStyle['textAlign'];
+}
+
+export interface EditorInlineStyle extends EditorTypographyStyle {
+    backgroundColor?: string;
+}
+
+export interface EditorImageStyle extends EditorBoxStyle {
+    resizeMode?: 'contain' | 'cover' | 'stretch';
+}
+
+export interface EditorListStyle extends EditorTextStyle {
+    indent?: number;
+    baseIndentMultiplier?: number;
+}
+
+export type EditorOrderedListNumberingScheme =
+    | 'decimal'
+    | 'lowerAlpha'
+    | 'upperAlpha'
+    | 'lowerRoman'
+    | 'upperRoman';
+
+export interface EditorOrderedListMarkerTheme {
+    schemes?: readonly EditorOrderedListNumberingScheme[];
+    suffix?: '.' | ')';
+}
+
+export interface EditorListMarkerStyle {
+    color?: string;
+    scale?: number;
+    gap?: number;
+    ordered?: EditorOrderedListMarkerTheme;
+}
+
+export interface EditorCheckboxAppearance extends EditorBorderStyle {
+    backgroundColor?: string;
+    checkColor?: string;
+}
+
+export interface EditorTaskCheckboxStyle extends EditorCheckboxAppearance {
+    size?: number;
+    gap?: number;
+    checked?: EditorStyleProp<EditorCheckboxAppearance>;
+}
+
+export interface EditorHorizontalRuleStyle extends EditorBorderStyle, EditorMarginStyle {
+    backgroundColor?: string;
+    height?: number;
+}
+
+export interface EditorMentionStyle extends EditorInlineStyle, EditorBorderStyle {}
+
+export interface EditorStyleMap {
+    content: EditorSurfaceStyle;
+    text: EditorTypographyStyle;
+    paragraph: EditorTextStyle;
+    h1: EditorTextStyle;
+    h2: EditorTextStyle;
+    h3: EditorTextStyle;
+    h4: EditorTextStyle;
+    h5: EditorTextStyle;
+    h6: EditorTextStyle;
+    blockquote: EditorTextStyle;
+    codeBlock: EditorTextStyle;
+    bulletList: EditorListStyle;
+    orderedList: EditorListStyle;
+    taskList: EditorListStyle;
+    listItem: EditorTextStyle;
+    taskItem: EditorTextStyle;
+    listMarker: EditorListMarkerStyle;
+    taskCheckbox: EditorTaskCheckboxStyle;
+    horizontalRule: EditorHorizontalRuleStyle;
+    image: EditorImageStyle;
+    link: EditorInlineStyle;
+    inlineCode: EditorInlineStyle;
+    bold: EditorInlineStyle;
+    italic: EditorInlineStyle;
+    underline: EditorInlineStyle;
+    strike: EditorInlineStyle;
+    mention: EditorMentionStyle;
+    placeholder: EditorTypographyStyle;
+}
+
+export type EditorTheme = {
+    [K in keyof EditorStyleMap]?: EditorStyleProp<EditorStyleMap[K]>;
+} & { toolbar?: EditorToolbarTheme };
+
+export type EditorLinkTheme = EditorInlineStyle;
+export type EditorHeadingTheme = Partial<
+    Record<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', EditorStyleProp<EditorTextStyle>>
+>;
+export type EditorListTheme = EditorListStyle;
+export type EditorHorizontalRuleTheme = EditorHorizontalRuleStyle;
+export type EditorBlockquoteTheme = EditorTextStyle;
+export type EditorCodeBlockTheme = EditorTextStyle;
+
+export type NormalizedEditorStyle = Readonly<Record<string, unknown>>;
+export interface NormalizedEditorTheme {
+    version: 1;
+    styles?: Partial<Record<keyof EditorStyleMap, NormalizedEditorStyle>>;
+    toolbar?: EditorToolbarTheme;
+}
+
+type ExactStyle<T, Shape> = T extends false | null | undefined
+    ? T
+    : T extends readonly unknown[]
+      ? { [K in keyof T]: ExactStyle<T[K], Shape> }
+      : Shape & {
+            [K in keyof T]: K extends keyof Shape
+                ? K extends 'checked'
+                    ? ExactStyle<T[K], EditorCheckboxAppearance>
+                    : K extends 'ordered'
+                      ? ExactStyle<T[K], EditorOrderedListMarkerTheme>
+                      : Shape[K]
+                : never;
+        };
+
+export type ExactEditorTheme<T> = {
+    [K in keyof T]: K extends keyof EditorStyleMap
+        ? ExactStyle<T[K], EditorStyleMap[K]>
+        : K extends 'toolbar'
+          ? EditorToolbarTheme
+          : never;
+};

package/src/EditorTheme.ts

@@ -0,0 +1,196 @@
+import type { EditorTheme, EditorMentionStyle } from './EditorStyleSheetTypes';
+import { normalizeEditorTheme } from './EditorStyleSheetNormalization';
+import { normalizeEditorMentionTheme } from './EditorMentionThemeNormalization';
+export type {
+    EditorTheme,
+    EditorTextStyle,
+    EditorLinkTheme,
+    EditorHeadingTheme,
+    EditorListTheme,
+    EditorOrderedListNumberingScheme,
+    EditorOrderedListMarkerTheme,
+    EditorHorizontalRuleTheme,
+    EditorBlockquoteTheme,
+    EditorCodeBlockTheme,
+} from './EditorStyleSheetTypes';
+
+/**
+ * Font weight accepted by every themed text style. Numeric weights are
+ * strings, matching React Native's `fontWeight`.
+ */
+export type EditorFontWeight =
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+
+/** Font slant accepted by every themed text style. */
+export type EditorFontStyle = 'normal' | 'italic';
+
+/** The mention itself, rendered inline in the document. */
+export interface EditorMentionNodeTheme extends EditorMentionStyle {
+    /** @deprecated Use color. Retained for persisted mention themes. */
+    textColor?: string;
+}
+
+/** A single row in the suggestion list. */
+export interface EditorMentionSuggestionOptionTheme {
+    /** Color of the row's primary text (`MentionSuggestion.title`). */
+    textColor?: string;
+    /** Color of the row's secondary text (`MentionSuggestion.subtitle`). */
+    secondaryTextColor?: string;
+    /** Fill drawn behind an unhighlighted row. */
+    backgroundColor?: string;
+    borderColor?: string;
+    /** Row border width, in layout units. */
+    borderWidth?: number;
+    /** Row corner radius, in layout units. */
+    borderRadius?: number;
+    /** Weight of the row's primary text. */
+    fontWeight?: EditorFontWeight;
+    /** Fill drawn behind the row under the cursor or pointer. */
+    highlightedBackgroundColor?: string;
+    /** Primary text color for the row under the cursor or pointer. */
+    highlightedTextColor?: string;
+}
+
+/** The container behind the suggestion rows. Honored by the JavaScript
+ *  `EditorToolbar`; the native keyboard toolbar styles rows only. */
+export interface EditorMentionSuggestionsTheme {
+    backgroundColor?: string;
+    borderColor?: string;
+    /** Container border width, in layout units. */
+    borderWidth?: number;
+    /** Container corner radius, in layout units. */
+    borderRadius?: number;
+    shadowColor?: string;
+    /** Styling for each suggestion row inside the container. */
+    option?: EditorMentionSuggestionOptionTheme;
+}
+
+/**
+ * Mention styling. It is configured on the mentions addon
+ * through `createMentionsAddon({ theme })`, and can be overridden per mention through
+ * `MentionsAddonConfig.resolveTheme`.
+ */
+export interface EditorMentionTheme {
+    node?: EditorMentionNodeTheme;
+    suggestions?: EditorMentionSuggestionsTheme;
+}
+
+/**
+ * Toolbar chrome style. `'custom'` renders the package's own chrome from
+ * this theme; `'native'` adopts the platform keyboard-accessory look, so the
+ * platform supplies chrome metrics this theme would otherwise set.
+ */
+export type EditorToolbarAppearance = 'custom' | 'native';
+
+/**
+ * Toolbar chrome and button colors. Honored by both the JavaScript
+ * `EditorToolbar` and the native keyboard toolbar unless a field says
+ * otherwise.
+ */
+export interface EditorToolbarTheme {
+    /** Chrome style. Defaults to `'custom'`. */
+    appearance?: EditorToolbarAppearance;
+    /** Toolbar height, in layout units. Defaults to a height that fits the buttons. */
+    height?: number;
+    backgroundColor?: string;
+    borderColor?: string;
+    /** Toolbar border width, in layout units. */
+    borderWidth?: number;
+    /** Toolbar corner radius, in layout units. */
+    borderRadius?: number;
+    /** Gap above an inline-placed toolbar, in layout units. Defaults to 8.
+     *  Ignored for `toolbarPlacement="keyboard"`. */
+    marginTop?: number;
+    /** Whether the JavaScript toolbar draws its top separator line. Defaults to
+     *  false through `RichTextEditor`, true for a standalone `EditorToolbar`. */
+    showTopBorder?: boolean;
+    /** Gap between the keyboard and the toolbar, in layout units. Applies to
+     *  `toolbarPlacement="keyboard"`; the platform default depends on `appearance`. */
+    keyboardOffset?: number;
+    /** Inset on each side of the keyboard-attached toolbar, in layout units.
+     *  The platform default depends on `appearance`. */
+    horizontalInset?: number;
+    /** Color of `separator` toolbar items. */
+    separatorColor?: string;
+    /** Icon color of an idle button. */
+    buttonColor?: string;
+    /** Fill drawn behind an idle button. */
+    buttonBackgroundColor?: string;
+    /** Icon size for toolbar buttons, in layout units. */
+    buttonIconSize?: number;
+    /** Icon color of a button whose mark or node is active at the selection. */
+    buttonActiveColor?: string;
+    /** Icon color of a button the current selection cannot apply. */
+    buttonDisabledColor?: string;
+    /** Fill drawn behind an active button. */
+    buttonActiveBackgroundColor?: string;
+    /** Fill drawn behind a disabled button. */
+    buttonDisabledBackgroundColor?: string;
+    /** Button corner radius, in layout units. */
+    buttonBorderRadius?: number;
+}
+
+/** Padding between the editor's edges and its content, in layout units. */
+export interface EditorContentInsets {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+
+function stripUndefined(value: unknown): unknown {
+    if (Array.isArray(value)) {
+        return value.map((item) => stripUndefined(item)).filter((item) => item !== undefined);
+    }
+
+    if (value != null && typeof value === 'object') {
+        const entries = Object.entries(value as Record<string, unknown>)
+            .map(([key, entryValue]) => [key, stripUndefined(entryValue)] as const)
+            .filter(([, entryValue]) => entryValue !== undefined);
+        if (entries.length === 0) {
+            return undefined;
+        }
+        return Object.fromEntries(entries);
+    }
+
+    if (typeof value === 'number' && !Number.isFinite(value)) {
+        return undefined;
+    }
+
+    return value;
+}
+
+// Mentions are configured on the mentions addon, not on EditorTheme; native
+// still reads them from the theme payload.
+export function serializeEditorTheme(
+    theme?: EditorTheme,
+    mentionTheme?: EditorMentionTheme
+): string | undefined {
+    const normalized = theme === undefined ? undefined : normalizeEditorTheme(theme);
+    const cleanedTheme =
+        normalized && (normalized.styles || normalized.toolbar)
+            ? stripUndefined(normalized)
+            : undefined;
+    const base =
+        cleanedTheme && typeof cleanedTheme === 'object'
+            ? (cleanedTheme as Record<string, unknown>)
+            : undefined;
+    const cleanedMentions = mentionTheme
+        ? stripUndefined(normalizeEditorMentionTheme(mentionTheme))
+        : undefined;
+
+    if (cleanedMentions == null) {
+        return base ? JSON.stringify(base) : undefined;
+    }
+    return JSON.stringify({ version: 1, ...(base ?? {}), mentions: cleanedMentions });
+}

package/src/EditorToolbar.tsx

@@ -0,0 +1,31 @@
+export {
+    type EditorToolbarListType,
+    type EditorToolbarHeadingLevel,
+    type EditorToolbarCommand,
+    type EditorToolbarGroupPresentation,
+    type EditorToolbarItemPlacement,
+    type EditorToolbarDefaultIconId,
+    type EditorToolbarSFSymbolIcon,
+    type EditorToolbarMaterialIcon,
+    type EditorToolbarIcon,
+    type EditorToolbarButtonStyle,
+    type EditorToolbarLeafItem,
+    type EditorToolbarGroupChildItem,
+    type EditorToolbarGroupItem,
+    type EditorToolbarItem,
+    type EditorToolbarProps,
+} from './EditorToolbarTypes';
+export {
+    type EditorToolbarFrame,
+    EditorToolbarFrameOwnerProvider,
+    isEditorToolbarFocusPreservationActive,
+    setActiveEditorToolbarFrameOwnerForEditor,
+    useEditorToolbarFrames,
+    setEditorToolbarMentionState,
+    _setEditorToolbarFrameForTests,
+    _resetEditorToolbarFrameRegistryForTests,
+    _beginEditorToolbarInteractionForTests,
+    _endEditorToolbarInteractionForTests,
+} from './EditorToolbarRegistry';
+export { DEFAULT_EDITOR_TOOLBAR_ITEMS } from './EditorToolbarItems';
+export { EditorToolbar } from './EditorToolbarComponent';

package/src/EditorToolbarComponent.tsx

@@ -0,0 +1,23 @@
+import { type EditorToolbarProps } from './EditorToolbarTypes';
+import { useEditorToolbarState } from './useEditorToolbarState';
+import { useEditorToolbarItems } from './useEditorToolbarItems';
+import { useEditorToolbarInteractions } from './useEditorToolbarInteractions';
+import { useEditorToolbarPresentation } from './useEditorToolbarPresentation';
+
+/**
+ * A JavaScript formatting toolbar. `RichTextEditor` renders one for you
+ * when `showToolbar` is set — reach for this component directly only to place
+ * the toolbar somewhere the editor cannot, in which case wire every handler
+ * to the editor's ref and feed it `activeState` and `historyState` from the
+ * editor's callbacks.
+ *
+ * The native keyboard-attached toolbar (`toolbarPlacement="keyboard"`) is a
+ * separate implementation that consumes the same {@link EditorToolbarItem}
+ * list.
+ */
+export function EditorToolbar(props: EditorToolbarProps) {
+    const state = useEditorToolbarState(props);
+    const items = useEditorToolbarItems(state);
+    const interactions = useEditorToolbarInteractions({ ...state, ...items });
+    return useEditorToolbarPresentation({ ...state, ...items, ...interactions });
+}