Shortcut-Aware Focused Editor

Create a React editor component that exposes focus-aware UI, keyboard shortcut handling, and history reporting for a collaborative note-taking surface.

Capabilities

Focus-aware status

• The component renders a visible status indicator that shows "Focused" when the editor is active and "Blurred" when it is not. @test
• Interacting with a provided toolbar container must not flip the status to "Blurred"; clicking anywhere else outside the editor does. @test

Shortcut-driven insertion

• Pressing Mod-Shift-L while the caret is inside the editor inserts a prefixed marker >>> at the current block position. @test

History tracking UI

• The UI shows live counts of undo and redo actions (e.g., Undo: 2 | Redo: 1) that update whenever the editor history changes. @test
• Each undo or redo action invokes the provided event callback with the updated counts in the payload. @test

Event reporting

• The optional onEvent callback fires on focus gain, focus loss, and the shortcut insertion, providing the event type and a payload with the latest selection text or the position of the inserted marker. @test

Implementation

@generates

API

export interface ShortcutHistoryEventPayload {
  selectionText?: string;
  markerPosition?: number;
  undoCount?: number;
  redoCount?: number;
}

export interface ShortcutHistoryProps {
  initialContent?: string;
  toolbarRef?: React.RefObject<HTMLElement>;
  onEvent?: (details: { type: 'focus' | 'blur' | 'undo' | 'redo' | 'shortcut'; payload?: ShortcutHistoryEventPayload }) => void;
}

export function ShortcutHistoryEditor(props: ShortcutHistoryProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides the React bindings, hooks, and history support used to wire focus, keyboard, and event handling into the editor.