melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format search

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:28:15 +02:00
parent 8578bdb9e3
commit 9f88e48786
1 changed files with 133 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
static/search.ts
View File

@@ -8,47 +8,47 @@ interface CommandPaletteItem {
icon?: string; icon?: string;
} }
const commandPaletteInitializedKey = Symbol('commandPaletteInitialized'); const commandPaletteInitializedKey = Symbol("commandPaletteInitialized");
const globalWindow = window as Window & { [commandPaletteInitializedKey]?: boolean }; const globalWindow = window as Window & { [commandPaletteInitializedKey]?: boolean };
const paletteInput = document.getElementById('command-palette-input') as HTMLInputElement | null; const paletteInput = document.getElementById("command-palette-input") as HTMLInputElement | null;
const paletteResults = document.querySelector( const paletteResults = document.querySelector(
'[data-command-palette-results]' "[data-command-palette-results]",
) as HTMLElement | null; ) as HTMLElement | null;
const paletteDialog = document.querySelector('[data-command-palette-dialog]') as HTMLElement | null; const paletteDialog = document.querySelector("[data-command-palette-dialog]") as HTMLElement | null;
const paletteRoot = document.querySelector('[data-command-palette-root]') as HTMLElement | null; const paletteRoot = document.querySelector("[data-command-palette-root]") as HTMLElement | null;
const paletteOpenButtons = document.querySelectorAll('[data-command-palette-open]'); const paletteOpenButtons = document.querySelectorAll("[data-command-palette-open]");
const paletteCloseButtons = document.querySelectorAll('[data-command-palette-close]'); const paletteCloseButtons = document.querySelectorAll("[data-command-palette-close]");
const shortcutHints = document.querySelectorAll('[data-command-palette-shortcut]'); const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]");
let allPaletteItems: CommandPaletteItem[] = []; let allPaletteItems: CommandPaletteItem[] = [];
let paletteItems: CommandPaletteItem[] = []; let paletteItems: CommandPaletteItem[] = [];
let selectedIndex = 0; let selectedIndex = 0;
let fetchTimeout: number | undefined; let fetchTimeout: number | undefined;
let lastQuery = ''; let lastQuery = "";
let continueExpanded = false; let continueExpanded = false;
let activeRequestController: AbortController | undefined; let activeRequestController: AbortController | undefined;
const responseCache = new Map<string, CommandPaletteItem[]>(); const responseCache = new Map<string, CommandPaletteItem[]>();
const iconPaths: Record<string, string> = { const iconPaths: Record<string, string> = {
bookmark: 'M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z', bookmark: "M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",
compass: compass:
'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z', "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z",
play: 'M8 5v14l11-7z', play: "M8 5v14l11-7z",
search: 'M11 19a8 8 0 1 1 5.65-2.35L21 21 M16.65 16.65 21 21', search: "M11 19a8 8 0 1 1 5.65-2.35L21 21 M16.65 16.65 21 21",
trending: 'M3 17l6-6 4 4 8-8 M14 7h7v7', trending: "M3 17l6-6 4 4 8-8 M14 7h7v7",
}; };
const isMac = (): boolean => /Mac|iPhone|iPad|iPod/.test(navigator.platform); const isMac = (): boolean => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
const isSafeImageUrl = (rawUrl?: string): boolean => { const isSafeImageUrl = (rawUrl?: string): boolean => {
if (!rawUrl || typeof rawUrl !== 'string') { if (!rawUrl || typeof rawUrl !== "string") {
return false; return false;
} }
try { try {
const parsed = new URL(rawUrl, window.location.origin); const parsed = new URL(rawUrl, window.location.origin);
return parsed.protocol === 'https:' || parsed.protocol === 'http:'; return parsed.protocol === "https:" || parsed.protocol === "http:";
} catch { } catch {
return false; return false;
} }
@@ -60,11 +60,11 @@ const isTypingTarget = (target: EventTarget | null): boolean =>
target instanceof HTMLSelectElement || target instanceof HTMLSelectElement ||
(target instanceof HTMLElement && target.isContentEditable); (target instanceof HTMLElement && target.isContentEditable);
const isOpen = (): boolean => paletteDialog?.classList.contains('flex') ?? false; const isOpen = (): boolean => paletteDialog?.classList.contains("flex") ?? false;
const setShortcutHints = (): void => { const setShortcutHints = (): void => {
shortcutHints.forEach(hint => { shortcutHints.forEach((hint) => {
hint.textContent = isMac() ? '⌘P' : 'Ctrl P'; hint.textContent = isMac() ? "⌘P" : "Ctrl P";
}); });
}; };
@@ -73,37 +73,37 @@ const clearResults = (): void => {
}; };
const buildSearchActionItem = (query: string): CommandPaletteItem => ({ const buildSearchActionItem = (query: string): CommandPaletteItem => ({
id: 'search:' + query.toLowerCase(), id: "search:" + query.toLowerCase(),
type: 'search', type: "search",
label: `Search anime for "${query}"`, label: `Search anime for "${query}"`,
subtitle: 'Browse', subtitle: "Browse",
href: '/browse?q=' + encodeURIComponent(query), href: "/browse?q=" + encodeURIComponent(query),
icon: 'search', icon: "search",
}); });
const buildIcon = (item: CommandPaletteItem): HTMLElement => { const buildIcon = (item: CommandPaletteItem): HTMLElement => {
if (isSafeImageUrl(item.image)) { if (isSafeImageUrl(item.image)) {
const img = document.createElement('img'); const img = document.createElement("img");
img.className = 'h-11 w-8 shrink-0 bg-background-surface object-cover'; img.className = "h-11 w-8 shrink-0 bg-background-surface object-cover";
img.src = item.image || ''; img.src = item.image || "";
img.alt = ''; img.alt = "";
return img; return img;
} }
const icon = document.createElement('div'); const icon = document.createElement("div");
icon.className = 'flex h-8 w-8 shrink-0 items-center justify-center text-foreground-muted'; icon.className = "flex h-8 w-8 shrink-0 items-center justify-center text-foreground-muted";
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute("viewBox", "0 0 24 24");
svg.setAttribute('fill', item.icon === 'play' ? 'currentColor' : 'none'); svg.setAttribute("fill", item.icon === "play" ? "currentColor" : "none");
svg.setAttribute('stroke', 'currentColor'); svg.setAttribute("stroke", "currentColor");
svg.setAttribute('stroke-width', '1.7'); svg.setAttribute("stroke-width", "1.7");
svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute("stroke-linecap", "round");
svg.setAttribute('stroke-linejoin', 'round'); svg.setAttribute("stroke-linejoin", "round");
svg.classList.add('size-5'); svg.classList.add("size-5");
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute('d', iconPaths[item.icon || 'search'] || iconPaths.search); path.setAttribute("d", iconPaths[item.icon || "search"] || iconPaths.search);
svg.appendChild(path); svg.appendChild(path);
icon.appendChild(svg); icon.appendChild(svg);
@@ -111,18 +111,18 @@ const buildIcon = (item: CommandPaletteItem): HTMLElement => {
}; };
const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => { const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute("viewBox", "0 0 24 24");
svg.setAttribute('fill', 'none'); svg.setAttribute("fill", "none");
svg.setAttribute('stroke', 'currentColor'); svg.setAttribute("stroke", "currentColor");
svg.setAttribute('stroke-width', '2'); svg.setAttribute("stroke-width", "2");
svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute("stroke-linecap", "round");
svg.setAttribute('stroke-linejoin', 'round'); svg.setAttribute("stroke-linejoin", "round");
svg.setAttribute('aria-hidden', 'true'); svg.setAttribute("aria-hidden", "true");
svg.classList.add(...className.split(' ')); svg.classList.add(...className.split(" "));
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute('d', pathData); path.setAttribute("d", pathData);
svg.appendChild(path); svg.appendChild(path);
return svg; return svg;
@@ -135,12 +135,12 @@ const selectItem = (index: number): void => {
} }
selectedIndex = Math.max(0, Math.min(index, paletteItems.length - 1)); selectedIndex = Math.max(0, Math.min(index, paletteItems.length - 1));
paletteResults.querySelectorAll<HTMLElement>('[data-command-palette-item]').forEach((row, i) => { paletteResults.querySelectorAll<HTMLElement>("[data-command-palette-item]").forEach((row, i) => {
const selected = i === selectedIndex; const selected = i === selectedIndex;
row.classList.toggle('bg-surface-hover', selected); row.classList.toggle("bg-surface-hover", selected);
row.setAttribute('aria-selected', String(selected)); row.setAttribute("aria-selected", String(selected));
if (selected) { if (selected) {
row.scrollIntoView({ block: 'nearest' }); row.scrollIntoView({ block: "nearest" });
} }
}); });
}; };
@@ -154,88 +154,88 @@ const runSelectedItem = (): void => {
}; };
const removeContinueWatchingItem = (item: CommandPaletteItem): void => { const removeContinueWatchingItem = (item: CommandPaletteItem): void => {
const animeID = item.id.replace('continue:', ''); const animeID = item.id.replace("continue:", "");
if (!animeID || animeID === item.id) { if (!animeID || animeID === item.id) {
return; return;
} }
fetch('/api/continue-watching/' + encodeURIComponent(animeID), { method: 'DELETE' }) fetch("/api/continue-watching/" + encodeURIComponent(animeID), { method: "DELETE" })
.then((res: Response) => { .then((res: Response) => {
if (!res.ok) { if (!res.ok) {
return; return;
} }
allPaletteItems = allPaletteItems.filter(candidate => candidate.id !== item.id); allPaletteItems = allPaletteItems.filter((candidate) => candidate.id !== item.id);
paletteItems = paletteItems.filter(candidate => candidate.id !== item.id); paletteItems = paletteItems.filter((candidate) => candidate.id !== item.id);
responseCache.clear(); responseCache.clear();
removeContinueWatchingCard(animeID); removeContinueWatchingCard(animeID);
renderItems(allPaletteItems); renderItems(allPaletteItems);
}) })
.catch((err: unknown) => { .catch((err: unknown) => {
console.error('Continue watching remove error:', err); console.error("Continue watching remove error:", err);
}); });
}; };
const removeContinueWatchingCard = (animeID: string): void => { const removeContinueWatchingCard = (animeID: string): void => {
document.getElementById('continue-watching-' + animeID)?.remove(); document.getElementById("continue-watching-" + animeID)?.remove();
const section = document.getElementById('continue-watching-section'); const section = document.getElementById("continue-watching-section");
if (!section) { if (!section) {
return; return;
} }
if (section.querySelectorAll('.continue-watching-item').length === 0) { if (section.querySelectorAll(".continue-watching-item").length === 0) {
section.remove(); section.remove();
} }
}; };
const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement => { const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement => {
const row = document.createElement('a'); const row = document.createElement("a");
row.href = item.href; row.href = item.href;
row.className = row.className =
'flex min-h-12 items-center gap-3 px-4 py-2 text-foreground no-underline transition-colors hover:bg-surface-hover hover:no-underline focus-visible:bg-surface-hover focus-visible:outline-none'; "flex min-h-12 items-center gap-3 px-4 py-2 text-foreground no-underline transition-colors hover:bg-surface-hover hover:no-underline focus-visible:bg-surface-hover focus-visible:outline-none";
row.dataset.commandPaletteItem = item.id; row.dataset.commandPaletteItem = item.id;
row.setAttribute('role', 'option'); row.setAttribute("role", "option");
row.setAttribute('aria-selected', String(index === selectedIndex)); row.setAttribute("aria-selected", String(index === selectedIndex));
row.addEventListener('mouseenter', () => selectItem(index)); row.addEventListener("mouseenter", () => selectItem(index));
row.appendChild(buildIcon(item)); row.appendChild(buildIcon(item));
const copy = document.createElement('div'); const copy = document.createElement("div");
copy.className = 'grid min-w-0 flex-1 gap-0.5'; copy.className = "grid min-w-0 flex-1 gap-0.5";
const label = document.createElement('div'); const label = document.createElement("div");
label.className = 'truncate text-sm font-normal text-foreground'; label.className = "truncate text-sm font-normal text-foreground";
label.textContent = item.label; label.textContent = item.label;
copy.appendChild(label); copy.appendChild(label);
if (item.subtitle && item.type !== 'navigation') { if (item.subtitle && item.type !== "navigation") {
const subtitle = document.createElement('div'); const subtitle = document.createElement("div");
subtitle.className = 'truncate text-xs font-normal text-foreground-muted'; subtitle.className = "truncate text-xs font-normal text-foreground-muted";
subtitle.textContent = item.subtitle; subtitle.textContent = item.subtitle;
copy.appendChild(subtitle); copy.appendChild(subtitle);
} }
row.appendChild(copy); row.appendChild(copy);
if (item.type === 'continue') { if (item.type === "continue") {
const removeButton = document.createElement('button'); const removeButton = document.createElement("button");
removeButton.type = 'button'; removeButton.type = "button";
removeButton.className = removeButton.className =
'flex h-8 w-8 shrink-0 items-center justify-center text-red-500/70 transition-colors hover:text-red-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent'; "flex h-8 w-8 shrink-0 items-center justify-center text-red-500/70 transition-colors hover:text-red-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent";
removeButton.setAttribute('aria-label', 'Remove from Continue Watching'); removeButton.setAttribute("aria-label", "Remove from Continue Watching");
removeButton.appendChild(buildSvgIcon('M18 6 6 18 M6 6l12 12', 'size-4')); removeButton.appendChild(buildSvgIcon("M18 6 6 18 M6 6l12 12", "size-4"));
removeButton.addEventListener('click', event => { removeButton.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
removeContinueWatchingItem(item); removeContinueWatchingItem(item);
}); });
row.appendChild(removeButton); row.appendChild(removeButton);
} else { } else {
const hint = document.createElement('div'); const hint = document.createElement("div");
hint.className = 'hidden text-xs text-foreground-muted sm:block'; hint.className = "hidden text-xs text-foreground-muted sm:block";
hint.textContent = index === selectedIndex ? 'Enter' : ''; hint.textContent = index === selectedIndex ? "Enter" : "";
row.appendChild(hint); row.appendChild(hint);
} }
@@ -243,26 +243,26 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement =>
}; };
const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => { const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => {
const button = document.createElement('button'); const button = document.createElement("button");
button.type = 'button'; button.type = "button";
button.className = button.className =
'flex w-full items-center gap-3 px-4 py-2 text-left text-xs font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent'; "flex w-full items-center gap-3 px-4 py-2 text-left text-xs font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent";
const spacer = document.createElement('span'); const spacer = document.createElement("span");
spacer.className = 'h-8 w-8 shrink-0'; spacer.className = "h-8 w-8 shrink-0";
button.appendChild(spacer); button.appendChild(spacer);
const label = document.createElement('span'); const label = document.createElement("span");
label.className = 'flex-1'; label.className = "flex-1";
label.textContent = continueExpanded label.textContent = continueExpanded
? 'Hide extra continue watching' ? "Hide extra continue watching"
: `Show ${hiddenCount} more continue watching`; : `Show ${hiddenCount} more continue watching`;
button.appendChild(label); button.appendChild(label);
const chevron = buildSvgIcon(continueExpanded ? 'm18 15-6-6-6 6' : 'm6 9 6 6 6-6', 'size-4'); const chevron = buildSvgIcon(continueExpanded ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6", "size-4");
button.appendChild(chevron); button.appendChild(chevron);
button.addEventListener('click', () => { button.addEventListener("click", () => {
continueExpanded = !continueExpanded; continueExpanded = !continueExpanded;
renderItems(allPaletteItems); renderItems(allPaletteItems);
}); });
@@ -271,18 +271,18 @@ const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => {
}; };
const visiblePaletteItems = (items: CommandPaletteItem[]): CommandPaletteItem[] => { const visiblePaletteItems = (items: CommandPaletteItem[]): CommandPaletteItem[] => {
if (lastQuery !== '') { if (lastQuery !== "") {
return items; return items;
} }
const continueItems = items.filter(item => item.type === 'continue'); const continueItems = items.filter((item) => item.type === "continue");
if (continueItems.length <= 1 || continueExpanded) { if (continueItems.length <= 1 || continueExpanded) {
return items; return items;
} }
let firstContinueShown = false; let firstContinueShown = false;
return items.filter(item => { return items.filter((item) => {
if (item.type !== 'continue') { if (item.type !== "continue") {
return true; return true;
} }
if (!firstContinueShown) { if (!firstContinueShown) {
@@ -303,21 +303,21 @@ const renderItems = (items: CommandPaletteItem[]): void => {
selectedIndex = 0; selectedIndex = 0;
if (paletteItems.length === 0) { if (paletteItems.length === 0) {
const empty = document.createElement('div'); const empty = document.createElement("div");
empty.className = 'px-4 py-8 text-center text-sm font-normal text-foreground-muted'; empty.className = "px-4 py-8 text-center text-sm font-normal text-foreground-muted";
empty.textContent = 'No commands found'; empty.textContent = "No commands found";
paletteResults.replaceChildren(empty); paletteResults.replaceChildren(empty);
return; return;
} }
const list = document.createElement('div'); const list = document.createElement("div");
list.setAttribute('role', 'listbox'); list.setAttribute("role", "listbox");
list.setAttribute('aria-label', 'Command palette results'); list.setAttribute("aria-label", "Command palette results");
paletteItems.forEach((item, index) => { paletteItems.forEach((item, index) => {
list.appendChild(buildRow(item, index)); list.appendChild(buildRow(item, index));
const continueCount = items.filter(candidate => candidate.type === 'continue').length; const continueCount = items.filter((candidate) => candidate.type === "continue").length;
if (lastQuery === '' && continueCount > 1 && item.type === 'continue' && index === 0) { if (lastQuery === "" && continueCount > 1 && item.type === "continue" && index === 0) {
list.appendChild(buildContinueToggle(continueCount - 1)); list.appendChild(buildContinueToggle(continueCount - 1));
} }
}); });
@@ -352,7 +352,7 @@ const fetchPaletteItems = (query: string): void => {
const controller = new AbortController(); const controller = new AbortController();
activeRequestController = controller; activeRequestController = controller;
fetch('/api/command-palette?q=' + encodeURIComponent(query), { signal: controller.signal }) fetch("/api/command-palette?q=" + encodeURIComponent(query), { signal: controller.signal })
.then((res: Response) => { .then((res: Response) => {
if (!res.ok) { if (!res.ok) {
return []; return [];
@@ -372,7 +372,7 @@ const fetchPaletteItems = (query: string): void => {
return; return;
} }
activeRequestController = undefined; activeRequestController = undefined;
console.error('Command palette error:', err); console.error("Command palette error:", err);
renderItems([]); renderItems([]);
}); });
}; };
@@ -382,7 +382,7 @@ const scheduleFetch = (): void => {
window.clearTimeout(fetchTimeout); window.clearTimeout(fetchTimeout);
} }
const query = paletteInput?.value.trim() || ''; const query = paletteInput?.value.trim() || "";
fetchTimeout = window.setTimeout(() => fetchPaletteItems(query), query.length >= 2 ? 300 : 120); fetchTimeout = window.setTimeout(() => fetchPaletteItems(query), query.length >= 2 ? 300 : 120);
}; };
@@ -391,13 +391,13 @@ const openPalette = (): void => {
return; return;
} }
paletteDialog.classList.remove('hidden'); paletteDialog.classList.remove("hidden");
paletteDialog.classList.add('flex'); paletteDialog.classList.add("flex");
paletteDialog.setAttribute('aria-hidden', 'false'); paletteDialog.setAttribute("aria-hidden", "false");
paletteInput.value = ''; paletteInput.value = "";
paletteInput.focus(); paletteInput.focus();
continueExpanded = false; continueExpanded = false;
fetchPaletteItems(''); fetchPaletteItems("");
}; };
const closePalette = (): void => { const closePalette = (): void => {
@@ -405,14 +405,14 @@ const closePalette = (): void => {
return; return;
} }
paletteDialog.classList.add('hidden'); paletteDialog.classList.add("hidden");
paletteDialog.classList.remove('flex'); paletteDialog.classList.remove("flex");
paletteDialog.setAttribute('aria-hidden', 'true'); paletteDialog.setAttribute("aria-hidden", "true");
if (activeRequestController) { if (activeRequestController) {
activeRequestController.abort(); activeRequestController.abort();
activeRequestController = undefined; activeRequestController = undefined;
} }
paletteInput.value = ''; paletteInput.value = "";
allPaletteItems = []; allPaletteItems = [];
paletteItems = []; paletteItems = [];
continueExpanded = false; continueExpanded = false;
@@ -426,26 +426,26 @@ const onDocumentClick = (event: MouseEvent): void => {
}; };
const onInputKeydown = (event: KeyboardEvent): void => { const onInputKeydown = (event: KeyboardEvent): void => {
if (event.key === 'ArrowDown') { if (event.key === "ArrowDown") {
event.preventDefault(); event.preventDefault();
selectItem(selectedIndex + 1); selectItem(selectedIndex + 1);
return; return;
} }
if (event.key === 'ArrowUp') { if (event.key === "ArrowUp") {
event.preventDefault(); event.preventDefault();
selectItem(selectedIndex - 1); selectItem(selectedIndex - 1);
return; return;
} }
if (event.key === 'Enter') { if (event.key === "Enter") {
event.preventDefault(); event.preventDefault();
runSelectedItem(); runSelectedItem();
} }
}; };
const onDocumentKeydown = (event: KeyboardEvent): void => { const onDocumentKeydown = (event: KeyboardEvent): void => {
const commandShortcut = event.key.toLowerCase() === 'p' && (event.metaKey || event.ctrlKey); const commandShortcut = event.key.toLowerCase() === "p" && (event.metaKey || event.ctrlKey);
if (commandShortcut && !isTypingTarget(event.target)) { if (commandShortcut && !isTypingTarget(event.target)) {
event.preventDefault(); event.preventDefault();
@@ -457,13 +457,13 @@ const onDocumentKeydown = (event: KeyboardEvent): void => {
return; return;
} }
if (event.key === '/' && !isTypingTarget(event.target)) { if (event.key === "/" && !isTypingTarget(event.target)) {
event.preventDefault(); event.preventDefault();
openPalette(); openPalette();
return; return;
} }
if (event.key === 'Escape' && isOpen()) { if (event.key === "Escape" && isOpen()) {
event.preventDefault(); event.preventDefault();
closePalette(); closePalette();
} }
@@ -480,16 +480,16 @@ const initCommandPalette = (): void => {
} }
setShortcutHints(); setShortcutHints();
paletteOpenButtons.forEach(button => { paletteOpenButtons.forEach((button) => {
button.addEventListener('click', openPalette); button.addEventListener("click", openPalette);
}); });
paletteCloseButtons.forEach(button => { paletteCloseButtons.forEach((button) => {
button.addEventListener('click', closePalette); button.addEventListener("click", closePalette);
}); });
paletteInput.addEventListener('input', scheduleFetch); paletteInput.addEventListener("input", scheduleFetch);
paletteInput.addEventListener('keydown', onInputKeydown); paletteInput.addEventListener("keydown", onInputKeydown);
document.addEventListener('click', onDocumentClick); document.addEventListener("click", onDocumentClick);
document.addEventListener('keydown', onDocumentKeydown); document.addEventListener("keydown", onDocumentKeydown);
}; };
initCommandPalette(); initCommandPalette();