@nkzw/codiff-core 1.13.0 → 1.14.0

package/dist/app/hooks/useCodeViewAnnotations.d.ts

@@ -0,0 +1,3 @@
+import type { LineAnnotation } from '@pierre/diffs';
+import type { ReviewAnnotationMetadata } from '../../lib/app-types.ts';
+export declare function useCodeViewAnnotations(): (id: string, key: string, annotations: Array<LineAnnotation<ReviewAnnotationMetadata>>) => LineAnnotation<ReviewAnnotationMetadata>[];

package/dist/app/hooks/useCodeViewPlaceholderFile.d.ts

@@ -0,0 +1,2 @@
+import type { FileContents } from '@pierre/diffs';
+export declare function useCodeViewPlaceholderFile(): (name: string, contents?: '' | ' ') => FileContents;

package/dist/lib/app-types.d.ts

@@ -31,7 +31,7 @@ type WalkthroughHeaderAnnotationMetadata = {
     type: 'walkthrough-header';
 };
 export type ReviewAnnotationMetadata = CodeQualityAnnotationMetadata | ImagePreviewAnnotationMetadata | MarkdownPreviewAnnotationMetadata | ReviewCommentAnnotationMetadata | WalkthroughHeaderAnnotationMetadata;
-export type CodeViewInstance = NonNullable<ReturnType<CodeViewHandle<ReviewAnnotationMetadata>['getInstance']>>;
+export type CodeViewInstance = NonNullable<ReturnType<CodeViewHandle<ReviewAnnotationMetadata, undefined>['getInstance']>>;
 export type DiffSearchMatch = {
     filePath: string;
     itemId: string;

package/dist/lib/identifier-navigation.d.ts

@@ -3,6 +3,7 @@ export type IdentifierAtOffset = {
     start: number;
 };
 export declare const isNavigableIdentifierToken: (text: string) => boolean;
+export declare const clearIdentifierNavigationWrappers: (root: ParentNode) => void;
 export declare const applyIdentifierNavigationState: (renderedItems: ReadonlyArray<{
     element: HTMLElement;
 }>, active: boolean) => void;

package/dist/lib/review-comments.d.ts

@@ -29,5 +29,6 @@ export declare const getCommentKey: (comment: Pick<ReviewComment, 'anchor' | 'li
 export declare const getReviewCommentsDigest: (comments: ReadonlyArray<ReviewComment>) => string;
 export declare const buildReviewCommentsMarkdown: (files: ReadonlyArray<ChangedFile>, comments: ReadonlyArray<ReviewComment>, showWhitespace: boolean, prefix?: string) => string;
 export declare const getReviewCommentsFromState: (state: RepositoryState) => ReadonlyArray<ReviewComment>;
+export declare const getRefreshedReviewComments: (state: RepositoryState, currentComments: ReadonlyArray<ReviewComment>) => ReadonlyArray<ReviewComment>;
 export declare const getVisibleReviewComments: (comments: ReadonlyArray<ReviewComment>, showOutdated: boolean) => ReadonlyArray<ReviewComment>;
 export declare const shouldDiscardReviewCommentOnEscape: (body: string, confirmDiscard?: (message: string) => boolean) => boolean;

package/dist/react.mjs

@@ -1505,7 +1505,7 @@ const parseSectionDiffWithOptions = (file, section, showWhitespace) => {
 	}
 	else if (section.patch.trim().length === 0) fileDiff = createEmptyFileDiff(file, section);
 	else {
-		const parsedFileDiff = parsePatchFiles(section.patch)[0]?.files[0];
+		const parsedFileDiff = parsePatchFiles(section.patch, cacheKey)[0]?.files[0];
 		if (parsedFileDiff) {
 			const loaded = parsedFileDiff.isPartial ? getLoadedSectionContents(file, section) : void 0;
 			let hydrated = null;
@@ -3887,11 +3887,10 @@ const wrapIdentifierNavigationText = (root) => {
 };
 const applyIdentifierNavigationState = (renderedItems, active) => {
 	for (const { element } of renderedItems) {
-		element.toggleAttribute(definitionModifierAttribute, active);
 		const root = element.shadowRoot;
-		if (!root) continue;
-		clearIdentifierNavigationWrappers(root);
-		if (active) wrapIdentifierNavigationText(root);
+		const enabled = active && !hasActiveTextSelection(root);
+		element.toggleAttribute(definitionModifierAttribute, enabled);
+		if (root && enabled) wrapIdentifierNavigationText(root);
 	}
 };
 const getIdentifierAtOffset = (text, offset) => {
@@ -4039,6 +4038,7 @@ const highlightTextContainer = (container, normalizedQuery, activeMatch) => {
 const applySearchHighlights = (renderedItems, query, activeMatch) => {
 	const normalizedQuery = query.trim().toLowerCase();
 	for (const { element, id } of renderedItems) for (const root of getSearchableRoots(element)) {
+		if (normalizedQuery) clearIdentifierNavigationWrappers(root);
 		clearSearchHighlights(root);
 		if (!normalizedQuery) continue;
 		const matchForItem = activeMatch && activeMatch.itemId === id ? activeMatch : null;
@@ -4052,6 +4052,45 @@ const getSourceKey = (source) => source.type === "commit" ? `commit:${source.ref
 const getShortRef = (ref) => ref.slice(0, 7);
 const getSourceLabel = (source) => source.type === "commit" ? getShortRef(source.ref) : source.type === "branch" || source.type === "branch-diff" ? `Branch vs ${source.ref}` : source.type === "branch-working-tree" ? `Local + branch vs ${source.ref}` : source.type === "range" ? rangeLabel(source) : source.type === "pull-request" ? source.number ? `${source.provider === "gitlab" ? "MR" : "PR"} #${source.number}` : source.provider === "gitlab" ? "Merge request" : "Pull request" : "Uncommitted";
 //#endregion
+//#region app/hooks/useCodeViewAnnotations.ts
+function useCodeViewAnnotations() {
+	const [getAnnotations] = useState(() => {
+		const cache = /* @__PURE__ */ new Map();
+		return (id, key, annotations) => {
+			const previous = cache.get(id);
+			if (previous?.key === key) return previous.annotations;
+			cache.set(id, {
+				annotations,
+				key
+			});
+			return annotations;
+		};
+	});
+	return getAnnotations;
+}
+//#endregion
+//#region app/hooks/useCodeViewPlaceholderFile.ts
+function useCodeViewPlaceholderFile() {
+	const [getPlaceholderFile] = useState(() => {
+		const files = /* @__PURE__ */ new Map();
+		return (name, contents = " ") => {
+			const cacheKey = `placeholder:${contents.length}:${name}`;
+			let file = files.get(cacheKey);
+			if (!file) {
+				file = {
+					cacheKey,
+					contents,
+					lang: "text",
+					name
+				};
+				files.set(cacheKey, file);
+			}
+			return file;
+		};
+	});
+	return getPlaceholderFile;
+}
+//#endregion
 //#region app/components/DefinitionPopover.tsx
 function DefinitionPopover({ anchor, getDestination, identifier, onClose, onOpen, result }) {
 	const popoverRef = useRef(null);
@@ -5223,28 +5262,48 @@ const formatBytes = (size) => {
 	}
 	return `${size} B`;
 };
-function MarkdownPreview({ contents, editable, layoutKey, onEditorRef, onLayoutReady, path, sectionId }) {
-	useLayoutEffect(() => {
-		onLayoutReady(sectionId);
+function MarkdownPreview({ cacheKey, contents, editable, heightCache, onEditorRef, onLayoutReady, path, sectionId }) {
+	const contentRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	const measure = useCallback((reportedHeight) => {
+		const content = contentRef.current;
+		if (!content?.isConnected || content.querySelector(".codiff-markdown-editor-message:not(.error), .codiff-readonly-markdown-loading")) return;
+		const height = content.getBoundingClientRect().height || reportedHeight;
+		if (height == null || height <= 0) return;
+		setReady(true);
+		if (heightCache.get(cacheKey) !== height) {
+			heightCache.set(cacheKey, height);
+			onLayoutReady(sectionId);
+		}
 	}, [
-		layoutKey,
+		cacheKey,
+		heightCache,
 		onLayoutReady,
 		sectionId
 	]);
-	return editable ? /* @__PURE__ */ jsx("div", {
-		className: "codiff-markdown-preview editable",
-		children: /* @__PURE__ */ jsx(RepositoryMarkdownEditor, {
-			onHeightChange: () => onLayoutReady(sectionId),
-			path,
-			ref: (editor) => onEditorRef(sectionId, editor)
-		})
-	}) : /* @__PURE__ */ jsx("div", {
-		className: "codiff-markdown-preview",
-		children: /* @__PURE__ */ jsx(ReadOnlyMarkdown, {
-			ariaLabel: `Preview ${path}`,
-			className: "codiff-markdown-preview-editor",
-			onHeightChange: () => onLayoutReady(sectionId),
-			value: contents
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(content);
+		measure();
+		return () => observer.disconnect();
+	}, [measure]);
+	return /* @__PURE__ */ jsx("div", {
+		style: { minHeight: ready ? void 0 : heightCache.get(cacheKey) },
+		children: /* @__PURE__ */ jsx("div", {
+			className: `codiff-markdown-preview${editable ? " editable" : ""}`,
+			ref: contentRef,
+			children: editable ? /* @__PURE__ */ jsx(RepositoryMarkdownEditor, {
+				onHeightChange: measure,
+				path,
+				ref: (editor) => onEditorRef(sectionId, editor)
+			}) : /* @__PURE__ */ jsx(ReadOnlyMarkdown, {
+				ariaLabel: `Preview ${path}`,
+				className: "codiff-markdown-preview-editor",
+				onHeightChange: measure,
+				value: contents
+			})
 		})
 	});
 }
@@ -6644,6 +6703,9 @@ const getHunkSelectionRange = (hunk) => {
 const isSameSelection = (a, b) => a.start === b.start && a.end === b.end && a.side === b.side;
 function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedToggle = false, blocks, bottomInset = codeViewLayout.paddingBottom, codeQualityFindings = [], collapsed, comments, commitMetadata, diffLineHeight = 20, diffStyle, disableWorkerPool = false, expandedReviewKeys = emptyExpandedReviewKeys, files, focusCommentId, focusCommentRequest, forceExpandedPaths, gitIdentity, hunkNavigation, initialMarkdownPreviewSectionIds = emptyMarkdownPreviewSectionIds, isReadOnly = false, itemVersionByKey, keymap, loadingSectionIds, onActiveBlockChange, onAskCodex, onCommentDraftChange, onCreateComment, onDeleteComment, onFindDefinitions, onLoadImageContent, onLoadSection, onLoadSectionContents, onOpenDefinition, onOpenFile, onRefreshMarkdown, onResolveThread = noopResolveThread, onSaveCommentEdit, onSelectPathFromScroll, onSubmitComment, onToggleCollapsed, onToggleViewed, onUpdateComment, onUpdateSourceDescription, onUpdateSourceTitle, onUploadSourceDescriptionAsset, reviewIdentityByPath, scrollTarget, searchQuery, selectedPath, showSourceDescription = true, showWhitespace, source, sourceDescriptionActions, sourceDescriptionFooter, supportsReviewCommentActions, theme = "system", viewed, walkthroughNotes, wordWrap }) {
 	const codeViewRef = useRef(null);
+	const getPlaceholderFile = useCodeViewPlaceholderFile();
+	const getAnnotations = useCodeViewAnnotations();
+	const [markdownPreviewHeights] = useState(() => /* @__PURE__ */ new Map());
 	const markdownEditorRefs = useRef(/* @__PURE__ */ new Map());
 	const refreshingMarkdownSectionsRef = useRef(/* @__PURE__ */ new Set());
 	const deferredTimersRef = useRef(/* @__PURE__ */ new Set());
@@ -6751,12 +6813,7 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 						}
 					}],
 					collapsed: false,
-					file: {
-						cacheKey: `walkthrough-header:${block.id}`,
-						contents: " ",
-						lang: "text",
-						name: headerId
-					},
+					file: getPlaceholderFile(headerId),
 					id: headerId,
 					type: "file",
 					version: getItemVersion(`${block.id}:walkthrough-header`)
@@ -6861,12 +6918,7 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 							}
 						}],
 						collapsed: isCollapsed,
-						file: {
-							cacheKey: `image-preview:${file.fingerprint}:${section.id}`,
-							contents: " ",
-							lang: "text",
-							name: file.path
-						},
+						file: getPlaceholderFile(file.path),
 						id,
 						type: "file",
 						version: getItemVersion(`${reviewVersionPrefix}:image:${sectionStateVersionKey}:${imagePreviewLayoutPassBySection[section.id] ?? 0}`)
@@ -6877,7 +6929,12 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 					const markdownPreviewAddedLinesDigest = getAddedLinesDigest(markdownPreview.addedLines);
 					const markdownPreviewLayoutKey = `${section.id}:${markdownPreview.contents.length}:${markdownPreviewAddedLinesDigest}`;
 					nextItems.push({
-						annotations: [...fileCommentAnnotations, {
+						annotations: getAnnotations(id, JSON.stringify([
+							markdownPreview.contents,
+							markdownPreviewAddedLinesDigest,
+							canEditMarkdown,
+							fileCommentAnnotations
+						]), [...fileCommentAnnotations, {
 							lineNumber: 1,
 							metadata: {
 								addedLines: markdownPreview.addedLines,
@@ -6888,14 +6945,9 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 								sectionId: section.id,
 								type: "markdown-preview"
 							}
-						}],
+						}]),
 						collapsed: isCollapsed,
-						file: {
-							cacheKey: `markdown-preview:${section.newFile?.cacheKey ?? file.fingerprint}:${markdownPreview.contents.length}:${markdownPreviewAddedLinesDigest}`,
-							contents: " ",
-							lang: "text",
-							name: file.path
-						},
+						file: getPlaceholderFile(file.path),
 						id,
 						type: "file",
 						version: getItemVersion(`${reviewVersionPrefix}:markdown:${sectionStateVersionKey}:${markdownPreviewLayoutKey}:${markdownPreviewLayoutPassBySection[section.id] ?? 0}`)
@@ -6931,6 +6983,8 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		diffStyle,
 		expandedReviewKeys,
 		forceExpandedPaths,
+		getAnnotations,
+		getPlaceholderFile,
 		imagePreviewLayoutPassBySection,
 		isReadOnly,
 		itemVersionByKey,
@@ -6949,16 +7003,12 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		if (items.length > 0 || !sourceDescriptionItemId) return items;
 		return [{
 			collapsed: true,
-			file: {
-				cacheKey: sourceDescriptionItemId,
-				contents: "",
-				lang: "text",
-				name: shouldShowCommitMessage ? "commit-message.md" : "source-description.md"
-			},
+			file: getPlaceholderFile(shouldShowCommitMessage ? "commit-message.md" : "source-description.md", ""),
 			id: sourceDescriptionItemId,
 			type: "file"
 		}];
 	}, [
+		getPlaceholderFile,
 		items,
 		shouldShowCommitMessage,
 		sourceDescriptionItemId
@@ -7621,30 +7671,44 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 	]);
 	useEffect(() => {
 		if (!onFindDefinitions) return;
+		let pointerDown = false;
 		const updateDefinitionModifierState = (active) => {
 			if (definitionModifierActiveRef.current === active) return;
 			definitionModifierActiveRef.current = active;
 			updateRenderedIdentifierNavigation(active);
 		};
 		const handleModifierChange = (event) => {
-			updateDefinitionModifierState(isPrimaryModifier(event));
+			updateDefinitionModifierState(isPrimaryModifier(event) && !pointerDown);
 		};
 		const handleModifierPointer = (event) => {
-			updateDefinitionModifierState(isPrimaryModifier(event));
+			pointerDown = (event.buttons & 1) !== 0;
+			updateDefinitionModifierState(isPrimaryModifier(event) && !pointerDown);
+		};
+		const handleSelectionChange = () => {
+			updateRenderedIdentifierNavigation(definitionModifierActiveRef.current);
+		};
+		const clearDefinitionModifierState = () => {
+			pointerDown = false;
+			updateDefinitionModifierState(false);
 		};
-		const clearDefinitionModifierState = () => updateDefinitionModifierState(false);
 		window.addEventListener("keydown", handleModifierChange);
 		window.addEventListener("keyup", handleModifierChange);
 		window.addEventListener("pointerdown", handleModifierPointer);
 		window.addEventListener("pointermove", handleModifierPointer);
+		window.addEventListener("pointerup", handleModifierPointer);
+		window.addEventListener("pointercancel", clearDefinitionModifierState);
 		window.addEventListener("blur", clearDefinitionModifierState);
+		document.addEventListener("selectionchange", handleSelectionChange);
 		return () => {
 			clearDefinitionModifierState();
 			window.removeEventListener("keydown", handleModifierChange);
 			window.removeEventListener("keyup", handleModifierChange);
 			window.removeEventListener("pointerdown", handleModifierPointer);
 			window.removeEventListener("pointermove", handleModifierPointer);
+			window.removeEventListener("pointerup", handleModifierPointer);
+			window.removeEventListener("pointercancel", clearDefinitionModifierState);
 			window.removeEventListener("blur", clearDefinitionModifierState);
+			document.removeEventListener("selectionchange", handleSelectionChange);
 		};
 	}, [onFindDefinitions, updateRenderedIdentifierNavigation]);
 	const invalidateDefinitionLookup = useCallback(() => {
@@ -7758,9 +7822,10 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 			}) : null;
 		}
 		if (annotation.metadata.type === "markdown-preview") return /* @__PURE__ */ jsx(MarkdownPreview, {
+			cacheKey: `${sourceKey}:${item.id}`,
 			contents: annotation.metadata.contents,
 			editable: annotation.metadata.editable,
-			layoutKey: annotation.metadata.layoutKey,
+			heightCache: markdownPreviewHeights,
 			onEditorRef: setMarkdownEditorRef,
 			onLayoutReady: markMarkdownPreviewLayoutReady,
 			path: annotation.metadata.path,
@@ -7802,6 +7867,7 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		itemMetadata,
 		keymap,
 		markMarkdownPreviewLayoutReady,
+		markdownPreviewHeights,
 		markImagePreviewLayoutReady,
 		markCommentLayoutChanged,
 		onAskCodex,
@@ -7815,6 +7881,7 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		replyToThread,
 		setMarkdownEditorRef,
 		source,
+		sourceKey,
 		supportsReviewCommentActions
 	]);
 	const handleScroll = useCallback((_scrollTop, viewer) => {

package/dist/style.css

@@ -2807,6 +2807,10 @@ form._multiFieldForm_sre1d_1628 {
   padding-left: 20px;
 }
 
+.mdx-editor .mdx-editor-content li > ul, .mdx-editor .mdx-editor-content li > ol {
+  margin-block: 0;
+}
+
 .mdx-editor-content li {
   margin: 0;
   padding-left: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkzw/codiff-core",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "A fast diff viewer.",
   "license": "MIT",
   "author": {
@@ -51,16 +51,16 @@
     }
   },
   "dependencies": {
-    "@nkzw/mdx-editor": "^1.0.1",
+    "@nkzw/mdx-editor": "^1.0.3",
     "@nkzw/use-relative-time": "^1.2.3",
     "@phosphor-icons/react": "^2.1.10",
-    "@pierre/diffs": "1.3.6",
+    "@pierre/diffs": "1.4.2",
     "@pierre/trees": "1.0.0-beta.6",
     "@radix-ui/react-slot": "^1.3.3",
     "class-variance-authority": "^0.7.1",
     "ghostty-web": "^0.4.0",
-    "lucide-react": "^1.39.0",
-    "valibot": "^1.4.2"
+    "lucide-react": "^1.46.0",
+    "valibot": "^1.5.0"
   },
   "peerDependencies": {
     "react": "^19.2.0",