diff --git a/apps/client/src/services/note_autocomplete.ts b/apps/client/src/services/note_autocomplete.ts index 1138b191e7..917e1ce893 100644 --- a/apps/client/src/services/note_autocomplete.ts +++ b/apps/client/src/services/note_autocomplete.ts @@ -30,6 +30,8 @@ export interface Suggestion { notePathTitle?: string; notePath?: string; highlightedNotePathTitle?: string; + attributeSnippet?: string; + highlightedAttributeSnippet?: string; action?: string | "create-note" | "search-notes" | "external-link" | "command"; parentNoteId?: string; icon?: string; @@ -308,11 +310,12 @@ function initNoteAutocomplete($el: JQuery, options?: Options) { displayKey: "notePathTitle", templates: { suggestion: (suggestion) => { + // Handle different suggestion types if (suggestion.action === "command") { let html = `
`; html += ``; html += `
`; - html += `
${suggestion.highlightedNotePathTitle}
`; + html += `
${suggestion.highlightedNotePathTitle || suggestion.noteTitle || ''}
`; if (suggestion.commandDescription) { html += `
${suggestion.commandDescription}
`; } @@ -323,7 +326,20 @@ function initNoteAutocomplete($el: JQuery, options?: Options) { html += '
'; return html; } - return ` ${suggestion.highlightedNotePathTitle}`; + + // For note suggestions, match Quick Search structure + // Title row with icon + let html = `
`; + html += ``; + html += `${suggestion.highlightedNotePathTitle || ''}`; + html += `
`; + + // Add attribute snippet if available (inline display) + if (suggestion.highlightedAttributeSnippet && suggestion.highlightedAttributeSnippet.trim()) { + html += `
${suggestion.highlightedAttributeSnippet}
`; + } + + return html; } }, // we can't cache identical searches because notes can be created / renamed, new recent notes can be added diff --git a/apps/client/src/services/quick_search_renderer.ts b/apps/client/src/services/quick_search_renderer.ts new file mode 100644 index 0000000000..5fd061b2fb --- /dev/null +++ b/apps/client/src/services/quick_search_renderer.ts @@ -0,0 +1,62 @@ +/** + * Quick Search specific result renderer + * + * This module provides HTML rendering functionality specifically for the Quick Search widget. + * The Jump To dialog (note_autocomplete) intentionally has its own inline rendering logic + * with different styling and layout requirements. + * + * SECURITY NOTE: HTML Snippet Handling + * The highlighted snippet fields (highlightedAttributeSnippet) contain + * pre-sanitized HTML from the server. The server-side processing: + * 1. Escapes all HTML using the escape-html library + * 2. Adds safe HTML tags for display: for search term highlighting + * 3. See apps/server/src/services/search/services/search.ts for implementation + * + * This means the HTML snippets can be safely inserted without additional escaping on the client side. + */ + +import type { Suggestion } from "./note_autocomplete.js"; + +/** + * Creates HTML for a Quick Search result item + * + * @param result - The search result item to render + * @returns HTML string formatted for Quick Search widget display + */ +export function createSearchResultHtml(result: Suggestion): string { + // Handle command action + if (result.action === "command") { + let html = `
`; + html += ``; + html += `
`; + html += `
${result.highlightedNotePathTitle || ''}
`; + if (result.commandDescription) { + html += `
${result.commandDescription}
`; + } + html += `
`; + if (result.commandShortcut) { + html += `${result.commandShortcut}`; + } + html += '
'; + return html; + } + + // Default: render as note result + // Wrap everything in a flex column container + let itemHtml = `
`; + + // Title row with icon + itemHtml += `
`; + itemHtml += ``; + itemHtml += `${result.highlightedNotePathTitle || result.notePathTitle || ''}`; + itemHtml += `
`; + + // Add attribute snippet if available (inline display) + if (result.highlightedAttributeSnippet && result.highlightedAttributeSnippet.trim()) { + itemHtml += `
${result.highlightedAttributeSnippet}
`; + } + + itemHtml += `
`; + + return itemHtml; +} \ No newline at end of file diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index c5b24f88e8..ca0b657b04 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -840,8 +840,25 @@ table.promoted-attributes-in-tooltip th { .aa-dropdown-menu .aa-suggestion { cursor: pointer; - padding: 5px; + padding: 12px 16px; margin: 0; + line-height: 1.4; + position: relative; + white-space: normal; +} + +/* Add separator between Jump To suggestions like Quick Search */ +.jump-to-note-results .aa-suggestion:not(:last-child)::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 2px; + background: var(--main-border-color); + border-radius: 1px; + opacity: 0.4; } .aa-dropdown-menu .aa-suggestion p { @@ -1786,7 +1803,7 @@ textarea { } .jump-to-note-results .aa-suggestions { - padding: 1rem; + padding: 0; } /* Command palette styling */ @@ -2260,13 +2277,43 @@ footer.webview-footer button { padding: 1px 10px 1px 10px; } -/* Search result highlighting */ +/* Search result highlighting - applies to both Quick Search and Jump To */ .search-result-title b, -.search-result-content b { +.search-result-content b, +.search-result-attributes b, +.quick-search .search-result-title b, +.quick-search .search-result-content b, +.quick-search .search-result-attributes b { font-weight: 900; color: var(--admonition-warning-accent-color); } +/* Quick Search specific snippet styling */ +.quick-search .search-result-content { + font-size: 0.85em; + color: var(--main-text-color); + opacity: 0.7; +} + +.quick-search .search-result-attributes { + font-size: 0.75em; + color: var(--muted-text-color); + opacity: 0.5; +} + +/* Jump To (autocomplete) specific snippet styling */ +.aa-dropdown-menu .search-result-content { + font-size: 0.82em; + color: var(--main-text-color); + opacity: 0.6; +} + +.aa-dropdown-menu .search-result-attributes { + font-size: 0.75em; + color: var(--muted-text-color); + opacity: 0.5; +} + /* Customized icons */ .bx-tn-toc::before { diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index c992f7ecbd..02551ce662 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -530,17 +530,16 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after { } /* List item */ -.jump-to-note-dialog .aa-suggestions div, -.note-detail-empty .aa-suggestions div { +.jump-to-note-dialog .aa-suggestions .aa-suggestion, +.note-detail-empty .aa-suggestions .aa-suggestion { border-radius: 6px; - padding: 6px 12px; color: var(--menu-text-color); cursor: default; } /* Selected list item */ -.jump-to-note-dialog .aa-suggestions div.aa-cursor, -.note-detail-empty .aa-suggestions div.aa-cursor { +.jump-to-note-dialog .aa-suggestions .aa-suggestion.aa-cursor, +.note-detail-empty .aa-suggestions .aa-suggestion.aa-cursor { background: var(--hover-item-background-color); color: var(--hover-item-text-color); } \ No newline at end of file diff --git a/apps/client/src/widgets/quick_search.ts b/apps/client/src/widgets/quick_search.ts index 2449d4bc5f..fdc8314027 100644 --- a/apps/client/src/widgets/quick_search.ts +++ b/apps/client/src/widgets/quick_search.ts @@ -7,6 +7,7 @@ import appContext from "../components/app_context.js"; import shortcutService from "../services/shortcuts.js"; import { t } from "../services/i18n.js"; import { Dropdown, Tooltip } from "bootstrap"; +import { createSearchResultHtml } from "../services/quick_search_renderer.js"; const TPL = /*html*/`
@@ -91,8 +92,6 @@ interface QuickSearchResponse { noteTitle: string; notePathTitle: string; highlightedNotePathTitle: string; - contentSnippet?: string; - highlightedContentSnippet?: string; attributeSnippet?: string; highlightedAttributeSnippet?: string; icon: string; @@ -236,24 +235,14 @@ export default class QuickSearchWidget extends BasicWidget { const $item = $(''); - // Build the display HTML with content snippet below the title - let itemHtml = `
-
- - ${result.highlightedNotePathTitle} -
`; - - // Add attribute snippet (tags/attributes) below the title if available - if (result.highlightedAttributeSnippet) { - itemHtml += `
${result.highlightedAttributeSnippet}
`; - } - - // Add content snippet below the attributes if available - if (result.highlightedContentSnippet) { - itemHtml += `
${result.highlightedContentSnippet}
`; - } - - itemHtml += `
`; + // Use the shared renderer for consistent display + const itemHtml = createSearchResultHtml({ + icon: result.icon, + notePathTitle: result.notePathTitle, + highlightedNotePathTitle: result.highlightedNotePathTitle, + highlightedAttributeSnippet: result.highlightedAttributeSnippet, + highlightedContentSnippet: result.highlightedContentSnippet + }); $item.html(itemHtml); diff --git a/apps/server/src/services/search/search_result.ts b/apps/server/src/services/search/search_result.ts index bf8a33524b..ccfcb65537 100644 --- a/apps/server/src/services/search/search_result.ts +++ b/apps/server/src/services/search/search_result.ts @@ -33,8 +33,6 @@ class SearchResult { score: number; notePathTitle: string; highlightedNotePathTitle?: string; - contentSnippet?: string; - highlightedContentSnippet?: string; attributeSnippet?: string; highlightedAttributeSnippet?: string; private fuzzyScore: number; // Track fuzzy score separately diff --git a/apps/server/src/services/search/services/search.ts b/apps/server/src/services/search/services/search.ts index 0d3592455c..b55c6e54ae 100644 --- a/apps/server/src/services/search/services/search.ts +++ b/apps/server/src/services/search/services/search.ts @@ -285,15 +285,19 @@ function performSearch(expression: Expression, searchContext: SearchContext, ena const noteSet = expression.execute(allNoteSet, executionContext, searchContext); - const searchResults = noteSet.notes.map((note) => { - const notePathArray = executionContext.noteIdToNotePath[note.noteId] || note.getBestNotePath(); + const searchResults = noteSet.notes + .map((note) => { + const notePathArray = executionContext.noteIdToNotePath[note.noteId] || note.getBestNotePath(); + + if (!notePathArray) { + // Log the orphaned note but don't throw - just skip it + log.info(`Skipping orphaned note without path: ${note.noteId} "${note.title}"`); + return null; + } - if (!notePathArray) { - throw new Error(`Can't find note path for note ${JSON.stringify(note.getPojo())}`); - } - - return new SearchResult(notePathArray); - }); + return new SearchResult(notePathArray); + }) + .filter(result => result !== null) as SearchResult[]; for (const res of searchResults) { res.computeScore(searchContext.fulltextQuery, searchContext.highlightedTokens, enableFuzzyMatching); @@ -497,6 +501,12 @@ function extractContentSnippet(noteId: string, searchTokens: string[], maxLength } } + // If no match found in content, always show the beginning of the note + // This ensures users always get context even when searching by tags/attributes + if (!matchFound) { + snippetStart = 0; + } + // Extract snippet let snippet = content.substring(snippetStart, snippetStart + maxLength); @@ -575,11 +585,29 @@ function extractAttributeSnippet(noteId: string, searchTokens: string[], maxLeng } } + // If no matching attributes found but we have attributes, show the first few + // This provides context even when searching didn't match attributes + if (matchingAttributes.length === 0 && attributes.length > 0) { + // Filter out internal attributes if not searching for them + const visibleAttributes = attributes.filter(attr => + !attr.name?.startsWith("internal") && + !attr.name?.startsWith("dateCreated") && + !attr.name?.startsWith("dateModified") + ); + + // Take up to 4 visible attributes + matchingAttributes = visibleAttributes.slice(0, 4).map(attr => ({ + name: attr.name || "", + value: attr.value || "", + type: attr.type || "" + })); + } + if (matchingAttributes.length === 0) { return ""; } - // Limit to 4 lines maximum, similar to content snippet logic + // Display attributes inline, separated by spaces const lines: string[] = []; for (const attr of matchingAttributes.slice(0, 4)) { let line = ""; @@ -597,7 +625,7 @@ function extractAttributeSnippet(noteId: string, searchTokens: string[], maxLeng } } - let snippet = lines.join('\n'); + let snippet = lines.join(' '); // Join with spaces instead of newlines // Apply length limit while preserving line structure if (snippet.length > maxLength) { @@ -637,9 +665,8 @@ function searchNotesForAutocomplete(query: string, fastSearch: boolean = true) { const trimmed = allSearchResults.slice(0, 200); - // Extract content and attribute snippets + // Extract attribute snippets only (content snippets removed for performance) for (const result of trimmed) { - result.contentSnippet = extractContentSnippet(result.noteId, searchContext.highlightedTokens); result.attributeSnippet = extractAttributeSnippet(result.noteId, searchContext.highlightedTokens); } @@ -652,8 +679,6 @@ function searchNotesForAutocomplete(query: string, fastSearch: boolean = true) { noteTitle: title, notePathTitle: result.notePathTitle, highlightedNotePathTitle: result.highlightedNotePathTitle, - contentSnippet: result.contentSnippet, - highlightedContentSnippet: result.highlightedContentSnippet, attributeSnippet: result.attributeSnippet, highlightedAttributeSnippet: result.highlightedAttributeSnippet, icon: icon ?? "bx bx-note" @@ -679,17 +704,9 @@ function highlightSearchResults(searchResults: SearchResult[], highlightedTokens for (const result of searchResults) { result.highlightedNotePathTitle = result.notePathTitle.replace(/[<{}]/g, ""); - // Initialize highlighted content snippet - if (result.contentSnippet) { - // Escape HTML but preserve newlines for later conversion to
- result.highlightedContentSnippet = escapeHtml(result.contentSnippet); - // Remove any stray < { } that might interfere with our highlighting markers - result.highlightedContentSnippet = result.highlightedContentSnippet.replace(/[<{}]/g, ""); - } - // Initialize highlighted attribute snippet if (result.attributeSnippet) { - // Escape HTML but preserve newlines for later conversion to
+ // Escape HTML result.highlightedAttributeSnippet = escapeHtml(result.attributeSnippet); // Remove any stray < { } that might interfere with our highlighting markers result.highlightedAttributeSnippet = result.highlightedAttributeSnippet.replace(/[<{}]/g, ""); @@ -721,16 +738,6 @@ function highlightSearchResults(searchResults: SearchResult[], highlightedTokens } } - // Highlight in content snippet - if (result.highlightedContentSnippet) { - const contentRegex = new RegExp(escapeRegExp(token), "gi"); - while ((match = contentRegex.exec(normalizeString(result.highlightedContentSnippet))) !== null) { - result.highlightedContentSnippet = wrapText(result.highlightedContentSnippet, match.index, token.length, "{", "}"); - // 2 characters are added, so we need to adjust the index - contentRegex.lastIndex += 2; - } - } - // Highlight in attribute snippet if (result.highlightedAttributeSnippet) { const attributeRegex = new RegExp(escapeRegExp(token), "gi"); @@ -748,18 +755,10 @@ function highlightSearchResults(searchResults: SearchResult[], highlightedTokens result.highlightedNotePathTitle = result.highlightedNotePathTitle.replace(/{/g, "").replace(/}/g, ""); } - if (result.highlightedContentSnippet) { - // Replace highlighting markers with HTML tags - result.highlightedContentSnippet = result.highlightedContentSnippet.replace(/{/g, "").replace(/}/g, ""); - // Convert newlines to
tags for HTML display - result.highlightedContentSnippet = result.highlightedContentSnippet.replace(/\n/g, "
"); - } - if (result.highlightedAttributeSnippet) { // Replace highlighting markers with HTML tags result.highlightedAttributeSnippet = result.highlightedAttributeSnippet.replace(/{/g, "").replace(/}/g, ""); - // Convert newlines to
tags for HTML display - result.highlightedAttributeSnippet = result.highlightedAttributeSnippet.replace(/\n/g, "
"); + // Keep inline display - no conversion of newlines needed } } }