fix(web): wrapping a selection in backticks formats it as code

[SepehrRajabi]

Problem

With rich text on, selecting text in the composer and pressing ` wraps the selection in literal backticks instead of formatting it as inline code. Typing `text` by hand formats it correctly. * and _ have the same problem with italic.

To reproduce: turn on rich text, type say hello now, select hello, press `. The composer shows `hello` as plain text instead of code.

Change

The wrap-selection handler is an editorProps.handleTextInput. ProseMirror calls it before plugin handlers, so Tiptap's mark input rules never get to run. It wrapped the selection in literal markers and stopped there.

A new surroundSelectionWithMark helper in composer-rich-text-doc.ts now applies the code mark for ` and the italic mark for * and _. The result matches what typing the markers produces. The helper returns null, and the selection is still wrapped in literal characters, in two cases: in plain mode, where those marks don't exist, and when the selection spans more than one line (separate paragraphs or a line break). Inline markdown can't cross lines, so marking that text would save as one span per line, changing `one\ntwo` into `one`\n`two`. Brackets and quotes keep wrapping as before, and the existing guards still apply: already-styled text, chips, and mention boundaries are left to normal typing.

Scope and approval

This is a very small, focused fix for an obvious bug. The same keystroke gives different results depending on whether you wrap a selection or type the markers yourself. It changes one handler in the web composer and adds a pure helper with tests. It doesn't depend on the provider, and the mobile composer has no wrap-selection behaviour.

Verification

• vp test run src/composer-rich-text-doc.test.ts (in apps/web): 87 passed. The new cases build a document, apply the helper to the hello selection, and serialize it back to markdown:
  • ` gives say `hello` now
  • * and _ give say *hello* now
  • plain mode returns null, so wrapping stays literal
  • selections across paragraphs or a line break return null, so wrapping stays literal
• vpr typecheck in apps/web and vp lint on the changed files: clean.
• Manual check in a local dev build (web, rich text on): typed Rename the parseConfig helper, selected parseConfig, pressed `.

Before (main)	After

Before, the composer kept literal `parseConfig` as plain text. After, parseConfig renders as inline code, the same as typing the backticks by hand. I didn't check the multi-line fallback manually; the unit tests cover it.

Model: Claude Opus 5.5, via Claude Code running in T3 Code.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Would Approve

Macroscope's review found this PR approvable — This is a small, self-contained composer bug fix that applies existing rich-text marks while preserving literal behavior in plain mode. A Medium-severity issue remains for selections spanning lines or paragraphs, where serialization can change formatting boundaries.

Not approved because:

• 1 blocking correctness issue found at or above your repo's Minimum Blocking Severity

^{Adjust the Minimum Blocking Severity for this repo — including turning it Off — in Settings. You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 5a59e68c-22f6-4cbe-8a83-924e4af82384

📥 Commits

Reviewing files that changed from the base of the PR and between cc1e634 and 28037a5.

📒 Files selected for processing (3)

• apps/web/src/components/ComposerPromptEditorTiptap.tsx
• apps/web/src/composer-rich-text-doc.test.ts
• apps/web/src/composer-rich-text-doc.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The composer now attempts to apply a code or italic mark to selected text when a supported opener is typed. If the selection cannot be marked, the existing closer-insertion behavior continues.

Changes

Selection Marking

Layer / File(s)	Summary
Schema-aware selection mark helper apps/web/src/composer-rich-text-doc.ts	The new helper maps backticks, asterisks, and underscores to schema marks. It returns null if the mark is unavailable, selection endpoints have different parents, or the selected range contains a hard break.
Composer input integration and tests apps/web/src/components/ComposerPromptEditorTiptap.tsx, apps/web/src/composer-rich-text-doc.test.ts	The composer dispatches the mark transaction when the helper returns one. Tests cover serialized marks, selections spanning paragraphs or hard breaks, and plain mode.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 28037

The selection-formatting change appears mergeable after normal checks; no concrete issue remains identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title is concise, uses the repository’s conventional format, and clearly describes the primary fix: applying code formatting when wrapping a selection in backticks.
Description check	✅ Passed	The description covers the problem, change, scope and approval rationale, verification steps, test results, manual UI validation, screenshots, and the agent model and harness used.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

_{Comment @coderabbitai help to get the list of available commands.}