@draht/tui 2026.3.14 → 2026.3.25

package/dist/components/editor.js

@@ -1,11 +1,71 @@
-import { getEditorKeybindings } from "../keybindings.js";
+import { getKeybindings } from "../keybindings.js";
 import { decodeKittyPrintable, matchesKey } from "../keys.js";
 import { KillRing } from "../kill-ring.js";
 import { CURSOR_MARKER } from "../tui.js";
 import { UndoStack } from "../undo-stack.js";
-import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils.js";
+import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils.js";
 import { SelectList } from "./select-list.js";
-const segmenter = getSegmenter();
+const baseSegmenter = getSegmenter();
+/** Regex matching paste markers like `[paste #1 +123 lines]` or `[paste #2 1234 chars]`. */
+const PASTE_MARKER_REGEX = /\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]/g;
+/** Non-global version for single-segment testing. */
+const PASTE_MARKER_SINGLE = /^\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]$/;
+/** Check if a segment is a paste marker (i.e. was merged by segmentWithMarkers). */
+function isPasteMarker(segment) {
+    return segment.length >= 10 && PASTE_MARKER_SINGLE.test(segment);
+}
+/**
+ * A segmenter that wraps Intl.Segmenter and merges graphemes that fall
+ * within paste markers into single atomic segments.  This makes cursor
+ * movement, deletion, word-wrap, etc. treat paste markers as single units.
+ *
+ * Only markers whose numeric ID exists in `validIds` are merged.
+ */
+function segmentWithMarkers(text, validIds) {
+    // Fast path: no paste markers in the text or no valid IDs.
+    if (validIds.size === 0 || !text.includes("[paste #")) {
+        return baseSegmenter.segment(text);
+    }
+    // Find all marker spans with valid IDs.
+    const markers = [];
+    for (const m of text.matchAll(PASTE_MARKER_REGEX)) {
+        const id = Number.parseInt(m[1], 10);
+        if (!validIds.has(id))
+            continue;
+        markers.push({ start: m.index, end: m.index + m[0].length });
+    }
+    if (markers.length === 0) {
+        return baseSegmenter.segment(text);
+    }
+    // Build merged segment list.
+    const baseSegments = baseSegmenter.segment(text);
+    const result = [];
+    let markerIdx = 0;
+    for (const seg of baseSegments) {
+        // Skip past markers that are entirely before this segment.
+        while (markerIdx < markers.length && markers[markerIdx].end <= seg.index) {
+            markerIdx++;
+        }
+        const marker = markerIdx < markers.length ? markers[markerIdx] : null;
+        if (marker && seg.index >= marker.start && seg.index < marker.end) {
+            // This segment falls inside a marker.
+            // If this is the first segment of the marker, emit a merged segment.
+            if (seg.index === marker.start) {
+                const markerText = text.slice(marker.start, marker.end);
+                result.push({
+                    segment: markerText,
+                    index: marker.start,
+                    input: text,
+                });
+            }
+            // Otherwise skip (already merged into the first segment).
+        }
+        else {
+            result.push(seg);
+        }
+    }
+    return result;
+}
 /**
  * Split a line into word-wrapped chunks.
  * Wraps at word boundaries when possible, falling back to character-level
@@ -13,9 +73,11 @@ const segmenter = getSegmenter();
  *
  * @param line - The text line to wrap
  * @param maxWidth - Maximum visible width per chunk
+ * @param preSegmented - Optional pre-segmented graphemes (e.g. with paste-marker awareness).
+ *                       When omitted the default Intl.Segmenter is used.
  * @returns Array of chunks with text and position information
  */
-export function wordWrapLine(line, maxWidth) {
+export function wordWrapLine(line, maxWidth, preSegmented) {
     if (!line || maxWidth <= 0) {
         return [{ text: "", startIndex: 0, endIndex: 0 }];
     }
@@ -24,7 +86,7 @@ export function wordWrapLine(line, maxWidth) {
         return [{ text: line, startIndex: 0, endIndex: line.length }];
     }
     const chunks = [];
-    const segments = [...segmenter.segment(line)];
+    const segments = preSegmented ?? [...baseSegmenter.segment(line)];
     let currentWidth = 0;
     let chunkStart = 0;
     // Wrap opportunity: the position after the last whitespace before a non-whitespace
@@ -36,7 +98,7 @@ export function wordWrapLine(line, maxWidth) {
         const grapheme = seg.segment;
         const gWidth = visibleWidth(grapheme);
         const charIndex = seg.index;
-        const isWs = isWhitespaceChar(grapheme);
+        const isWs = !isPasteMarker(grapheme) && isWhitespaceChar(grapheme);
         // Overflow check before advancing.
         if (currentWidth + gWidth > maxWidth) {
             if (wrapOppIndex >= 0 && currentWidth - wrapOppWidth + gWidth <= maxWidth) {
@@ -58,13 +120,29 @@ export function wordWrapLine(line, maxWidth) {
             }
             wrapOppIndex = -1;
         }
+        if (gWidth > maxWidth) {
+            // Single atomic segment wider than maxWidth (e.g. paste marker
+            // in a narrow terminal). Re-wrap it at grapheme granularity.
+            // The segment remains logically atomic for cursor
+            // movement / editing — the split is purely visual for word-wrap layout.
+            const subChunks = wordWrapLine(grapheme, maxWidth);
+            for (let j = 0; j < subChunks.length - 1; j++) {
+                const sc = subChunks[j];
+                chunks.push({ text: sc.text, startIndex: charIndex + sc.startIndex, endIndex: charIndex + sc.endIndex });
+            }
+            const last = subChunks[subChunks.length - 1];
+            chunkStart = charIndex + last.startIndex;
+            currentWidth = visibleWidth(last.text);
+            wrapOppIndex = -1;
+            continue;
+        }
         // Advance.
         currentWidth += gWidth;
         // Record wrap opportunity: whitespace followed by non-whitespace.
         // Multiple spaces join (no break between them); the break point is
         // after the last space before the next word.
         const next = segments[i + 1];
-        if (isWs && next && !isWhitespaceChar(next.segment)) {
+        if (isWs && next && (isPasteMarker(next.segment) || !isWhitespaceChar(next.segment))) {
             wrapOppIndex = next.index;
             wrapOppWidth = currentWidth;
         }
@@ -73,6 +151,10 @@ export function wordWrapLine(line, maxWidth) {
     chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
     return chunks;
 }
+const SLASH_COMMAND_SELECT_LIST_LAYOUT = {
+    minPrimaryColumnWidth: 12,
+    maxPrimaryColumnWidth: 32,
+};
 export class Editor {
     state = {
         lines: [""],
@@ -126,6 +208,14 @@ export class Editor {
         const maxVisible = options.autocompleteMaxVisible ?? 5;
         this.autocompleteMaxVisible = Number.isFinite(maxVisible) ? Math.max(3, Math.min(20, Math.floor(maxVisible))) : 5;
     }
+    /** Set of currently valid paste IDs, for marker-aware segmentation. */
+    validPasteIds() {
+        return new Set(this.pastes.keys());
+    }
+    /** Segment text with paste-marker awareness, only merging markers with valid IDs. */
+    segment(text) {
+        return segmentWithMarkers(text, this.validPasteIds());
+    }
     getPaddingX() {
         return this.paddingX;
     }
@@ -252,7 +342,12 @@ export class Editor {
         if (this.scrollOffset > 0) {
             const indicator = `─── ↑ ${this.scrollOffset} more `;
             const remaining = width - visibleWidth(indicator);
-            result.push(this.borderColor(indicator + "─".repeat(Math.max(0, remaining))));
+            if (remaining >= 0) {
+                result.push(this.borderColor(indicator + "─".repeat(remaining)));
+            }
+            else {
+                result.push(this.borderColor(truncateToWidth(indicator, width)));
+            }
         }
         else {
             result.push(horizontal.repeat(width));
@@ -273,7 +368,7 @@ export class Editor {
                 if (after.length > 0) {
                     // Cursor is on a character (grapheme) - replace it with highlighted version
                     // Get the first grapheme from 'after'
-                    const afterGraphemes = [...segmenter.segment(after)];
+                    const afterGraphemes = [...this.segment(after)];
                     const firstGrapheme = afterGraphemes[0]?.segment || "";
                     const restAfter = after.slice(firstGrapheme.length);
                     const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
@@ -319,11 +414,11 @@ export class Editor {
         return result;
     }
     handleInput(data) {
-        const kb = getEditorKeybindings();
+        const kb = getKeybindings();
         // Handle character jump mode (awaiting next character to jump to)
         if (this.jumpMode !== null) {
             // Cancel if the hotkey is pressed again
-            if (kb.matches(data, "jumpForward") || kb.matches(data, "jumpBackward")) {
+            if (kb.matches(data, "tui.editor.jumpForward") || kb.matches(data, "tui.editor.jumpBackward")) {
                 this.jumpMode = null;
                 return;
             }
@@ -362,25 +457,25 @@ export class Editor {
             return;
         }
         // Ctrl+C - let parent handle (exit/clear)
-        if (kb.matches(data, "copy")) {
+        if (kb.matches(data, "tui.input.copy")) {
             return;
         }
         // Undo
-        if (kb.matches(data, "undo")) {
+        if (kb.matches(data, "tui.editor.undo")) {
             this.undo();
             return;
         }
         // Handle autocomplete mode
         if (this.autocompleteState && this.autocompleteList) {
-            if (kb.matches(data, "selectCancel")) {
+            if (kb.matches(data, "tui.select.cancel")) {
                 this.cancelAutocomplete();
                 return;
             }
-            if (kb.matches(data, "selectUp") || kb.matches(data, "selectDown")) {
+            if (kb.matches(data, "tui.select.up") || kb.matches(data, "tui.select.down")) {
                 this.autocompleteList.handleInput(data);
                 return;
             }
-            if (kb.matches(data, "tab")) {
+            if (kb.matches(data, "tui.input.tab")) {
                 const selected = this.autocompleteList.getSelectedItem();
                 if (selected && this.autocompleteProvider) {
                     const shouldChainSlashArgumentAutocomplete = this.shouldChainSlashArgumentAutocompleteOnTabSelection();
@@ -399,7 +494,7 @@ export class Editor {
                 }
                 return;
             }
-            if (kb.matches(data, "selectConfirm")) {
+            if (kb.matches(data, "tui.select.confirm")) {
                 const selected = this.autocompleteList.getSelectedItem();
                 if (selected && this.autocompleteProvider) {
                     this.pushUndoSnapshot();
@@ -422,63 +517,63 @@ export class Editor {
             }
         }
         // Tab - trigger completion
-        if (kb.matches(data, "tab") && !this.autocompleteState) {
+        if (kb.matches(data, "tui.input.tab") && !this.autocompleteState) {
             this.handleTabCompletion();
             return;
         }
         // Deletion actions
-        if (kb.matches(data, "deleteToLineEnd")) {
+        if (kb.matches(data, "tui.editor.deleteToLineEnd")) {
             this.deleteToEndOfLine();
             return;
         }
-        if (kb.matches(data, "deleteToLineStart")) {
+        if (kb.matches(data, "tui.editor.deleteToLineStart")) {
             this.deleteToStartOfLine();
             return;
         }
-        if (kb.matches(data, "deleteWordBackward")) {
+        if (kb.matches(data, "tui.editor.deleteWordBackward")) {
             this.deleteWordBackwards();
             return;
         }
-        if (kb.matches(data, "deleteWordForward")) {
+        if (kb.matches(data, "tui.editor.deleteWordForward")) {
             this.deleteWordForward();
             return;
         }
-        if (kb.matches(data, "deleteCharBackward") || matchesKey(data, "shift+backspace")) {
+        if (kb.matches(data, "tui.editor.deleteCharBackward") || matchesKey(data, "shift+backspace")) {
             this.handleBackspace();
             return;
         }
-        if (kb.matches(data, "deleteCharForward") || matchesKey(data, "shift+delete")) {
+        if (kb.matches(data, "tui.editor.deleteCharForward") || matchesKey(data, "shift+delete")) {
             this.handleForwardDelete();
             return;
         }
         // Kill ring actions
-        if (kb.matches(data, "yank")) {
+        if (kb.matches(data, "tui.editor.yank")) {
             this.yank();
             return;
         }
-        if (kb.matches(data, "yankPop")) {
+        if (kb.matches(data, "tui.editor.yankPop")) {
             this.yankPop();
             return;
         }
         // Cursor movement actions
-        if (kb.matches(data, "cursorLineStart")) {
+        if (kb.matches(data, "tui.editor.cursorLineStart")) {
             this.moveToLineStart();
             return;
         }
-        if (kb.matches(data, "cursorLineEnd")) {
+        if (kb.matches(data, "tui.editor.cursorLineEnd")) {
             this.moveToLineEnd();
             return;
         }
-        if (kb.matches(data, "cursorWordLeft")) {
+        if (kb.matches(data, "tui.editor.cursorWordLeft")) {
             this.moveWordBackwards();
             return;
         }
-        if (kb.matches(data, "cursorWordRight")) {
+        if (kb.matches(data, "tui.editor.cursorWordRight")) {
             this.moveWordForwards();
             return;
         }
         // New line
-        if (kb.matches(data, "newLine") ||
+        if (kb.matches(data, "tui.input.newLine") ||
             (data.charCodeAt(0) === 10 && data.length > 1) ||
             data === "\x1b\r" ||
             data === "\x1b[13;2~" ||
@@ -493,7 +588,7 @@ export class Editor {
             return;
         }
         // Submit (Enter)
-        if (kb.matches(data, "submit")) {
+        if (kb.matches(data, "tui.input.submit")) {
             if (this.disableSubmit)
                 return;
             // Workaround for terminals without Shift+Enter support:
@@ -508,7 +603,7 @@ export class Editor {
             return;
         }
         // Arrow key navigation (with history support)
-        if (kb.matches(data, "cursorUp")) {
+        if (kb.matches(data, "tui.editor.cursorUp")) {
             if (this.isEditorEmpty()) {
                 this.navigateHistory(-1);
             }
@@ -524,7 +619,7 @@ export class Editor {
             }
             return;
         }
-        if (kb.matches(data, "cursorDown")) {
+        if (kb.matches(data, "tui.editor.cursorDown")) {
             if (this.historyIndex > -1 && this.isOnLastVisualLine()) {
                 this.navigateHistory(1);
             }
@@ -537,29 +632,29 @@ export class Editor {
             }
             return;
         }
-        if (kb.matches(data, "cursorRight")) {
+        if (kb.matches(data, "tui.editor.cursorRight")) {
             this.moveCursor(0, 1);
             return;
         }
-        if (kb.matches(data, "cursorLeft")) {
+        if (kb.matches(data, "tui.editor.cursorLeft")) {
             this.moveCursor(0, -1);
             return;
         }
         // Page up/down - scroll by page and move cursor
-        if (kb.matches(data, "pageUp")) {
+        if (kb.matches(data, "tui.editor.pageUp")) {
             this.pageScroll(-1);
             return;
         }
-        if (kb.matches(data, "pageDown")) {
+        if (kb.matches(data, "tui.editor.pageDown")) {
             this.pageScroll(1);
             return;
         }
         // Character jump mode triggers
-        if (kb.matches(data, "jumpForward")) {
+        if (kb.matches(data, "tui.editor.jumpForward")) {
             this.jumpMode = "forward";
             return;
         }
-        if (kb.matches(data, "jumpBackward")) {
+        if (kb.matches(data, "tui.editor.jumpBackward")) {
             this.jumpMode = "backward";
             return;
         }
@@ -612,7 +707,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, contentWidth);
+                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line)]);
                 for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
                     const chunk = chunks[chunkIndex];
                     if (!chunk)
@@ -664,17 +759,20 @@ export class Editor {
     getText() {
         return this.state.lines.join("\n");
     }
+    expandPasteMarkers(text) {
+        let result = text;
+        for (const [pasteId, pasteContent] of this.pastes) {
+            const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
+            result = result.replace(markerRegex, () => pasteContent);
+        }
+        return result;
+    }
     /**
      * Get text with paste markers expanded to their actual content.
      * Use this when you need the full content (e.g., for external editor).
      */
     getExpandedText() {
-        let result = this.state.lines.join("\n");
-        for (const [pasteId, pasteContent] of this.pastes) {
-            const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
-            result = result.replace(markerRegex, pasteContent);
-        }
-        return result;
+        return this.expandPasteMarkers(this.state.lines.join("\n"));
     }
     getLines() {
         return [...this.state.lines];
@@ -875,7 +973,7 @@ export class Editor {
             return false;
         if (!matchesKey(data, "enter"))
             return false;
-        const submitKeys = kb.getKeys("submit");
+        const submitKeys = kb.getKeys("tui.input.submit");
         const hasShiftEnter = submitKeys.includes("shift+enter") || submitKeys.includes("shift+return");
         if (!hasShiftEnter)
             return false;
@@ -883,11 +981,7 @@ export class Editor {
         return this.state.cursorCol > 0 && currentLine[this.state.cursorCol - 1] === "\\";
     }
     submitValue() {
-        let result = this.state.lines.join("\n").trim();
-        for (const [pasteId, pasteContent] of this.pastes) {
-            const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
-            result = result.replace(markerRegex, pasteContent);
-        }
+        const result = this.expandPasteMarkers(this.state.lines.join("\n")).trim();
         this.state = { lines: [""], cursorLine: 0, cursorCol: 0 };
         this.pastes.clear();
         this.pasteCounter = 0;
@@ -909,7 +1003,7 @@ export class Editor {
             const line = this.state.lines[this.state.cursorLine] || "";
             const beforeCursor = line.slice(0, this.state.cursorCol);
             // Find the last grapheme in the text before cursor
-            const graphemes = [...segmenter.segment(beforeCursor)];
+            const graphemes = [...this.segment(beforeCursor)];
             const lastGrapheme = graphemes[graphemes.length - 1];
             const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
             const before = line.slice(0, this.state.cursorCol - graphemeLength);
@@ -978,6 +1072,21 @@ export class Editor {
             const targetCol = targetVL.startCol + moveToVisualCol;
             const logicalLine = this.state.lines[targetVL.logicalLine] || "";
             this.state.cursorCol = Math.min(targetCol, logicalLine.length);
+            // Snap cursor to atomic segment boundary (e.g. paste markers)
+            // so the cursor never lands in the middle of a multi-grapheme unit.
+            // Single-grapheme segments don't need snapping.
+            const segments = [...this.segment(logicalLine)];
+            for (const seg of segments) {
+                if (seg.index > this.state.cursorCol)
+                    break;
+                if (seg.segment.length <= 1)
+                    continue;
+                if (this.state.cursorCol < seg.index + seg.segment.length) {
+                    // jump to the start of the segment when moving up, to the end when moving down.
+                    this.state.cursorCol = currentVisualLine > targetVisualLine ? seg.index : seg.index + seg.segment.length;
+                    break;
+                }
+            }
         }
     }
     /**
@@ -1164,7 +1273,7 @@ export class Editor {
             // Delete grapheme at cursor position (handles emojis, combining characters, etc.)
             const afterCursor = currentLine.slice(this.state.cursorCol);
             // Find the first grapheme at cursor
-            const graphemes = [...segmenter.segment(afterCursor)];
+            const graphemes = [...this.segment(afterCursor)];
             const firstGrapheme = graphemes[0];
             const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
             const before = currentLine.slice(0, this.state.cursorCol);
@@ -1219,7 +1328,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, width);
+                const chunks = wordWrapLine(line, width, [...this.segment(line)]);
                 for (const chunk of chunks) {
                     visualLines.push({
                         logicalLine: i,
@@ -1268,7 +1377,7 @@ export class Editor {
                 // Moving right - move by one grapheme (handles emojis, combining characters, etc.)
                 if (this.state.cursorCol < currentLine.length) {
                     const afterCursor = currentLine.slice(this.state.cursorCol);
-                    const graphemes = [...segmenter.segment(afterCursor)];
+                    const graphemes = [...this.segment(afterCursor)];
                     const firstGrapheme = graphemes[0];
                     this.setCursorCol(this.state.cursorCol + (firstGrapheme ? firstGrapheme.segment.length : 1));
                 }
@@ -1289,7 +1398,7 @@ export class Editor {
                 // Moving left - move by one grapheme (handles emojis, combining characters, etc.)
                 if (this.state.cursorCol > 0) {
                     const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-                    const graphemes = [...segmenter.segment(beforeCursor)];
+                    const graphemes = [...this.segment(beforeCursor)];
                     const lastGrapheme = graphemes[graphemes.length - 1];
                     this.setCursorCol(this.state.cursorCol - (lastGrapheme ? lastGrapheme.segment.length : 1));
                 }
@@ -1328,17 +1437,25 @@ export class Editor {
             return;
         }
         const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const graphemes = [...segmenter.segment(textBeforeCursor)];
+        const graphemes = [...this.segment(textBeforeCursor)];
         let newCol = this.state.cursorCol;
         // Skip trailing whitespace
-        while (graphemes.length > 0 && isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "")) {
+        while (graphemes.length > 0 &&
+            !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "") &&
+            isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "")) {
             newCol -= graphemes.pop()?.segment.length || 0;
         }
         if (graphemes.length > 0) {
             const lastGrapheme = graphemes[graphemes.length - 1]?.segment || "";
-            if (isPunctuationChar(lastGrapheme)) {
+            if (isPasteMarker(lastGrapheme)) {
+                // Paste marker is a single atomic word
+                newCol -= graphemes.pop()?.segment.length || 0;
+            }
+            else if (isPunctuationChar(lastGrapheme)) {
                 // Skip punctuation run
-                while (graphemes.length > 0 && isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                while (graphemes.length > 0 &&
+                    isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
                     newCol -= graphemes.pop()?.segment.length || 0;
                 }
             }
@@ -1346,7 +1463,8 @@ export class Editor {
                 // Skip word run
                 while (graphemes.length > 0 &&
                     !isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
                     newCol -= graphemes.pop()?.segment.length || 0;
                 }
             }
@@ -1509,27 +1627,34 @@ export class Editor {
             return;
         }
         const textAfterCursor = currentLine.slice(this.state.cursorCol);
-        const segments = segmenter.segment(textAfterCursor);
+        const segments = this.segment(textAfterCursor);
         const iterator = segments[Symbol.iterator]();
         let next = iterator.next();
         let newCol = this.state.cursorCol;
         // Skip leading whitespace
-        while (!next.done && isWhitespaceChar(next.value.segment)) {
+        while (!next.done && !isPasteMarker(next.value.segment) && isWhitespaceChar(next.value.segment)) {
             newCol += next.value.segment.length;
             next = iterator.next();
         }
         if (!next.done) {
             const firstGrapheme = next.value.segment;
-            if (isPunctuationChar(firstGrapheme)) {
+            if (isPasteMarker(firstGrapheme)) {
+                // Paste marker is a single atomic word
+                newCol += firstGrapheme.length;
+            }
+            else if (isPunctuationChar(firstGrapheme)) {
                 // Skip punctuation run
-                while (!next.done && isPunctuationChar(next.value.segment)) {
+                while (!next.done && isPunctuationChar(next.value.segment) && !isPasteMarker(next.value.segment)) {
                     newCol += next.value.segment.length;
                     next = iterator.next();
                 }
             }
             else {
                 // Skip word run
-                while (!next.done && !isWhitespaceChar(next.value.segment) && !isPunctuationChar(next.value.segment)) {
+                while (!next.done &&
+                    !isWhitespaceChar(next.value.segment) &&
+                    !isPunctuationChar(next.value.segment) &&
+                    !isPasteMarker(next.value.segment)) {
                     newCol += next.value.segment.length;
                     next = iterator.next();
                 }
@@ -1595,6 +1720,10 @@ export class Editor {
         }
         return firstPrefixIndex;
     }
+    createAutocompleteList(prefix, items) {
+        const layout = prefix.startsWith("/") ? SLASH_COMMAND_SELECT_LIST_LAYOUT : undefined;
+        return new SelectList(items, this.autocompleteMaxVisible, this.theme.selectList, layout);
+    }
     tryTriggerAutocomplete(explicitTab = false) {
         if (!this.autocompleteProvider)
             return;
@@ -1610,7 +1739,7 @@ export class Editor {
         const suggestions = this.autocompleteProvider.getSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
         if (suggestions && suggestions.items.length > 0) {
             this.autocompletePrefix = suggestions.prefix;
-            this.autocompleteList = new SelectList(suggestions.items, this.autocompleteMaxVisible, this.theme.selectList);
+            this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
             // If typed prefix exactly matches one of the suggestions, select that item
             const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
             if (bestMatchIndex >= 0) {
@@ -1668,7 +1797,7 @@ export class Editor {
                 return;
             }
             this.autocompletePrefix = suggestions.prefix;
-            this.autocompleteList = new SelectList(suggestions.items, this.autocompleteMaxVisible, this.theme.selectList);
+            this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
             // If typed prefix exactly matches one of the suggestions, select that item
             const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
             if (bestMatchIndex >= 0) {
@@ -1699,7 +1828,7 @@ export class Editor {
         if (suggestions && suggestions.items.length > 0) {
             this.autocompletePrefix = suggestions.prefix;
             // Always create new SelectList to ensure update
-            this.autocompleteList = new SelectList(suggestions.items, this.autocompleteMaxVisible, this.theme.selectList);
+            this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
             // If typed prefix exactly matches one of the suggestions, select that item
             const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
             if (bestMatchIndex >= 0) {