@pierre/diffs 1.3.0-beta.7 → 1.3.0-beta.8

package/dist/editor/editor.js

@@ -6,8 +6,10 @@ 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 { 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 { PopoverManager } from "./popover.js";
+import { applyDeleteCharacterToSelections, applyDeleteHardLineForwardToSelections, applyDeleteSoftLineBackwardToSelections, applyDeleteWordBackwardToSelections, applyTextChangeToSelections, applyTextReplaceToSelections, applyTransposeToSelections, comparePosition, convertSelection, createSelectionFrom, createSelectionFromAnchorAndFocusOffsets, expandCollapsedSelectionToWord, extendSelection, extendSelections, findNexMatch, getAutoSurroundReplacementTexts, getCaretPosition, getDocumentBoundarySelection, getDocumentFullSelection, getSelectedLineBlocks, getSelectionAnchor, getSelectionText, isCollapsedSelection, isLineEditable, mapCursorMove, mapSelectionShift, mergeOverlappingSelections, remapSelectionsAfterEdits, resolveIndentEdits, resolveSelectionCut, selectionIntersects, shiftSelectionLines } from "./selection.js";
 import { MarkerRenderer, markerSeverityDatasetKey } from "./marker.js";
+import { findBracketMatchRanges } from "./matchBrackets.js";
 import { createSpriteElement } from "./sprite.js";
 import { SearchPanelWidget } from "./searchPanel.js";
 import { SelectionActionWidget } from "./selectionAction.js";
@@ -20,6 +22,7 @@ var Editor = class {
 	#options;
 	#metrics = new Metrics();
 	#tokenizer;
+	#popoverManager;
 	#editorEventDisposes;
 	#globalEventDisposes;
 	#selectEventDisposes;
@@ -85,6 +88,12 @@ var Editor = class {
 	constructor(options = {}) {
 		this.#options = options;
 	}
+	setOptions(options) {
+		this.#options = {
+			...this.#options,
+			...options
+		};
+	}
 	edit(fileInstance) {
 		const { useTokenTransformer, enableGutterUtility, enableLineSelection, expandUnchanged, lineHoverHighlight = "disabled", ...rest } = fileInstance.options;
 		if (useTokenTransformer !== true || enableGutterUtility === true || enableLineSelection === true || expandUnchanged !== true && fileInstance.type === "file-diff" || lineHoverHighlight !== "disabled") {
@@ -197,6 +206,7 @@ var Editor = class {
 			return;
 		}
 		this.#markerRenderer ??= new MarkerRenderer({
+			popoverManager: this.#getPopoverManager(),
 			getLineHeight: () => this.#metrics.lineHeight,
 			getOverlayElement: () => this.#overlayElement,
 			getGutterWidth: () => this.#getGutterWidth(),
@@ -219,11 +229,13 @@ var Editor = class {
 	blur() {
 		this.#contentElement?.blur();
 	}
-	cleanUp() {
+	cleanUp(recycle = false) {
 		this.#tokenizer?.cleanUp();
 		this.#tokenizer = void 0;
-		this.#textDocument = void 0;
-		this.#fileInfo = void 0;
+		if (!recycle) {
+			this.#textDocument = void 0;
+			this.#fileInfo = void 0;
+		}
 		this.#globalEventDisposes?.forEach((dispose) => dispose());
 		this.#globalEventDisposes = void 0;
 		this.#editorEventDisposes?.forEach((dispose) => dispose());
@@ -247,6 +259,8 @@ var Editor = class {
 		this.#spriteElement?.remove();
 		this.#spriteElement = void 0;
 		this.#fileContainer = void 0;
+		this.#popoverManager?.cleanUp();
+		this.#popoverManager = void 0;
 		this.#gutterElement = void 0;
 		this.#contentElement?.removeAttribute("contentEditable");
 		this.#contentElement = void 0;
@@ -293,6 +307,7 @@ var Editor = class {
 			break;
 		}
 		if (codeElement === void 0 || contentEl === void 0) return;
+		this.#getPopoverManager().setViewportElements(fileContainer, codeElement);
 		if (this.#fileContainer !== fileContainer) {
 			this.#fileContainer = fileContainer;
 			if (this.#globalStyleElement !== void 0) fileContainer.appendChild(this.#globalStyleElement);
@@ -314,17 +329,7 @@ var Editor = class {
 			};
 			this.#textDocument = textDocument;
 			this.#tokenizer?.cleanUp();
-			this.#tokenizer = new EditorTokenizer({
-				highlighter,
-				textDocument,
-				codeOptions: this.#fileInstance?.options ?? {},
-				onDeferTokenize: this.#onDeferTokenize,
-				onThemeChange: () => this.#scheduleThemeSelectionRefresh(),
-				setStyle: (css) => {
-					this.#themeStyleElement.textContent = css;
-				},
-				__debug: this.#options.__debug
-			});
+			this.#tokenizer = void 0;
 			this.#resetState();
 			this.#selections = this.#initSelections;
 			requestAnimationFrame(() => {
@@ -332,6 +337,19 @@ var Editor = class {
 			});
 			if (this.#textDocument !== void 0 && this.#options.__debug === true) console.log("[diffs/editor] text document rebuilt from", fileOrDiff.name);
 		}
+		const textDocument = this.#textDocument;
+		if (this.#tokenizer == null && textDocument != null) this.#tokenizer = new EditorTokenizer({
+			highlighter,
+			textDocument,
+			codeOptions: this.#fileInstance?.options ?? {},
+			matchBrackets: this.#options.matchBrackets,
+			onDeferTokenize: this.#onDeferTokenize,
+			onThemeChange: () => this.#scheduleThemeSelectionRefresh(),
+			setStyle: (css) => {
+				this.#themeStyleElement.textContent = css;
+			},
+			__debug: this.#options.__debug
+		});
 		if (this.#contentElement !== contentEl) {
 			this.#gutterElement = gutterEl;
 			this.#contentElement = extend(contentEl, {
@@ -384,6 +402,12 @@ var Editor = class {
 	get #isWrap() {
 		return this.#fileInstance?.options.overflow === "wrap";
 	}
+	#getPopoverManager() {
+		return this.#popoverManager ??= new PopoverManager({
+			hasActivePopover: () => this.#selectionAction !== void 0,
+			updateActivePopover: () => this.#updateSelectionActionPopover()
+		});
+	}
 	#resetCache() {
 		this.#lineYCache.clear();
 		this.#wrapLineOffsetsCache.clear();
@@ -443,6 +467,10 @@ var Editor = class {
 				if (this.#isContentMouseDown) if (this.#selectionStart !== void 0) selection = createSelectionFrom(this.#selectionStart, selection);
 				else this.#selectionStart = selection;
 				else if (this.#selectionStart !== void 0) selection.direction = createSelectionFrom(this.#selectionStart, selection).direction;
+				else if (this.#selections !== void 0 && this.#selections.length === 1) {
+					const previous = this.#selections[0];
+					if (comparePosition(previous.start, selection.start) === 0 && comparePosition(previous.end, selection.end) === 0) selection.direction = previous.direction;
+				}
 				if (this.#reservedSelections !== void 0) this.#updateSelections([...this.#reservedSelections.filter((reservedSelection) => !selectionIntersects(reservedSelection, selection)), selection]);
 				else this.#updateSelections([selection]);
 			}, { passive: true }),
@@ -474,6 +502,7 @@ var Editor = class {
 		this.#selectEventDisposes = disposes;
 	}
 	#listenContentElement(contentEl, gutterEl) {
+		const { onFocus, onBlur } = this.#options;
 		const targetIsContentElement = (e) => {
 			const target = e.composedPath()[0];
 			return target !== void 0 && (target === contentEl || contentEl.contains(target));
@@ -482,10 +511,12 @@ var Editor = class {
 		this.#editorEventDisposes = [
 			addEventListener(contentEl, "focus", () => {
 				this.#contentHasFocus = true;
+				onFocus?.();
 				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;
+				onBlur?.();
 			}, { passive: true }),
 			addEventListener(contentEl, "pointerdown", (e) => {
 				this.#suppressNativeSelectionSync = false;
@@ -554,10 +585,16 @@ var Editor = class {
 					e.preventDefault();
 					return;
 				}
-				if (e.key === "v" && isPrimaryModifier(e) && this.#options.clipboard !== void 0) {
-					e.preventDefault();
-					queueRender(this.#handleCustomPasteEvent);
-					return;
+				if ((e.key.length === 1 ? e.key.toLowerCase() : e.key) === "v" && isPrimaryModifier(e)) {
+					if (e.repeat && this.#isDiff) {
+						e.preventDefault();
+						return;
+					}
+					if (this.#options.clipboard !== void 0) {
+						e.preventDefault();
+						queueRender(this.#handleCustomPasteEvent);
+						return;
+					}
 				}
 				if (this.#searchPanel !== void 0) {
 					const findAgain = resolveFindAgainShortcut(e);
@@ -721,6 +758,10 @@ var Editor = class {
 				}
 				break;
 			}
+			case "moveLineUp":
+			case "moveLineDown":
+				this.#moveSelectedLines(command === "moveLineUp" ? -1 : 1);
+				break;
 			case "indent":
 			case "outdent":
 				if (this.#selections !== void 0) {
@@ -834,6 +875,62 @@ var Editor = class {
 				break;
 		}
 	}
+	#moveSelectedLines(direction) {
+		const textDocument = this.#textDocument;
+		const selections = this.#selections;
+		if (textDocument === void 0 || selections === void 0) return;
+		const blocks = getSelectedLineBlocks(selections);
+		if (blocks.length === 0 || direction < 0 && blocks[0].startLine === 0 || direction > 0 && blocks.at(-1).endLine >= textDocument.lineCount - 1) return;
+		const lineCount = textDocument.lineCount;
+		const lineRangeEnd = (line) => line < lineCount - 1 ? {
+			line: line + 1,
+			character: 0
+		} : {
+			line,
+			character: textDocument.getLineLength(line)
+		};
+		const getLinesText = (lines, appendFinalLineBreak) => {
+			const text = lines.map((line) => textDocument.getLineText(line)).join(textDocument.eol);
+			return appendFinalLineBreak ? text + textDocument.eol : text;
+		};
+		const edits = [];
+		if (direction < 0) for (const block of blocks) {
+			const previousLine = block.startLine - 1;
+			const blockLines = [];
+			for (let line = block.startLine; line <= block.endLine; line++) blockLines.push(line);
+			edits.push({
+				range: {
+					start: {
+						line: previousLine,
+						character: 0
+					},
+					end: lineRangeEnd(block.endLine)
+				},
+				newText: getLinesText([...blockLines, previousLine], block.endLine < lineCount - 1)
+			});
+		}
+		else for (let index = blocks.length - 1; index >= 0; index--) {
+			const block = blocks[index];
+			const nextLine = block.endLine + 1;
+			const blockLines = [];
+			for (let line = block.startLine; line <= block.endLine; line++) blockLines.push(line);
+			edits.push({
+				range: {
+					start: {
+						line: block.startLine,
+						character: 0
+					},
+					end: lineRangeEnd(nextLine)
+				},
+				newText: getLinesText([nextLine, ...blockLines], nextLine < lineCount - 1)
+			});
+		}
+		const lastBlock = blocks.at(-1);
+		const lastLineLengthAfterMove = direction > 0 && lastBlock.endLine === lineCount - 2 ? textDocument.getLineLength(lastBlock.endLine) : textDocument.getLineLength(lineCount - 1);
+		const nextSelections = selections.map((selection) => shiftSelectionLines(selection, direction, lineCount, (line) => line === lineCount - 1 ? lastLineLengthAfterMove : textDocument.getLineLength(line)));
+		const change = textDocument.applyEdits(edits, true, selections, nextSelections, true);
+		if (change !== void 0) this.#applyChange(change, nextSelections);
+	}
 	#handleLayoutResize = () => {
 		const lineAnnotations = this.#lineAnnotations?.length ?? 0;
 		const prevGutterWidth = this.#gutterWidthCache;
@@ -1046,11 +1143,9 @@ var Editor = class {
 		}
 	}
 	#getScrollMargin() {
-		const componentTop = this.#fileInstance?.top ?? 0;
 		const top = this.#searchPanel !== void 0 ? 48 : 0;
 		const start = this.#getGutterWidth() + this.#metrics.ch;
-		const end = this.#metrics.ch;
-		return `${componentTop + top}px ${end}px 0 ${start}px`;
+		return `${top}px ${this.#metrics.ch}px 0 ${start}px`;
 	}
 	#scrollToLine(line, char = 0, noFocus = false) {
 		this.__postponeBgTokenizeToNextFrame();
@@ -1115,12 +1210,7 @@ var Editor = class {
 					block: "center",
 					inline: "nearest"
 				});
-				if (this.#scrollingToLine === line && yFix === 0) {
-					this.#scrollingToLine = void 0;
-					this.#scrollingToLineChar = void 0;
-					this.#scrollingToLineFixed = false;
-					this.#scrollingToLineNoFocus = false;
-				} else if (this.#scrollingToLine === line && this.#scrollingToLineFixed) {
+				if (this.#scrollingToLine === line && (yFix === 0 || this.#scrollingToLineFixed)) {
 					this.#scrollingToLine = void 0;
 					this.#scrollingToLineChar = void 0;
 					this.#scrollingToLineFixed = false;
@@ -1266,6 +1356,8 @@ var Editor = class {
 				if (!isCollapsedSelection(selection)) this.#renderSelection(renderCtx, "selection", selection);
 				this.#renderCaret(renderCtx, selection, selection === primarySelection);
 			}
+			const bracketMatchRanges = this.#options.matchBrackets !== false && this.#textDocument !== void 0 && this.#tokenizer !== void 0 && isCollapsedSelection(primarySelection) ? findBracketMatchRanges(this.#textDocument, this.#tokenizer, primarySelection.start) : void 0;
+			if (bracketMatchRanges !== void 0) for (const range of bracketMatchRanges) this.#renderSelection(renderCtx, "bracketMatch", range);
 		}
 		const textDocument = this.#textDocument;
 		if (this.#matches !== void 0 && textDocument !== void 0) {
@@ -1454,15 +1546,17 @@ var Editor = class {
 		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) {
+		const cleanup = () => {
 			this.#selectionAction?.cleanup();
 			this.#selectionAction = void 0;
+		};
+		if (this.#options.enabledSelectionAction !== true || renderSelectionAction === void 0 || primarySelection === void 0 || isCollapsedSelection(primarySelection) || this.#isContentMouseDown || overlayElement === void 0 || textDocument === void 0) {
+			cleanup();
 			return;
 		}
 		const head = getCaretPosition(primarySelection);
 		if (!this.#isLineVisible(head.line)) {
-			this.#selectionAction?.cleanup();
-			this.#selectionAction = void 0;
+			cleanup();
 			return;
 		}
 		if (this.#selectionAction === void 0) {
@@ -1478,18 +1572,56 @@ var Editor = class {
 					this.#replaceSelectionText(text, [getActiveSelection()]);
 				},
 				close: () => {
-					this.#selectionAction?.cleanup();
-					this.#selectionAction = void 0;
+					cleanup();
 					this.#scrollToPrimaryCaret();
 				}
 			});
-			this.#selectionAction = new SelectionActionWidget(head.line, selectionActionElement, overlayElement);
+			this.#selectionAction = new SelectionActionWidget(selectionActionElement, overlayElement, () => this.#updateSelectionActionPopover());
+			this.#getPopoverManager().resetPlacement();
 		}
-		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());
+		const isBackward = primarySelection.direction === -1;
+		const preferred = {
+			placeAbove: isBackward,
+			anchor: head
+		};
+		const fallback = isBackward ? {
+			placeAbove: false,
+			anchor: primarySelection.end
+		} : {
+			placeAbove: true,
+			anchor: primarySelection.start
+		};
+		const popoverHeight = this.#selectionAction.height;
+		const candidateGeometry = (candidate) => {
+			const [left, candidateWrapLine] = this.#getCharX(candidate.anchor.line, candidate.anchor.character);
+			const rowTop = this.#getLineY(candidate.anchor.line) + candidateWrapLine * lineHeight;
+			const anchorTop = candidate.placeAbove ? rowTop : rowTop + lineHeight;
+			const top = candidate.placeAbove ? anchorTop - popoverHeight : anchorTop;
+			return {
+				top,
+				bottom: top + popoverHeight,
+				left,
+				anchorTop
+			};
+		};
+		const preferredGeometry = candidateGeometry(preferred);
+		const fallbackGeometry = candidateGeometry(fallback);
+		const lineCount = textDocument.lineCount;
+		const atDocumentEdge = isBackward ? head.line < 3 : head.line >= lineCount - 3;
+		const canUseFallback = this.#isLineVisible(fallback.anchor.line);
+		const popoverManager = this.#getPopoverManager();
+		const useFallback = canUseFallback && popoverManager.choosePlacement({
+			preferred: preferredGeometry,
+			fallback: fallbackGeometry,
+			viewport: popoverManager.getPlacementBounds(),
+			popoverHeight,
+			atDocumentEdge
+		}) === "fallback";
+		if (!canUseFallback) popoverManager.setPlacement("preferred");
+		const { placeAbove } = useFallback ? fallback : preferred;
+		const { left, anchorTop } = useFallback ? fallbackGeometry : preferredGeometry;
+		this.#selectionAction.reposition(left, anchorTop, this.#getGutterWidth(), placeAbove);
 	}
 	#openSearchPanel(mode) {
 		if (this.#searchPanel !== void 0) {
@@ -1743,6 +1875,7 @@ var Editor = class {
 	#lineBackgroundColor(line) {
 		const lineElement = this.#getLineElement(line);
 		if (lineElement === void 0) return;
+		if (navigator.userAgent.includes("jsdom")) return;
 		const backgroundColor = getComputedStyle(lineElement, "::after").backgroundColor;
 		return backgroundColor === "" || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)" ? void 0 : backgroundColor;
 	}