@pierre/diffs 1.3.0-beta.1 → 1.3.0-beta.3

package/dist/editor/searchPanel.js

@@ -1,116 +1,111 @@
 import { isPrimaryModifier } from "./platform.js";
+import { getEditorIconSvg } from "./sprite.js";
 import { h } from "./utils.js";
 
 //#region src/editor/searchPanel.ts
 var SearchPanelWidget = class {
-	#textDocument;
 	#container;
 	#inputElement;
-	#matchesElement;
-	#searchParams = {
-		text: "",
-		replaceText: "",
-		caseSensitive: false,
-		wholeWord: false,
-		regex: false
-	};
-	#allMatches = [];
 	constructor(options) {
-		const { textDocument, containerElement, defaultQuery, initialMatch, postSearch, getCurrentSearchRange, onClose } = options;
-		const close = () => {
-			this.cleanup();
-			onClose();
+		const { textDocument, containerElement, defaultQuery, initialMatch, scrollToMatch, onUpdate, onClose } = options;
+		const searchParams = {
+			text: defaultQuery,
+			replaceText: "",
+			caseSensitive: false,
+			wholeWord: false,
+			regex: false
 		};
-		const updateSearchParam = (key, value) => {
-			this.#searchParams[key] = value;
-			updateAllMatches();
-			this.updateMatches();
+		const matches = {
+			all: [],
+			current: void 0
 		};
-		const updateAllMatches = () => {
-			this.#allMatches = this.#searchParams.text !== "" ? this.#textDocument.search("findAll", this.#searchParams) : [];
+		const matchResultElement = h("div", { dataset: "matches" });
+		const updateMatches = () => {
+			matches.all = searchParams.text !== "" ? textDocument.search(searchParams) : [];
 			this.#container.querySelectorAll("[data-disabled]").forEach((element) => {
-				element.dataset.disabled = String(this.#allMatches.length === 0);
+				element.dataset.disabled = String(matches.all.length === 0);
 			});
+			if (searchParams.text === "") {
+				matchResultElement.textContent = "";
+				delete matchResultElement.dataset.noMatches;
+				return;
+			}
+			if (matches.all.length === 0) {
+				matchResultElement.textContent = "No results";
+				matchResultElement.dataset.noMatches = "";
+			} else {
+				delete matchResultElement.dataset.noMatches;
+				updateCurrentMatch(onUpdate(matches.all));
+				return;
+			}
+			matches.current = void 0;
+			onUpdate([]);
 		};
-		const search = (kind, retainFocus) => {
-			const matches = this.#textDocument.search(kind, this.#searchParams, getCurrentSearchRange());
-			if (matches.length === 0) return;
-			const firstMatch = matches[0];
-			this.updateMatches(firstMatch);
-			postSearch(kind, firstMatch, retainFocus);
+		const updateCurrentMatch = (currentMatch) => {
+			if (currentMatch === void 0) matchResultElement.textContent = `${matches.all.length} results`;
+			else {
+				const [start, end] = currentMatch;
+				matchResultElement.textContent = `${matches.all.findIndex((m) => m[0] === start && m[1] === end) + 1} of ${matches.all.length}`;
+			}
+			matches.current = currentMatch;
+		};
+		const updateSearchParam = (key, value) => {
+			searchParams[key] = value;
+			updateMatches();
 		};
-		const settingsSwitch = h("div", {
-			dataset: { icon: "settings" },
-			title: "Settings",
-			innerHTML: `<svg width="16" height="16" viewBox="0 0 20 20">
-      <line x1="3" y1="6" x2="10" y2="6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-      <circle cx="12.5" cy="6" r="2.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
-      <line x1="15" y1="6" x2="17" y2="6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-      <line x1="17" y1="14" x2="10" y2="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-      <circle cx="7.5" cy="14" r="2.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
-      <line x1="5" y1="14" x2="3" y2="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-    </svg>
-    `,
-			onclick: () => {
-				settingsSwitch.replaceWith(settingsPanel);
+		const findNextMatch = (findPrevious = false, retainFocus = false) => {
+			const allMatches = matches.all;
+			let nextMatch = allMatches[0];
+			if (allMatches.length > 0) if (findPrevious) {
+				const searchOffset = matches.current?.[0] ?? 0;
+				nextMatch = allMatches.at(-1);
+				for (const m of allMatches) if (m[1] <= searchOffset) nextMatch = m;
+				else break;
+			} else {
+				const searchOffset = matches.current?.[1] ?? 0;
+				for (const m of allMatches) if (m[0] >= searchOffset) {
+					nextMatch = m;
+					break;
+				}
 			}
-		});
-		const settingsPanel = h("div", {
-			dataset: "settings",
-			children: [
-				h("label", {
-					dataset: "checkbox",
-					children: [h("input", {
-						type: "checkbox",
-						checked: this.#searchParams.caseSensitive,
-						onchange: (e) => {
-							updateSearchParam("caseSensitive", e.target.checked);
-						}
-					}), "Match Case"]
-				}),
-				h("label", {
-					dataset: "checkbox",
-					children: [h("input", {
-						type: "checkbox",
-						checked: this.#searchParams.wholeWord,
-						onchange: (e) => {
-							updateSearchParam("wholeWord", e.target.checked);
-						}
-					}), "Whole Word"]
-				}),
-				h("label", {
-					dataset: "checkbox",
-					children: [h("input", {
-						type: "checkbox",
-						checked: this.#searchParams.regex,
-						onchange: (e) => {
-							updateSearchParam("regex", e.target.checked);
-						}
-					}), "Regexp"]
-				})
-			],
-			onmouseleave: () => {
-				closeSettingsPanelTimeout = setTimeout(() => {
-					settingsPanel.replaceWith(settingsSwitch);
-				}, 500);
-			},
-			onmouseenter: () => {
-				clearTimeout(closeSettingsPanelTimeout);
-				closeSettingsPanelTimeout = void 0;
+			if (nextMatch !== void 0) {
+				updateCurrentMatch(nextMatch);
+				scrollToMatch(nextMatch, retainFocus);
 			}
-		});
-		let closeSettingsPanelTimeout;
-		this.#textDocument = textDocument;
-		this.#searchParams.text = defaultQuery;
+			matches.current = nextMatch;
+		};
+		const close = () => {
+			this.cleanup();
+			onClose();
+		};
+		const makeToggle = (icon, title, key) => {
+			const button = h("div", {
+				dataset: {
+					icon,
+					active: String(searchParams[key])
+				},
+				title,
+				innerHTML: getEditorIconSvg(icon),
+				onclick: () => {
+					const next = !searchParams[key];
+					button.dataset.active = String(next);
+					updateSearchParam(key, next);
+				}
+			});
+			return button;
+		};
+		const caseSensitiveToggle = makeToggle("case", "Match Case", "caseSensitive");
+		const wholeWordToggle = makeToggle("whole-word", "Whole Word", "wholeWord");
+		const regexToggle = makeToggle("regex", "Regexp", "regex");
 		this.#inputElement = h("input", {
 			type: "text",
 			placeholder: "Search",
 			dataset: "search",
 			value: defaultQuery,
 			oninput: (e) => {
-				this.#searchParams.text = e.target.value;
-				updateAllMatches();
-				this.updateMatches();
+				searchParams.text = e.target.value;
+				matches.current = void 0;
+				updateMatches();
 			},
 			onkeydown: (e) => {
 				if (e.key === "Escape") {
@@ -118,11 +113,10 @@ var SearchPanelWidget = class {
 					close();
 				} else if (e.key === "Enter") {
 					e.preventDefault();
-					search("findNext", true);
+					findNextMatch(false, true);
 				} else if (e.key === "f" && isPrimaryModifier(e)) e.preventDefault();
 			}
 		});
-		this.#matchesElement = h("div", { dataset: "matches" });
 		this.#container = h("div", {
 			dataset: "searchPanel",
 			children: [h("div", {
@@ -130,26 +124,23 @@ var SearchPanelWidget = class {
 				children: [
 					h("div", {
 						dataset: { icon: "search" },
-						innerHTML: `<svg width="16" height="16" viewBox="0 0 20 20">
-                <line x1="16.5" y1="16.5" x2="12.0355" y2="12.0355" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-                <circle cx="8.5" cy="8.5" r="5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
-                </svg>
-              `
+						innerHTML: getEditorIconSvg("search")
 					}),
 					this.#inputElement,
-					this.#matchesElement,
+					matchResultElement,
+					caseSensitiveToggle,
+					wholeWordToggle,
+					regexToggle,
+					h("div", { dataset: "divider" }),
 					h("div", {
 						dataset: {
 							icon: "arrow-up",
 							disabled: "true"
 						},
 						title: "Previous",
-						innerHTML: `<svg width="14" height="14" viewBox="0 0 20 20">
-                <polyline points="12.5 3.5 6 10 12.5 16.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
-                </svg>
-              `,
+						innerHTML: getEditorIconSvg("arrow-up"),
 						onclick: () => {
-							search("findPrevious");
+							findNextMatch(true);
 						}
 					}),
 					h("div", {
@@ -158,56 +149,30 @@ var SearchPanelWidget = class {
 							disabled: "true"
 						},
 						title: "Next",
-						innerHTML: `<svg width="14" height="14" viewBox="0 0 20 20">
-                <polyline points="7.5 16.5 14 10 7.5 3.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
-                </svg>
-              `,
+						innerHTML: getEditorIconSvg("arrow-down"),
 						onclick: () => {
-							search("findNext");
+							findNextMatch();
 						}
 					}),
-					h("div", { dataset: "spacer" }),
-					settingsSwitch,
 					h("div", {
 						dataset: { icon: "close" },
 						title: "Close",
-						innerHTML: `<svg width="16" height="16" viewBox="0 0 20 20">
-                <line x1="5" y1="5" x2="15" y2="15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-                <line x1="5" y1="15" x2="15" y2="5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
-                </svg>
-              `,
+						innerHTML: getEditorIconSvg("close"),
 						onclick: close
 					})
 				]
 			})]
 		});
+		matches.current = initialMatch;
 		containerElement.before(this.#container);
 		requestAnimationFrame(() => {
-			if (initialMatch !== void 0) {
-				updateAllMatches();
-				this.updateMatches(initialMatch);
-			}
+			if (initialMatch !== void 0) updateMatches();
+			else onUpdate([]);
 			this.#inputElement.select();
 		});
 	}
-	updateMatches(currentMatch = this.#allMatches[0]) {
-		const allMatches = this.#allMatches;
-		if (this.#searchParams.text === "") {
-			this.#matchesElement.textContent = "";
-			delete this.#matchesElement.dataset.noMatches;
-			return;
-		}
-		if (allMatches.length === 0) {
-			this.#matchesElement.textContent = "No results";
-			this.#matchesElement.dataset.noMatches = "";
-		} else {
-			delete this.#matchesElement.dataset.noMatches;
-			const index = allMatches.findIndex((m) => m[0] === currentMatch[0] && m[1] === currentMatch[1]);
-			this.#matchesElement.textContent = index !== -1 ? `${index + 1} of ${allMatches.length}` : "No results";
-		}
-	}
 	focus() {
-		this.#inputElement.select();
+		this.#inputElement.focus();
 	}
 	cleanup() {
 		this.#container.remove();

package/dist/editor/searchPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchPanel.js","names":["#searchParams","#allMatches","#textDocument","#container","closeSettingsPanelTimeout: ReturnType<typeof setTimeout> | undefined","#inputElement","#matchesElement"],"sources":["../../src/editor/searchPanel.ts"],"sourcesContent":["import { isPrimaryModifier } from './platform';\nimport type { Range, TextDocument } from './textDocument';\nimport { h } from './utils';\n\nexport type SearchKind =\n  | 'findNext'\n  | 'findPrevious'\n  | 'findAll'\n  | 'replace'\n  | 'replaceAll';\n\nexport interface SearchParams {\n  text: string;\n  replaceText: string;\n  caseSensitive: boolean;\n  wholeWord: boolean;\n  regex: boolean;\n}\n\nexport interface SearchPanelOptions {\n  textDocument: TextDocument<unknown>;\n  containerElement: HTMLElement;\n  defaultQuery: string;\n  initialMatch?: [number, number];\n  postSearch: (\n    kind: SearchKind,\n    match: [number, number],\n    retainFocus?: boolean\n  ) => void;\n  getCurrentSearchRange: () => Range | undefined;\n  onClose: () => void;\n}\n\nexport class SearchPanelWidget {\n  #textDocument: TextDocument<unknown>;\n  #container: HTMLDivElement;\n  #inputElement: HTMLInputElement;\n  #matchesElement: HTMLDivElement;\n  #searchParams: SearchParams = {\n    text: '',\n    replaceText: '',\n    caseSensitive: false,\n    wholeWord: false,\n    regex: false,\n  };\n  #allMatches: [number, number][] = [];\n\n  constructor(options: SearchPanelOptions) {\n    const {\n      textDocument,\n      containerElement,\n      defaultQuery,\n      initialMatch,\n      postSearch,\n      getCurrentSearchRange,\n      onClose,\n    } = options;\n\n    const close = () => {\n      this.cleanup();\n      onClose();\n    };\n\n    const updateSearchParam = <K extends keyof SearchParams>(\n      key: K,\n      value: SearchParams[K]\n    ) => {\n      this.#searchParams[key] = value;\n      updateAllMatches();\n      this.updateMatches();\n    };\n\n    const updateAllMatches = () => {\n      this.#allMatches =\n        this.#searchParams.text !== ''\n          ? this.#textDocument.search('findAll', this.#searchParams)\n          : [];\n      this.#container\n        .querySelectorAll<HTMLElement>('[data-disabled]')\n        .forEach((element) => {\n          element.dataset.disabled = String(this.#allMatches.length === 0);\n        });\n    };\n\n    const search = (kind: SearchKind, retainFocus?: boolean) => {\n      const matches = this.#textDocument.search(\n        kind,\n        this.#searchParams,\n        getCurrentSearchRange()\n      );\n      if (matches.length === 0) {\n        return;\n      }\n      const firstMatch = matches[0];\n      this.updateMatches(firstMatch);\n      postSearch(kind, firstMatch, retainFocus);\n    };\n\n    const settingsSwitch = h('div', {\n      dataset: { icon: 'settings' },\n      title: 'Settings',\n      innerHTML: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n      <line x1=\"3\" y1=\"6\" x2=\"10\" y2=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n      <circle cx=\"12.5\" cy=\"6\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></circle>\n      <line x1=\"15\" y1=\"6\" x2=\"17\" y2=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n      <line x1=\"17\" y1=\"14\" x2=\"10\" y2=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n      <circle cx=\"7.5\" cy=\"14\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></circle>\n      <line x1=\"5\" y1=\"14\" x2=\"3\" y2=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n    </svg>\n    `,\n      onclick: () => {\n        settingsSwitch.replaceWith(settingsPanel);\n      },\n    });\n    const settingsPanel = h('div', {\n      dataset: 'settings',\n      children: [\n        h('label', {\n          dataset: 'checkbox',\n          children: [\n            h('input', {\n              type: 'checkbox',\n              checked: this.#searchParams.caseSensitive,\n              onchange: (e: Event) => {\n                updateSearchParam(\n                  'caseSensitive',\n                  (e.target as HTMLInputElement).checked\n                );\n              },\n            }),\n            'Match Case',\n          ],\n        }),\n        h('label', {\n          dataset: 'checkbox',\n          children: [\n            h('input', {\n              type: 'checkbox',\n              checked: this.#searchParams.wholeWord,\n              onchange: (e: Event) => {\n                updateSearchParam(\n                  'wholeWord',\n                  (e.target as HTMLInputElement).checked\n                );\n              },\n            }),\n            'Whole Word',\n          ],\n        }),\n        h('label', {\n          dataset: 'checkbox',\n          children: [\n            h('input', {\n              type: 'checkbox',\n              checked: this.#searchParams.regex,\n              onchange: (e: Event) => {\n                updateSearchParam(\n                  'regex',\n                  (e.target as HTMLInputElement).checked\n                );\n              },\n            }),\n            'Regexp',\n          ],\n        }),\n      ],\n      onmouseleave: () => {\n        closeSettingsPanelTimeout = setTimeout(() => {\n          settingsPanel.replaceWith(settingsSwitch);\n        }, 500);\n      },\n      onmouseenter: () => {\n        clearTimeout(closeSettingsPanelTimeout);\n        closeSettingsPanelTimeout = undefined;\n      },\n    });\n\n    let closeSettingsPanelTimeout: ReturnType<typeof setTimeout> | undefined;\n\n    this.#textDocument = textDocument;\n    this.#searchParams.text = defaultQuery;\n\n    this.#inputElement = h('input', {\n      type: 'text',\n      placeholder: 'Search',\n      dataset: 'search',\n      value: defaultQuery,\n      oninput: (e: Event) => {\n        this.#searchParams.text = (e.target as HTMLInputElement).value;\n        updateAllMatches();\n        this.updateMatches();\n      },\n      onkeydown: (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          e.preventDefault();\n          close();\n        } else if (e.key === 'Enter') {\n          e.preventDefault();\n          search('findNext', true);\n        } else if (e.key === 'f' && isPrimaryModifier(e)) {\n          // prevent the default browser search panel open behavior\n          e.preventDefault();\n        }\n      },\n    });\n    this.#matchesElement = h('div', { dataset: 'matches' });\n    this.#container = h('div', {\n      dataset: 'searchPanel',\n      children: [\n        h('div', {\n          dataset: 'searchPanelRow',\n          children: [\n            h('div', {\n              dataset: { icon: 'search' },\n              innerHTML: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                <line x1=\"16.5\" y1=\"16.5\" x2=\"12.0355\" y2=\"12.0355\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n                <circle cx=\"8.5\" cy=\"8.5\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></circle>\n                </svg>\n              `,\n            }),\n            this.#inputElement,\n            this.#matchesElement,\n            h('div', {\n              dataset: { icon: 'arrow-up', disabled: 'true' },\n              title: 'Previous',\n              innerHTML: `<svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                <polyline points=\"12.5 3.5 6 10 12.5 16.5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></polyline>\n                </svg>\n              `,\n              onclick: () => {\n                search('findPrevious');\n              },\n            }),\n            h('div', {\n              dataset: { icon: 'arrow-down', disabled: 'true' },\n              title: 'Next',\n              innerHTML: `<svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                <polyline points=\"7.5 16.5 14 10 7.5 3.5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></polyline>\n                </svg>\n              `,\n              onclick: () => {\n                search('findNext');\n              },\n            }),\n            h('div', { dataset: 'spacer' }),\n            settingsSwitch,\n            h('div', {\n              dataset: { icon: 'close' },\n              title: 'Close',\n              innerHTML: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                <line x1=\"5\" y1=\"5\" x2=\"15\" y2=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n                <line x1=\"5\" y1=\"15\" x2=\"15\" y2=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></line>\n                </svg>\n              `,\n              onclick: close,\n            }),\n          ],\n        }),\n      ],\n    });\n    containerElement.before(this.#container);\n\n    requestAnimationFrame(() => {\n      if (initialMatch !== undefined) {\n        updateAllMatches();\n        this.updateMatches(initialMatch);\n      }\n      this.#inputElement.select();\n    });\n  }\n\n  updateMatches(currentMatch: [number, number] = this.#allMatches[0]): void {\n    const allMatches = this.#allMatches;\n    const searchText = this.#searchParams.text;\n\n    if (searchText === '') {\n      this.#matchesElement.textContent = '';\n      delete this.#matchesElement.dataset.noMatches;\n      return;\n    }\n\n    if (allMatches.length === 0) {\n      this.#matchesElement.textContent = 'No results';\n      this.#matchesElement.dataset.noMatches = '';\n    } else {\n      delete this.#matchesElement.dataset.noMatches;\n      const index = allMatches.findIndex(\n        (m) => m[0] === currentMatch[0] && m[1] === currentMatch[1]\n      );\n      this.#matchesElement.textContent =\n        index !== -1 ? `${index + 1} of ${allMatches.length}` : 'No results';\n    }\n  }\n\n  focus(): void {\n    this.#inputElement.select();\n  }\n\n  cleanup(): void {\n    this.#container.remove();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"searchPanel.js","names":["searchParams: SearchParams","#container","nextMatch: MatchRange | undefined","#inputElement"],"sources":["../../src/editor/searchPanel.ts"],"sourcesContent":["import { isPrimaryModifier } from './platform';\nimport { getEditorIconSvg, type SVGSpriteNames } from './sprite';\nimport type { TextDocument } from './textDocument';\nimport { h } from './utils';\n\nexport type MatchRange = [startOffset: number, endOffset: number];\n\nexport interface SearchParams {\n  text: string;\n  replaceText: string;\n  caseSensitive: boolean;\n  wholeWord: boolean;\n  regex: boolean;\n}\n\nexport interface SearchPanelOptions {\n  textDocument: TextDocument<unknown>;\n  containerElement: HTMLElement;\n  defaultQuery: string;\n  initialMatch?: MatchRange;\n  scrollToMatch: (nextMatch: MatchRange, retainFocus: boolean) => void;\n  onUpdate: (matches: MatchRange[]) => MatchRange | undefined;\n  onClose: () => void;\n}\n\nexport class SearchPanelWidget {\n  #container: HTMLDivElement;\n  #inputElement: HTMLInputElement;\n\n  constructor(options: SearchPanelOptions) {\n    const {\n      textDocument,\n      containerElement,\n      defaultQuery,\n      initialMatch,\n      scrollToMatch,\n      onUpdate,\n      onClose,\n    } = options;\n\n    const searchParams: SearchParams = {\n      text: defaultQuery,\n      replaceText: '',\n      caseSensitive: false,\n      wholeWord: false,\n      regex: false,\n    };\n\n    const matches = {\n      all: [] as MatchRange[],\n      current: undefined as MatchRange | undefined,\n    };\n\n    const matchResultElement = h('div', { dataset: 'matches' });\n    const updateMatches = () => {\n      matches.all =\n        searchParams.text !== '' ? textDocument.search(searchParams) : [];\n      this.#container\n        .querySelectorAll<HTMLElement>('[data-disabled]')\n        .forEach((element) => {\n          element.dataset.disabled = String(matches.all.length === 0);\n        });\n\n      if (searchParams.text === '') {\n        matchResultElement.textContent = '';\n        delete matchResultElement.dataset.noMatches;\n        return;\n      }\n\n      if (matches.all.length === 0) {\n        matchResultElement.textContent = 'No results';\n        matchResultElement.dataset.noMatches = '';\n      } else {\n        delete matchResultElement.dataset.noMatches;\n        updateCurrentMatch(onUpdate(matches.all));\n        return;\n      }\n\n      matches.current = undefined;\n      onUpdate([]);\n    };\n\n    const updateCurrentMatch = (currentMatch: MatchRange | undefined) => {\n      if (currentMatch === undefined) {\n        matchResultElement.textContent = `${matches.all.length} results`;\n      } else {\n        const [start, end] = currentMatch;\n        const index = matches.all.findIndex(\n          (m) => m[0] === start && m[1] === end\n        );\n        matchResultElement.textContent = `${index + 1} of ${matches.all.length}`;\n      }\n      matches.current = currentMatch;\n    };\n\n    const updateSearchParam = <K extends keyof SearchParams>(\n      key: K,\n      value: SearchParams[K]\n    ) => {\n      searchParams[key] = value;\n      updateMatches();\n    };\n\n    const findNextMatch = (\n      findPrevious: boolean = false,\n      retainFocus: boolean = false\n    ) => {\n      const allMatches = matches.all;\n      let nextMatch: MatchRange | undefined = allMatches[0];\n      if (allMatches.length > 0) {\n        if (findPrevious) {\n          const searchOffset = matches.current?.[0] ?? 0;\n          nextMatch = allMatches.at(-1);\n          for (const m of allMatches) {\n            if (m[1] <= searchOffset) {\n              nextMatch = m;\n            } else {\n              break;\n            }\n          }\n        } else {\n          const searchOffset = matches.current?.[1] ?? 0;\n          for (const m of allMatches) {\n            if (m[0] >= searchOffset) {\n              nextMatch = m;\n              break;\n            }\n          }\n        }\n      }\n      if (nextMatch !== undefined) {\n        updateCurrentMatch(nextMatch);\n        scrollToMatch(nextMatch, retainFocus);\n      }\n      matches.current = nextMatch;\n    };\n\n    const close = () => {\n      this.cleanup();\n      onClose();\n    };\n\n    // Builds an always-visible icon button that toggles one boolean search\n    // option (case/whole-word/regex). The button reflects its on/off state via\n    // the `data-active` attribute so the stylesheet can highlight it.\n    const makeToggle = (\n      icon: SVGSpriteNames,\n      title: string,\n      key: 'caseSensitive' | 'wholeWord' | 'regex'\n    ) => {\n      const button = h('div', {\n        dataset: { icon, active: String(searchParams[key]) },\n        title,\n        innerHTML: getEditorIconSvg(icon),\n        onclick: () => {\n          const next = !searchParams[key];\n          button.dataset.active = String(next);\n          updateSearchParam(key, next);\n        },\n      });\n      return button;\n    };\n\n    const caseSensitiveToggle = makeToggle(\n      'case',\n      'Match Case',\n      'caseSensitive'\n    );\n    const wholeWordToggle = makeToggle('whole-word', 'Whole Word', 'wholeWord');\n    const regexToggle = makeToggle('regex', 'Regexp', 'regex');\n\n    this.#inputElement = h('input', {\n      type: 'text',\n      placeholder: 'Search',\n      dataset: 'search',\n      value: defaultQuery,\n      oninput: (e: Event) => {\n        searchParams.text = (e.target as HTMLInputElement).value;\n        matches.current = undefined;\n        updateMatches();\n      },\n      onkeydown: (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          e.preventDefault();\n          close();\n        } else if (e.key === 'Enter') {\n          e.preventDefault();\n          findNextMatch(false, true);\n        } else if (e.key === 'f' && isPrimaryModifier(e)) {\n          // prevent the default browser search panel open behavior\n          e.preventDefault();\n        }\n      },\n    });\n\n    this.#container = h('div', {\n      dataset: 'searchPanel',\n      children: [\n        h('div', {\n          dataset: 'searchPanelRow',\n          children: [\n            h('div', {\n              dataset: { icon: 'search' },\n              innerHTML: getEditorIconSvg('search'),\n            }),\n            this.#inputElement,\n            matchResultElement,\n            caseSensitiveToggle,\n            wholeWordToggle,\n            regexToggle,\n            h('div', { dataset: 'divider' }),\n            h('div', {\n              dataset: { icon: 'arrow-up', disabled: 'true' },\n              title: 'Previous',\n              innerHTML: getEditorIconSvg('arrow-up'),\n              onclick: () => {\n                findNextMatch(true);\n              },\n            }),\n            h('div', {\n              dataset: { icon: 'arrow-down', disabled: 'true' },\n              title: 'Next',\n              innerHTML: getEditorIconSvg('arrow-down'),\n              onclick: () => {\n                findNextMatch();\n              },\n            }),\n            h('div', {\n              dataset: { icon: 'close' },\n              title: 'Close',\n              innerHTML: getEditorIconSvg('close'),\n              onclick: close,\n            }),\n          ],\n        }),\n      ],\n    });\n\n    matches.current = initialMatch;\n    containerElement.before(this.#container);\n\n    requestAnimationFrame(() => {\n      if (initialMatch !== undefined) {\n        updateMatches();\n      } else {\n        onUpdate([]);\n      }\n      this.#inputElement.select();\n    });\n  }\n\n  focus(): void {\n    this.#inputElement.focus();\n  }\n\n  cleanup(): void {\n    this.#container.remove();\n  }\n}\n"],"mappings":"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"}

package/dist/editor/selection.js

@@ -883,11 +883,17 @@ function getLineChildEnd(child, textOffsetInChild) {
 }
 function getLineIndex(el) {
 	const { line } = el.dataset;
-	if (line !== void 0) return parseInt(line) - 1;
+	if (line !== void 0) {
+		const lineNumber = parseInt(line, 10);
+		if (!Number.isNaN(lineNumber)) return lineNumber - 1;
+	}
 }
 function getCharacterIndex(el) {
 	const { char } = el.dataset;
-	return char !== void 0 ? parseInt(char) : void 0;
+	if (char !== void 0) {
+		const charIndex = parseInt(char, 10);
+		if (!Number.isNaN(charIndex)) return charIndex;
+	}
 }
 function getTextOffset(text, offset) {
 	const value = text ?? "";