@pierre/diffs 1.3.0-beta.4 → 1.3.0-beta.6

package/dist/editor/editor.js

@@ -1,35 +1,30 @@
+import { queueRender } from "../managers/UniversalRenderingManager.js";
 import { getFiletypeFromFileName } from "../utils/getFiletypeFromFileName.js";
 import { isMoveCursorShortcut, isPrimaryModifier, isSafari } from "./platform.js";
-import { resolveEditorCommandFromKeyboardEvent } from "./command.js";
+import { resolveEditorCommandFromKeyboardEvent, resolveFindAgainShortcut } from "./command.js";
+import { EditStack } from "./editStack.js";
 import editor_default from "./editor2.js";
 import { addEventListener, clampDomOffset, extend, getLineNumberAttr, h, round } from "./utils.js";
 import { applyDocumentChangeToLineAnnotations, renderLineAnnotations } from "./lineAnnotations.js";
-import { DirectionBackward, DirectionForward, DirectionNone, applyDeleteHardLineForwardToSelections, applyDeleteSoftLineBackwardToSelections, applyDeleteWordBackwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, resolveIndentEdits, selectionIntersects } from "./selection.js";
-import { MarkerManager, markerSeverityDatasetKey } from "./marker.js";
+import { applyDeleteCharacterToSelections, applyDeleteHardLineForwardToSelections, applyDeleteSoftLineBackwardToSelections, applyDeleteWordBackwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getAutoSurroundReplacementTexts, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, remapSelectionsAfterEdits, resolveIndentEdits, resolveSelectionCut, selectionIntersects } from "./selection.js";
+import { MarkerRenderer, markerSeverityDatasetKey } from "./marker.js";
 import { createSpriteElement } from "./sprite.js";
 import { SearchPanelWidget } from "./searchPanel.js";
 import { SelectionActionWidget } from "./selectionAction.js";
 import { TextDocument } from "./textDocument.js";
 import { Metrics, getExpandedAsciiTextColumns, getUnicodeMeasurementOffsets, snapTextOffsetToUnicodeBoundary } from "./textMeasure.js";
 import { EditorTokenizer, renderLineTokens } from "./tokenzier.js";
-
 //#region src/editor/editor.ts
+const MAX_EDIT_WIDEN_WINDOW_MULTIPLE = 2;
 var Editor = class {
 	#options;
-	#wrap = false;
 	#metrics = new Metrics();
 	#tokenizer;
-	#markerManager;
 	#editorEventDisposes;
 	#globalEventDisposes;
 	#selectEventDisposes;
 	#detach;
-	#fileInstance;
-	#fileContents;
-	#lineAnnotations;
-	#textDocument;
-	#renderRange;
-	#codePaddingTop = 0;
+	#contentOffset;
 	#gutterWidthCache;
 	#contentWidthCache;
 	#lineYCache = /* @__PURE__ */ new Map();
@@ -44,24 +39,35 @@ var Editor = class {
 	#gutterElement;
 	#contentElement;
 	#overlayElement;
-	#primaryCaretElement;
 	#overlayElements;
-	#selectionAction;
-	#searchPanel;
+	#primaryCaretElement;
 	#resizeObserver;
+	#fileInstance;
+	#fileInfo;
+	#lineAnnotations;
+	#textDocument;
+	#renderRange;
+	#viewportWindowLines;
+	#markerRenderer;
+	#searchPanel;
+	#selectionAction;
 	#shouldIgnoreSelectionChange = false;
+	#contentHasFocus = false;
+	#isComposing = false;
 	#isGutterMouseDown = false;
 	#isContentMouseDown = false;
 	#shiftKeyPressed = false;
 	#selectionStart;
+	#deletedSelectionText = "";
 	#reservedSelections;
-	#selections;
 	#initSelections;
+	#selections;
 	#matches;
 	#scrollingToLine;
 	#scrollingToLineChar;
 	#scrollingToLineNoFocus = false;
 	#retainSearchPanelFocus = false;
+	#fontRemeasureScheduled = false;
 	#onDeferTokenize = (lines, themeType) => {
 		this.#fileInstance?.updateRenderCache(lines, themeType);
 		if (this.#renderRange !== void 0 && this.#renderRange.totalLines !== Infinity) {
@@ -77,15 +83,15 @@ var Editor = class {
 		this.#options = options;
 	}
 	edit(component) {
-		const { useTokenTransformer, enableGutterUtility, enableLineSelection, expandUnchanged, diffStyle, lineHoverHighlight,...rest } = component.options;
-		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || expandUnchanged !== true && Object.hasOwn(component, "fileDiff") || diffStyle === "unified" || lineHoverHighlight !== "disabled") {
+		const { useTokenTransformer, enableGutterUtility, enableLineSelection, expandUnchanged, lineHoverHighlight, ...rest } = component.options;
+		const isDiff = component.type === "file-diff";
+		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || expandUnchanged !== true && isDiff || lineHoverHighlight !== "disabled") {
 			component.setOptions({
 				...rest,
 				useTokenTransformer: true,
 				enableGutterUtility: false,
 				enableLineSelection: false,
 				expandUnchanged: true,
-				diffStyle: "split",
 				lineHoverHighlight: "disabled"
 			});
 			component.rerender();
@@ -95,7 +101,171 @@ var Editor = class {
 		this.#detach = component.attachEditor(this);
 		return () => this.cleanUp();
 	}
-	syncToRenderedView(highlighter, fileContainer, fileContents, didFileChange, lineAnnotations, renderRange) {
+	/**
+	* Apply edits to current attached file.
+	*/
+	applyEdits(edits, updateHistory = false) {
+		const textDocument = this.#textDocument;
+		if (textDocument == null) throw new Error("Editor is not attached");
+		const wasFocused = this.#contentHasFocus;
+		const selectionsBefore = this.#selections;
+		const selectionOffsetsBefore = selectionsBefore?.map((selection) => [textDocument.offsetAt(selection.start), textDocument.offsetAt(selection.end)]);
+		const resolvedEditOffsets = selectionsBefore === void 0 ? void 0 : edits.map((edit) => {
+			const a = textDocument.offsetAt(edit.range.start);
+			const b = textDocument.offsetAt(edit.range.end);
+			return {
+				start: Math.min(a, b),
+				end: Math.max(a, b),
+				text: edit.newText
+			};
+		}).sort((a, b) => a.start - b.start);
+		const change = textDocument.applyEdits(edits, updateHistory, selectionsBefore);
+		if (change === void 0) return;
+		let nextSelections;
+		if (selectionsBefore !== void 0 && selectionOffsetsBefore !== void 0 && resolvedEditOffsets !== void 0) {
+			nextSelections = remapSelectionsAfterEdits(textDocument, selectionsBefore, selectionOffsetsBefore, resolvedEditOffsets);
+			if (updateHistory) textDocument.setLastUndoSelectionsAfter(nextSelections);
+		}
+		this.#applyChange(change, nextSelections, this.#applyChangeToLineAnnotations(change), { skipFocus: !wasFocused });
+	}
+	/** Whether there is an edit to undo. */
+	get canUndo() {
+		return this.#textDocument?.canUndo ?? false;
+	}
+	/** Whether there is an undone edit to redo. */
+	get canRedo() {
+		return this.#textDocument?.canRedo ?? false;
+	}
+	/** Undo the last edit. Does nothing when there is nothing to undo. */
+	undo() {
+		this.#runCommand("undo");
+	}
+	/** Redo the last undone edit. Does nothing when there is nothing to redo. */
+	redo() {
+		this.#runCommand("redo");
+	}
+	getState() {
+		const fileRef = this.#getFileRef();
+		if (fileRef === void 0) throw new Error("Editor is not attached");
+		return {
+			file: {
+				...fileRef,
+				cacheKey: "edited-at-" + Date.now()
+			},
+			selections: this.#selections,
+			lineAnnotations: this.#lineAnnotations,
+			renderRange: this.#renderRange
+		};
+	}
+	setState({ file, lineAnnotations, renderRange, selections }) {
+		this.#resetCache();
+		this.#resetState();
+		this.#initSelections = selections;
+		this.#fileInstance?.render({
+			file: {
+				...file,
+				cacheKey: "edited-at-" + Date.now()
+			},
+			lineAnnotations,
+			renderRange
+		});
+	}
+	setSelections(selections) {
+		const textDocument = this.#textDocument;
+		if (textDocument === void 0) throw new Error("Text document is not initialized");
+		const resolvedSelections = selections.map((selection) => {
+			const start = textDocument.normalizePosition(selection.start);
+			const end = textDocument.normalizePosition(selection.end);
+			return {
+				direction: selection.direction === "none" ? 0 : selection.direction === "backward" ? -1 : 1,
+				start,
+				end
+			};
+		});
+		this.#updateSelections(resolvedSelections);
+		this.#scrollToPrimaryCaret(false, "center");
+	}
+	setMarkers(markers) {
+		const textDocument = this.#textDocument;
+		if (textDocument === void 0) throw new Error("Text document is not initialized");
+		if (markers.length === 0) {
+			this.#markerRenderer?.cleanup();
+			this.#markerRenderer = void 0;
+			this.#updateSelections(this.#selections ?? []);
+			return;
+		}
+		this.#markerRenderer ??= new MarkerRenderer({
+			getLineHeight: () => this.#metrics.lineHeight,
+			getOverlayElement: () => this.#overlayElement,
+			getGutterWidth: () => this.#getGutterWidth(),
+			getCharX: (line, character) => this.#getCharX(line, character),
+			getLineY: (line) => this.#getLineY(line),
+			isMouseDown: () => this.#isContentMouseDown || this.#isGutterMouseDown
+		});
+		this.#markerRenderer.setMarkers(markers, textDocument);
+		if (this.#contentElement !== void 0) this.#markerRenderer.listenHover(this.#contentElement);
+		this.#updateSelections(this.#selections ?? []);
+	}
+	focus(options) {
+		const preventScroll = options?.preventScroll ?? false;
+		const primarySelection = this.#selections?.at(-1);
+		if (primarySelection !== void 0) {
+			const pos = primarySelection.direction === -1 ? primarySelection.end : primarySelection.start;
+			this.#focus(pos, preventScroll);
+		} else this.#focus(void 0, preventScroll);
+	}
+	blur() {
+		this.#contentElement?.blur();
+	}
+	cleanUp() {
+		this.#tokenizer?.cleanUp();
+		this.#tokenizer = void 0;
+		this.#globalEventDisposes?.forEach((dispose) => dispose());
+		this.#globalEventDisposes = void 0;
+		this.#editorEventDisposes?.forEach((dispose) => dispose());
+		this.#editorEventDisposes = void 0;
+		this.#selectEventDisposes?.forEach((dispose) => dispose());
+		this.#selectEventDisposes = void 0;
+		this.#detach?.();
+		this.#detach = void 0;
+		this.#gutterWidthCache = void 0;
+		this.#contentWidthCache = void 0;
+		this.#lineYCache.clear();
+		this.#wrapLineOffsetsCache.clear();
+		this.#lastAccessedLineElement = void 0;
+		this.#lastAccessedCharX = void 0;
+		this.#globalStyleElement?.remove();
+		this.#globalStyleElement = void 0;
+		this.#editorStyleElement?.remove();
+		this.#editorStyleElement = void 0;
+		this.#themeStyleElement?.remove();
+		this.#themeStyleElement = void 0;
+		this.#spriteElement?.remove();
+		this.#spriteElement = void 0;
+		this.#fileContainer = void 0;
+		this.#gutterElement = void 0;
+		this.#contentElement?.removeAttribute("contentEditable");
+		this.#contentElement = void 0;
+		this.#contentHasFocus = false;
+		this.#overlayElement?.remove();
+		this.#overlayElement = void 0;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#fontRemeasureScheduled = false;
+		this.#resetState();
+	}
+	/** @internal */
+	__postponeBackgroundTokenizeToNextFrame() {
+		const tokenizer = this.#tokenizer;
+		if (tokenizer !== void 0) {
+			tokenizer.pauseBackgroundTokenize();
+			requestAnimationFrame(() => {
+				tokenizer.resumeBackgroundTokenize();
+			});
+		}
+	}
+	/** @internal */
+	__syncRenderView = (highlighter, fileContainer, fileOrDiff, lineAnnotations, renderRange) => {
 		const shadowRoot = fileContainer.shadowRoot;
 		if (shadowRoot == null) {
 			console.error("[editor] Could not find the shadow root.");
@@ -107,10 +277,10 @@ var Editor = class {
 		for (const el of shadowRoot.querySelectorAll("[data-code]")) if (el.dataset.deletions === void 0) {
 			codeElement = el;
 			for (const child of el.children) {
-				const el$1 = child;
-				const { gutter, content } = el$1.dataset;
-				if (gutter !== void 0) gutterEl = el$1;
-				else if (content !== void 0) contentEl = el$1;
+				const el = child;
+				const { gutter, content } = el.dataset;
+				if (gutter !== void 0) gutterEl = el;
+				else if (content !== void 0) contentEl = el;
 			}
 			break;
 		}
@@ -122,9 +292,19 @@ var Editor = class {
 			if (this.#themeStyleElement !== void 0) shadowRoot.appendChild(this.#themeStyleElement);
 			if (this.#spriteElement !== void 0) shadowRoot.prepend(this.#spriteElement);
 		}
-		if (this.#textDocument === void 0 || this.#fileContents === void 0 || didFileChange) {
-			const textDocument = new TextDocument(fileContents.name, fileContents.contents, fileContents.lang ?? getFiletypeFromFileName(fileContents.name));
-			this.#fileContents = fileContents;
+		const documentReplaced = this.#textDocument === void 0 || this.#fileInfo === void 0 || this.#fileInfo.name !== fileOrDiff.name || this.#fileInfo.lang !== fileOrDiff.lang || this.#fileInfo.cacheKey !== fileOrDiff.cacheKey;
+		if (documentReplaced) {
+			let contents = "";
+			if ("contents" in fileOrDiff) contents = fileOrDiff.contents;
+			else contents = fileOrDiff.additionLines.join("");
+			const editStack = new EditStack({ maxEntries: this.#options.historyMaxEntries });
+			const textDocument = new TextDocument(fileOrDiff.name, contents, fileOrDiff.lang ?? getFiletypeFromFileName(fileOrDiff.name), 0, editStack);
+			const { name, lang, cacheKey } = fileOrDiff;
+			this.#fileInfo = {
+				name,
+				lang,
+				cacheKey
+			};
 			this.#textDocument = textDocument;
 			this.#tokenizer?.cleanUp();
 			this.#tokenizer = new EditorTokenizer({
@@ -137,25 +317,16 @@ var Editor = class {
 				},
 				__debug: this.#options.__debug
 			});
-			this.#fileInstance?.setSelectedLines(null);
-			this.#shouldIgnoreSelectionChange = false;
-			this.#overlayElements?.forEach((el) => el.remove());
-			this.#overlayElements?.clear();
-			this.#overlayElements = void 0;
-			this.#selections = void 0;
-			this.#scrollingToLine = void 0;
-			this.#reservedSelections = void 0;
-			this.#searchPanel?.cleanup();
-			this.#searchPanel = void 0;
-			this.#selectionAction?.cleanup();
-			this.#selectionAction = void 0;
+			this.#resetState();
+			this.#selections = this.#initSelections;
+			requestAnimationFrame(() => {
+				this.#options.onAttach?.(this, this.#fileInstance);
+			});
+			if (this.#textDocument !== void 0 && this.#options.__debug === true) console.log("[diffs/editor] text document changed !!!");
 		}
+		let fullRerender = false;
 		if (this.#contentElement !== contentEl) {
-			if (this.#contentElement !== void 0 && this.#options.__debug === true) console.log("[diffs/editor] full re-render triggered !!!");
-			const codePaddingTop = parseInt(getComputedStyle(codeElement).paddingTop.slice(0, -2), 10);
-			this.#codePaddingTop = Number.isNaN(codePaddingTop) ? 0 : codePaddingTop;
-			this.#gutterWidthCache = void 0;
-			this.#contentWidthCache = void 0;
+			fullRerender = true;
 			this.#gutterElement = gutterEl;
 			this.#contentElement = extend(contentEl, {
 				contentEditable: "true",
@@ -169,135 +340,72 @@ var Editor = class {
 			});
 			if (this.#overlayElement !== void 0) contentEl.after(this.#overlayElement);
 			this.#metrics.init(contentEl);
+			this.#remeasureMetricsOnFontLoad();
 			this.#listenContentElement(contentEl, gutterEl);
+			if (this.#contentElement !== void 0 && this.#options.__debug === true) console.log("[diffs/editor] full re-render triggered !!!");
 		}
-		this.#lineYCache.clear();
-		this.#wrapLineOffsetsCache.clear();
-		this.#lastAccessedLineElement = void 0;
-		this.#lastAccessedCharX = void 0;
-		this.#wrap = this.#fileInstance?.options.overflow === "wrap";
+		if (contentEl.ariaLabel !== fileOrDiff.name) contentEl.ariaLabel = fileOrDiff.name;
+		if (lineAnnotations !== void 0 && lineAnnotations.length > 0 || this.#isDiff && this.#diffSyle === "unified") for (const child of this.#contentElement.children) {
+			const el = child;
+			const { lineAnnotation, lineType } = el.dataset;
+			if (lineAnnotation !== void 0 || lineType === "change-deletion") el.setAttribute("contenteditable", "false");
+		}
+		this.#resetCache();
+		this.#tokenizer?.syncTheme(this.#fileInstance?.options ?? {});
 		this.#lineAnnotations = lineAnnotations;
 		this.#renderRange = renderRange;
+		this.#viewportWindowLines = renderRange?.totalLines;
 		this.#tokenizer?.prebuildStateStack(renderRange);
-		if (this.#initSelections !== void 0) {
-			this.setSelections(this.#initSelections);
-			this.#scrollToPrimaryCaret();
-			this.#initSelections = void 0;
-		} else if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerManager !== void 0) this.#updateSelections(this.#selections ?? []);
-		if (this.#options.__debug === true && renderRange !== void 0) {
-			const { startingLine, totalLines } = renderRange;
-			console.log("[diffs/editor] render file:", fileContents.name, "RenderRange:", startingLine + "-" + (startingLine + totalLines), "of", this.#textDocument.lineCount, "lines");
+		const fileInstance = this.#fileInstance;
+		const textDocument = this.#textDocument;
+		if (!documentReplaced && fullRerender && fileInstance?.rerenderFromDocument !== void 0 && textDocument !== void 0 && this.#shouldRenderDivergeFromDocument(textDocument)) {
+			fileInstance.rerenderFromDocument(textDocument);
+			return;
 		}
-		if (this.#scrollingToLine !== void 0) this.#scrollToLine(this.#scrollingToLine, this.#scrollingToLineChar, this.#scrollingToLineNoFocus);
+		this.#markerRenderer?.removePopup();
+		if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerRenderer !== void 0) this.#updateSelections(this.#selections ?? []);
+		if (this.#initSelections !== void 0 && this.#primaryCaretElement !== void 0) {
+			this.#initSelections = void 0;
+			this.#scrollToPrimaryCaret(false, "center");
+		} else if (this.#scrollingToLine !== void 0) this.#scrollToLine(this.#scrollingToLine, this.#scrollingToLineChar, this.#scrollingToLineNoFocus);
 		else if (this.#selections !== void 0 && this.#selections.length > 0 && !this.#retainSearchPanelFocus) this.focus({ preventScroll: true });
 		if (this.#retainSearchPanelFocus) this.#searchPanel?.focus();
-		if (this.#selectionAction !== void 0 && this.#isLineVisible(this.#selectionAction.line) && this.#contentElement !== void 0) this.#selectionAction.render(this.#contentElement);
-	}
-	postponeBackgroundTokenizeToNextFrame() {
-		const tokenizer = this.#tokenizer;
-		if (tokenizer !== void 0) {
-			tokenizer.pauseBackgroundTokenize();
-			requestAnimationFrame(() => {
-				tokenizer.resumeBackgroundTokenize();
-			});
+		if (this.#options.__debug === true && renderRange !== void 0) {
+			const { startingLine, totalLines } = renderRange;
+			console.log("[diffs/editor] render file:", fileOrDiff.name, "RenderRange:", startingLine + "-" + (startingLine + totalLines), "of", this.#textDocument?.lineCount, "lines");
 		}
+	};
+	get #diffSyle() {
+		return this.#fileInstance?.options.diffStyle ?? "split";
 	}
-	setSelections(selections) {
-		const textDocument = this.#textDocument;
-		if (textDocument !== void 0) {
-			const resolvedSelections = selections.map((selection) => {
-				const start = textDocument.normalizePosition(selection.start);
-				const end = textDocument.normalizePosition(selection.end);
-				return {
-					direction: selection.direction === "none" ? DirectionNone : selection.direction === "backward" ? DirectionBackward : DirectionForward,
-					start,
-					end
-				};
-			});
-			this.#updateSelections(resolvedSelections);
-			this.#scrollToPrimaryCaret();
-		} else this.#initSelections = selections;
+	get #isDiff() {
+		return this.#fileInstance?.type === "file-diff";
 	}
-	setMarkers(markers) {
-		const textDocument = this.#textDocument;
-		if (textDocument === void 0) throw new Error("Text document is not initialized");
-		if (markers.length === 0) {
-			this.#markerManager?.cleanup();
-			this.#markerManager = void 0;
-			this.#updateSelections(this.#selections ?? []);
-			return;
-		}
-		this.#markerManager ??= new MarkerManager({
-			getLineHeight: () => this.#metrics.lineHeight,
-			getFileContainer: () => this.#fileContainer,
-			getCharX: (line, character) => this.#getCharX(line, character),
-			getLineY: (line) => this.#getLineY(line),
-			isMouseDown: () => this.#isContentMouseDown || this.#isGutterMouseDown
-		});
-		this.#markerManager.setMarkers(markers, textDocument);
-		if (this.#contentElement !== void 0) this.#markerManager.listenHover(this.#contentElement);
-		this.#updateSelections(this.#selections ?? []);
+	get #isWrap() {
+		return this.#fileInstance?.options.overflow === "wrap";
 	}
-	focus(options) {
-		const preventScroll = options?.preventScroll ?? false;
-		const primarySelection = this.#selections?.at(-1);
-		if (primarySelection !== void 0) {
-			const pos = primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start;
-			this.#focus(pos, preventScroll);
-		} else this.#focus(void 0, preventScroll);
-	}
-	cleanUp() {
-		this.#tokenizer?.cleanUp();
-		this.#tokenizer = void 0;
-		this.#globalEventDisposes?.forEach((dispose) => dispose());
-		this.#globalEventDisposes = void 0;
-		this.#editorEventDisposes?.forEach((dispose) => dispose());
-		this.#editorEventDisposes = void 0;
-		this.#selectEventDisposes?.forEach((dispose) => dispose());
-		this.#selectEventDisposes = void 0;
-		this.#markerManager?.cleanup();
-		this.#markerManager = void 0;
-		this.#detach?.();
-		this.#detach = void 0;
-		this.#fileInstance?.setSelectedLines(null);
-		this.#fileInstance = void 0;
-		this.#fileContents = void 0;
-		this.#lineAnnotations = void 0;
-		this.#textDocument = void 0;
-		this.#renderRange = void 0;
-		this.#gutterWidthCache = void 0;
-		this.#contentWidthCache = void 0;
+	#resetCache() {
 		this.#lineYCache.clear();
 		this.#wrapLineOffsetsCache.clear();
 		this.#lastAccessedLineElement = void 0;
 		this.#lastAccessedCharX = void 0;
-		this.#globalStyleElement?.remove();
-		this.#globalStyleElement = void 0;
-		this.#editorStyleElement?.remove();
-		this.#editorStyleElement = void 0;
-		this.#themeStyleElement?.remove();
-		this.#themeStyleElement = void 0;
-		this.#spriteElement?.remove();
-		this.#spriteElement = void 0;
-		this.#fileContainer = void 0;
-		this.#gutterElement = void 0;
-		this.#contentElement?.removeAttribute("contentEditable");
-		this.#contentElement = void 0;
-		this.#overlayElement?.remove();
-		this.#overlayElement = void 0;
+	}
+	#resetState() {
+		this.#setSelectedLinesSafe(null);
+		this.#gutterWidthCache = void 0;
+		this.#contentWidthCache = void 0;
+		this.#shouldIgnoreSelectionChange = false;
 		this.#overlayElements?.forEach((el) => el.remove());
 		this.#overlayElements = void 0;
-		this.#primaryCaretElement = void 0;
+		this.#selections = void 0;
+		this.#reservedSelections = void 0;
+		this.#scrollingToLine = void 0;
+		this.#markerRenderer?.cleanup();
+		this.#markerRenderer = void 0;
 		this.#searchPanel?.cleanup();
 		this.#searchPanel = void 0;
 		this.#selectionAction?.cleanup();
 		this.#selectionAction = void 0;
-		this.#resizeObserver?.disconnect();
-		this.#resizeObserver = void 0;
-		this.#shouldIgnoreSelectionChange = false;
-		this.#selectionStart = void 0;
-		this.#selections = void 0;
-		this.#reservedSelections = void 0;
 	}
 	#initialize() {
 		this.#globalStyleElement = h("style", {
@@ -319,11 +427,13 @@ var Editor = class {
 		this.#globalEventDisposes = [
 			addEventListener(document, "selectionchange", () => {
 				const shadowRoot = this.#fileContainer?.shadowRoot;
-				if (this.#shouldIgnoreSelectionChange || shadowRoot == null) return;
+				if (this.#shouldIgnoreSelectionChange || shadowRoot == null || !this.#contentHasFocus) return;
 				if (this.#selections !== void 0 && this.#selections.length > 1 && !this.#isContentMouseDown) return;
-				const composedRange = document.getSelection()?.getComposedRanges({ shadowRoots: [shadowRoot] })?.[0];
+				const selectionRaw = document.getSelection();
+				if (selectionRaw == null || typeof selectionRaw.getComposedRanges !== "function") return;
+				const composedRange = selectionRaw.getComposedRanges({ shadowRoots: [shadowRoot] })?.[0];
 				if (composedRange === void 0 || !this.#rangeBelongsToEditor(composedRange)) return;
-				let selection = convertSelection(composedRange, DirectionNone);
+				let selection = convertSelection(composedRange, 0);
 				if (selection === void 0) return;
 				if (this.#isContentMouseDown && this.#shiftKeyPressed && this.#selections !== void 0 && this.#selections.length > 0) {
 					const primarySelection = this.#selections.at(-1);
@@ -349,9 +459,7 @@ var Editor = class {
 				this.#shiftKeyPressed = false;
 				this.#selectionStart = void 0;
 				this.#reservedSelections = void 0;
-				this.#overlayElements?.forEach((el, key) => {
-					if (key.startsWith("selectionActionIcon-")) el.dataset.visible = "true";
-				});
+				if (this.#options.enabledSelectionAction === true && this.#selections !== void 0 && this.#selections.length > 0 && !isCollapsedSelection(this.#selections.at(-1))) this.#updateSelections(this.#selections);
 			}, { passive: true }),
 			addEventListener(document, "keydown", (e) => {
 				if (e.key === "Shift") this.#selectionStart = this.#selections?.at(-1);
@@ -361,6 +469,10 @@ var Editor = class {
 			}, { passive: true })
 		];
 	}
+	#replaceSelectEventListeners(disposes) {
+		this.#selectEventDisposes?.forEach((dispose) => dispose());
+		this.#selectEventDisposes = disposes;
+	}
 	#listenContentElement(contentEl, gutterEl) {
 		const targetIsContentElement = (e) => {
 			const target = e.composedPath()[0];
@@ -368,25 +480,41 @@ var Editor = class {
 		};
 		this.#editorEventDisposes?.forEach((dispose) => dispose());
 		this.#editorEventDisposes = [
+			addEventListener(contentEl, "focus", () => {
+				this.#contentHasFocus = true;
+				if (!this.#isContentMouseDown && !this.#shouldIgnoreSelectionChange && this.#selections !== void 0 && this.#selections.length > 0) this.#setWindowSelection(this.#selections.at(-1));
+			}, { passive: true }),
+			addEventListener(contentEl, "blur", () => {
+				this.#contentHasFocus = false;
+			}, { passive: true }),
 			addEventListener(contentEl, "pointerdown", (e) => {
 				if (e.pointerType !== "mouse") return;
-				this.#markerManager?.removePopup();
-				if (isSafari() && this.#lineAnnotations !== void 0 && this.#lineAnnotations.length > 0) this.#selectEventDisposes = [...contentEl.querySelectorAll("[data-line-annotation]")].map((el) => [addEventListener(el, "mouseenter", () => {
-					this.#shouldIgnoreSelectionChange = true;
-				}), addEventListener(el, "mouseleave", () => {
-					this.#shouldIgnoreSelectionChange = false;
-				})]).flat();
+				if (this.#isDeletedLineTarget(e)) {
+					this.#setDeletedTextSelectionActive(true);
+					if (this.#selections !== void 0) this.#updateSelections([]);
+					return;
+				}
+				this.#setDeletedTextSelectionActive(false);
+				this.#markerRenderer?.removePopup();
+				if (isSafari() && this.#lineAnnotations !== void 0 && this.#lineAnnotations.length > 0) {
+					const annotationDisposes = [...contentEl.querySelectorAll("[data-line-annotation]")].map((el) => [addEventListener(el, "mouseenter", () => {
+						this.#shouldIgnoreSelectionChange = true;
+					}), addEventListener(el, "mouseleave", () => {
+						this.#shouldIgnoreSelectionChange = false;
+					})]).flat();
+					this.#replaceSelectEventListeners(annotationDisposes);
+				}
 				this.#isContentMouseDown = true;
 				this.#selectionStart = void 0;
 				if (e.button === 0 && isPrimaryModifier(e)) this.#reservedSelections = this.#selections?.map((selection) => ({ ...selection }));
 				if (e.shiftKey) {
 					const primarySelection = this.#selections?.at(-1);
 					if (primarySelection !== void 0) {
-						const pos = primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start;
+						const pos = primarySelection.direction === -1 ? primarySelection.end : primarySelection.start;
 						this.#setWindowSelection({
 							start: pos,
 							end: pos,
-							direction: DirectionNone
+							direction: 0
 						});
 					}
 					this.#shiftKeyPressed = true;
@@ -407,7 +535,7 @@ var Editor = class {
 							this.#updateSelections([{
 								start: pos,
 								end: pos,
-								direction: DirectionNone
+								direction: 0
 							}]);
 							this.#focus(pos);
 						}
@@ -424,6 +552,19 @@ var Editor = class {
 					e.preventDefault();
 					return;
 				}
+				if (e.key === "v" && isPrimaryModifier(e) && this.#options.clipboard !== void 0) {
+					e.preventDefault();
+					queueRender(this.#handleCustomPasteEvent);
+					return;
+				}
+				if (this.#searchPanel !== void 0) {
+					const findAgain = resolveFindAgainShortcut(e);
+					if (findAgain !== void 0) {
+						e.preventDefault();
+						this.#searchPanel.navigate(findAgain === "previous");
+						return;
+					}
+				}
 				const command = resolveEditorCommandFromKeyboardEvent(e);
 				if (command !== void 0) {
 					e.preventDefault();
@@ -433,22 +574,23 @@ var Editor = class {
 			addEventListener(contentEl, "copy", (e) => {
 				if (!targetIsContentElement(e)) return;
 				e.preventDefault();
-				e.clipboardData?.setData("text", this.#getSelectionText());
+				e.clipboardData?.setData("text", this.#isDeletedTextSelectionActive() ? this.#deletedTextForClipboard() : this.#getSelectionText());
 			}),
 			addEventListener(contentEl, "cut", (e) => {
 				if (!targetIsContentElement(e)) return;
 				e.preventDefault();
-				e.clipboardData?.setData("text", this.#getSelectionText());
-				this.#replaceSelectionText("");
+				e.clipboardData?.setData("text", this.#isDeletedTextSelectionActive() ? this.#deletedTextForClipboard() : this.#cutSelectionText());
 			}),
 			addEventListener(contentEl, "paste", (e) => {
 				if (!targetIsContentElement(e)) return;
 				e.preventDefault();
 				const text = e.clipboardData?.getData("text");
-				if (text !== void 0) this.#replaceSelectionText(text);
+				const textDocument = this.#textDocument;
+				if (text !== void 0 && textDocument !== void 0) this.#replaceSelectionText(textDocument.normalizeEol(text), void 0, true);
 			}),
 			addEventListener(contentEl, "beforeinput", (e) => {
 				if (!targetIsContentElement(e)) return;
+				if (e.inputType === "insertCompositionText") return;
 				e.preventDefault();
 				this.#handleInput(e.inputType, e.data);
 			}),
@@ -458,14 +600,25 @@ var Editor = class {
 			}),
 			addEventListener(contentEl, "compositionstart", (e) => {
 				if (!targetIsContentElement(e)) return;
+				this.#isComposing = true;
 				this.#shouldIgnoreSelectionChange = true;
 			}, { passive: true }),
 			addEventListener(contentEl, "compositionend", (e) => {
 				if (!targetIsContentElement(e)) return;
 				this.#shouldIgnoreSelectionChange = false;
-				this.#handleInput("insertText", e.data);
+				const wasComposing = this.#isComposing;
+				this.#isComposing = false;
+				if (e.data !== "" || !wasComposing) this.#handleInput("insertText", e.data);
 			}, { passive: true })
 		];
+		const deletionsCode = this.#fileContainer?.shadowRoot?.querySelector("[data-deletions]");
+		if (deletionsCode != null) this.#editorEventDisposes.push(addEventListener(deletionsCode, "pointerdown", (e) => {
+			const target = e.composedPath()[0];
+			const gutterRow = target instanceof HTMLElement ? target.closest("[data-column-number]") : null;
+			if (gutterRow instanceof HTMLElement && this.#beginDeletionGutterSelection(gutterRow, deletionsCode, e.pointerType === "mouse")) return;
+			this.#setDeletedTextSelectionActive(true);
+			if (this.#selections !== void 0) this.#updateSelections([]);
+		}, { passive: true }));
 		if (gutterEl !== void 0) {
 			const resolveGutterTarget = (eventTarget, includeContentLine = false) => {
 				let target = eventTarget;
@@ -481,62 +634,71 @@ var Editor = class {
 				return lineNumber - 1;
 			};
 			this.#editorEventDisposes.push(addEventListener(gutterEl, "pointerdown", (e) => {
+				const gutterRow = resolveGutterTarget(e.composedPath()[0]);
+				if (gutterRow?.dataset.lineType === "change-deletion") {
+					const code = gutterRow.closest("[data-code]");
+					if (code != null) this.#beginDeletionGutterSelection(gutterRow, code, e.pointerType === "mouse");
+					return;
+				}
+				if (e.pointerType !== "mouse") return;
 				const textDocument = this.#textDocument;
-				const lineIndex = resolveEditableLine(resolveGutterTarget(e.composedPath()[0]));
+				const lineIndex = resolveEditableLine(gutterRow);
 				if (lineIndex === void 0 || textDocument === void 0) return;
-				this.#markerManager?.removePopup();
-				const selection = {
-					start: {
-						line: lineIndex,
-						character: 0
-					},
-					end: {
-						line: lineIndex,
-						character: textDocument.getLineText(lineIndex).length
-					},
-					direction: DirectionForward
-				};
+				this.#markerRenderer?.removePopup();
+				const selection = this.#spanLineSelection(lineIndex, lineIndex, textDocument);
 				this.#isGutterMouseDown = true;
 				this.#selectionStart = selection;
 				this.#updateSelections([selection]);
-				this.#focus(selection.end);
-				this.#selectEventDisposes = [addEventListener(document, "mousemove", (e$1) => {
+				this.#setWindowSelection(selection);
+				this.#focus();
+				this.#replaceSelectEventListeners([addEventListener(document, "mousemove", (e) => {
 					if (!this.#isGutterMouseDown) return;
-					const textDocument$1 = this.#textDocument;
-					const lineIndex$1 = resolveEditableLine(resolveGutterTarget(e$1.composedPath()[0], true));
-					if (lineIndex$1 === void 0 || textDocument$1 === void 0) return;
-					let selection$1 = {
-						start: {
-							line: lineIndex$1,
-							character: 0
-						},
-						end: {
-							line: lineIndex$1,
-							character: textDocument$1.getLineText(lineIndex$1).length
-						},
-						direction: DirectionForward
-					};
-					if (this.#selectionStart !== void 0) selection$1 = createSelectionFrom(this.#selectionStart, selection$1);
-					else this.#selectionStart = selection$1;
-					this.#updateSelections([selection$1]);
-					this.#focus(selection$1.end);
-				}, { passive: true })];
+					const textDocument = this.#textDocument;
+					const lineIndex = resolveEditableLine(resolveGutterTarget(e.composedPath()[0], true));
+					if (lineIndex === void 0 || textDocument === void 0) return;
+					const anchorLine = this.#selectionStart?.start.line ?? lineIndex;
+					const selection = this.#spanLineSelection(anchorLine, lineIndex, textDocument);
+					this.#selectionStart ??= selection;
+					this.#updateSelections([selection]);
+					this.#focus(selection.direction === -1 ? selection.start : selection.end);
+				}, { passive: true })]);
 			}, { passive: true }));
 		}
-		this.#markerManager?.listenHover(contentEl);
+		this.#markerRenderer?.listenHover(contentEl);
 		this.#resizeObserver?.disconnect();
-		this.#resizeObserver = new ResizeObserver(() => {
-			this.#handleLayoutResize();
-		});
+		this.#resizeObserver = new ResizeObserver(this.#handleLayoutResize);
 		this.#resizeObserver.observe(contentEl);
 		this.#resizeObserver.observe(contentEl.parentElement);
+		this.#computeContentOffset(contentEl);
+	}
+	#handleCustomPasteEvent = async () => {
+		const clipboard = this.#options.clipboard;
+		if (clipboard !== void 0) {
+			const text = await clipboard.readText();
+			this.#replaceSelectionText(text, void 0, true);
+		}
+	};
+	#computeContentOffset(contentEl) {
+		if (this.#isDiff && this.#diffSyle === "split" && this.#isWrap) {
+			this.#contentOffset = {
+				top: contentEl.offsetTop,
+				left: contentEl.offsetLeft - this.#getGutterWidth()
+			};
+			if (this.#options.__debug === true) console.log("[diffs/editor] content offset:", this.#contentOffset);
+		}
+	}
+	get #activeContentOffset() {
+		if (this.#isDiff && this.#diffSyle === "split" && this.#isWrap) return this.#contentOffset;
 	}
 	#runCommand(command) {
 		const textDocument = this.#textDocument;
 		if (textDocument === void 0) return;
 		switch (command) {
 			case "openSearchPanel":
-				this.#renderSearchPanel();
+				this.#openSearchPanel("find");
+				break;
+			case "openSearchReplacePanel":
+				this.#openSearchPanel("replace");
 				break;
 			case "findNextMatch": {
 				const selections = this.#selections;
@@ -562,6 +724,7 @@ var Editor = class {
 				if (this.#selections !== void 0) {
 					const edits = [];
 					const nextSelections = [];
+					const sameLineIndents = [];
 					for (const selection of this.#selections) {
 						const startLine = selection.start.line;
 						const outdent = command === "outdent";
@@ -570,11 +733,45 @@ var Editor = class {
 							edits.push(...ret[0]);
 							nextSelections.push(ret[1]);
 						} else {
-							const lineChar0 = textDocument.charAt({
+							const text = textDocument.charAt({
 								line: startLine,
 								character: 0
+							}) === "	" ? "	" : " ".repeat(this.#metrics.tabSize);
+							edits.push({
+								range: selection,
+								newText: text
+							});
+							sameLineIndents.push({
+								line: startLine,
+								startCharacter: selection.start.character,
+								addedLength: text.length - (selection.end.character - selection.start.character),
+								selectionIndex: nextSelections.length
 							});
-							this.#replaceSelectionText(lineChar0 === "	" ? "	" : " ".repeat(this.#metrics.tabSize));
+							const nextPosition = {
+								line: selection.start.line,
+								character: selection.start.character + text.length
+							};
+							nextSelections.push({
+								start: nextPosition,
+								end: nextPosition,
+								direction: 0
+							});
+						}
+					}
+					for (const indent of sameLineIndents) {
+						let shift = 0;
+						for (const other of sameLineIndents) if (other.line === indent.line && other.startCharacter < indent.startCharacter) shift += other.addedLength;
+						if (shift !== 0) {
+							const current = nextSelections[indent.selectionIndex];
+							const position = {
+								line: indent.line,
+								character: current.start.character + shift
+							};
+							nextSelections[indent.selectionIndex] = {
+								start: position,
+								end: position,
+								direction: 0
+							};
 						}
 					}
 					const change = textDocument.applyEdits(edits, true, this.#selections, nextSelections);
@@ -618,7 +815,7 @@ var Editor = class {
 				break;
 		}
 	}
-	#handleLayoutResize() {
+	#handleLayoutResize = () => {
 		const lineAnnotations = this.#lineAnnotations?.length ?? 0;
 		const prevGutterWidth = this.#gutterWidthCache;
 		const prevContentWidth = this.#contentWidthCache;
@@ -629,24 +826,39 @@ var Editor = class {
 		if (!gutterWidthChanged && !contentWidthChanged) return;
 		this.#lastAccessedLineElement = void 0;
 		this.#lastAccessedCharX = void 0;
-		if (contentWidthChanged && (this.#wrap || lineAnnotations > 0)) {
+		this.#metrics.clearTextWidthCache();
+		if (contentWidthChanged && (this.#isWrap || lineAnnotations > 0)) {
 			this.#lineYCache.clear();
 			this.#wrapLineOffsetsCache.clear();
 		}
-		if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerManager !== void 0) {
+		if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerRenderer !== void 0) {
 			this.#updateSelections(this.#selections ?? []);
 			if (this.#selections !== void 0) this.focus();
 		}
-		this.#markerManager?.removePopup();
+		this.#markerRenderer?.removePopup();
+		this.#computeContentOffset(this.#contentElement);
+	};
+	#remeasureMetricsOnFontLoad() {
+		if (this.#fontRemeasureScheduled) return;
+		const fonts = document.fonts;
+		if (fonts === void 0) return;
+		this.#fontRemeasureScheduled = true;
+		fonts.ready.then(() => {
+			if (this.#contentElement === void 0 || !this.#metrics.remeasureCharacterWidth()) return;
+			this.#gutterWidthCache = void 0;
+			this.#contentWidthCache = void 0;
+			this.#resetCache();
+			if (this.#selections !== void 0 || this.#matches !== void 0 || this.#markerRenderer !== void 0) this.#updateSelections(this.#selections ?? []);
+			this.#markerRenderer?.removePopup();
+		});
 	}
 	#rerender(change, newLineAnnotations, renderRange = this.#renderRange, shouldUpdateBuffer) {
 		const tokenizer = this.#tokenizer;
 		const fileInstance = this.#fileInstance;
-		const fileContents = this.#fileContents;
 		const textDocument = this.#textDocument;
 		const gutterEl = this.#gutterElement;
 		const contentEl = this.#contentElement;
-		if (tokenizer === void 0 || fileInstance === void 0 || fileContents === void 0 || textDocument === void 0 || contentEl === void 0) return;
+		if (tokenizer === void 0 || fileInstance === void 0 || textDocument === void 0 || contentEl === void 0) return;
 		tokenizer.stopBackgroundTokenize();
 		const t = performance.now();
 		const dirtyLines = tokenizer.tokenize(change, renderRange);
@@ -659,14 +871,14 @@ var Editor = class {
 				const child = children[i];
 				if (child !== void 0) {
 					const lineNumber = getLineNumberAttr(child);
-					if (lineNumber !== void 0) {
-						const lineIndex = lineNumber - 1;
-						if (dirtyLines.has(lineIndex)) {
-							const tokens = dirtyLines.get(lineIndex);
-							child.replaceChildren(...renderLineTokens(tokens, tokenizer.themeType));
-							dirtyLineIndexes.delete(lineIndex);
-							if (dirtyLineIndexes.size === 0) break;
-						}
+					const lineType = child.dataset.lineType;
+					if (lineNumber === void 0 || lineType === "change-deletion") continue;
+					const lineIndex = lineNumber - 1;
+					if (dirtyLines.has(lineIndex)) {
+						const tokens = dirtyLines.get(lineIndex);
+						child.replaceChildren(...renderLineTokens(tokens, tokenizer.themeType));
+						dirtyLineIndexes.delete(lineIndex);
+						if (dirtyLineIndexes.size === 0) break;
 					}
 				}
 			}
@@ -697,11 +909,11 @@ var Editor = class {
 		if (change.lineDelta < 0) for (const children of [contentEl.children, gutterEl?.children ?? []]) for (let i = children.length - 1; i >= 0; i--) {
 			const child = children[i];
 			const lineNumber = getLineNumberAttr(child) ?? getLineNumberAttr(child, "columnNumber");
-			if (lineNumber === void 0) continue;
+			const lineType = child.dataset.lineType;
+			if (lineNumber === void 0 || lineType === "change-deletion") continue;
 			if (lineNumber - 1 < change.lineCount) break;
 			child.remove();
 		}
-		const isDiff = Object.hasOwn(fileInstance, "fileDiff");
 		const didLineCountChange = change.lineDelta !== 0;
 		if (didLineCountChange) {
 			let gridRow = contentEl.children.length;
@@ -712,7 +924,7 @@ var Editor = class {
 			contentEl.style.gridRow = "span " + gridRow;
 			if (gutterEl !== void 0) gutterEl.style.gridRow = "span " + gridRow;
 		}
-		fileInstance.updateRenderCache(dirtyLines, tokenizer.themeType, isDiff ? !didLineCountChange : void 0);
+		fileInstance.updateRenderCache(dirtyLines, tokenizer.themeType, this.#isDiff && !didLineCountChange, didLineCountChange);
 		if (didLineCountChange) fileInstance.applyDocumentChange(textDocument, newLineAnnotations, shouldUpdateBuffer);
 		if (newLineAnnotations !== void 0) {
 			this.#lineAnnotations = newLineAnnotations;
@@ -720,11 +932,31 @@ var Editor = class {
 		}
 		if (this.#options.__debug === true) console.log(`[diffs/editor] re-render in: ${round(performance.now() - t2)}ms,`, `tokenize in: ${round(t2 - t)}ms (${dirtyLines.size} dirty lines)`);
 	}
+	#shouldRenderDivergeFromDocument(textDocument) {
+		const contentEl = this.#contentElement;
+		if (contentEl === void 0) return false;
+		for (const child of contentEl.children) {
+			const el = child;
+			const lineType = el.dataset.lineType;
+			const lineNumber = getLineNumberAttr(el);
+			if (lineNumber === void 0 || lineType === void 0 || !isLineEditable(lineType)) continue;
+			const lineIndex = lineNumber - 1;
+			if (lineIndex >= textDocument.lineCount || el.textContent !== textDocument.getLineText(lineIndex)) return true;
+		}
+		return false;
+	}
 	#handleInput(inputType, data) {
 		switch (inputType) {
-			case "insertText":
-				this.#replaceSelectionText(data ?? "");
+			case "insertText": {
+				const text = data ?? "";
+				const textDocument = this.#textDocument;
+				const selections = this.#selections;
+				const autoSurroundTexts = textDocument !== void 0 && selections !== void 0 ? getAutoSurroundReplacementTexts(textDocument, selections, text, this.#options.autoSurround) : void 0;
+				this.#replaceSelectionText(autoSurroundTexts ?? text);
 				break;
+			}
+			case "insertCompositionText": break;
+			case "insertLineBreak":
 			case "insertParagraph":
 				this.#replaceSelectionText("\n");
 				break;
@@ -752,12 +984,13 @@ var Editor = class {
 		}
 	}
 	#focus(position, preventScroll = true) {
+		this.#contentHasFocus = true;
 		if (position !== void 0) {
 			this.#shouldIgnoreSelectionChange = true;
 			this.#setWindowSelection({
 				start: position,
 				end: position,
-				direction: DirectionNone
+				direction: 0
 			});
 			requestAnimationFrame(() => {
 				this.#contentElement?.focus({ preventScroll });
@@ -777,7 +1010,7 @@ var Editor = class {
 		if (startLineElement === void 0 || endLineElement === void 0) return;
 		let [anchorNode, anchorOffset] = getSelectionAnchor(startLineElement, start.character);
 		let [focusNode, focusOffset] = getSelectionAnchor(endLineElement, end.character);
-		if (direction === DirectionBackward) [anchorNode, anchorOffset, focusNode, focusOffset] = [
+		if (direction === -1) [anchorNode, anchorOffset, focusNode, focusOffset] = [
 			focusNode,
 			focusOffset,
 			anchorNode,
@@ -789,16 +1022,16 @@ var Editor = class {
 			console.error("[diffs/editor] failed to update window selection:", err);
 		}
 	}
-	#scrollToPrimaryCaret(noFocus = false) {
-		const primaryCaretElement = this.#primaryCaretElement;
+	#scrollToPrimaryCaret(noFocus = false, scrollPosition = "nearest") {
 		const primarySelection = this.#selections?.at(-1);
 		if (primarySelection === void 0) return;
+		const primaryCaretElement = this.#primaryCaretElement;
 		if (primaryCaretElement !== void 0) {
 			primaryCaretElement.scrollIntoView({
-				block: "nearest",
+				block: scrollPosition,
 				inline: "nearest"
 			});
-			if (!noFocus) this.#focus(primarySelection.direction === DirectionBackward ? primarySelection.end : primarySelection.start);
+			if (!noFocus) this.#focus(primarySelection.direction === -1 ? primarySelection.end : primarySelection.start);
 		} else {
 			const pos = getCaretPosition(primarySelection);
 			this.#scrollToLine(pos.line, pos.character, noFocus);
@@ -812,7 +1045,7 @@ var Editor = class {
 		return `${componentTop + top}px ${end}px 0 ${start}px`;
 	}
 	#scrollToLine(line, char = 0, noFocus = false) {
-		this.postponeBackgroundTokenizeToNextFrame();
+		this.__postponeBackgroundTokenizeToNextFrame();
 		const virtualCaret = h("div", { style: {
 			position: "absolute",
 			left: "0",
@@ -867,15 +1100,109 @@ var Editor = class {
 		}
 		virtualCaret.remove();
 	}
+	#spanLineSelection(anchorLine, focusLine, textDocument) {
+		const lineStart = (line) => ({
+			line,
+			character: 0
+		});
+		const lineEnd = (line) => ({
+			line,
+			character: textDocument.getLineText(line).length
+		});
+		if (focusLine < anchorLine) return {
+			start: lineStart(focusLine),
+			end: lineEnd(anchorLine),
+			direction: -1
+		};
+		return {
+			start: lineStart(anchorLine),
+			end: lineEnd(focusLine),
+			direction: 1
+		};
+	}
+	#isDeletedLineTarget(event) {
+		const target = event.composedPath()[0];
+		return target instanceof HTMLElement && target.closest("[data-line]")?.getAttribute("data-line-type") === "change-deletion";
+	}
+	#selectDeletedLines(anchorContent, focusContent, deletionsCode) {
+		const rows = [...deletionsCode.querySelectorAll("[data-content] > [data-line]")];
+		const anchorIndex = rows.indexOf(anchorContent);
+		const focusIndex = rows.indexOf(focusContent);
+		const [topContent, bottomContent] = focusIndex < anchorIndex ? [focusContent, anchorContent] : [anchorContent, focusContent];
+		const winSelection = window.getSelection();
+		if (winSelection !== null) {
+			const range = document.createRange();
+			range.setStart(topContent, 0);
+			range.setEnd(bottomContent, bottomContent.childNodes.length);
+			winSelection.removeAllRanges();
+			winSelection.addRange(range);
+		}
+		this.#setDeletedTextSelectionActive(true);
+		this.#updateSelections([]);
+		[...deletionsCode.querySelectorAll("[data-gutter] > [data-column-number]")][focusIndex]?.setAttribute("data-selected-line", "single");
+		const lo = Math.min(anchorIndex, focusIndex);
+		const hi = Math.max(anchorIndex, focusIndex);
+		this.#deletedSelectionText = lo < 0 ? "" : rows.slice(lo, hi + 1).filter((row) => row.getAttribute("data-line-type") === "change-deletion").map((row) => row.textContent ?? "").join("\n");
+	}
+	#contentRowForGutterRow(gutterRow, contentColumn) {
+		const gutterColumn = gutterRow.parentElement;
+		if (gutterColumn == null || contentColumn == null) return;
+		const index = [...gutterColumn.children].indexOf(gutterRow);
+		const row = contentColumn.children[index];
+		return row instanceof HTMLElement ? row : void 0;
+	}
+	#beginDeletionGutterSelection(gutterRow, code, isMouse) {
+		const contentColumn = code.querySelector("[data-content]");
+		const anchorContent = this.#contentRowForGutterRow(gutterRow, contentColumn);
+		if (anchorContent === void 0) return false;
+		this.#selectDeletedLines(anchorContent, anchorContent, code);
+		if (isMouse) this.#replaceSelectEventListeners([addEventListener(document, "mousemove", (moveEvent) => {
+			const moveTarget = moveEvent.composedPath()[0];
+			const moveGutter = moveTarget instanceof HTMLElement ? moveTarget.closest("[data-column-number]") : null;
+			if (moveGutter instanceof HTMLElement && code.contains(moveGutter)) {
+				const focusContent = this.#contentRowForGutterRow(moveGutter, contentColumn);
+				if (focusContent !== void 0) this.#selectDeletedLines(anchorContent, focusContent, code);
+			}
+		}, { passive: true })]);
+		return true;
+	}
+	#isDeletedTextSelectionActive() {
+		return this.#fileContainer?.shadowRoot?.querySelector("pre")?.hasAttribute("data-deleted-text-selection") ?? false;
+	}
+	#deletedTextForClipboard() {
+		return this.#deletedSelectionText !== "" ? this.#deletedSelectionText : window.getSelection()?.toString() ?? "";
+	}
+	#setDeletedTextSelectionActive(active) {
+		const pre = this.#fileContainer?.shadowRoot?.querySelector("pre");
+		if (pre == null) return;
+		if (active) {
+			pre.setAttribute("data-deleted-text-selection", "");
+			for (const highlighted of pre.querySelectorAll("[data-selected-line]")) highlighted.removeAttribute("data-selected-line");
+			this.#deletedSelectionText = "";
+		} else {
+			pre.removeAttribute("data-deleted-text-selection");
+			this.#deletedSelectionText = "";
+		}
+	}
+	#setSelectedLinesSafe(range, lineNumberOnly = false) {
+		try {
+			this.#fileInstance?.setSelectedLines(range, {
+				notify: false,
+				activeLineSide: "additions",
+				lineNumberOnly
+			});
+		} catch {}
+	}
 	#updateSelections(selections) {
-		this.postponeBackgroundTokenizeToNextFrame();
+		this.__postponeBackgroundTokenizeToNextFrame();
 		this.#primaryCaretElement = void 0;
-		this.#fileInstance?.setSelectedLines(null);
-		this.#gutterElement?.querySelectorAll("[data-active]").forEach((el) => el.removeAttribute("data-active"));
-		if (selections.length === 0 && this.#matches === void 0 && this.#markerManager === void 0) {
+		this.#setSelectedLinesSafe(null);
+		if (selections.length === 0 && this.#matches === void 0 && this.#markerRenderer === void 0) {
 			this.#selections = void 0;
 			this.#overlayElements?.forEach((el) => el.remove());
 			this.#overlayElements?.clear();
+			this.#selectionAction?.cleanup();
+			this.#selectionAction = void 0;
 			return;
 		}
 		const fragment = document.createDocumentFragment();
@@ -887,21 +1214,16 @@ var Editor = class {
 			const normalizedSelections = mergeOverlappingSelections(selections);
 			const primarySelection = normalizedSelections.at(-1);
 			this.#selections = normalizedSelections;
-			if (isCollapsedSelection(primarySelection)) {
-				const line = primarySelection.start.line + 1;
-				this.#fileInstance?.setSelectedLines({
-					start: line,
-					end: line
-				});
-			} else if (this.#gutterElement !== void 0) {
-				const pos = getCaretPosition(primarySelection);
-				this.#gutterElement.querySelector(`[data-column-number="${pos.line + 1}"]`)?.setAttribute("data-active", "");
-			}
+			const hasNonEmptySelection = normalizedSelections.some((selection) => !isCollapsedSelection(selection));
+			const caretLine = getCaretPosition(primarySelection).line + 1;
+			this.#setSelectedLinesSafe({
+				start: caretLine,
+				end: caretLine
+			}, hasNonEmptySelection);
 			for (const selection of normalizedSelections) {
 				if (!isCollapsedSelection(selection)) this.#renderSelection(renderCtx, "selection", selection);
 				this.#renderCaret(renderCtx, selection, selection === primarySelection);
 			}
-			if (this.#options.enabledSelectionAction === true && !isCollapsedSelection(primarySelection)) this.#renderSelectionActionIcon(renderCtx, primarySelection);
 		}
 		const textDocument = this.#textDocument;
 		if (this.#matches !== void 0 && textDocument !== void 0) {
@@ -917,11 +1239,12 @@ var Editor = class {
 				this.#renderSelection(renderCtx, "match", range, isFocused ? "focus" : void 0);
 			}
 		}
-		if (this.#markerManager !== void 0 && textDocument !== void 0) for (const marker of this.#markerManager.markers) this.#renderSelection(renderCtx, "marker", marker, markerSeverityDatasetKey(marker.severity));
+		if (this.#markerRenderer !== void 0 && textDocument !== void 0) for (const marker of this.#markerRenderer.markers) this.#renderSelection(renderCtx, "marker", marker, markerSeverityDatasetKey(marker.severity));
 		this.#overlayElement?.appendChild(fragment);
 		this.#overlayElements?.forEach((el) => el.remove());
 		this.#overlayElements?.clear();
 		this.#overlayElements = renderCtx.elements;
+		this.#updateSelectionActionPopover();
 	}
 	#renderSelection(renderCtx, type, range, extraDataset) {
 		if (this.#textDocument === void 0) return;
@@ -932,7 +1255,7 @@ var Editor = class {
 			const lineText = this.#textDocument.getLineText(line);
 			const startChar = line === start.line ? start.character : 0;
 			const endChar = isLastLine ? end.character : lineText.length;
-			if (this.#wrap) {
+			if (this.#isWrap) {
 				const contentWidth = this.#getContentWidth();
 				if (2 * this.#metrics.ch + this.#metrics.measureTextWidth(lineText) > contentWidth) {
 					this.#renderWrappedSelection(renderCtx, line, lineText, startChar, endChar, isLastLine, type, extraDataset);
@@ -942,7 +1265,7 @@ var Editor = class {
 			let left = 0;
 			let width = 0;
 			let paddingEnd = 0;
-			if (startChar === 0) left = this.#getGutterWidth() + this.#metrics.ch;
+			if (startChar === 0) left = this.#getGutterWidth() + this.#metrics.ch + (this.#activeContentOffset?.left ?? 0);
 			else left = this.#getCharX(line, startChar)[0];
 			if (!isLastLine && type === "selection") paddingEnd = this.#metrics.ch;
 			if (startChar === endChar) width = paddingEnd;
@@ -953,71 +1276,64 @@ var Editor = class {
 	#renderWrappedSelection(renderCtx, line, lineText, startChar, endChar, isLastLine, type, extraDataset) {
 		const wrapOffsets = this.#wrapLineText(line);
 		const segmentCount = wrapOffsets.length - 1;
-		const offsetLeft = this.#getGutterWidth() + this.#metrics.ch;
+		const offsetLeft = this.#getGutterWidth() + this.#metrics.ch + (this.#activeContentOffset?.left ?? 0);
 		for (let wrapLine = 0; wrapLine < segmentCount; wrapLine++) {
 			const segmentStart = wrapOffsets[wrapLine];
 			const segmentEnd = wrapOffsets[wrapLine + 1];
 			const wrapStartChar = Math.max(startChar, segmentStart);
 			const wrapEndChar = Math.min(endChar, segmentEnd);
 			if (wrapStartChar > wrapEndChar) continue;
-			let segmentLeft;
-			let segmentWidth;
+			const segmentStartWidth = this.#segmentTextWidth(lineText, segmentStart, wrapStartChar);
+			const segmentLeft = offsetLeft + segmentStartWidth;
 			let paddingEnd = 0;
-			if (wrapStartChar === 0) segmentLeft = offsetLeft;
-			else {
-				const prefixInSegment = lineText.slice(segmentStart, wrapStartChar);
-				const prefixAsciiColumns = getExpandedAsciiTextColumns(prefixInSegment, this.#metrics.tabSize);
-				segmentLeft = offsetLeft + (prefixAsciiColumns !== -1 ? prefixAsciiColumns * this.#metrics.ch : this.#metrics.measureTextWidth(prefixInSegment));
-			}
 			if (!isLastLine && wrapLine === segmentCount - 1 && type === "selection") paddingEnd = this.#metrics.ch;
-			if (wrapStartChar === wrapEndChar) segmentWidth = paddingEnd;
-			else {
-				const selectionInSegment = lineText.slice(wrapStartChar, wrapEndChar);
-				const selectionAsciiWidth = getExpandedAsciiTextColumns(selectionInSegment, this.#metrics.tabSize);
-				segmentWidth = selectionAsciiWidth !== -1 ? selectionAsciiWidth * this.#metrics.ch : this.#metrics.measureTextWidth(selectionInSegment);
-				segmentWidth += paddingEnd;
-			}
+			const segmentWidth = wrapStartChar === wrapEndChar ? paddingEnd : this.#segmentTextWidth(lineText, segmentStart, wrapEndChar) - segmentStartWidth + paddingEnd;
 			this.#renderSelectionBlock(renderCtx, type, line, wrapLine, segmentLeft, segmentWidth, extraDataset);
 		}
 	}
+	#segmentTextWidth(lineText, segmentStart, character) {
+		if (character <= segmentStart) return 0;
+		const segmentText = lineText.slice(segmentStart, character);
+		const asciiColumns = getExpandedAsciiTextColumns(segmentText, this.#metrics.tabSize);
+		return asciiColumns !== -1 ? asciiColumns * this.#metrics.ch : this.#metrics.measureTextWidth(segmentText);
+	}
 	#renderSelectionBlock(renderCtx, type, line, wrapLine, left, width, extraDataset) {
 		if (width === 0) return;
 		const { ch, lineHeight } = this.#metrics;
 		const y = this.#getLineY(line) + wrapLine * lineHeight;
-		const css = `width:${width}px;transform:translateX(${left}px) translateY(${y}px);`;
-		const cacheKey = `${type}-${left}-${y}-${width}${extraDataset ?? ""}`;
+		const cacheKey = `${type}-${line}/${wrapLine}-${left}-${width} ${extraDataset ?? ""}`;
 		const overlayEls = this.#overlayElements;
 		const rounded = (this.#options.roundedSelection ?? true) && type === "selection";
-		const addRoundedCorner = (line$1, wrapLine$1, left$1, radius) => {
-			const top = this.#getLineY(line$1) + wrapLine$1 * lineHeight;
-			const css$1 = `width:${ch}px;transform:translateX(${left$1}px) translateY(${top}px);`;
+		const addRoundedCorner = (line, wrapLine, left, radius) => {
+			const css = `width:${ch}px;transform:translateX(${left}px) translateY(${this.#getLineY(line) + wrapLine * lineHeight}px);`;
 			const dataset = {
 				selectionCorner: "",
 				[radius]: ""
 			};
-			const cacheKeyPrefix = `${type}-block-${left$1}-${top}-1ch`;
-			let cacheKey$1 = cacheKeyPrefix + "-" + radius;
+			const cacheKeyPrefix = `${type}-block-${line}/${wrapLine}-${left}-1ch`;
+			let cacheKey = cacheKeyPrefix + "-" + radius;
 			if (radius === "rbl") {
 				const prevCornerKey = cacheKeyPrefix + "-rtl";
 				const prevCorner = renderCtx.elements.get(prevCornerKey);
 				if (prevCorner !== void 0) {
 					prevCorner.remove();
 					renderCtx.elements.delete(prevCornerKey);
-					cacheKey$1 += "-rtl";
+					cacheKey += "-rtl";
 					dataset.rtl = "";
 				}
 			}
-			let cornerEl = renderCtx.elements.get(cacheKey$1);
+			let cornerEl = renderCtx.elements.get(cacheKey);
 			if (cornerEl !== void 0) return;
-			if (overlayEls?.has(cacheKey$1) === true) {
-				cornerEl = overlayEls.get(cacheKey$1);
-				overlayEls.delete(cacheKey$1);
+			if (overlayEls?.has(cacheKey) === true) {
+				cornerEl = overlayEls.get(cacheKey);
+				cornerEl.style.cssText = css;
+				overlayEls.delete(cacheKey);
 			} else cornerEl = h("div", {
 				dataset: "selectionRange",
-				style: { cssText: css$1 },
+				style: { cssText: css },
 				children: [h("div", { dataset })]
 			}, renderCtx.fragment);
-			renderCtx.elements.set(cacheKey$1, cornerEl);
+			renderCtx.elements.set(cacheKey, cornerEl);
 		};
 		const addRadiusStyle = (element) => {
 			const end = left + width;
@@ -1067,10 +1383,9 @@ var Editor = class {
 		if (overlayEls?.has(cacheKey) === true) {
 			rangeEl = overlayEls.get(cacheKey);
 			overlayEls.delete(cacheKey);
-		} else rangeEl = h("div", {
-			dataset: extraDataset ? [type + "Range", extraDataset] : type + "Range",
-			style: { cssText: css }
-		}, renderCtx.fragment);
+		} else rangeEl = h("div", { dataset: extraDataset ? [type + "Range", extraDataset] : type + "Range" }, renderCtx.fragment);
+		rangeEl.style.width = `${width}px`;
+		rangeEl.style.transform = `translateX(${left}px) translateY(${y}px)`;
 		if (rounded) addRadiusStyle(rangeEl);
 		renderCtx.elements.set(cacheKey, rangeEl);
 	}
@@ -1080,71 +1395,70 @@ var Editor = class {
 		const [left, wrapLine] = this.#getCharX(line, character);
 		const cacheKey = "caret-" + line + "/" + wrapLine + ":" + character;
 		if (renderCtx.elements.has(cacheKey)) return;
-		const caretEl = h("div", {
-			dataset: "caret",
-			style: { transform: `translateX(${left - 1}px) translateY(${this.#getLineY(line) + wrapLine * this.#metrics.lineHeight}px)` }
-		}, renderCtx.fragment);
+		const x = left - 1;
+		const y = this.#getLineY(line) + wrapLine * this.#metrics.lineHeight;
+		let caretEl;
+		if (this.#overlayElements?.has(cacheKey) === true) {
+			caretEl = this.#overlayElements.get(cacheKey);
+			this.#overlayElements.delete(cacheKey);
+		} else caretEl = h("div", { dataset: "caret" }, renderCtx.fragment);
+		caretEl.style.transform = `translateX(${x}px) translateY(${y}px)`;
 		renderCtx.elements.set(cacheKey, caretEl);
 		if (isPrimary) {
 			caretEl.style.scrollMargin = this.#getScrollMargin();
 			this.#primaryCaretElement = caretEl;
 		}
 	}
-	#renderSelectionActionIcon(renderCtx, selection) {
-		const line = getCaretPosition(selection).line;
-		if (!this.#isLineVisible(line)) return;
-		const [left, wrapLine] = this.#getCharX(line, 0);
-		const cacheKey = "selectionActionIcon-" + line + "(" + wrapLine + ")";
-		if (renderCtx.elements.has(cacheKey)) return;
-		const selectionActionIcon = SelectionActionWidget.renderIcon(left, this.#getLineY(line) + wrapLine * this.#metrics.lineHeight, renderCtx.fragment, () => {
-			const cleanUpSelectionAction = () => {
-				this.#selectionAction?.cleanup();
-				this.#selectionAction = void 0;
-			};
-			const handleWidgetDomResize = () => {
-				this.#lineYCache.clear();
-				if (this.#selections !== void 0) this.#updateSelections(this.#selections);
-			};
-			cleanUpSelectionAction();
-			const textDocument = this.#textDocument;
-			const renderSelectionAction = this.#options.renderSelectionAction;
-			const fileContainer = this.#fileContainer;
-			if (textDocument === void 0 || renderSelectionAction === void 0 || fileContainer == null) return;
-			const line$1 = selection.end.line;
-			const lineText = textDocument.getLineText(line$1);
+	#updateSelectionActionPopover() {
+		const primarySelection = this.#selections?.at(-1);
+		const overlayElement = this.#overlayElement;
+		const textDocument = this.#textDocument;
+		const renderSelectionAction = this.#options.renderSelectionAction;
+		if (this.#options.enabledSelectionAction !== true || renderSelectionAction === void 0 || primarySelection === void 0 || isCollapsedSelection(primarySelection) || this.#isContentMouseDown || overlayElement === void 0 || textDocument === void 0) {
+			this.#selectionAction?.cleanup();
+			this.#selectionAction = void 0;
+			return;
+		}
+		const head = getCaretPosition(primarySelection);
+		if (!this.#isLineVisible(head.line)) {
+			this.#selectionAction?.cleanup();
+			this.#selectionAction = void 0;
+			return;
+		}
+		if (this.#selectionAction === void 0) {
+			const getActiveSelection = () => this.#selections?.at(-1) ?? primarySelection;
 			const selectionActionElement = renderSelectionAction({
 				textDocument,
-				selection,
-				applyEdits: (edits) => {
-					const change = textDocument.applyEdits(edits, true, this.#selections);
-					if (change !== void 0) this.#applyChange(change);
-				},
-				getSelectionText: () => {
-					return this.#textDocument?.getText(selection) ?? "";
+				get selection() {
+					return getActiveSelection();
 				},
+				applyEdits: (edits) => this.applyEdits(edits, true),
+				getSelectionText: () => this.#textDocument?.getText(getActiveSelection()) ?? "",
 				replaceSelectionText: (text) => {
-					this.#replaceSelectionText(text);
+					this.#replaceSelectionText(text, [getActiveSelection()]);
 				},
 				close: () => {
-					cleanUpSelectionAction();
-					handleWidgetDomResize();
+					this.#selectionAction?.cleanup();
+					this.#selectionAction = void 0;
 					this.#scrollToPrimaryCaret();
 				}
 			});
-			let leadingWhitespaces = 0;
-			for (let i = 0; i < lineText.length; i++) {
-				const charCode = lineText.charCodeAt(i);
-				if (charCode === 32) leadingWhitespaces++;
-				else if (charCode === 9) leadingWhitespaces += this.#metrics.tabSize;
-				else break;
-			}
-			this.#selectionAction = new SelectionActionWidget(line$1, selectionActionElement, fileContainer, leadingWhitespaces, handleWidgetDomResize);
-			this.#updateSelections([selection]);
-			if (this.#isLineVisible(line$1) && this.#contentElement !== void 0) this.#selectionAction.render(this.#contentElement);
-		});
-		renderCtx.elements.set(cacheKey, selectionActionIcon);
+			this.#selectionAction = new SelectionActionWidget(head.line, selectionActionElement, overlayElement);
+		}
+		const [left, wrapLine] = this.#getCharX(head.line, head.character);
+		const lineHeight = this.#metrics.lineHeight;
+		const top = this.#getLineY(head.line) + wrapLine * lineHeight + lineHeight;
+		this.#selectionAction.line = head.line;
+		this.#selectionAction.reposition(left, top, this.#getGutterWidth());
+	}
+	#openSearchPanel(mode) {
+		if (this.#searchPanel !== void 0) {
+			this.#searchPanel.setMode(mode);
+			return;
+		}
+		this.#renderSearchPanel(mode);
 	}
-	#renderSearchPanel() {
+	#renderSearchPanel(mode) {
 		this.#searchPanel?.cleanup();
 		const textDocument = this.#textDocument;
 		const preElement = this.#fileContainer?.shadowRoot?.querySelector("pre");
@@ -1170,19 +1484,41 @@ var Editor = class {
 			this.#scrollToPrimaryCaret(true);
 			this.#retainSearchPanelFocus = retainFocus;
 		};
-		this.#searchPanel = new SearchPanelWidget({
+		const searchPanel = new SearchPanelWidget({
 			textDocument,
 			containerElement: preElement,
 			defaultQuery,
+			mode,
 			initialMatch,
 			scrollToMatch,
-			onUpdate: (allMatches) => {
+			applyReplace: (edits) => {
+				if (edits.length === 0) return;
+				const change = textDocument.applyEdits(edits.map((edit) => ({
+					range: {
+						start: textDocument.positionAt(edit.start),
+						end: textDocument.positionAt(edit.end)
+					},
+					newText: edit.text
+				})), true, this.#selections);
+				if (change !== void 0) this.#applyChange(change, void 0, this.#applyChangeToLineAnnotations(change), { skipSearchRefresh: true });
+			},
+			onUpdate: (allMatches, options) => {
 				if (allMatches.length === 0) {
 					this.#matches = void 0;
 					this.#updateSelections(this.#selections ?? []);
 					return;
 				}
 				this.#matches = allMatches;
+				if (options?.syncSelection === false) {
+					this.#updateSelections(this.#selections ?? []);
+					const primarySelection = this.#selections?.at(-1);
+					if (primarySelection !== void 0) {
+						const startOffset = textDocument.offsetAt(primarySelection.start);
+						const endOffset = textDocument.offsetAt(primarySelection.end);
+						for (const match of allMatches) if (match[0] === startOffset && match[1] === endOffset) return match;
+					}
+					return;
+				}
 				const primarySelection = this.#selections?.at(-1);
 				let searchOffset = 0;
 				let nextMatch;
@@ -1202,6 +1538,7 @@ var Editor = class {
 				this.#updateSelections(this.#selections ?? []);
 			}
 		});
+		this.#searchPanel = searchPanel;
 		this.#retainSearchPanelFocus = false;
 	}
 	#getSelectionText() {
@@ -1210,46 +1547,60 @@ var Editor = class {
 		if (textDocument === void 0 || selections === void 0) return "";
 		return getSelectionText(textDocument, selections);
 	}
-	#replaceSelectionText(text) {
+	#cutSelectionText() {
+		const textDocument = this.#textDocument;
+		const selections = this.#selections;
+		if (textDocument === void 0 || selections === void 0 || selections.length === 0) return "";
+		if (selections.some((selection) => isCollapsedSelection(selection))) {
+			const cut = resolveSelectionCut(textDocument, selections);
+			this.#applySelectionCutEdits(cut.edits, cut.nextSelectionOffsets);
+			return cut.text;
+		}
+		const text = getSelectionText(textDocument, selections);
+		this.#replaceSelectionText("", void 0, true);
+		return text;
+	}
+	#applySelectionCutEdits(edits, nextSelectionOffsets) {
+		const textDocument = this.#textDocument;
 		const selections = this.#selections;
+		if (textDocument === void 0 || selections === void 0 || edits.length === 0) return;
+		const change = textDocument.applyResolvedEdits(edits, true, selections, void 0, true);
+		if (change === void 0) return;
+		const nextSelections = nextSelectionOffsets.map((offset) => {
+			const caret = textDocument.positionAt(offset);
+			return {
+				start: caret,
+				end: caret,
+				direction: 0
+			};
+		});
+		textDocument.setLastUndoSelectionsAfter(nextSelections);
+		this.#applyChange(change, nextSelections, this.#applyChangeToLineAnnotations(change));
+	}
+	#replaceSelectionText(text, selections = this.#selections, undoBoundary = false) {
 		if (selections === void 0) return;
 		const textDocument = this.#textDocument;
 		const primarySelection = selections.at(-1);
 		if (textDocument === void 0 || primarySelection === void 0) return;
-		const { nextSelections, change } = Array.isArray(text) && text.length === selections.length ? applyTextReplaceToSelections(textDocument, selections, text, this.#lineAnnotations) : applyTextChangeToSelections(textDocument, selections, {
+		const { nextSelections, change } = Array.isArray(text) && text.length === selections.length ? applyTextReplaceToSelections(textDocument, selections, text, this.#lineAnnotations, undoBoundary) : applyTextChangeToSelections(textDocument, selections, {
 			start: textDocument.offsetAt(primarySelection.start),
 			end: textDocument.offsetAt(primarySelection.end),
 			text: Array.isArray(text) ? text.join("\n") : text
-		}, this.#lineAnnotations);
+		}, this.#lineAnnotations, void 0, undoBoundary);
 		if (change !== void 0) this.#applyChange(change, nextSelections, this.#applyChangeToLineAnnotations(change));
 	}
 	#deleteSelectionText(forward = false) {
 		const selections = this.#selections;
 		const textDocument = this.#textDocument;
 		if (selections === void 0 || textDocument === void 0) return;
-		const primarySelection = selections.at(-1);
-		if (primarySelection === void 0) return;
-		let edit;
-		if (isCollapsedSelection(primarySelection)) {
-			const offset = textDocument.offsetAt(primarySelection.start);
-			const nextOffset = forward ? Math.min(textDocument.getText().length, offset + 1) : Math.max(0, offset - 1);
-			edit = {
-				start: Math.min(offset, nextOffset),
-				end: Math.max(offset, nextOffset),
-				text: ""
-			};
-		} else edit = {
-			start: textDocument.offsetAt(primarySelection.start),
-			end: textDocument.offsetAt(primarySelection.end),
-			text: ""
-		};
-		this.#applyResolvedTextEdit(edit);
+		const { nextSelections, change } = applyDeleteCharacterToSelections(textDocument, selections, forward, this.#lineAnnotations, this.#metrics.tabSize);
+		if (change !== void 0) this.#applyChange(change, nextSelections, this.#applyChangeToLineAnnotations(change));
 	}
 	#deleteSoftLineBackward() {
 		const selections = this.#selections;
 		const textDocument = this.#textDocument;
 		if (selections === void 0 || textDocument === void 0) return;
-		const { nextSelections, change } = applyDeleteSoftLineBackwardToSelections(textDocument, selections, this.#wrap ? (line, character) => {
+		const { nextSelections, change } = applyDeleteSoftLineBackwardToSelections(textDocument, selections, this.#isWrap ? (line, character) => {
 			const wrapOffsets = this.#wrapLineText(line);
 			for (let w = 0; w + 1 < wrapOffsets.length; w++) {
 				const segmentStart = wrapOffsets[w];
@@ -1281,27 +1632,25 @@ var Editor = class {
 		const { nextSelections, change } = applyTransposeToSelections(textDocument, selections, this.#lineAnnotations);
 		if (change !== void 0) this.#applyChange(change, nextSelections, this.#applyChangeToLineAnnotations(change));
 	}
-	#applyResolvedTextEdit(edit) {
-		if (this.#selections === void 0 || this.#textDocument === void 0) return;
-		const { nextSelections, change } = applyTextChangeToSelections(this.#textDocument, this.#selections, edit, this.#lineAnnotations, this.#metrics.tabSize);
-		if (change !== void 0) this.#applyChange(change, nextSelections, this.#applyChangeToLineAnnotations(change));
-	}
-	#applyChange(change, selections, newLineAnnotations) {
-		const fileContents = this.#fileContents;
+	#getFileRef() {
+		const fileInfo = this.#fileInfo;
 		const textDocument = this.#textDocument;
+		if (fileInfo === void 0 || textDocument === void 0) return;
+		const file = { ...fileInfo };
+		Object.defineProperty(file, "contents", {
+			enumerable: true,
+			get: () => textDocument.getText()
+		});
+		return file;
+	}
+	#applyChange(change, selections, newLineAnnotations, options) {
+		const fileRef = this.#getFileRef();
 		const onChange = this.#options.onChange;
-		if (fileContents !== void 0 && textDocument !== void 0 && onChange !== void 0) {
-			const { contents: _,...file } = fileContents;
-			Object.defineProperty(file, "contents", {
-				enumerable: true,
-				get: () => textDocument.getText()
-			});
-			onChange(file, newLineAnnotations ?? this.#lineAnnotations);
-		}
-		if (change.lineDelta !== 0) {
+		if (fileRef !== void 0 && onChange !== void 0) onChange(fileRef, newLineAnnotations ?? this.#lineAnnotations);
+		if (change.lineDelta !== 0 || this.#isWrap) {
 			for (const line of this.#lineYCache.keys()) if (line >= change.startLine) this.#lineYCache.delete(line);
 		}
-		if (this.#wrap) {
+		if (this.#isWrap) {
 			for (const line of this.#wrapLineOffsetsCache.keys()) if (line >= change.startLine) this.#wrapLineOffsetsCache.delete(line);
 		}
 		this.#lastAccessedCharX = void 0;
@@ -1310,24 +1659,34 @@ var Editor = class {
 		if (renderRange !== void 0 && selections !== void 0 && selections.length > 0) {
 			const primarySelection = selections.at(-1);
 			const renderRangeEndLine = renderRange.startingLine + renderRange.totalLines;
-			if (primarySelection.end.line === renderRangeEndLine) renderRange = {
-				...renderRange,
-				totalLines: renderRange.totalLines + 1
-			};
-			else if (primarySelection.end.line > renderRangeEndLine) shouldUpdateBuffer = true;
+			if (primarySelection.end.line >= renderRangeEndLine) {
+				const widenedTotalLines = primarySelection.end.line - renderRange.startingLine + 1;
+				const maxWidenLines = this.#viewportWindowLines === void 0 || this.#viewportWindowLines === Infinity ? Infinity : this.#viewportWindowLines * MAX_EDIT_WIDEN_WINDOW_MULTIPLE;
+				if (change.startLine <= renderRangeEndLine && widenedTotalLines <= maxWidenLines) {
+					if (primarySelection.end.line > renderRangeEndLine) shouldUpdateBuffer = true;
+					renderRange = {
+						...renderRange,
+						totalLines: widenedTotalLines
+					};
+					this.#renderRange = renderRange;
+				} else shouldUpdateBuffer = true;
+			}
 		}
 		this.#rerender(change, newLineAnnotations, renderRange, shouldUpdateBuffer);
+		if (options?.skipSearchRefresh !== true && this.#searchPanel !== void 0 && this.#matches !== void 0) this.#searchPanel.updateMatches({ syncSelection: false });
 		if (selections !== void 0) {
 			this.#updateSelections(selections);
-			if (this.#primaryCaretElement !== void 0) this.#primaryCaretElement.scrollIntoView({
-				block: "nearest",
-				inline: "nearest"
-			});
-			else if (selections.length > 0) {
-				const pos = getCaretPosition(selections.at(-1));
-				this.#scrollToLine(pos.line, pos.character);
+			if (options?.skipFocus !== true) {
+				if (this.#primaryCaretElement !== void 0) this.#primaryCaretElement.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+				else if (selections.length > 0) {
+					const pos = getCaretPosition(selections.at(-1));
+					this.#scrollToLine(pos.line, pos.character);
+				}
+				this.focus({ preventScroll: true });
 			}
-			this.focus({ preventScroll: true });
 		}
 	}
 	#applyChangeToLineAnnotations(change) {
@@ -1359,7 +1718,7 @@ var Editor = class {
 				}
 			}
 		}
-		lineElement ??= contentElement.querySelector(`[data-line="${line + 1}"]`);
+		lineElement ??= contentElement.querySelector(`[data-line="${line + 1}"]` + (this.#diffSyle === "unified" ? ":not([data-line-type=\"change-deletion\"])" : ""));
 		if (lineElement !== null) {
 			if (lastAccessed !== void 0) {
 				lastAccessed[0] = line;
@@ -1391,7 +1750,8 @@ var Editor = class {
 		if (cachedY !== void 0) return cachedY;
 		const lineElement = this.#getLineElement(line);
 		if (lineElement === void 0) return -1;
-		const y = lineElement.offsetTop + this.#codePaddingTop;
+		let y = lineElement.offsetTop + this.#metrics.paddingTop;
+		y += this.#activeContentOffset?.top ?? 0;
 		this.#lineYCache.set(line, y);
 		return y;
 	}
@@ -1399,7 +1759,7 @@ var Editor = class {
 		if (this.#lastAccessedCharX !== void 0 && this.#lastAccessedCharX[0] === line && this.#lastAccessedCharX[1] === char) return [this.#lastAccessedCharX[2], this.#lastAccessedCharX[3]];
 		const lineText = this.#textDocument?.getLineText(line);
 		const offsetLeft = this.#getGutterWidth() + this.#metrics.ch;
-		if (lineText === void 0 || lineText.length === 0 || char <= 0) return [offsetLeft, 0];
+		if (lineText === void 0 || lineText.length === 0 || char <= 0) return [offsetLeft + (this.#activeContentOffset?.left ?? 0), 0];
 		const boundedCharacter = snapTextOffsetToUnicodeBoundary(lineText, Math.min(char, lineText.length));
 		const textBeforeCharacter = lineText.slice(0, boundedCharacter);
 		const asciiColumns = getExpandedAsciiTextColumns(textBeforeCharacter, this.#metrics.tabSize);
@@ -1407,7 +1767,7 @@ var Editor = class {
 		let wrapLine = 0;
 		if (asciiColumns !== -1) left = offsetLeft + asciiColumns * this.#metrics.ch;
 		else left = offsetLeft + this.#metrics.measureTextWidth(textBeforeCharacter);
-		if (this.#wrap) {
+		if (this.#isWrap) {
 			const contentWidth = this.#getContentWidth();
 			if (2 * this.#metrics.ch + this.#metrics.measureTextWidth(lineText) > contentWidth) {
 				const wrapOffsets = this.#wrapLineText(line);
@@ -1423,6 +1783,7 @@ var Editor = class {
 					}
 				}
 			}
+			left += this.#activeContentOffset?.left ?? 0;
 		}
 		if (this.#lastAccessedCharX !== void 0) {
 			this.#lastAccessedCharX[0] = line;
@@ -1509,7 +1870,7 @@ var Editor = class {
 		return line < startingLine + totalLines;
 	}
 };
-
 //#endregion
 export { Editor };
+
 //# sourceMappingURL=editor.js.map