[ocavue]

Adds a menu button at the top right of each code block with "Change language" and "Copy code" actions. With the caret in a code block, Mod-/ opens the menu, so the language can be changed from the keyboard only. When the menu or the language picker closes, focus goes back to the editor. The language picker now highlights the first match automatically, so Enter picks it.

For team-reflect/reflect-open#2038

code-block-menu.mp4

Summary by CodeRabbit

• New Features
  • Added a code block menu, opened with Mod-/, with actions to change the language or copy the code.
  • Added keyboard navigation and focus return when opening and closing the menu or language picker.
• Bug Fixes
  • Improved clipboard handling so copy actions only report success when the code is copied.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
meowdown	Ignored		Nov 8, 2026 12:59pm UTC

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The React code block toolbar adds a menu that opens with Mod-/. The menu provides language selection and code copying. Popup state tracks opening, closing, and focus return. Core shortcut documentation and release metadata are updated.

Changes: Code block menu

Layer / File(s)	Summary
Shortcut registration .changeset/code-block-menu.md, packages/core/README.md, packages/core/src/extensions/key-bindings.ts, packages/core/src/extensions/key-bindings.test.ts, packages/react/src/extensions/block-menu.ts, packages/react/src/extensions/code-block-view.ts	The React extension registers Mod-/ to open the menu for the code block containing the caret. Core shortcut documentation and its snapshot include the shortcut. The changeset records patch and minor releases for the core and React packages.
Popup state and focus management packages/react/src/components/code-block-toolbar-state.ts, packages/react/src/components/code-block-toolbar-state.test.ts, packages/react/src/components/code-block-view.tsx	The reducer tracks the open popup, popups completing their exit animations, and the focus destination. The toolbar controls the menu and language picker, including popup handoff and focus return.
Menu actions and clipboard handling packages/react/src/components/code-block-view.tsx, packages/react/src/components/code-block-view.test.tsx, packages/react/src/components/code-block-view.module.css, packages/react/src/components/code-block-view.module.d.css.ts, packages/react/src/utils/write-clipboard-text.ts, packages/react/src/components/copy-button.tsx, packages/react/src/components/markdown-view.tsx	The menu provides Change language and Copy code actions. Clipboard writes use a shared helper. Component tests cover menu interaction, language selection, copying, and focus behavior. Menu styles and style-map keys are added. Mermaid preview classes now use clsx.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant Editor
  participant Keymap
  participant CodeBlockToolbar
  participant Menu
  participant LanguagePicker
  participant Clipboard
  Editor->>Keymap: Mod-/ with caret in code block
  Keymap->>CodeBlockToolbar: Open registered menu
  CodeBlockToolbar->>Menu: Open menu and set focus return
  Menu->>LanguagePicker: Change language action
  Menu->>Clipboard: Copy code action

Loading

Merge Risk: Low · up to 4bd0f

The menu has bounded issues: outside dismissal can steal focus, failed copying gives no feedback, and read-only editors permit language changes. An unusual programmatic shortcut sequence can target the previous block, and core-only users see an unavailable shortcut advertised. These warrant fixes or explicit owner acceptance, but do not establish broad release-blocking failure.

- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

[github-actions]

Preview: https://pr-770-meowdown.ocavue.workers.dev

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@meowdown/core@770

npm i https://pkg.pr.new/@meowdown/embed@770

npm i https://pkg.pr.new/@meowdown/markdown@770

npm i https://pkg.pr.new/@meowdown/react@770

commit: 4bd0fda

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	93.32%	6693 / 7172
🔵	Statements	92.08%	8218 / 8924
🔵	Functions	89.82%	1483 / 1651
🔵	Branches	88.42%	5516 / 6238

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/core/src/extensions/key-bindings.ts	100%	100%	100%	100%
packages/react/src/components/code-block-toolbar-state.ts	100%	100%	100%	100%
packages/react/src/components/code-block-view.module.css	0%	0%	0%	0%
packages/react/src/components/code-block-view.module.d.css.ts	0%	0%	0%	0%
packages/react/src/components/code-block-view.tsx	99.54%	95.91%	100%	100%	74
packages/react/src/components/copy-button.tsx	96.87%	81.81%	100%	100%	40
packages/react/src/components/markdown-view.tsx	97.72%	81.97%	100%	98.75%	276, 280, 448, 528-530, 532, 603, 743, 792
packages/react/src/extensions/block-menu.ts	87.5%	72.72%	100%	92.3%	26, 29
packages/react/src/extensions/code-block-view.ts	100%	100%	100%	100%
packages/react/src/utils/write-clipboard-text.ts	60%	100%	100%	60%	9-10

Generated in workflow #3031 for commit 4bd0fda by the Vitest Coverage Report Action