Command-Aware Toolbar

A React toolbar and status panel that wires into an existing editor context to trigger formatting commands and expose live selection details.

Capabilities

Toggle inline formatting

• Provides bold and italic buttons that apply or remove the respective formatting for the current selection, and the UI reflects the active state after each click. @test

Chain snippet insertion

• A single "Insert snippet" control focuses the editor if needed, inserts a provided snippet at the caret, and leaves the editor focused afterward. @test

Selection readout

• Displays the current selection start and end positions, or an empty-state label when nothing is selected, updating as the user changes the selection. @test

Active mark indicator

• Shows whether italic formatting is active at the cursor by querying editor helpers/state, updating immediately after formatting changes. @test

Implementation

@generates

API

export interface CommandPanelProps {
  /** Text to insert when the snippet control is triggered. Defaults to "—". */
  snippetText?: string;
  /** Message to display when no selection is present. Defaults to "No selection". */
  emptySelectionLabel?: string;
}

/**
 * Toolbar and status panel bound to a Remirror editor context, exposing
 * formatting controls, snippet insertion, and selection diagnostics.
 */
export function CommandPanel(props: CommandPanelProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

React bindings for the editor, providing command chaining, helper, and state access hooks.