@dxos/ui-editor 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/extensions/pending/pending-text-stream.ts

@@ -0,0 +1,269 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+import {
+  appendPendingText,
+  cancelPendingText,
+  setPendingAnchor,
+  setPendingFinal,
+  setPendingInterim,
+} from './pending-text';
+
+//
+// Sinks — decouple the streamer from its target (a live editor, or memory for tests/stories).
+//
+
+/**
+ * Target for streamed pending text. The {@link PendingTextStreamer} writes to this interface; the
+ * editor implementation dispatches CodeMirror effects, while the memory implementation accumulates
+ * state so the mechanism can be exercised without a CodeMirror component.
+ */
+export type PendingTextSink = {
+  begin(options?: { anchor?: number; placeholder?: string }): void;
+  /** Set the volatile in-flight tail. */
+  interim(text: string): void;
+  /** Append finalized text to the buffer. */
+  appendFinal(text: string): void;
+  /** Replace the finalized buffer wholesale (e.g. post-processed text). */
+  replaceFinal(text: string): void;
+  cancel(): void;
+};
+
+/** Sink that drives the `pendingText` extension in a live editor via its state effects. */
+export const editorPendingTextSink = (view: EditorView): PendingTextSink => ({
+  begin: ({ anchor = view.state.selection.main.head, placeholder } = {}) =>
+    view.dispatch({ effects: setPendingAnchor.of({ anchor, placeholder }) }),
+  interim: (text) => view.dispatch({ effects: setPendingInterim.of(text) }),
+  appendFinal: (text) => view.dispatch({ effects: appendPendingText.of(text) }),
+  replaceFinal: (text) => view.dispatch({ effects: setPendingFinal.of(text) }),
+  cancel: () => view.dispatch({ effects: cancelPendingText.of() }),
+});
+
+export type PendingTextSnapshot = {
+  active: boolean;
+  final: string;
+  interim: string;
+  placeholder?: string;
+};
+
+/** In-memory sink for tests and CodeMirror-free stories. */
+export const memoryPendingTextSink = (
+  onChange?: (snapshot: PendingTextSnapshot) => void,
+): PendingTextSink & { snapshot: () => PendingTextSnapshot } => {
+  let state: PendingTextSnapshot = { active: false, final: '', interim: '', placeholder: undefined };
+  const set = (next: PendingTextSnapshot) => {
+    state = next;
+    onChange?.(state);
+  };
+
+  return {
+    begin: ({ placeholder } = {}) => set({ active: true, final: '', interim: '', placeholder }),
+    interim: (text) => set({ ...state, interim: text }),
+    appendFinal: (text) => set({ ...state, final: state.final + text, interim: '', placeholder: undefined }),
+    replaceFinal: (text) => set({ ...state, final: text, placeholder: undefined }),
+    cancel: () => set({ active: false, final: '', interim: '', placeholder: undefined }),
+    snapshot: () => state,
+  };
+};
+
+//
+// Streamer — buffering, pacing, and post-processing between a text source and a sink.
+//
+
+/** Minimal timer interface so tests can drive the streamer deterministically. */
+export type Scheduler = {
+  setTimeout: (callback: () => void, ms: number) => unknown;
+  clearTimeout: (handle: unknown) => void;
+};
+
+const defaultScheduler: Scheduler = {
+  setTimeout: (callback, ms) => setTimeout(callback, ms),
+  clearTimeout: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
+};
+
+export type PendingTextStreamerOptions = {
+  /** Delay (ms) before the first text is revealed — absorbs the source's initial latency. */
+  initialBufferMs?: number;
+  /** `batch` reveals each pushed chunk whole; `word` reveals one word per {@link wordIntervalMs}. */
+  mode?: 'batch' | 'word';
+  /** Pacing (ms) for `word` mode. */
+  wordIntervalMs?: number;
+  /** Idle delay (ms) before {@link postProcess} runs after the buffer settles. */
+  postProcessDebounceMs?: number;
+  /** Rewrites the finalized buffer once it settles (e.g. entity extraction / dx-anchor links). */
+  postProcess?: (final: string) => string | Promise<string>;
+  /** Injectable timers (defaults to the global timers). */
+  scheduler?: Scheduler;
+};
+
+const DEFAULTS = {
+  initialBufferMs: 0,
+  mode: 'batch' as const,
+  wordIntervalMs: 120,
+  postProcessDebounceMs: 800,
+};
+
+/**
+ * Streams text from an arbitrary source (e.g. a transcriber, or a scripted mock) into a
+ * {@link PendingTextSink}, decoupling the source from the editor and centralizing the cross-cutting
+ * concerns: an initial buffering delay, optional word-by-word reveal, and a post-processing pass.
+ */
+export class PendingTextStreamer {
+  readonly #sink: PendingTextSink;
+  readonly #options: Required<Omit<PendingTextStreamerOptions, 'postProcess' | 'scheduler'>> &
+    Pick<PendingTextStreamerOptions, 'postProcess'>;
+  readonly #scheduler: Scheduler;
+
+  #started = false;
+  #buffering = false;
+  #final = '';
+  #queue: string[] = [];
+  #bufferHandle: unknown = null;
+  #wordHandle: unknown = null;
+  #postHandle: unknown = null;
+  /** The in-flight post-process pass, tracked so `flush()` can await it (drain contract). */
+  #postPromise: Promise<void> | null = null;
+
+  constructor(sink: PendingTextSink, options: PendingTextStreamerOptions = {}) {
+    this.#sink = sink;
+    this.#options = { ...DEFAULTS, ...options };
+    this.#scheduler = options.scheduler ?? defaultScheduler;
+  }
+
+  /** Begin a session; nothing is revealed until the initial buffer elapses (or the first push, if 0). */
+  start(options: { placeholder?: string; anchor?: number } = {}): void {
+    this.#started = true;
+    this.#final = '';
+    this.#queue = [];
+    this.#sink.begin(options);
+    if (this.#options.initialBufferMs > 0) {
+      this.#buffering = true;
+      this.#bufferHandle = this.#scheduler.setTimeout(() => {
+        this.#buffering = false;
+        this.#bufferHandle = null;
+        this.#drain();
+      }, this.#options.initialBufferMs);
+    }
+  }
+
+  /** Feed a finalized text chunk from the source. */
+  push(text: string): void {
+    if (!this.#started) {
+      this.start();
+    }
+    const trimmed = text.trim();
+    if (trimmed.length === 0) {
+      return;
+    }
+    this.#queue.push(...(this.#options.mode === 'word' ? trimmed.split(/\s+/) : [trimmed]));
+    this.#drain();
+  }
+
+  /** Feed a volatile interim chunk (when the source yields partials). */
+  pushInterim(text: string): void {
+    if (!this.#started) {
+      this.start();
+    }
+    if (!this.#buffering) {
+      this.#sink.interim(text);
+    }
+  }
+
+  /**
+   * Reveal everything immediately and run any pending post-process (e.g. on stop). Resolves once the
+   * post-process pass (entity linking, …) has settled, so callers can drain before disposing.
+   */
+  async flush(): Promise<void> {
+    this.#clear(this.#bufferHandle);
+    this.#bufferHandle = null;
+    this.#buffering = false;
+    this.#clear(this.#wordHandle);
+    this.#wordHandle = null;
+    while (this.#queue.length > 0) {
+      this.#appendFinal(this.#queue.shift()!);
+    }
+    this.#sink.interim('');
+    this.#clear(this.#postHandle);
+    this.#postHandle = null;
+    if (this.#options.postProcess && this.#final.length > 0) {
+      // Await any post-process already in flight (its scheduled timer may have fired), then run a
+      // final pass over the settled buffer — so draining truly waits for post-processing to finish.
+      if (this.#postPromise) {
+        await this.#postPromise;
+      }
+      this.#postPromise = this.#runPostProcess();
+      await this.#postPromise;
+    }
+  }
+
+  dispose(): void {
+    [this.#bufferHandle, this.#wordHandle, this.#postHandle].forEach((handle) => this.#clear(handle));
+    this.#bufferHandle = this.#wordHandle = this.#postHandle = null;
+  }
+
+  #drain(): void {
+    if (this.#buffering) {
+      return;
+    }
+    if (this.#options.mode === 'word') {
+      if (this.#wordHandle == null) {
+        this.#tickWord();
+      }
+    } else {
+      while (this.#queue.length > 0) {
+        this.#appendFinal(this.#queue.shift()!);
+      }
+    }
+  }
+
+  #tickWord(): void {
+    const word = this.#queue.shift();
+    if (word == null) {
+      this.#wordHandle = null;
+      return;
+    }
+    this.#appendFinal(word);
+    this.#wordHandle = this.#scheduler.setTimeout(() => this.#tickWord(), this.#options.wordIntervalMs);
+  }
+
+  #appendFinal(text: string): void {
+    const chunk = (this.#final.length > 0 ? ' ' : '') + text;
+    this.#final += chunk;
+    this.#sink.appendFinal(chunk);
+    this.#schedulePostProcess();
+  }
+
+  #schedulePostProcess(): void {
+    if (!this.#options.postProcess) {
+      return;
+    }
+    this.#clear(this.#postHandle);
+    this.#postHandle = this.#scheduler.setTimeout(() => {
+      this.#postHandle = null;
+      this.#postPromise = this.#runPostProcess();
+    }, this.#options.postProcessDebounceMs);
+  }
+
+  async #runPostProcess(): Promise<void> {
+    const input = this.#final;
+    try {
+      const result = await this.#options.postProcess!(input);
+      // Skip if the buffer grew while processing — a later pass will cover the newer text.
+      if (result !== input && this.#final === input) {
+        this.#final = result;
+        this.#sink.replaceFinal(result);
+      }
+    } catch {
+      // Post-process is best-effort (e.g. entity linking); a failure leaves the un-rewritten text.
+    }
+  }
+
+  #clear(handle: unknown): void {
+    if (handle != null) {
+      this.#scheduler.clearTimeout(handle);
+    }
+  }
+}

package/src/extensions/pending/pending-text.test.ts

@@ -0,0 +1,134 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { describe, test } from 'vitest';
+
+import { isBusy } from '../busy';
+import {
+  appendPendingText,
+  cancelPending,
+  commitPending,
+  pendingText,
+  pendingTextState,
+  setPendingAnchor,
+  setPendingInterim,
+} from './pending-text';
+
+const createView = (doc: string): EditorView =>
+  new EditorView({ state: EditorState.create({ doc, extensions: [pendingText()] }) });
+
+// Busy is toggled via a queued microtask, so flush before asserting.
+const flush = () => new Promise<void>((resolve) => queueMicrotask(resolve));
+
+describe('pendingText extension', () => {
+  test('append and interim accumulate without changing the document', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6 }) });
+    view.dispatch({ effects: appendPendingText.of('world') });
+    view.dispatch({ effects: setPendingInterim.of(' and') });
+    expect(view.state.field(pendingTextState)).toEqual({
+      anchor: 6,
+      final: 'world',
+      interim: ' and',
+      placeholder: undefined,
+    });
+    expect(view.state.doc.toString()).toBe('hello ');
+    view.destroy();
+  });
+
+  test('appending finalized text clears the interim tail', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6 }) });
+    view.dispatch({ effects: setPendingInterim.of('wor') });
+    view.dispatch({ effects: appendPendingText.of('world') });
+    expect(view.state.field(pendingTextState)).toMatchObject({ anchor: 6, final: 'world', interim: '' });
+    view.destroy();
+  });
+
+  test('commit at the end of the document inserts the text and leaves a trailing blank line', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6 }) });
+    view.dispatch({ effects: appendPendingText.of('world') });
+    view.dispatch({ effects: setPendingInterim.of(' dropped') });
+    expect(commitPending(view)).toBe(true);
+    expect(view.state.doc.toString()).toBe('hello world\n\n');
+    expect(view.state.field(pendingTextState)).toBeNull();
+    view.destroy();
+  });
+
+  test('commit before the end of the document does not add a trailing blank line', ({ expect }) => {
+    const view = createView('one\ntwo');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 3 }) });
+    view.dispatch({ effects: appendPendingText.of(' and a half') });
+    expect(commitPending(view)).toBe(true);
+    // Single newline terminates the inserted line; the document still ends at 'two' (no trailing blank line).
+    expect(view.state.doc.toString()).toBe('one and a half\n\ntwo');
+    view.destroy();
+  });
+
+  test('cancel discards pending text and leaves the document unchanged', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6 }) });
+    view.dispatch({ effects: appendPendingText.of('world') });
+    expect(cancelPending(view)).toBe(true);
+    expect(view.state.doc.toString()).toBe('hello ');
+    expect(view.state.field(pendingTextState)).toBeNull();
+    view.destroy();
+  });
+
+  test('commit and cancel are no-ops when there is no pending text', ({ expect }) => {
+    const view = createView('hello ');
+    expect(commitPending(view)).toBe(false);
+    expect(cancelPending(view)).toBe(false);
+    view.destroy();
+  });
+
+  test('a placeholder-only session is held without committable text', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6, placeholder: 'Recording…' }) });
+    expect(view.state.field(pendingTextState)).toEqual({
+      anchor: 6,
+      final: '',
+      interim: '',
+      placeholder: 'Recording…',
+    });
+    // Nothing finalized yet, so commit is a no-op.
+    expect(commitPending(view)).toBe(false);
+    view.destroy();
+  });
+
+  test('anchor survives an edit before the anchor', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6 }) });
+    view.dispatch({ effects: appendPendingText.of('world') });
+    view.dispatch({ changes: { from: 0, insert: 'X' } });
+    expect(view.state.field(pendingTextState)?.anchor).toBe(7);
+    expect(commitPending(view)).toBe(true);
+    expect(view.state.doc.toString()).toBe('Xhello world\n\n');
+    view.destroy();
+  });
+
+  test('the first text effect without an explicit anchor uses the selection head', ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ selection: { anchor: 6 } });
+    view.dispatch({ effects: appendPendingText.of('world') });
+    expect(view.state.field(pendingTextState)?.anchor).toBe(6);
+    view.destroy();
+  });
+
+  test('flags the editor busy while a session is active and clears it on commit', async ({ expect }) => {
+    const view = createView('hello ');
+    view.dispatch({ effects: setPendingAnchor.of({ anchor: 6, placeholder: 'Recording…' }) });
+    await flush();
+    expect(isBusy(view.state)).toBe(true);
+
+    view.dispatch({ effects: appendPendingText.of('world') });
+    commitPending(view);
+    await flush();
+    expect(isBusy(view.state)).toBe(false);
+    view.destroy();
+  });
+});

package/src/extensions/pending/pending-text.ts

@@ -0,0 +1,264 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension, StateEffect, StateField } from '@codemirror/state';
+import { type Command, Decoration, EditorView, WidgetType, keymap } from '@codemirror/view';
+
+import { Domino } from '@dxos/ui';
+
+import { busy, setBusy } from '../busy';
+import { type MarkerHue, markerButtons, markerText, markerTheme } from '../marker';
+
+//
+// State.
+//
+
+/**
+ * Pending (not-yet-committed) text injected from an external source.
+ * `final` is the accumulated finalized text; `interim` is the volatile in-flight tail; `placeholder`
+ * is shown while both are empty (e.g. "Recording…"). `anchor` is the document position the text will
+ * be inserted at; it is mapped through document changes so it survives concurrent edits.
+ */
+export type PendingTextState = {
+  anchor: number;
+  final: string;
+  interim: string;
+  placeholder?: string;
+};
+
+/** Start a pending-text session at the given position, optionally showing a placeholder until text arrives. */
+export const setPendingAnchor = StateEffect.define<{ anchor: number; placeholder?: string }>();
+
+/** Append finalized text to the pending buffer; clears the interim tail and placeholder. */
+export const appendPendingText = StateEffect.define<string>();
+
+/** Replace the volatile in-flight tail. */
+export const setPendingInterim = StateEffect.define<string>();
+
+/** Replace the finalized buffer wholesale (e.g. with post-processed text). */
+export const setPendingFinal = StateEffect.define<string>();
+
+/** Discard the pending buffer without modifying the document. */
+export const cancelPendingText = StateEffect.define<void>();
+
+const emptyAt = (anchor: number, placeholder?: string): PendingTextState => ({
+  anchor,
+  final: '',
+  interim: '',
+  placeholder,
+});
+
+export const pendingTextState = StateField.define<PendingTextState | null>({
+  create: () => null,
+  update: (value, tr) => {
+    // Map the anchor through document changes so injected text lands at the right place.
+    let next = value && tr.docChanged ? { ...value, anchor: tr.changes.mapPos(value.anchor) } : value;
+    for (const effect of tr.effects) {
+      if (effect.is(setPendingAnchor)) {
+        next = emptyAt(effect.value.anchor, effect.value.placeholder);
+      } else if (effect.is(appendPendingText)) {
+        const base = next ?? emptyAt(tr.state.selection.main.head);
+        next = { ...base, final: base.final + effect.value, interim: '', placeholder: undefined };
+      } else if (effect.is(setPendingInterim)) {
+        const base = next ?? emptyAt(tr.state.selection.main.head);
+        next = { ...base, interim: effect.value };
+      } else if (effect.is(setPendingFinal)) {
+        // Replace the EXISTING buffer only; never resurrect a cancelled/empty session. This lets a
+        // late post-process result (e.g. entity linking) be dropped if the user cancelled meanwhile.
+        if (next) {
+          next = { ...next, final: effect.value, placeholder: undefined };
+        }
+      } else if (effect.is(cancelPendingText)) {
+        next = null;
+      }
+    }
+
+    return next;
+  },
+});
+
+const hasContent = (value: PendingTextState): boolean =>
+  value.final.length > 0 || value.interim.length > 0 || (value.placeholder?.length ?? 0) > 0;
+
+//
+// Commands.
+//
+
+/**
+ * Insert the finalized pending text into the document and clear the buffer. The text is terminated
+ * with a newline; when committed at the end of the document an extra newline is added so the document
+ * always ends with a blank line.
+ */
+export const commitPending: Command = (view) => {
+  const value = view.state.field(pendingTextState, false);
+  if (!value || value.final.length === 0) {
+    return false;
+  }
+
+  const atEnd = value.anchor >= view.state.doc.length;
+  const insert = value.final + (atEnd ? '\n\n' : '\n');
+  view.dispatch({
+    // Place the cursor on the line after the inserted text (before the trailing blank line).
+    changes: { from: value.anchor, insert },
+    selection: { anchor: value.anchor + value.final.length + 1 },
+    effects: cancelPendingText.of(),
+  });
+  return true;
+};
+
+/** Discard the pending text without modifying the document. */
+export const cancelPending: Command = (view) => {
+  if (!view.state.field(pendingTextState, false)) {
+    return false;
+  }
+
+  view.dispatch({ effects: cancelPendingText.of() });
+  return true;
+};
+
+// Commit when there is finalized text, otherwise just consume the key so the editor's default
+// newline insertion cannot mutate the document mid-session (e.g. placeholder/interim-only state).
+const commitOrConsumePending: Command = (view) => {
+  const value = view.state.field(pendingTextState, false);
+  if (!value) {
+    return false;
+  }
+
+  return value.final.length > 0 ? commitPending(view) : true;
+};
+
+//
+// Decorations.
+//
+
+// Finalized + interim text share one teal marker (a single transcription); the placeholder uses a
+// rose marker with a pulsing icon to signal active recording.
+const TEXT_HUE: MarkerHue = 'teal';
+const PLACEHOLDER_HUE: MarkerHue = 'rose';
+
+class PendingTextWidget extends WidgetType {
+  constructor(private readonly _state: PendingTextState) {
+    super();
+  }
+
+  override eq(other: PendingTextWidget): boolean {
+    return (
+      other._state.final === this._state.final &&
+      other._state.interim === this._state.interim &&
+      other._state.placeholder === this._state.placeholder
+    );
+  }
+
+  override toDOM(view: EditorView): HTMLElement {
+    const root = Domino.of('span').classNames('cm-pending-text');
+    if (this._state.final.length > 0 || this._state.interim.length > 0) {
+      const marker = Domino.of('span').classNames('cm-marker-text').attributes({ 'data-hue': TEXT_HUE });
+      if (this._state.final.length > 0) {
+        marker.append(Domino.of('span').text(this._state.final));
+      }
+      if (this._state.interim.length > 0) {
+        marker.append(Domino.of('span').classNames('cm-pending-text-interim').text(this._state.interim));
+      }
+      root.append(marker);
+    } else if (this._state.placeholder) {
+      root.append(
+        markerText(this._state.placeholder, {
+          hue: PLACEHOLDER_HUE,
+          className: 'cm-pending-text-indicator',
+          icon: 'ph--circle-notch--regular',
+          iconClassNames: 'animate-spin',
+        }),
+      );
+    }
+
+    root.append(
+      markerButtons([
+        {
+          icon: 'ph--check--regular',
+          label: 'Confirm',
+          className: 'cm-marker-button-success',
+          testId: 'pending-text.confirm',
+          onClick: () => commitPending(view),
+        },
+        {
+          icon: 'ph--x--regular',
+          label: 'Cancel',
+          className: 'cm-marker-button-error',
+          testId: 'pending-text.cancel',
+          onClick: () => cancelPending(view),
+        },
+      ]),
+    );
+    return root.root;
+  }
+
+  override ignoreEvent(): boolean {
+    return true;
+  }
+}
+
+const pendingDecorations = EditorView.decorations.compute([pendingTextState], (state) => {
+  const value = state.field(pendingTextState);
+  if (!value || !hasContent(value)) {
+    return Decoration.none;
+  }
+
+  return Decoration.set([Decoration.widget({ widget: new PendingTextWidget(value), side: 1 }).range(value.anchor)]);
+});
+
+// Flag the editor busy while a pending session is active so other extensions (e.g. the command-hint
+// placeholder) suppress themselves. Deferred to a microtask to avoid dispatching mid-update.
+const busyListener = EditorView.updateListener.of((update) => {
+  const active = update.state.field(pendingTextState) != null;
+  if (active === (update.startState.field(pendingTextState) != null)) {
+    return;
+  }
+  queueMicrotask(() => {
+    if ((update.view.state.field(pendingTextState) != null) === active) {
+      update.view.dispatch({ effects: setBusy.of(active) });
+    }
+  });
+});
+
+const styles = EditorView.theme({
+  // Keep the marker and affordances on a single line (it already sits on its own line at the anchor).
+  '.cm-pending-text': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+  },
+  // The interim tail is distinguished from the finalized text only by reduced opacity.
+  '.cm-pending-text-interim': {
+    opacity: 0.6,
+  },
+  // Keep the "Recording…" indicator (text + spinner) on a single line.
+  '.cm-pending-text-indicator': {
+    whiteSpace: 'nowrap',
+  },
+});
+
+//
+// Extension.
+//
+
+/**
+ * Renders externally-supplied "pending" text as an inline preview at a tracked anchor, with inline
+ * confirm/cancel affordances. An external controller drives the buffer via the `setPendingAnchor` /
+ * `appendPendingText` / `setPendingInterim` / `cancelPendingText` effects; the user commits or
+ * discards it via the affordances or the Enter/Escape keys. While a session is active the editor is
+ * flagged {@link busy} so hint placeholders suppress themselves. The extension is agnostic to the
+ * source of the text (e.g. speech transcription), so any CodeMirror component can opt in.
+ */
+export const pendingText = (): Extension => [
+  pendingTextState,
+  busy(),
+  pendingDecorations,
+  busyListener,
+  markerTheme(),
+  styles,
+  keymap.of([
+    { key: 'Enter', run: commitOrConsumePending },
+    { key: 'Escape', run: cancelPending },
+  ]),
+];