@pierre/diffs 1.3.6 → 1.4.1

package/dist/components/CodeView.js

@@ -1,4 +1,7 @@
 import { DEFAULT_CODE_VIEW_FILE_METRICS, DEFAULT_CODE_VIEW_LAYOUT, DEFAULT_SMOOTH_SCROLL_SETTINGS, DEFAULT_THEMES, DIFFS_DEVELOPMENT_BUILD, DIFFS_TAG_NAME } from "../constants.js";
+import { getThemes } from "../utils/getThemes.js";
+import { areThemesAttached } from "../highlighter/themes/areThemesAttached.js";
+import { isHighlighterLoaded, preloadHighlighter } from "../highlighter/shared_highlighter.js";
 import { dequeueRender, queueRender } from "../managers/UniversalRenderingManager.js";
 import { areManagedSnapshotsEqual } from "../utils/areManagedSnapshotsEqual.js";
 import { areObjectsEqual } from "../utils/areObjectsEqual.js";
@@ -7,7 +10,6 @@ import { areOptionsEqual } from "../utils/areOptionsEqual.js";
 import { areSelectionsEqual } from "../utils/areSelectionsEqual.js";
 import { createCodeViewHeaderFooterHostElement } from "../utils/createCodeViewHeaderFooterHostElement.js";
 import { createWindowFromScrollPosition } from "../utils/createWindowFromScrollPosition.js";
-import { finishEditSessionForDiff } from "../utils/editSessionHunks.js";
 import { isStyleNode } from "../utils/isStyleNode.js";
 import { prefersReducedMotion } from "../utils/prefersReducedMotion.js";
 import { roundToDevicePixel } from "../utils/roundToDevicePixel.js";
@@ -198,6 +200,7 @@ var CodeView = class CodeView {
 	options;
 	workerManager;
 	isReadySubscription;
+	pendingHighlighterTheme;
 	isContainerManaged;
 	constructor(options = { theme: DEFAULT_THEMES }, workerManager, isContainerManaged = false) {
 		this.options = options;
@@ -402,13 +405,31 @@ var CodeView = class CodeView {
 		this.clearReadySubscription();
 		this.restoreScrollInteractions();
 		this.cleanAllRenderedItems();
-		for (const record of this.itemEditors.values()) record.editor.cleanUp();
+		const teardownSessions = [...this.itemEditors.values()].map((record) => {
+			const item = this.idToItem.get(record.state.id);
+			if (item != null) record.state.removedItem = item.item;
+			return {
+				record,
+				instance: item?.instance
+			};
+		});
 		this.itemEditors.clear();
 		this.attachedEditors.clear();
 		this.selectedLines = null;
 		this.items.length = 0;
 		this.idToItem.clear();
 		this.instanceToItem.clear();
+		let failed = false;
+		let failure;
+		for (const { record, instance } of teardownSessions) try {
+			record.editor.cleanUp("discard");
+			instance?.cleanUp();
+		} catch (error) {
+			if (!failed) {
+				failed = true;
+				failure = error;
+			}
+		}
 		this.layoutDirtyIndex = void 0;
 		this.pendingLayoutReset = void 0;
 		this.stickyContainer.textContent = "";
@@ -429,9 +450,17 @@ var CodeView = class CodeView {
 		this.heightDirty = true;
 		this.resetRenderState();
 		if (!this.isContainerManaged) this.flushSlotCoordinator();
+		if (failed) throw failure;
 	}
 	cleanUp() {
-		this.reset();
+		let resetFailed = false;
+		let resetFailure;
+		try {
+			this.reset();
+		} catch (error) {
+			resetFailed = true;
+			resetFailure = error;
+		}
 		this.clearElementPool();
 		this.restoreScrollInteractions();
 		this.workerManager?.unsubscribeToThemeChanges(this);
@@ -457,6 +486,7 @@ var CodeView = class CodeView {
 		this.footer.height = 0;
 		this.root = void 0;
 		this.container = void 0;
+		if (resetFailed) throw resetFailure;
 	}
 	cleanAllRenderedItems() {
 		if (this.renderState.firstIndex === -1) return;
@@ -585,7 +615,8 @@ var CodeView = class CodeView {
 	/**
 	* Get the live editor for an item currently in edit mode. Use this to drive
 	* editor APIs CodeView does not wrap (applyEdits, undo, setMarkers, …).
-	* Returns undefined once the item leaves edit mode.
+	* Returns undefined once the item's session ends (edit off or removal); a
+	* collapsed item keeps its suspended editor.
 	*/
 	getEditor(itemId) {
 		return this.itemEditors.get(itemId)?.editor;
@@ -628,7 +659,6 @@ var CodeView = class CodeView {
 		}
 		const editorRecord = this.itemEditors.get(oldId);
 		if (editorRecord != null) {
-			editorRecord.state.id = newId;
 			this.itemEditors.delete(oldId);
 			this.itemEditors.set(newId, editorRecord);
 			if (this.attachedEditors.delete(oldId)) this.attachedEditors.add(newId);
@@ -741,7 +771,8 @@ var CodeView = class CodeView {
 	}
 	isReady() {
 		const { workerManager } = this;
-		if (workerManager == null || workerManager.isInitialized() || workerManager.getStats().workersFailed) {
+		if (workerManager == null || workerManager.getStats().workersFailed) return this.isSharedHighlighterReady();
+		if (workerManager.isInitialized()) {
 			this.clearReadySubscription();
 			return true;
 		}
@@ -757,6 +788,36 @@ var CodeView = class CodeView {
 		if (this.isReadySubscription == null) return;
 		this.isReadySubscription();
 		this.isReadySubscription = void 0;
+		this.pendingHighlighterTheme = void 0;
+	}
+	isSharedHighlighterReady() {
+		const theme = this.workerManager?.getFileRenderOptions().theme ?? this.options.theme ?? DEFAULT_THEMES;
+		if (isHighlighterLoaded() && areThemesAttached(theme)) {
+			this.clearReadySubscription();
+			return true;
+		}
+		if (!areThemesEqual(this.pendingHighlighterTheme, theme)) this.clearReadySubscription();
+		this.isReadySubscription ??= (() => {
+			this.pendingHighlighterTheme = theme;
+			let cancelled = false;
+			preloadHighlighter({
+				themes: getThemes(theme),
+				langs: [],
+				preferredHighlighter: this.options.preferredHighlighter
+			}).then(() => {
+				if (cancelled) return;
+				this.clearReadySubscription();
+				this.render(true);
+			}, (error) => {
+				if (cancelled) return;
+				this.clearReadySubscription();
+				console.error(error);
+			});
+			return () => {
+				cancelled = true;
+			};
+		})();
+		return false;
 	}
 	instanceChanged(instance, layoutDirty) {
 		const item = this.instanceToItem.get(instance);
@@ -888,58 +949,63 @@ var CodeView = class CodeView {
 		return item.item.edit === true && item.item.collapsed !== true;
 	}
 	/**
-	* Attach (or lazily create) the editor for a mounted edit-mode item. Called
+	* Lazily create and attach the editor for a mounted edit-mode item. Called
 	* from the render loop so every mounted item passes through it: fresh
 	* mounts, remounts after virtualization released the item, and items whose
 	* edit flag was just turned on. Editors persist across unmounts, so a
-	* remounted item re-attaches its existing editor and resumes the retained
-	* document; the renderers keep the host's file/diff data in sync with the
-	* session so the remount paints the edited text.
+	* remounted item resumes its existing editor and retained document; the
+	* instance retains its private session model so the remount
+	* paints the edited text without changing the host input.
 	*/
 	attachItemEditor(item) {
 		const { id } = item.item;
 		const { createEditor } = this.options;
 		if (item.element == null || this.attachedEditors.has(id) || !this.isItemInEditMode(item)) return;
-		let record = this.itemEditors.get(id);
-		let createdEditor = false;
+		const record = this.itemEditors.get(id);
+		let createdEditor;
 		try {
 			if (record == null) {
 				assertEditorFactory(createEditor);
-				const state = { id };
-				const editor = createEditor({ onChange: (file, lineAnnotations) => {
+				const state = getItemOptionsState(item.instance.options);
+				if (state == null) throw new Error("CodeView.attachItemEditor: instance options are missing their state");
+				const onChange = (event) => {
 					const latest = this.idToItem.get(state.id);
 					if (latest == null) return;
-					state.lastChange = {
-						item: latest.item,
-						file,
-						lineAnnotations
-					};
-					this.options.onItemEditChange?.(latest.item, file, lineAnnotations);
-				} });
-				if (editor == null) return;
-				record = {
-					editor,
-					state
+					this.options.onItemEditChange?.(event, latest.item);
 				};
-				this.itemEditors.set(id, record);
-				createdEditor = true;
-			}
-			record.editor.edit(item.instance);
+				const editStateKey = this.options.getEditStateKey?.(item.item);
+				if (item.type === "diff") {
+					const editor = createEditor("file-diff", { onChange }, editStateKey);
+					createdEditor = editor;
+					this.itemEditors.set(id, {
+						editor,
+						state,
+						dispose: editor.edit(item.instance)
+					});
+				} else {
+					const editor = createEditor("file", { onChange }, editStateKey);
+					createdEditor = editor;
+					this.itemEditors.set(id, {
+						editor,
+						state,
+						dispose: editor.edit(item.instance)
+					});
+				}
+			} else if (item.type === "diff") record.dispose = record.editor.edit(item.instance);
+			else record.dispose = record.editor.edit(item.instance);
 			this.attachedEditors.add(id);
 		} catch (error) {
-			if (createdEditor && record != null) {
-				this.itemEditors.delete(id);
-				record.editor.cleanUp();
-			}
+			createdEditor?.cleanUp();
 			this.releaseRenderedItem(item);
 			throw error;
 		}
 	}
 	/**
-	* Drop editors for items that can no longer be edited: removed, edit turned
-	* off, or collapsed. Attachment happens in the render loop via
-	* attachItemEditor, so this only reconciles editors CodeView is already
-	* holding.
+	* Reconcile the editors CodeView is holding: complete sessions for items
+	* whose edit turned off or that were removed, and suspend sessions for
+	* collapsed items (the editor tears down, the record and the instance's
+	* session stay for the next expand). Attachment happens in the render loop
+	* via attachItemEditor.
 	*/
 	syncItemEditors(removedItems) {
 		if (this.itemEditors.size === 0) return;
@@ -947,25 +1013,77 @@ var CodeView = class CodeView {
 		for (const [id, record] of this.itemEditors) {
 			const item = this.idToItem.get(id);
 			const removedItem = removedItems?.get(id);
-			if (removedItem == null && item != null && this.isItemInEditMode(item)) continue;
-			record.editor.cleanUp();
+			if (removedItem == null && item != null) {
+				const { edit = false, collapsed = false } = item.item;
+				if (edit) {
+					if (collapsed && this.attachedEditors.delete(id)) record.editor.cleanUp("recycle");
+					continue;
+				}
+			} else if (removedItem != null) record.state.removedItem = removedItem.item;
 			this.itemEditors.delete(id);
 			this.attachedEditors.delete(id);
-			const { lastChange } = record.state;
-			const itemSnapshot = removedItem == null ? item?.item ?? lastChange?.item : lastChange?.item ?? removedItem.item;
-			if (itemSnapshot?.type === "diff") {
-				if (removedItem == null && item != null && item.type === "diff" && item.instance.completeEditSession()) {
-					this.markItemLayoutDirty(item);
-					this.render();
+			completions.push(record);
+		}
+		if (completions.length === 0) return;
+		let failed = false;
+		let failure;
+		for (const record of completions) {
+			try {
+				record.dispose();
+			} catch (error) {
+				if (!failed) {
+					failed = true;
+					failure = error;
 				}
-				finishEditSessionForDiff(itemSnapshot.fileDiff);
 			}
-			if (lastChange != null) completions.push(removedItem != null || item == null ? lastChange : {
-				...lastChange,
-				item: item.item
-			});
+			const item = this.idToItem.get(record.state.id);
+			if (item != null) this.markItemLayoutDirty(item);
 		}
-		for (const { item, file, lineAnnotations } of completions) this.options.onItemEditComplete?.(item, file, lineAnnotations);
+		this.render();
+		if (failed) throw failure;
+	}
+	requireItemFromState(state) {
+		const item = this.idToItem.get(state.id)?.item ?? state.removedItem;
+		if (item == null) throw new Error(`CodeView.onItemEditComplete: unknown item "${state.id}"`);
+		return item;
+	}
+	/**
+	* Item-instance `onEditComplete` adapter for file items: builds the
+	* accepted next item, hands it to `onItemEditComplete` alongside the event
+	* and the owning item, and translates the identity of the returned item to
+	* the component return contract.
+	*/
+	completeFileItemEdit(state, event) {
+		const item = this.requireItemFromState(state);
+		if (item.type !== "file") throw new Error(`CodeView.onItemEditComplete: item "${state.id}" is not a file item`);
+		const nextItem = {
+			...item,
+			file: event.file,
+			annotations: event.lineAnnotations,
+			edit: false,
+			version: (item.version ?? 0) + 1
+		};
+		if ((this.options.onItemEditComplete?.(event, item, nextItem) ?? "reject") === "reject") return "reject";
+		if (this.idToItem.has(item.id)) this.updateItem(nextItem);
+		return "accept";
+	}
+	/**
+	* Item-instance `onEditComplete` adapter for diff items; see
+	* completeFileItemEdit.
+	*/
+	completeDiffItemEdit(state, event) {
+		const item = this.requireItemFromState(state);
+		if (item.type !== "diff") throw new Error(`CodeView.onItemEditComplete: item "${state.id}" is not a diff item`);
+		const nextItem = {
+			...item,
+			fileDiff: event.fileDiff,
+			annotations: event.lineAnnotations,
+			edit: false,
+			version: (item.version ?? 0) + 1
+		};
+		if ((this.options.onItemEditComplete?.(event, item, nextItem) ?? "reject") === "reject") return "reject";
+		if (this.idToItem.has(item.id)) this.updateItem(nextItem);
+		return "accept";
 	}
 	renamePendingScrollTarget(oldId, newId) {
 		const { pendingScrollTarget } = this;
@@ -987,6 +1105,12 @@ var CodeView = class CodeView {
 			if (state == null) return;
 			return this.getItemOptions(state, "file")?.item.collapsed;
 		});
+		defineItemOption(prototype, "onEditComplete", (receiver) => {
+			if (this.options.onItemEditComplete == null) return;
+			const state = getItemOptionsState(receiver);
+			if (state == null) return;
+			return (event) => this.completeFileItemEdit(state, event);
+		});
 		for (const key of CODE_VIEW_SHARED_CALLBACK_KEYS) this.defineItemSharedCallback(prototype, "file", key);
 		for (const key of CODE_VIEW_SELECTION_CALLBACK_KEYS) this.defineItemSelectionCallback(prototype, "file", key);
 		return prototype;
@@ -1001,6 +1125,12 @@ var CodeView = class CodeView {
 			if (state == null) return;
 			return this.getItemOptions(state, "diff")?.item.collapsed;
 		});
+		defineItemOption(prototype, "onEditComplete", (receiver) => {
+			if (this.options.onItemEditComplete == null) return;
+			const state = getItemOptionsState(receiver);
+			if (state == null) return;
+			return (event) => this.completeDiffItemEdit(state, event);
+		});
 		for (const key of CODE_VIEW_SHARED_CALLBACK_KEYS) this.defineItemSharedCallback(prototype, "diff", key);
 		for (const key of CODE_VIEW_SELECTION_CALLBACK_KEYS) this.defineItemSelectionCallback(prototype, "diff", key);
 		return prototype;
@@ -1598,7 +1728,10 @@ var CodeView = class CodeView {
 	syncPagedScrollScaffolding(windowSpecs) {
 		this.syncContainerHeight();
 		const stickyBounds = this.getStickyBounds(windowSpecs);
-		if (stickyBounds == null) return;
+		if (stickyBounds == null) {
+			this.stickyOffset.style.height = `${this.getPagedLayoutTop(windowSpecs.top)}px`;
+			return;
+		}
 		this.applyStickyPositioning(stickyBounds);
 	}
 	reconcileRenderedItems(updatedItems) {
@@ -1910,11 +2043,8 @@ var CodeView = class CodeView {
 			const item = this.items[index];
 			if (item == null) throw new Error("CodeView.recomputeLayout: invalid item index");
 			item.top = runningTop;
-			if (item.type === "diff") {
-				const fileDiff = item.instance.consumeCodeViewLayoutChanges(item.item.fileDiff);
-				if (fileDiff != null) Object.assign(item.item.fileDiff, fileDiff);
-				item.height = item.instance.prepareCodeViewItem(item.item.fileDiff, runningTop, reset, item.item.annotations ?? []);
-			} else item.height = item.instance.prepareCodeViewItem(item.item.file, runningTop, reset, item.item.annotations ?? []);
+			if (item.type === "diff") item.height = item.instance.updateCodeViewLayout(item.item.fileDiff, runningTop, reset, item.item.annotations ?? []);
+			else item.height = item.instance.updateCodeViewLayout(item.item.file, runningTop, reset, item.item.annotations ?? []);
 			runningTop += item.height;
 			if (index < this.items.length - 1) runningTop += layout.gap;
 		}
@@ -1935,8 +2065,8 @@ var CodeView = class CodeView {
 };
 function prepareItemInstance(item) {
 	item.instance.cleanUp(true);
-	if (item.type === "diff") return item.instance.prepareCodeViewItem(item.item.fileDiff, item.top, void 0, item.item.annotations ?? []);
-	else return item.instance.prepareCodeViewItem(item.item.file, item.top, void 0, item.item.annotations ?? []);
+	if (item.type === "diff") return item.instance.updateCodeViewLayout(item.item.fileDiff, item.top, void 0, item.item.annotations ?? []);
+	else return item.instance.updateCodeViewLayout(item.item.file, item.top, void 0, item.item.annotations ?? []);
 }
 function shouldClearPool(previousOptions, nextOptions) {
 	return !areThemesEqual(previousOptions.theme ?? DEFAULT_THEMES, nextOptions.theme ?? DEFAULT_THEMES) || (previousOptions.themeType ?? "system") !== (nextOptions.themeType ?? "system") || previousOptions.unsafeCSS !== nextOptions.unsafeCSS;