@salesforcedevs/dx-components 1.35.2 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.35.2",
+    "version": "1.36.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "32674746e426242b35fb5a5a28c4184431092ac3"
+    "gitHead": "e85fc1bb496e99a4ba453db278a465079bcf6385"
 }

package/src/modules/dx/searchHybrid/searchHybrid.html

@@ -112,12 +112,20 @@
                             <p if:true={result.hasDate} class="dx-result-date">
                                 {result.displayDate}
                             </p>
-                            <p
-                                if:true={result.hasDescription}
-                                class="dx-result-excerpt"
-                            >
-                                {result.description}
-                            </p>
+                            <!-- Highlighted snippet (P4.5): innerHTML set in
+                                 renderedCallback, keyed by data-snippet-key. -->
+                            <template lwc:if={result.hasSnippetHtml}>
+                                <p
+                                    class="dx-result-excerpt"
+                                    data-snippet-key={result.key}
+                                    lwc:dom="manual"
+                                ></p>
+                            </template>
+                            <template lwc:elseif={result.hasDescription}>
+                                <p class="dx-result-excerpt">
+                                    {result.description}
+                                </p>
+                            </template>
                         </li>
                     </template>
                 </ul>

package/src/modules/dx/searchHybrid/searchHybrid.ts

@@ -6,6 +6,7 @@ import {
 import type { LocaleOption } from "docUtils/searchLocale";
 import {
     decodeHtmlEntities,
+    highlightedSnippetHtml,
     isSortOption,
     SORT_OPTIONS,
     type SearchResult,
@@ -32,6 +33,12 @@ interface DisplayResult {
     title: string;
     description: string | null;
     hasDescription: boolean;
+    // Highlighted-snippet HTML (P4.5), or null to fall back to the plain-text
+    // description. When set, it is injected as innerHTML into the matching
+    // lwc:dom="manual" node (see renderedCallback); when null the description
+    // text path renders exactly as before.
+    snippetHtml: string | null;
+    hasSnippetHtml: boolean;
     contentTypeLabel: string | null;
     hasBadge: boolean;
     displayDate: string;
@@ -154,12 +161,17 @@ export default class SearchHybrid extends LightningElement {
                     : null;
             const label = this.contentTypeLabel(r.contentType);
             const displayDate = this.formatDate(r.lastmod);
+            // Prefer the highlighted snippet (headline source only); otherwise
+            // null → the description text path below renders unchanged.
+            const snippetHtml = highlightedSnippetHtml(r);
             return {
                 key: `${r.url}-${i}`,
                 url: r.url,
                 title: decodeHtmlEntities(r.title),
                 description,
                 hasDescription: description !== null,
+                snippetHtml,
+                hasSnippetHtml: snippetHtml !== null,
                 contentTypeLabel: label,
                 hasBadge: label !== null,
                 displayDate,
@@ -170,6 +182,30 @@ export default class SearchHybrid extends LightningElement {
         });
     }
 
+    /**
+     * Inject snippet HTML into the lwc:dom="manual" excerpt nodes after every
+     * render. LWC won't bind innerHTML declaratively, so we set it imperatively
+     * here, keyed by the result's `key` (data-snippet-key) so reorder/pagination
+     * can't cross-wire rows. Nodes without a matching row (fallback text path)
+     * are left untouched.
+     */
+    renderedCallback(): void {
+        const byKey = new Map(
+            this.displayResults
+                .filter((r) => r.hasSnippetHtml)
+                .map((r) => [r.key, r.snippetHtml as string])
+        );
+        const nodes = this.template.querySelectorAll<HTMLElement>(
+            ".dx-result-excerpt[data-snippet-key]"
+        );
+        nodes.forEach((node) => {
+            const html = byKey.get(node.dataset.snippetKey ?? "");
+            if (html != null && node.innerHTML !== html) {
+                node.innerHTML = html;
+            }
+        });
+    }
+
     /**
      * Null/NaN-safe date formatter (mirrors arch/searchHybrid). lastmod is null
      * for the entire SSG corpus (the common case → ""); the WordPress portion