@plannotator/ui 0.22.0

package/shortcuts/code-review/allFilesDiff.shortcuts.ts

@@ -0,0 +1,46 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewAllFilesDiffShortcuts = defineShortcutScope({
+  id: 'review-all-files-diff',
+  title: 'All-Files Diff View',
+  shortcuts: {
+    toggleCollapse: {
+      description: 'Collapse / expand current file',
+      bindings: ['X'],
+      section: 'All-Files View',
+      hint: 'Available when the all-files diff panel is active.',
+      displayOrder: 10,
+    },
+    undoCollapse: {
+      description: 'Re-expand nearest collapsed file',
+      bindings: ['Z'],
+      section: 'All-Files View',
+      hint: 'Reopens the nearest collapsed file at or above the current position (collapse also fires when toggling viewed).',
+      displayOrder: 20,
+    },
+    addFileComment: {
+      description: 'Add file-scoped comment',
+      bindings: ['C'],
+      section: 'All-Files View',
+      hint: 'Opens the file-scoped comment popover for the active file.',
+      displayOrder: 30,
+    },
+    nextFile: {
+      description: 'Scroll to next file',
+      bindings: [']'],
+      section: 'All-Files View',
+      hint: 'All-files panel only.',
+      displayOrder: 40,
+    },
+    prevFile: {
+      description: 'Scroll to previous file',
+      bindings: ['['],
+      section: 'All-Files View',
+      hint: 'All-files panel only.',
+      displayOrder: 50,
+    },
+  },
+});
+
+export const useReviewAllFilesDiffShortcuts = createShortcutScopeHook(reviewAllFilesDiffShortcuts);

package/shortcuts/code-review/annotationToolbar.shortcuts.ts

@@ -0,0 +1,30 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewAnnotationToolbarShortcuts = defineShortcutScope({
+  id: 'review-annotation-toolbar',
+  title: 'Review Annotation Toolbar',
+  shortcuts: {
+    submitComment: {
+      description: 'Submit comment',
+      bindings: ['Mod+Enter'],
+      section: 'Annotations',
+      displayOrder: 10,
+    },
+    indentSuggestedCode: {
+      description: 'Indent suggested code',
+      bindings: ['Tab'],
+      section: 'Annotations',
+      displayOrder: 20,
+    },
+    cancel: {
+      description: 'Close comment editor',
+      bindings: ['Escape'],
+      section: 'Annotations',
+      hint: 'Available while the review comment editor is open.',
+      displayOrder: 30,
+    },
+  },
+});
+
+export const useReviewAnnotationToolbarShortcuts = createShortcutScopeHook(reviewAnnotationToolbarShortcuts);

package/shortcuts/code-review/fileTree.shortcuts.ts

@@ -0,0 +1,35 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewFileTreeShortcuts = defineShortcutScope({
+  id: 'review-file-tree',
+  title: 'File Navigation',
+  shortcuts: {
+    nextFile: {
+      description: 'Next file',
+      bindings: ['J', 'ArrowDown'],
+      section: 'File Navigation',
+      displayOrder: 10,
+    },
+    prevFile: {
+      description: 'Previous file',
+      bindings: ['K', 'ArrowUp'],
+      section: 'File Navigation',
+      displayOrder: 20,
+    },
+    firstFile: {
+      description: 'First file',
+      bindings: ['Home'],
+      section: 'File Navigation',
+      displayOrder: 30,
+    },
+    lastFile: {
+      description: 'Last file',
+      bindings: ['End'],
+      section: 'File Navigation',
+      displayOrder: 40,
+    },
+  },
+});
+
+export const useReviewFileTreeShortcuts = createShortcutScopeHook(reviewFileTreeShortcuts);

package/shortcuts/code-review/prComments.shortcuts.ts

@@ -0,0 +1,18 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewPrCommentsShortcuts = defineShortcutScope({
+  id: 'review-pr-comments',
+  title: 'PR Comments',
+  shortcuts: {
+    focusSearch: {
+      description: 'Focus PR comments search',
+      bindings: ['Mod+Shift+F'],
+      section: 'PR Comments',
+      hint: 'Available while the PR Comments tab is open in the review sidebar.',
+      displayOrder: 10,
+    },
+  },
+});
+
+export const useReviewPrCommentsShortcuts = createShortcutScopeHook(reviewPrCommentsShortcuts);

package/shortcuts/code-review/suggestionModal.shortcuts.ts

@@ -0,0 +1,25 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewSuggestionModalShortcuts = defineShortcutScope({
+  id: 'review-suggestion-modal',
+  title: 'Suggestion Editor',
+  shortcuts: {
+    indent: {
+      description: 'Indent (insert spaces)',
+      bindings: ['Tab'],
+      section: 'Suggestion Editor',
+      hint: 'Available in the expanded suggestion editor.',
+      displayOrder: 10,
+    },
+    close: {
+      description: 'Close suggestion editor',
+      bindings: ['Escape'],
+      section: 'Suggestion Editor',
+      hint: 'Closes the modal; suggestion text is preserved on the underlying comment.',
+      displayOrder: 20,
+    },
+  },
+});
+
+export const useReviewSuggestionModalShortcuts = createShortcutScopeHook(reviewSuggestionModalShortcuts);

package/shortcuts/code-review/tourDialog.shortcuts.ts

@@ -0,0 +1,18 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewTourDialogShortcuts = defineShortcutScope({
+  id: 'review-tour-dialog',
+  title: 'Tour Dialog',
+  shortcuts: {
+    close: {
+      description: 'Close tour',
+      bindings: ['Escape'],
+      section: 'Tour',
+      hint: 'Available while the code tour dialog is open.',
+      displayOrder: 10,
+    },
+  },
+});
+
+export const useReviewTourDialogShortcuts = createShortcutScopeHook(reviewTourDialogShortcuts);

package/shortcuts/core.ts

@@ -0,0 +1,399 @@
+import { isMac } from '../utils/platform';
+
+export type ShortcutPlatform = 'mac' | 'non-mac' | 'cross-platform';
+
+export interface ShortcutDefinition {
+  description: string;
+  /** Alternative bindings for the same action, shown as “or” in the shortcuts UI. */
+  bindings: string[];
+  section: string;
+  hint?: string;
+  preventDefault?: boolean;
+  /** Stable help-menu ordering within a section, without relying on object key order. */
+  displayOrder?: number;
+}
+
+export interface ShortcutScopeDefinition<TAction extends string = string> {
+  id: string;
+  title: string;
+  shortcuts: Record<TAction, ShortcutDefinition>;
+}
+
+export interface ShortcutEntry extends ShortcutDefinition {
+  scopeId: string;
+  scopeTitle: string;
+  actionId: string;
+}
+
+export interface ShortcutSection {
+  title: string;
+  shortcuts: ShortcutEntry[];
+}
+
+export type ShortcutRegistry = readonly ShortcutScopeDefinition[];
+
+export interface ShortcutSurface {
+  slug: string;
+  title: string;
+  description: string;
+  registry: ShortcutRegistry;
+}
+
+const NAMED_TOKENS = new Set([
+  'Mod',
+  'Shift',
+  'Alt',
+  'Enter',
+  'Escape',
+  'Tab',
+  // TODO(migration): `matchesKeyToken` does not currently match `Space` —
+  // pressing Spacebar produces `event.key === ' '` (length 1), which the
+  // matcher uppercases to `' '` and then compares to the literal `'Space'`,
+  // always failing. Add a special case in `matchesKeyToken` (e.g.
+  // `if (token === 'Space') return event.key === ' ' || event.code === 'Space'`)
+  // before any scope binds Space.
+  'Space',
+  'Backspace',
+  'Delete',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'Home',
+  'End',
+  'A-Z',
+  '1-0',
+  'hold',
+  // Punctuation keys used as shortcut targets. Add new ones as needed; we
+  // whitelist explicitly so typos like `Cmd` instead of `Mod` keep failing
+  // validation.
+  '.',
+  '[',
+  ']',
+]);
+
+for (let n = 1; n <= 12; n += 1) {
+  NAMED_TOKENS.add(`F${n}`);
+}
+
+const MODIFIER_TOKENS = new Set(['Mod', 'Shift', 'Alt']);
+
+export function defineShortcutScope<TAction extends string>(scope: ShortcutScopeDefinition<TAction>): ShortcutScopeDefinition<TAction> {
+  return scope;
+}
+
+function isSingleLetter(token: string): boolean {
+  return /^[A-Z]$/.test(token);
+}
+
+function isSingleDigit(token: string): boolean {
+  return /^[0-9]$/.test(token);
+}
+
+function getBindingTokens(binding: string): string[] {
+  return binding.trim().split(/[+\s]+/).filter(Boolean);
+}
+
+function getBindingGroups(binding: string): string[][] {
+  return binding.trim().split(/\s+/).filter(Boolean).map(group => group.split('+').filter(Boolean));
+}
+
+/**
+ * Parse a double-tap binding like `"Alt Alt"` and return the key name.
+ * Returns null for non-double-tap bindings.
+ */
+export function parseDoubleTapBinding(binding: string): string | null {
+  const groups = getBindingGroups(binding);
+  if (groups.length !== 2) return null;
+  if (groups[0].length !== 1 || groups[1].length !== 1) return null;
+  if (groups[0][0] !== groups[1][0]) return null;
+  if (groups[1][0] === 'hold') return null;
+  return groups[0][0];
+}
+
+/**
+ * Check if a KeyboardEvent matches a named key token (for sequential/stateful matching).
+ * Unlike `matchesShortcutBinding`, this matches a single key identity without modifier checks.
+ */
+export function matchesKeyName(event: KeyboardEvent, keyName: string): boolean {
+  if (keyName === 'Alt') return event.key === 'Alt';
+  if (keyName === 'Shift') return event.key === 'Shift';
+  if (keyName === 'Mod') return event.key === 'Meta' || event.key === 'Control';
+  return matchesKeyToken(event, keyName);
+}
+
+function isNormalizedToken(token: string): boolean {
+  return NAMED_TOKENS.has(token) || isSingleLetter(token) || isSingleDigit(token);
+}
+
+function normalizeShortcutEntry(
+  scope: ShortcutScopeDefinition,
+  actionId: string,
+  shortcut: ShortcutDefinition,
+): ShortcutEntry {
+  return {
+    ...shortcut,
+    scopeId: scope.id,
+    scopeTitle: scope.title,
+    actionId,
+  };
+}
+
+export function listScopeShortcuts(
+  scope: ShortcutScopeDefinition,
+  options?: { actionIds?: readonly string[] },
+): ShortcutEntry[] {
+  const allowedActionIds = options?.actionIds ? new Set(options.actionIds) : null;
+  const shortcuts: ShortcutEntry[] = [];
+
+  for (const [actionId, shortcut] of Object.entries(scope.shortcuts)) {
+    if (allowedActionIds && !allowedActionIds.has(actionId)) continue;
+
+    shortcuts.push(normalizeShortcutEntry(scope, actionId, shortcut));
+  }
+
+  return shortcuts;
+}
+
+export function validateShortcutRegistry(registry: ShortcutRegistry): string[] {
+  const errors: string[] = [];
+  const scopeIds = new Set<string>();
+
+  for (const scope of registry) {
+    if (scopeIds.has(scope.id)) {
+      errors.push(`Duplicate shortcut scope id: ${scope.id}`);
+    }
+    scopeIds.add(scope.id);
+
+    for (const [actionId, shortcut] of Object.entries(scope.shortcuts)) {
+      const id = `${scope.id}.${actionId}`;
+
+      if (!shortcut.section.trim()) {
+        errors.push(`Shortcut ${id} is missing a section.`);
+      }
+
+      if (!shortcut.description.trim()) {
+        errors.push(`Shortcut ${id} is missing a description.`);
+      }
+
+      if (shortcut.bindings.length === 0) {
+        errors.push(`Shortcut ${id} must define at least one binding.`);
+      }
+
+      for (const binding of shortcut.bindings) {
+        if (!binding.trim()) {
+          errors.push(`Shortcut ${id} contains an empty binding.`);
+          continue;
+        }
+
+        for (const token of getBindingTokens(binding)) {
+          if (!isNormalizedToken(token)) {
+            errors.push(`Shortcut ${id} uses non-normalized token \`${token}\` in binding \`${binding}\`.`);
+          }
+        }
+      }
+    }
+  }
+
+  return errors;
+}
+
+export function createShortcutRegistry<TRegistry extends ShortcutRegistry>(registry: TRegistry): TRegistry {
+  const errors = validateShortcutRegistry(registry);
+  if (errors.length > 0) {
+    throw new Error(`Invalid shortcut registry:\n- ${errors.join('\n- ')}`);
+  }
+  return registry;
+}
+
+export function mergeShortcutRegistries(...registries: ShortcutRegistry[]): ShortcutRegistry {
+  return createShortcutRegistry(registries.flat());
+}
+
+export function getShortcutScope(registry: ShortcutRegistry, scopeId: string): ShortcutScopeDefinition | undefined {
+  return registry.find(scope => scope.id === scopeId);
+}
+
+export function getShortcut(
+  registry: ShortcutRegistry,
+  scopeId: string,
+  actionId: string,
+): ShortcutEntry | undefined {
+  const scope = getShortcutScope(registry, scopeId);
+  const shortcut = scope?.shortcuts[actionId];
+  return scope && shortcut ? normalizeShortcutEntry(scope, actionId, shortcut) : undefined;
+}
+
+export function listRegistryShortcuts(registry: ShortcutRegistry): ShortcutEntry[] {
+  const shortcuts: ShortcutEntry[] = [];
+
+  for (const scope of registry) {
+    shortcuts.push(...listScopeShortcuts(scope));
+  }
+
+  return shortcuts;
+}
+
+export function listShortcutSections(shortcuts: readonly ShortcutEntry[]): ShortcutSection[] {
+  const sections = new Map<string, ShortcutEntry[]>();
+
+  for (const shortcut of shortcuts) {
+    const existing = sections.get(shortcut.section);
+    if (existing) {
+      existing.push(shortcut);
+    } else {
+      sections.set(shortcut.section, [shortcut]);
+    }
+  }
+
+  return Array.from(sections.entries()).map(([title, sectionShortcuts]) => ({
+    title,
+    shortcuts: [...sectionShortcuts].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0) || a.description.localeCompare(b.description)),
+  }));
+}
+
+export function listRegistryShortcutSections(registry: ShortcutRegistry): ShortcutSection[] {
+  return listShortcutSections(listRegistryShortcuts(registry));
+}
+
+export function getShortcutPlatform(): Exclude<ShortcutPlatform, 'cross-platform'> {
+  return isMac ? 'mac' : 'non-mac';
+}
+
+function formatKeycapToken(token: string, platform: Exclude<ShortcutPlatform, 'cross-platform'>): string {
+  if (platform === 'mac') {
+    if (token === 'Mod') return '⌘';
+    if (token === 'Alt') return '⌥';
+    if (token === 'Shift') return '⇧';
+    if (token === 'Enter') return '⏎';
+    if (token === 'Escape') return 'Esc';
+  }
+
+  if (platform === 'non-mac') {
+    if (token === 'Mod') return 'Ctrl';
+    if (token === 'Enter') return '↵';
+    if (token === 'Escape') return 'Esc';
+  }
+
+  return token;
+}
+
+function formatTextToken(token: string, platform: ShortcutPlatform): string {
+  if (token === 'Mod') {
+    if (platform === 'mac') return 'Cmd';
+    if (platform === 'non-mac') return 'Ctrl';
+    return 'Cmd/Ctrl';
+  }
+
+  if (token === 'Alt') {
+    return platform === 'mac' ? 'Option' : 'Alt';
+  }
+
+  if (token === 'Escape') return 'Escape';
+  if (token === 'hold') return 'hold';
+  return token;
+}
+
+export function formatShortcutBindingTokens(
+  binding: string,
+  platform: Exclude<ShortcutPlatform, 'cross-platform'> = getShortcutPlatform(),
+): string[] {
+  const doubleTapKey = parseDoubleTapBinding(binding);
+  if (doubleTapKey) {
+    return [formatKeycapToken(doubleTapKey, platform), '×2'];
+  }
+
+  return getBindingTokens(binding).map(token => formatKeycapToken(token, platform));
+}
+
+export function formatShortcutBindingText(
+  binding: string,
+  platform: ShortcutPlatform = 'cross-platform',
+): string {
+  const groups = getBindingGroups(binding);
+
+  if (groups.length === 2 && groups[1].length === 1 && groups[1][0] === 'hold' && groups[0].length === 1) {
+    return `Hold ${formatTextToken(groups[0][0], platform)}`;
+  }
+
+  const doubleTapKey = parseDoubleTapBinding(binding);
+  if (doubleTapKey) {
+    return `Double-tap ${formatTextToken(doubleTapKey, platform)}`;
+  }
+
+  return groups
+    .map(group => group.map(token => formatTextToken(token, platform)).join('+'))
+    .join(' then ');
+}
+
+export function formatShortcutBindingsText(
+  bindings: string[],
+  platform: ShortcutPlatform = 'cross-platform',
+): string {
+  return bindings.map(binding => formatShortcutBindingText(binding, platform)).join(' or ');
+}
+
+function getDigitCode(event: KeyboardEvent): string | null {
+  const code = typeof event.code === 'string' ? event.code : '';
+  const match = code.match(/^Digit([0-9])$/);
+  return match ? match[1] : null;
+}
+
+export function getShortcutDigit(event: KeyboardEvent): number | null {
+  const parsed = Number.parseInt(event.key, 10);
+  if (!Number.isNaN(parsed)) return parsed;
+
+  const digitCode = getDigitCode(event);
+  return digitCode === null ? null : Number.parseInt(digitCode, 10);
+}
+
+function matchesKeyToken(event: KeyboardEvent, token: string): boolean {
+  const key = event.key.length === 1 ? event.key.toUpperCase() : event.key;
+  const shortcutDigit = getShortcutDigit(event);
+
+  if (token === 'A-Z') {
+    return /^[A-Z]$/.test(key);
+  }
+
+  if (token === '1-0') {
+    return /^[0-9]$/.test(key) || shortcutDigit !== null;
+  }
+
+  if (isSingleLetter(token)) {
+    return key === token;
+  }
+
+  if (isSingleDigit(token)) {
+    return key === token || String(shortcutDigit ?? '') === token;
+  }
+
+  return key === token;
+}
+
+export function matchesShortcutBinding(event: KeyboardEvent, binding: string): boolean {
+  if (binding.includes(' ') || binding.includes('hold')) {
+    return false;
+  }
+
+  const tokens = binding.split('+').filter(Boolean);
+  if (tokens.length === 0) return false;
+
+  const requiresMod = tokens.includes('Mod');
+  const requiresShift = tokens.includes('Shift');
+  const requiresAlt = tokens.includes('Alt');
+  const keyTokens = tokens.filter(token => !MODIFIER_TOKENS.has(token));
+  if (keyTokens.length !== 1) return false;
+
+  const keyToken = keyTokens[0];
+  const shiftMatches = requiresShift === event.shiftKey || (!requiresShift && keyToken === 'A-Z' && event.shiftKey);
+
+  if (requiresMod !== (event.metaKey || event.ctrlKey)) return false;
+  if (!shiftMatches) return false;
+  if (requiresAlt !== event.altKey) return false;
+
+  return matchesKeyToken(event, keyToken);
+}
+
+export function getMatchingShortcutBindingIndex(event: KeyboardEvent, bindings: string[]): number {
+  return bindings.findIndex(binding => matchesShortcutBinding(event, binding));
+}

package/shortcuts/index.ts

@@ -0,0 +1,21 @@
+export * from './core';
+export * from './runtime';
+
+// plan-review scopes
+export { annotationToolbarShortcuts, useAnnotationToolbarShortcuts } from './plan-review/annotationToolbar.shortcuts';
+export { annotationPanelShortcuts, useAnnotationPanelShortcuts } from './plan-review/annotationPanel.shortcuts';
+export { commentPopoverShortcuts } from './plan-review/commentPopover.shortcuts';
+export { imageAnnotatorShortcuts, useImageAnnotatorShortcuts } from './plan-review/imageAnnotator.shortcuts';
+export { inputMethodShortcuts } from './plan-review/inputMethod.shortcuts';
+export { viewerShortcuts, useViewerShortcuts } from './plan-review/viewer.shortcuts';
+export { goalSetupShortcuts, useGoalSetupShortcuts } from './plan-review/goalSetup.shortcuts';
+export { annotateSidebarShortcuts, useAnnotateSidebarShortcuts } from './plan-review/sidebar.shortcuts';
+
+// code-review scopes
+export { reviewAnnotationToolbarShortcuts, useReviewAnnotationToolbarShortcuts } from './code-review/annotationToolbar.shortcuts';
+export { reviewFileTreeShortcuts, useReviewFileTreeShortcuts } from './code-review/fileTree.shortcuts';
+export { reviewPrCommentsShortcuts, useReviewPrCommentsShortcuts } from './code-review/prComments.shortcuts';
+export { reviewAllFilesDiffShortcuts, useReviewAllFilesDiffShortcuts } from './code-review/allFilesDiff.shortcuts';
+export { reviewAiShortcuts, useReviewAiShortcuts } from './code-review/ai.shortcuts';
+export { reviewSuggestionModalShortcuts, useReviewSuggestionModalShortcuts } from './code-review/suggestionModal.shortcuts';
+export { reviewTourDialogShortcuts, useReviewTourDialogShortcuts } from './code-review/tourDialog.shortcuts';

package/shortcuts/plan-review/annotationPanel.shortcuts.ts

@@ -0,0 +1,25 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const annotationPanelShortcuts = defineShortcutScope({
+  id: 'annotation-panel',
+  title: 'Annotation Panel',
+  shortcuts: {
+    saveEdit: {
+      description: 'Save annotation edit',
+      bindings: ['Mod+Enter'],
+      section: 'Annotations',
+      hint: 'Available while editing an annotation in the side panel.',
+      displayOrder: 50,
+    },
+    cancelEdit: {
+      description: 'Cancel annotation edit',
+      bindings: ['Escape'],
+      section: 'Annotations',
+      hint: 'Available while editing an annotation in the side panel.',
+      displayOrder: 60,
+    },
+  },
+});
+
+export const useAnnotationPanelShortcuts = createShortcutScopeHook(annotationPanelShortcuts);

package/shortcuts/plan-review/annotationToolbar.shortcuts.ts

@@ -0,0 +1,39 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const annotationToolbarShortcuts = defineShortcutScope({
+  id: 'annotation-toolbar',
+  title: 'Annotation Toolbar',
+  shortcuts: {
+    typeToComment: {
+      description: 'Start comment',
+      bindings: ['A-Z'],
+      section: 'Annotations',
+      hint: 'Typing a letter opens the comment editor with that character.',
+      displayOrder: 10,
+    },
+    applyQuickLabel: {
+      description: 'Apply toolbar label',
+      bindings: ['Alt+1-0'],
+      section: 'Annotations',
+      hint: 'Applies the matching preset label while the annotation toolbar is open.',
+      displayOrder: 20,
+    },
+    applyQuickLabelFromPicker: {
+      description: 'Apply picker label',
+      bindings: ['1-0'],
+      section: 'Annotations',
+      hint: 'Available while the quick label picker is open.',
+      displayOrder: 30,
+    },
+    close: {
+      description: 'Close toolbar',
+      bindings: ['Escape'],
+      section: 'Annotations',
+      hint: 'Available while the annotation toolbar is open.',
+      displayOrder: 40,
+    },
+  },
+});
+
+export const useAnnotationToolbarShortcuts = createShortcutScopeHook(annotationToolbarShortcuts);

package/shortcuts/plan-review/commentPopover.shortcuts.ts

@@ -0,0 +1,21 @@
+import { defineShortcutScope } from '../core';
+
+export const commentPopoverShortcuts = defineShortcutScope({
+  id: 'comment-popover',
+  title: 'Comment Editor',
+  shortcuts: {
+    submit: {
+      description: 'Submit comment',
+      bindings: ['Mod+Enter'],
+      section: 'Annotations',
+      displayOrder: 30,
+    },
+    cancel: {
+      description: 'Close comment',
+      bindings: ['Escape'],
+      section: 'Annotations',
+      hint: 'Available while the comment editor is open.',
+      displayOrder: 40,
+    },
+  },
+});