@pierre/diffs 1.1.7 → 1.1.9

package/dist/managers/InteractionManager.js

@@ -6,6 +6,7 @@ import { toHtml } from "hast-util-to-html";
 //#region src/managers/InteractionManager.ts
 var InteractionManager = class {
 	hoveredLine;
+	hoveredToken;
 	pre;
 	gutterUtilityContainer;
 	gutterUtilityButton;
@@ -39,6 +40,7 @@ var InteractionManager = class {
 		this.gutterUtilityButton = void 0;
 		this.gutterUtilitySlot = void 0;
 		this.clearHoveredLine();
+		this.clearHoveredToken();
 		this.detachDocumentPointerListeners();
 		this.clearPointerSession();
 		if (this.queuedSelectionRender != null) {
@@ -97,8 +99,8 @@ var InteractionManager = class {
 		}
 	};
 	handlePointerClick = (event) => {
-		const { onHunkExpand, onLineClick, onLineNumberClick, onMergeConflictActionClick } = this.options;
-		if (onHunkExpand == null && onLineClick == null && onLineNumberClick == null && onMergeConflictActionClick == null) return;
+		const { onHunkExpand, onLineClick, onLineNumberClick, onTokenClick, onMergeConflictActionClick } = this.options;
+		if (onHunkExpand == null && onLineClick == null && onLineNumberClick == null && onMergeConflictActionClick == null && onTokenClick == null) return;
 		if (this.options.onGutterUtilityClick != null && isGutterUtilityPointerPath(event.composedPath())) return;
 		debugLogIfEnabled(this.options.__debugPointerEvents, "click", "FileDiff.DEBUG.handlePointerClick:", event);
 		this.handlePointerEvent({
@@ -107,8 +109,8 @@ var InteractionManager = class {
 		});
 	};
 	handlePointerMove = (event) => {
-		const { lineHoverHighlight = "disabled", onLineEnter, onLineLeave, enableGutterUtility = false } = this.options;
-		if (lineHoverHighlight === "disabled" && !enableGutterUtility && onLineEnter == null && onLineLeave == null) return;
+		const { lineHoverHighlight = "disabled", onLineEnter, onLineLeave, onTokenEnter, onTokenLeave, enableGutterUtility = false } = this.options;
+		if (lineHoverHighlight === "disabled" && !enableGutterUtility && onLineEnter == null && onLineLeave == null && onTokenEnter == null && onTokenLeave == null) return;
 		debugLogIfEnabled(this.options.__debugPointerEvents, "move", "FileDiff.DEBUG.handlePointerMove:", event);
 		this.handlePointerEvent({
 			eventType: "move",
@@ -118,16 +120,22 @@ var InteractionManager = class {
 	handlePointerLeave = (event) => {
 		const { __debugPointerEvents } = this.options;
 		debugLogIfEnabled(__debugPointerEvents, "move", "FileDiff.DEBUG.handlePointerLeave: no event");
-		if (this.hoveredLine == null) {
-			debugLogIfEnabled(__debugPointerEvents, "move", "FileDiff.DEBUG.handlePointerLeave: returned early, no .hoveredLine");
+		if (this.hoveredLine == null && this.hoveredToken == null) {
+			debugLogIfEnabled(__debugPointerEvents, "move", "FileDiff.DEBUG.handlePointerLeave: returned early, no hovered line or token");
 			return;
 		}
 		this.gutterUtilityContainer?.remove();
-		this.options.onLineLeave?.({
-			...this.hoveredLine,
-			event
-		});
-		this.clearHoveredLine();
+		if (this.hoveredToken != null) {
+			this.options.onTokenLeave?.(this.hoveredToken, event);
+			this.clearHoveredToken();
+		}
+		if (this.hoveredLine != null) {
+			this.options.onLineLeave?.({
+				...this.hoveredLine,
+				event
+			});
+			this.clearHoveredLine();
+		}
 	};
 	handlePointerEvent({ eventType, event }) {
 		const { __debugPointerEvents } = this.options;
@@ -138,27 +146,40 @@ var InteractionManager = class {
 		});
 		const target = this.resolvePointerTarget(composedPath);
 		debugLogIfEnabled(__debugPointerEvents, eventType, "FileDiff.DEBUG.handlePointerEvent: resolvePointerTarget result:", target);
-		const { onLineClick, onLineNumberClick, onLineEnter, onLineLeave, onHunkExpand, onMergeConflictActionClick } = this.options;
+		const { onLineClick, onLineNumberClick, onLineEnter, onLineLeave, onTokenClick, onTokenEnter, onTokenLeave, onHunkExpand, onMergeConflictActionClick } = this.options;
 		switch (eventType) {
-			case "move":
-				if (isLinePointerTarget(target) && this.hoveredLine?.lineElement === target.lineElement) break;
-				if (this.hoveredLine != null) {
-					this.gutterUtilityContainer?.remove();
-					onLineLeave?.({
-						...this.hoveredLine,
-						event
-					});
-					this.clearHoveredLine();
+			case "move": {
+				const sameLine = isHoverableLinePointerTarget(target) && this.hoveredLine?.lineElement === target.lineElement;
+				if (!(isTokenPointerTarget(target) && this.hoveredToken?.tokenElement === target.tokenElement)) {
+					if (this.hoveredToken != null) {
+						onTokenLeave?.(this.hoveredToken, event);
+						this.clearHoveredToken();
+					}
+					if (isTokenPointerTarget(target)) {
+						this.setHoveredToken(this.toTokenEventBaseProps(target));
+						onTokenEnter?.(this.hoveredToken, event);
+					}
 				}
-				if (isLinePointerTarget(target)) {
-					this.setHoveredLine(this.toEventBaseProps(target));
-					if (this.gutterUtilityContainer != null) target.numberElement.appendChild(this.gutterUtilityContainer);
-					onLineEnter?.({
-						...this.hoveredLine,
-						event
-					});
+				if (!sameLine) {
+					if (this.hoveredLine != null) {
+						this.gutterUtilityContainer?.remove();
+						onLineLeave?.({
+							...this.hoveredLine,
+							event
+						});
+						this.clearHoveredLine();
+					}
+					if (isHoverableLinePointerTarget(target)) {
+						this.setHoveredLine(this.toEventBaseProps(target));
+						if (this.gutterUtilityContainer != null) target.numberElement.appendChild(this.gutterUtilityContainer);
+						onLineEnter?.({
+							...this.hoveredLine,
+							event
+						});
+					}
 				}
 				break;
+			}
 			case "click": {
 				if (target == null) break;
 				if (isMergeConflictActionPointerTarget(target) && onMergeConflictActionClick != null) {
@@ -169,7 +190,8 @@ var InteractionManager = class {
 					onHunkExpand(target.hunkIndex, event.shiftKey ? "both" : target.direction, event.shiftKey ? Number.POSITIVE_INFINITY : void 0);
 					break;
 				}
-				if (!isLinePointerTarget(target)) break;
+				if (!isHoverableLinePointerTarget(target)) break;
+				if (isTokenPointerTarget(target) && onTokenClick != null) onTokenClick(this.toTokenEventBaseProps(target), event);
 				const eventBase = this.toEventBaseProps(target);
 				if (onLineNumberClick != null && target.numberColumn) onLineNumberClick({
 					...eventBase,
@@ -184,9 +206,9 @@ var InteractionManager = class {
 		}
 	}
 	syncPointerListeners(pre) {
-		const { __debugPointerEvents, lineHoverHighlight = "disabled", onLineClick, onLineNumberClick, onLineEnter, onLineLeave, onHunkExpand, onMergeConflictActionClick, enableGutterUtility = false, enableLineSelection = false, onGutterUtilityClick } = this.options;
+		const { __debugPointerEvents, lineHoverHighlight = "disabled", onLineClick, onLineNumberClick, onLineEnter, onLineLeave, onTokenClick, onTokenEnter, onTokenLeave, onHunkExpand, onMergeConflictActionClick, enableGutterUtility = false, enableLineSelection = false, onGutterUtilityClick } = this.options;
 		const enableGutterSelection = onGutterUtilityClick != null;
-		const shouldAttachPointerListeners = lineHoverHighlight !== "disabled" || onLineClick != null || onLineNumberClick != null || onHunkExpand != null || onMergeConflictActionClick != null || onLineEnter != null || onLineLeave != null || enableGutterUtility || enableLineSelection || enableGutterSelection;
+		const shouldAttachPointerListeners = lineHoverHighlight !== "disabled" || onLineClick != null || onLineNumberClick != null || onLineEnter != null || onLineLeave != null || onTokenClick != null || onTokenEnter != null || onTokenLeave != null || onHunkExpand != null || onMergeConflictActionClick != null || enableGutterUtility || enableLineSelection || enableGutterSelection;
 		if (shouldAttachPointerListeners && !this.hasPointerListeners) {
 			pre.addEventListener("click", this.handlePointerClick);
 			pre.addEventListener("pointerdown", this.handlePointerDown);
@@ -432,6 +454,14 @@ var InteractionManager = class {
 			if (lineHoverHighlight === "both" || lineHoverHighlight === "number") this.hoveredLine.numberElement.setAttribute("data-hovered", "");
 		}
 	}
+	clearHoveredToken() {
+		if (this.hoveredToken == null) return;
+		this.hoveredToken = void 0;
+	}
+	setHoveredToken(hoveredToken) {
+		if (this.hoveredToken != null) this.clearHoveredToken();
+		this.hoveredToken = hoveredToken;
+	}
 	ensureGutterUtilityNode(useCustomGutterUtility) {
 		if (this.gutterUtilityContainer == null) {
 			this.gutterUtilityContainer = document.createElement("div");
@@ -611,6 +641,25 @@ var InteractionManager = class {
 			numberColumn: target.numberColumn
 		};
 	}
+	toTokenEventBaseProps({ lineCharEnd, lineCharStart, lineNumber, side, tokenElement, tokenText }) {
+		if (this.mode === "file") return {
+			type: "token",
+			lineCharEnd,
+			lineCharStart,
+			lineNumber,
+			tokenElement,
+			tokenText
+		};
+		return {
+			type: "token",
+			lineCharEnd,
+			lineCharStart,
+			lineNumber,
+			side,
+			tokenElement,
+			tokenText
+		};
+	}
 	buildSelectedLineRange(anchor, current) {
 		return this.buildSelectionRange(anchor.lineNumber, current.lineNumber, anchor.side, current.side);
 	}
@@ -629,6 +678,8 @@ var InteractionManager = class {
 		let lineElement;
 		let lineIndexValue;
 		let numberElement;
+		let tokenElement;
+		let tokenInfo;
 		let expandInfo;
 		let lineNumber;
 		let mergeConflictActionTarget;
@@ -644,6 +695,24 @@ var InteractionManager = class {
 					conflictIndex
 				};
 			}
+			if (tokenElement == null && element.hasAttribute("data-char")) {
+				tokenElement = element;
+				const startAttr = element.getAttribute("data-char");
+				if (startAttr != null) {
+					const lineCharStart = Number.parseInt(startAttr, 10);
+					if (!Number.isNaN(lineCharStart)) {
+						const tokenText = element.textContent ?? "";
+						const lineCharEnd = lineCharStart + tokenText.length;
+						if (tokenText.trim() !== "" || this.options.enableTokenInteractionsOnWhitespace === true) tokenInfo = {
+							tokenElement,
+							lineCharStart,
+							lineCharEnd,
+							tokenText
+						};
+						continue;
+					}
+				}
+			}
 			const columnNumber = numberElement == null ? element.getAttribute("data-column-number") ?? void 0 : void 0;
 			if (columnNumber != null) {
 				numberElement = element;
@@ -693,6 +762,30 @@ var InteractionManager = class {
 		numberElement ??= lineIndexValue != null ? queryHTMLElement(codeElement, `[data-column-number][data-line-index="${lineIndexValue}"]`) : void 0;
 		if (codeElement == null || lineElement == null || numberElement == null || lineType == null || lineNumber == null || Number.isNaN(lineNumber)) return;
 		const splitLineIndex = this.parseLineIndex(lineElement, this.isSplitDiff());
+		if (tokenInfo != null) {
+			if (this.mode === "file") return {
+				kind: "token",
+				lineType,
+				lineElement,
+				lineNumber,
+				numberColumn,
+				numberElement,
+				side: void 0,
+				splitLineIndex,
+				...tokenInfo
+			};
+			return {
+				kind: "token",
+				lineType,
+				lineElement,
+				lineNumber,
+				numberColumn,
+				numberElement,
+				side: getAnnotationSide(lineType, codeElement),
+				splitLineIndex,
+				...tokenInfo
+			};
+		}
 		if (this.mode === "file") return {
 			kind: "line",
 			lineType,
@@ -703,13 +796,6 @@ var InteractionManager = class {
 			side: void 0,
 			splitLineIndex
 		};
-		const annotationSide = (() => {
-			switch (lineType) {
-				case "change-deletion": return "deletions";
-				case "change-addition": return "additions";
-				default: return codeElement.hasAttribute("data-deletions") ? "deletions" : "additions";
-			}
-		})();
 		return {
 			kind: "line",
 			lineType,
@@ -717,7 +803,7 @@ var InteractionManager = class {
 			lineNumber,
 			numberColumn,
 			numberElement,
-			side: annotationSide,
+			side: getAnnotationSide(lineType, codeElement),
 			splitLineIndex
 		};
 	}
@@ -730,8 +816,9 @@ var InteractionManager = class {
 		if (!split) return lineIndexes[0];
 	}
 };
-function pluckInteractionOptions({ enableGutterUtility, enableHoverUtility, lineHoverHighlight, onGutterUtilityClick, onLineClick, onLineEnter, onLineLeave, onLineNumberClick, renderGutterUtility, renderHoverUtility, __debugPointerEvents, enableLineSelection, onLineSelected, onLineSelectionStart, onLineSelectionChange, onLineSelectionEnd }, onHunkExpand, getLineIndex, onMergeConflictActionClick) {
+function pluckInteractionOptions({ enableTokenInteractionsOnWhitespace, enableGutterUtility, enableHoverUtility, lineHoverHighlight, onGutterUtilityClick, onLineClick, onLineEnter, onLineLeave, onLineNumberClick, onTokenClick, onTokenEnter, onTokenLeave, renderGutterUtility, renderHoverUtility, __debugPointerEvents, enableLineSelection, onLineSelected, onLineSelectionStart, onLineSelectionChange, onLineSelectionEnd }, onHunkExpand, getLineIndex, onMergeConflictActionClick) {
 	return {
+		enableTokenInteractionsOnWhitespace,
 		enableGutterUtility: resolveEnableGutterUtilityOption({
 			enableGutterUtility,
 			enableHoverUtility,
@@ -748,6 +835,9 @@ function pluckInteractionOptions({ enableGutterUtility, enableHoverUtility, line
 		onLineEnter,
 		onLineLeave,
 		onLineNumberClick,
+		onTokenClick,
+		onTokenEnter,
+		onTokenLeave,
 		__debugPointerEvents,
 		enableLineSelection,
 		onLineSelected,
@@ -766,6 +856,12 @@ function resolveEnableGutterUtilityOption({ enableGutterUtility, enableHoverUtil
 function isLinePointerTarget(target) {
 	return target != null && "kind" in target && target.kind === "line";
 }
+function isTokenPointerTarget(target) {
+	return target != null && "kind" in target && target.kind === "token";
+}
+function isHoverableLinePointerTarget(target) {
+	return isLinePointerTarget(target) || isTokenPointerTarget(target);
+}
 function isExpandoPointerTarget(target) {
 	return "type" in target && target.type === "line-info";
 }
@@ -779,6 +875,13 @@ function queryHTMLElement(parent, query) {
 	const element = parent?.querySelector(query);
 	return element instanceof HTMLElement ? element : void 0;
 }
+function getAnnotationSide(lineType, codeElement) {
+	switch (lineType) {
+		case "change-deletion": return "deletions";
+		case "change-addition": return "additions";
+		default: return codeElement.hasAttribute("data-deletions") ? "deletions" : "additions";
+	}
+}
 function getLineTypeFromElement(element) {
 	const lineType = element.getAttribute("data-line-type");
 	if (lineType == null) return;