diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index d7878cc29a165..56c73bcec16a6 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -133,6 +133,7 @@ import {
import { attachmentUploadBlockReason } from "../../lib/attachmentUploadState";
import type { AssistantCitationSourceAnchor } from "~/lib/assistantTextSelection";
import { shortcutLabelForCommand } from "../../keybindings";
+import { persistClientSettingsUpdate } from "../../hooks/useSettings";
import {
type TerminalContextDraft,
type TerminalContextSelection,
@@ -198,6 +199,7 @@ import {
ComposerRestingImagePreviews,
} from "./ComposerAttachmentStrip";
import { ComposerPrimaryActions } from "./ComposerPrimaryActions";
+import { ComposerRichTextToggle } from "./ComposerRichTextToggle";
import { ComposerFooterPrimaryActions } from "./ComposerFooterControls";
import { ComposerPendingUserInputPanel } from "./ComposerPendingUserInputPanel";
import { ComposerPlanFollowUpBanner } from "./ComposerPlanFollowUpBanner";
@@ -304,6 +306,7 @@ export interface ChatComposerHandle {
openModelPicker: () => void;
stepReasoningEffort: (direction: 1 | -1) => void;
toggleModelPicker: () => void;
+ toggleRichText: () => void;
openControl: (command: KeybindingCommand) => void;
isModelPickerOpen: () => boolean;
isCaretAtStart: () => boolean;
@@ -2852,6 +2855,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
openModelPickerStable();
}
},
+ toggleRichText: () => {
+ if (isLiteralPendingAnswer) return;
+ persistClientSettingsUpdate((current) => ({
+ ...current,
+ composerRichTextEnabled: !current.composerRichTextEnabled,
+ })).catch(console.error);
+ },
openControl: (command) => {
if (composerBlurFrameRef.current !== null) {
window.cancelAnimationFrame(composerBlurFrameRef.current);
@@ -3429,7 +3439,23 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
showMobilePendingAnswerActions && "hidden sm:flex",
)}
>
- {composerAttachButton ?
{composerAttachButton}
: null}
+ {composerAttachButton || !isLiteralPendingAnswer ? (
+
+ {composerAttachButton}
+ {isLiteralPendingAnswer ? null : (
+
+ )}
+
+ ) : null}
+ event.preventDefault()}
+ onClick={() => void updateClientSettings({ composerRichTextEnabled: showingSource })}
+ />
+ }
+ >
+
+
+
+ {showingSource ? "Show formatting" : "Show Markdown source"}
+ {shortcutLabel ? ` · ${shortcutLabel}` : null}
+
+
+ );
+}
diff --git a/apps/web/src/components/chat/composerShortcuts.ts b/apps/web/src/components/chat/composerShortcuts.ts
index 30beb9771968f..e55398996cea9 100644
--- a/apps/web/src/components/chat/composerShortcuts.ts
+++ b/apps/web/src/components/chat/composerShortcuts.ts
@@ -18,6 +18,12 @@ export function composerShortcutCommands(
"modelPicker.toggle": ({ event }) => {
if (!event.repeat) composerRef.current?.toggleModelPicker();
},
+ "composer.toggleRichText": ({ event }) => {
+ // The flip remounts the editor, which would drop an unsaved citation comment.
+ if (event.target instanceof Element && event.target.closest("[data-citation-comment-editor]"))
+ return false;
+ if (!event.repeat) composerRef.current?.toggleRichText();
+ },
"composer.increaseEffort": ({ event }) => {
if (!event.repeat) composerRef.current?.stepReasoningEffort(1);
},
diff --git a/apps/web/src/keybindings.test.ts b/apps/web/src/keybindings.test.ts
index a0ba7fa7ee043..96ae09296dea5 100644
--- a/apps/web/src/keybindings.test.ts
+++ b/apps/web/src/keybindings.test.ts
@@ -768,12 +768,21 @@ describe("composer and pull request shortcuts", () => {
});
it.each(["MacIntel", "Win32", "Linux"])(
- "reserves the alternate send chord for the focused composer on %s",
+ "resolves composer toggle and alternate send chords in their contexts on %s",
(platform) => {
const modifier = {
metaKey: platform === "MacIntel",
ctrlKey: platform !== "MacIntel",
};
+ for (const terminalFocus of [false, true]) {
+ assert.strictEqual(
+ resolveShortcutCommand(event({ key: "/", ...modifier }), DEFAULT_RESOLVED_KEYBINDINGS, {
+ platform,
+ context: { terminalFocus },
+ }),
+ terminalFocus ? null : "composer.toggleRichText",
+ );
+ }
const shiftedEnter = event({ key: "Enter", shiftKey: true, ...modifier });
for (const composerRequiresModifier of [false, true]) {
const context = {
diff --git a/docs/user/composer.md b/docs/user/composer.md
index 714572dfd5005..afac8ce64cf3b 100644
--- a/docs/user/composer.md
+++ b/docs/user/composer.md
@@ -19,7 +19,9 @@ The composer writes Markdown and shows it styled as you type. Markers such as
them. Lines starting with `- `, `1. `, `- [ ] `, `> `, `# ` or `---` become lists,
task lists, quotes, headings and rules; ` ``` ` followed by Enter opens a code
block. What you typed is what the agent receives, markers and numbering
-included, and `#1234` without a space still looks up a pull request.
+included, and `#1234` without a space still looks up a pull request. To see the
+plain Markdown instead, press the button beside attach; it is the same
+switch as **Settings → Chat → Rich text composer**.
Enter sends. In a list or quote, **Shift+Enter** continues it, and Shift+Enter
on an empty line moves out one level, then leaves it; **Tab** nests a list item
diff --git a/docs/user/keybindings.md b/docs/user/keybindings.md
index 83989762c5b07..0e8e17744019e 100644
--- a/docs/user/keybindings.md
+++ b/docs/user/keybindings.md
@@ -28,6 +28,7 @@ Use `mod+shift+e` for effort, `mod+shift+a` for permissions, `mod+shift+x` for t
workspace, and `mod+shift+g` for the Git branch. The workspace menu includes the
current checkout, a new worktree, and the previous worktree when available.
Use `mod+shift+l` to reuse the previous worktree directly.
+Use `mod+/` to switch the composer between rich text and its Markdown source.
To change effort one step without opening the picker, bind
**Composer: Increase Effort** and **Composer: Decrease Effort** in Keybindings.
diff --git a/packages/contracts/src/keybindings.ts b/packages/contracts/src/keybindings.ts
index 714e0a1d486a1..cc55adb9ca81b 100644
--- a/packages/contracts/src/keybindings.ts
+++ b/packages/contracts/src/keybindings.ts
@@ -87,6 +87,7 @@ export const STATIC_KEYBINDING_COMMANDS = [
"appearance.cycle",
"themeEditor.toggle",
"composer.stash",
+ "composer.toggleRichText",
"composer.sendAlternate",
"composer.sendBackground",
"composer.sendAndNewThread",
diff --git a/packages/shared/src/keybindings.ts b/packages/shared/src/keybindings.ts
index 32292c0f9ef21..8ae3f052afede 100644
--- a/packages/shared/src/keybindings.ts
+++ b/packages/shared/src/keybindings.ts
@@ -179,6 +179,7 @@ export const DEFAULT_KEYBINDINGS: ReadonlyArray = [
{ key: "mod+alt+shift+a", command: "appearance.cycle", when: "!terminalFocus" },
{ key: "mod+alt+shift+t", command: "themeEditor.toggle" },
{ key: "mod+s", command: "composer.stash", when: "!terminalFocus" },
+ { key: "mod+/", command: "composer.toggleRichText", when: "!terminalFocus" },
{ key: "mod+shift+enter", command: "thread.steerQueuedMessage", when: "!terminalFocus" },
{ key: "alt+arrowup", command: "thread.editQueuedMessage", when: "composerFocus" },
{ key: "mod+enter", command: "composer.sendAlternate", when: "composerFocus && turnRunning" },