Add Lexical-based composer editor with file mention pills

[juliusmarminge]

Summary

• Introduce ComposerPromptEditor component using Lexical for rich text editing
• Add @-mention support for files with autocomplete dropdown
• Include mention detection utilities with comprehensive tests
• Integrate new editor into ChatView replacing plain textarea

Test plan

• Type @ in composer to trigger file mention autocomplete
• Select a file from the dropdown to insert a mention pill
• Verify pills render correctly and are preserved on submission
• Test keyboard navigation in autocomplete menu
• Verify paste and undo/redo behavior works correctly

🤖 Generated with Claude Code

---

Note

Medium Risk
Replaces the core chat composer input with a custom Lexical editor and new cursor/trigger handling, which can affect typing, selection, and send behavior. Also changes draft persistence by removing stored cursor state, which could surface edge cases when restoring drafts.

Overview
Replaces the chat composer <textarea> with a new Lexical-based ComposerPromptEditor that renders @path tokens as non-editable mention chips (with VS Code-style icons) while keeping the underlying prompt as plain text.

Updates ChatView to manage cursor/trigger state locally (instead of persisting cursor in the draft store), hardens autocomplete selection via snapshot/expected-text checks, and routes arrow/tab/enter handling through the editor so the command menu highlight/active styling stays in sync.

Adds splitPromptIntoComposerSegments + tests for mention parsing, extends composer logic with expandCollapsedComposerCursor (and tests), and introduces Lexical dependencies (lexical, @lexical/react) in the web app.

^{Written by Cursor Bugbot for commit 4dbd631. This will update automatically on new commits. Configure here.}

Note

Replace textarea composer with Lexical-based ComposerPromptEditor in ChatView to render file mention pills and route command keys

Introduce a Lexical editor with a custom ComposerMentionNode for non-editable @path chips, switch ChatView to local cursor/trigger state with expandCollapsedComposerCursor, and add command key handling via ComposerCommandKeyPlugin. Update command menu to track an active item. Remove cursor persistence from composerDraftStore. Add parsing utility and tests. See ComposerPromptEditor.tsx and ChatView.tsx.

📍Where to Start

Start with ComposerPromptEditor and its custom node/plugins in ComposerPromptEditor.tsx, then review the integration in ChatView in ChatView.tsx.

^{Macroscope summarized 4dbd631.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/file-mention-pills-textarea

---

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

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Enter key swallowed when autocomplete menu has no items
  • Added currentItems.length > 0 guard to the Tab/Enter handler so that when no autocomplete items match, Enter falls through to onSend() instead of being silently consumed.
• ✅ Fixed: Mention pill icons hardcode dark theme variant
  • Replaced hardcoded "dark" with runtime detection via document.documentElement.classList.contains("dark") to match the active theme.

Or push these changes by commenting:

@cursor push 16d96f5d92

Preview (16d96f5d92)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -2117,7 +2117,7 @@
         nudgeComposerMenuHighlight("ArrowUp");
         return true;
       }
-      if (key === "Tab" || key === "Enter") {
+      if ((key === "Tab" || key === "Enter") && currentItems.length > 0) {
         const selectedItem = activeComposerMenuItemRef.current ?? currentItems[0];
         if (selectedItem) {
           onSelectComposerItem(selectedItem);

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -152,7 +152,8 @@
   icon.ariaHidden = "true";
   icon.className = "size-3.5 shrink-0 opacity-85";
   icon.loading = "lazy";
-  icon.src = getVscodeIconUrlForEntry(pathValue, inferMentionPathKind(pathValue), "dark");
+  const theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+  icon.src = getVscodeIconUrlForEntry(pathValue, inferMentionPathKind(pathValue), theme);
 
   const label = document.createElement("span");
   label.className = "truncate leading-tight";

[macroscopeapp]

🟡 Medium components/ComposerPromptEditor.tsx:472

Arrow key handling overrides native navigation (modifiers and graphemes). Suggest only intercepting when crossing ComposerMentionNode boundaries and otherwise returning false so the browser/Lexical drive navigation. This preserves Cmd/Opt shortcuts and avoids placing the cursor inside surrogate pairs.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file apps/web/src/components/ComposerPromptEditor.tsx around line 472:

Arrow key handling overrides native navigation (modifiers and graphemes). Suggest only intercepting when crossing `ComposerMentionNode` boundaries and otherwise returning `false` so the browser/Lexical drive navigation. This preserves Cmd/Opt shortcuts and avoids placing the cursor inside surrogate pairs.

Evidence trail:
apps/web/src/components/ComposerPromptEditor.tsx lines 466-506 (ComposerMentionArrowPlugin implementation), lines 267-277 (findSelectionPointAtOffset text node handling), lines 328-342 ($setSelectionAtComposerOffset). The handlers return `true` without checking modifier keys and navigate by UTF-16 code unit offsets.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Raw text cursor used in collapsed editor offset space
  • Added collapseRawComposerCursor to convert the raw text cursor from replaceTextRange into collapsed space before passing it to setComposerCursor and focusAt, while keeping the raw cursor for detectComposerTrigger which correctly operates in raw text space.

Or push these changes by commenting:

@cursor push 5f4628100a

Preview (5f4628100a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -34,6 +34,7 @@
 import {
   type ComposerTrigger,
   type ComposerTriggerKind,
+  collapseRawComposerCursor,
   detectComposerTrigger,
   expandCollapsedComposerCursor,
   replaceTextRange,
@@ -2008,10 +2009,11 @@
       const next = replaceTextRange(promptRef.current, rangeStart, rangeEnd, replacement);
       promptRef.current = next.text;
       setPrompt(next.text);
-      setComposerCursor(next.cursor);
+      const collapsedCursor = collapseRawComposerCursor(next.text, next.cursor);
+      setComposerCursor(collapsedCursor);
       setComposerTrigger(detectComposerTrigger(next.text, next.cursor));
       window.requestAnimationFrame(() => {
-        composerEditorRef.current?.focusAt(next.cursor);
+        composerEditorRef.current?.focusAt(collapsedCursor);
       });
       return true;
     },

diff --git a/apps/web/src/composer-logic.ts b/apps/web/src/composer-logic.ts
--- a/apps/web/src/composer-logic.ts
+++ b/apps/web/src/composer-logic.ts
@@ -26,6 +26,41 @@
   return index + 1;
 }
 
+export function collapseRawComposerCursor(text: string, rawCursorInput: number): number {
+  const rawCursor = clampCursor(text, rawCursorInput);
+  const segments = splitPromptIntoComposerSegments(text);
+  if (segments.length === 0) {
+    return rawCursor;
+  }
+
+  let remaining = rawCursor;
+  let collapsedCursor = 0;
+
+  for (const segment of segments) {
+    if (segment.type === "mention") {
+      const rawLength = segment.path.length + 1;
+      if (remaining <= 0) {
+        return collapsedCursor;
+      }
+      if (remaining < rawLength) {
+        return collapsedCursor + 1;
+      }
+      remaining -= rawLength;
+      collapsedCursor += 1;
+      continue;
+    }
+
+    const segmentLength = segment.text.length;
+    if (remaining <= segmentLength) {
+      return collapsedCursor + remaining;
+    }
+    remaining -= segmentLength;
+    collapsedCursor += segmentLength;
+  }
+
+  return collapsedCursor;
+}
+
 export function expandCollapsedComposerCursor(text: string, cursorInput: number): number {
   const collapsedCursor = clampCursor(text, cursorInput);
   const segments = splitPromptIntoComposerSegments(text);