pi-better-paste-markers 0.1.0 → 0.3.0

package/README.md

@@ -21,6 +21,8 @@ Pastes over 10 lines or 1000 chars render as a three-line block:
 - Everywhere else (drafts, autocomplete, undo) the block collapses back to the standard single-line `[paste #N ...]` marker.
 - The block deletes as one unit: a single Backspace/Delete (or Ctrl+W/U/K) that touches it removes the whole block, like the built-in `[paste #N ...]` marker. Text before and after the block on the same line is kept.
 - Undo restores the whole block and it keeps expanding/submitting correctly.
+- The input is prefixed with a gray `❯` prompt (the one pi-powerline-footer draws on the default editor is lost when a custom editor component replaces it).
+- The block is painted with the theme's `userMessageBg` background (follows light/dark and theme switches); only the block text is filled, the padding after it stays normal.
 
 ## Install
 
@@ -37,5 +39,6 @@ The extension replaces the main editor on `session_start` via `ctx.ui.setEditorC
 - `getText()` — collapses blocks back to canonical `[paste #N ...]` markers (drafts, autocomplete snapshots, undo).
 - `expandPasteMarkers()` — plain Enter submits through the base editor's private `submitValue()`, which expands paste markers with this method; shadowing it makes Enter submit the original pasted content instead of the three-line preview.
 - `getExpandedText()` — used by the follow-up (Alt+Enter), external-editor and extension-API (`getEditorText`) paths.
+- `render()` — prefixes the input with a gray `❯`, keeps the other content lines indented, and paints the paste-block text with `ctx.ui.theme.bg("userMessageBg", …)` (re-applied after the cursor's reset so the highlight survives the cursor).
 
 Paste records are kept after a block is deleted so that undoing the deletion restores a block that still collapses and expands correctly.

package/index.ts

@@ -32,6 +32,8 @@ import { matchesKey, type EditorTheme, type TUI } from "@earendil-works/pi-tui";
 const MIDDLE_RE = /^paste #(\d+) (\d+) chars \/ (\d+) lines$/;
 /** Max characters shown for the first/last preview line before truncation. */
 const PREVIEW_MAX_CHARS = 80;
+/** Gray `❯` prompt drawn before the input line (matches pi-powerline-footer chrome). */
+const INPUT_PROMPT = "\x1b[38;2;200;200;200m❯\x1b[0m";
 
 interface PasteRecord {
 	content: string;
@@ -62,10 +64,19 @@ interface PasteBlock {
 /** Which side of the block a deletion key bites from. */
 type DeleteDirection = "backward" | "forward" | "line";
 
+/** Minimal slice of pi's app theme we need to paint the block background. */
+interface ThemeBackgroundProvider {
+	bg(color: string, text: string): string;
+}
+
+/** Theme key used as the paste-block background (also used for user messages). */
+const BLOCK_BG = "userMessageBg";
+
 export default function betterPasteMarkers(pi: ExtensionAPI): void {
 	pi.on("session_start", (_event, ctx) => {
+		const getAppTheme = () => ctx.ui.theme as unknown as ThemeBackgroundProvider;
 		ctx.ui.setEditorComponent(
-			(tui, theme, keybindings) => new BetterPasteEditor(tui, theme, keybindings),
+			(tui, theme, keybindings) => new BetterPasteEditor(tui, theme, keybindings, getAppTheme),
 		);
 	});
 }
@@ -75,10 +86,18 @@ export class BetterPasteEditor extends CustomEditor {
 	private pasteRecords = new Map<number, PasteRecord>();
 	private ownPasteCounter = 0;
 	private editorKeybindings: KeybindingsManager;
-
-	constructor(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) {
+	/** Resolves the current app theme so the block background follows theme switches. */
+	private getAppTheme?: () => ThemeBackgroundProvider;
+
+	constructor(
+		tui: TUI,
+		theme: EditorTheme,
+		keybindings: KeybindingsManager,
+		getAppTheme?: () => ThemeBackgroundProvider,
+	) {
 		super(tui, theme, keybindings);
 		this.editorKeybindings = keybindings;
+		this.getAppTheme = getAppTheme;
 	}
 
 	/**
@@ -307,6 +326,95 @@ export class BetterPasteEditor extends CustomEditor {
 	override expandPasteMarkers(text: string): string {
 		return this.expand(this.collapse(super.expandPasteMarkers(text)));
 	}
+
+	/**
+	 * Draw a `❯` prompt before the input, mirroring the chrome that
+	 * pi-powerline-footer applies to the default editor. Replacing the editor
+	 * component drops that wrapper, so we render the prompt ourselves.
+	 */
+	override render(width: number): string[] {
+		if (width < 10) return super.render(width);
+
+		const contentWidth = Math.max(1, width - 3);
+		const lines = super.render(contentWidth);
+		if (lines.length === 0) return lines;
+
+		// The bottom border is the last `───…` row before any autocomplete rows.
+		let bottomBorderIndex = lines.length - 1;
+		for (let i = lines.length - 1; i >= 1; i--) {
+			const stripped = (lines[i] ?? "").replace(/\x1b\[[0-9;]*m/g, "");
+			if (stripped.length > 0 && /^─{3,}/.test(stripped)) {
+				bottomBorderIndex = i;
+				break;
+			}
+		}
+
+		const promptPrefix = ` ${INPUT_PROMPT} `;
+		const contPrefix = "   ";
+		const border = " " + this.borderColor("─".repeat(Math.max(0, width - 2)));
+		const result: string[] = [border];
+		for (let i = 1; i < bottomBorderIndex; i++) {
+			result.push(`${i === 1 ? promptPrefix : contPrefix}${lines[i] ?? ""}`);
+		}
+		if (bottomBorderIndex === 1) {
+			result.push(`${promptPrefix}${" ".repeat(contentWidth)}`);
+		}
+		result.push(border);
+		for (let i = bottomBorderIndex + 1; i < lines.length; i++) {
+			result.push(lines[i] ?? "");
+		}
+		this.paintBlocks(result, bottomBorderIndex);
+		return result;
+	}
+
+	/** Block text portions that should carry the background, longest first. */
+	private blockSpans(): string[] {
+		const lines = this.state.lines;
+		const spans: string[] = [];
+		for (const block of this.findBlocks()) {
+			const first = lines[block.startLine] ?? "";
+			const middle = lines[block.startLine + 1] ?? "";
+			const last = lines[block.endLine] ?? "";
+			if (block.endLine === block.startLine + 2) {
+				spans.push(first.slice(block.startCol), middle, last.slice(0, block.endCol));
+			} else {
+				for (let line = block.startLine; line <= block.endLine; line++) spans.push(lines[line] ?? "");
+			}
+		}
+		return spans.filter((span) => span.length > 0).sort((a, b) => b.length - a.length);
+	}
+
+	/** ANSI prefix for the block background, or null when the theme lacks it. */
+	private blockBackground(): string | null {
+		const theme = this.getAppTheme?.();
+		if (!theme) return null;
+		try {
+			const wrapped = theme.bg(BLOCK_BG, "");
+			const reset = "\x1b[49m";
+			const ansi = wrapped.endsWith(reset) ? wrapped.slice(0, -reset.length) : wrapped;
+			return ansi || null;
+		} catch {
+			return null;
+		}
+	}
+
+	/** Paint only the block text (not the padding) with the theme background. */
+	private paintBlocks(rows: string[], bottomBorderIndex: number): void {
+		const spans = this.blockSpans();
+		if (spans.length === 0) return;
+		const background = this.blockBackground();
+		if (!background) return;
+		for (let i = 1; i < bottomBorderIndex; i++) {
+			const row = rows[i];
+			if (row === undefined) continue;
+			for (const span of spans) {
+				if (stripAnsi(row).includes(span)) {
+					rows[i] = paintSpan(row, span, background);
+					break;
+				}
+			}
+		}
+	}
 }
 
 /** First-line preview: keep the head, add `...` only when something was cut. */
@@ -318,3 +426,65 @@ function previewHead(text: string): string {
 function previewTail(text: string): string {
 	return text.length <= PREVIEW_MAX_CHARS ? text : `...${text.slice(text.length - (PREVIEW_MAX_CHARS - 3))}`;
 }
+
+/** Length of the escape/APC sequence starting at `index`, or 0 for plain text. */
+function ansiSequenceLength(text: string, index: number): number {
+	if (text[index] !== "\x1b") return 0;
+	const next = text[index + 1];
+	if (next === "[") {
+		for (let i = index + 2; i < text.length; i++) {
+			const code = text.charCodeAt(i);
+			if (code >= 0x40 && code <= 0x7e) return i - index + 1;
+		}
+		return text.length - index;
+	}
+	if (next === "_" || next === "]" || next === "P" || next === "^") {
+		for (let i = index + 2; i < text.length; i++) {
+			if (text[i] === "\x07") return i - index + 1;
+			if (text[i] === "\x1b" && text[i + 1] === "\\") return i - index + 2;
+		}
+		return text.length - index;
+	}
+	return 2;
+}
+
+/** Drop ANSI/APC escape sequences, keeping the visible characters. */
+function stripAnsi(text: string): string {
+	let out = "";
+	for (let i = 0; i < text.length; ) {
+		const esc = ansiSequenceLength(text, i);
+		if (esc > 0) {
+			i += esc;
+			continue;
+		}
+		out += text[i];
+		i++;
+	}
+	return out;
+}
+
+/** Paint only the `span` characters of `row` with `background`, leaving padding untouched. */
+function paintSpan(row: string, span: string, background: string): string {
+	const startPlain = stripAnsi(row).indexOf(span);
+	if (startPlain < 0) return row;
+	const endPlain = startPlain + span.length;
+	let plain = 0;
+	let start = -1;
+	let end = -1;
+	for (let i = 0; i < row.length; ) {
+		const esc = ansiSequenceLength(row, i);
+		if (esc > 0) {
+			i += esc;
+			continue;
+		}
+		if (plain === startPlain) start = i;
+		// `end` sits right after the last span character, so a cursor escape that
+		// follows the text stays outside the painted range.
+		if (plain === endPlain - 1) end = i + 1;
+		plain++;
+		i++;
+	}
+	if (start < 0 || end < 0) return row;
+	const inner = row.slice(start, end).replaceAll("\x1b[0m", `\x1b[0m${background}`);
+	return `${row.slice(0, start)}${background}${inner}\x1b[49m${row.slice(end)}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-better-paste-markers",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"description": "Richer collapsed paste markers for pi: first/last line preview around the canonical paste marker",
 	"type": "module",
 	"license": "MIT",