fix(web): paint text selection over composer chips (#5)

Signed-off-by: Yordis Prieto <yordis.prieto@gmail.com>

Author: yordis

apps/web/src/components/ComposerPromptEditor.tsx

@@ -184,7 +184,7 @@ class ComposerMentionNode extends DecoratorNode<React.ReactElement> {
 
   override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = "inline-flex align-middle leading-none";
+    dom.className = "composer-inline-chip relative inline-flex align-middle leading-none";
     return dom;
   }
 
@@ -322,7 +322,7 @@ class ComposerSkillNode extends DecoratorNode<React.ReactElement> {
 
   override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = "inline-flex align-middle leading-none";
+    dom.className = "composer-inline-chip relative inline-flex align-middle leading-none";
     return dom;
   }
 
@@ -393,7 +393,7 @@ class ComposerTerminalContextNode extends DecoratorNode<React.ReactElement> {
 
   override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = "inline-flex align-middle leading-none";
+    dom.className = "composer-inline-chip relative inline-flex align-middle leading-none";
     return dom;
   }
 
@@ -1119,6 +1119,44 @@ function ComposerInlineTokenBackspacePlugin() {
   return null;
 }
 
+/**
+ * Chips render as non-editable decorators, so the browser never paints the
+ * native text selection over them; without help, a selection spanning chips
+ * is only visible in the slivers between them. Mirror the selection onto the
+ * chips with a data attribute the stylesheet turns into a highlight overlay.
+ */
+function ComposerChipSelectionPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    let selectedKeys = new Set<string>();
+    return editor.registerUpdateListener(() => {
+      const nextKeys = new Set<string>();
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+          for (const node of selection.getNodes()) {
+            if (node instanceof DecoratorNode) {
+              nextKeys.add(node.getKey());
+            }
+          }
+        }
+      });
+      for (const key of selectedKeys) {
+        if (!nextKeys.has(key)) {
+          editor.getElementByKey(key)?.removeAttribute("data-composer-chip-selected");
+        }
+      }
+      for (const key of nextKeys) {
+        editor.getElementByKey(key)?.setAttribute("data-composer-chip-selected", "true");
+      }
+      selectedKeys = nextKeys;
+    });
+  }, [editor]);
+
+  return null;
+}
+
 function ComposerInlineTokenPastePlugin() {
   const [editor] = useLexicalComposerContext();
 
@@ -1711,6 +1749,7 @@ function ComposerPromptEditorInner({
         <ComposerInlineTokenSelectionNormalizePlugin />
         <ComposerInlineTokenBackspacePlugin />
         <ComposerInlineTokenPastePlugin />
+        <ComposerChipSelectionPlugin />
         <HistoryPlugin />
       </div>
     </ComposerTerminalContextActionsContext>

apps/web/src/index.css

@@ -954,3 +954,15 @@ label:has(> select#reasoning-effort) select {
 .dark .model-picker-list::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.15);
 }
+
+/* Composer chips are non-editable decorators, so the browser skips them when
+   painting text selection; this overlay stands in for the native highlight. */
+.composer-inline-chip[data-composer-chip-selected]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 6px;
+  background-color: Highlight;
+  opacity: 0.3;
+  pointer-events: none;
+}

docs/fork/0005-composer-chip-selection-highlight.md

@@ -0,0 +1,24 @@
+# 0005: Selection highlight over composer chips
+
+- PR: [TrogonStack/t3code#5](https://github.com/TrogonStack/t3code/pull/5)
+- Status: active
+
+## What you can do now
+
+- Selecting text in the composer now visibly covers file, folder, skill, and
+  terminal-context chips: each chip inside the selection gets the same
+  highlight tint as the surrounding text, in the system selection color.
+- The highlight tracks the selection live: partial selections cover only the
+  chips inside the range, and collapsing the selection clears it.
+
+## Why
+
+Chips are non-editable islands, so the browser paints no selection over them;
+a selection spanning several mentions was only visible in the slivers between
+chips, making it impossible to tell what a copy, cut, or delete was about to
+act on.
+
+## Upstream considerations
+
+Self-contained editor polish with no dependency on other fork divergences;
+straightforward to propose upstream as is.

docs/fork/README.md

@@ -35,3 +35,4 @@ Each entry uses these sections:
 | 0002 | [Draft hero landing on the index route](./0002-draft-hero-landing.md)                                 | [#2](https://github.com/TrogonStack/t3code/pull/2) | active |
 | 0003 | [Native subagent threads for Claude orchestrators](./0003-native-subagent-threads.md)                 | [#3](https://github.com/TrogonStack/t3code/pull/3) | active |
 | 0004 | [Drag files from the explorer into the chat](./0004-file-tree-drag-to-chat.md)                        | [#4](https://github.com/TrogonStack/t3code/pull/4) | active |
+| 0005 | [Selection highlight over composer chips](./0005-composer-chip-selection-highlight.md)                | [#5](https://github.com/TrogonStack/t3code/pull/5) | active |