@salesforcedevs/dx-components 0.19.3-alpha.19 → 0.19.3-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha.19",
+    "version": "0.19.3-alpha.23",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -144,9 +144,7 @@ export default class SidebarSearch extends LightningElement {
         // If this is the first render and there is a search value, trigger
         // term highlighting
         if (!this.didRender && this.value) {
-            console.log('dispatching highlight term in the render')
             this.dispatchHighlightedTermChange();
-            window.addEventListener('search-syncer-initialized', () => console.log('SEARCH SYNCER INITD'))
         }
 
         this.didRender = true;
@@ -322,6 +320,7 @@ export default class SidebarSearch extends LightningElement {
 
     private dispatchOnChangeEvent(results: Result[]) {
         this.updateSessionStorage();
+        this.dispatchHighlightedTermChange();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -337,6 +336,19 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchHighlightedTermChange = debounce(() => {
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return;
+        }
+        const terms = new Set(
+            [
+                Object.values(termsToHighlight),
+                Object.values(phrasesToHighlight),
+                this.value
+            ].flat()
+        );
+        console.log({ terms });
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
                 detail: this.value,
@@ -399,7 +411,6 @@ export default class SidebarSearch extends LightningElement {
         this.value = e.detail;
 
         this.handleValueChange(false);
-        this.dispatchHighlightedTermChange();
     }
 
     private onInputFocus() {

package/src/modules/utils/highlight/highlight.ts

@@ -2,9 +2,7 @@ import { createSearchRegExp } from "utils/regexps";
 
 const MARK_TAGS = /<\/?mark>/gi;
 
-// mark tags not being removed from ref page
 // mark tags dif color on ref page
-// need to reset to first match on highlight change
 
 export const highlightTerms = (
     // eslint-disable-next-line no-undef
@@ -14,7 +12,6 @@ export const highlightTerms = (
     searchTerm = searchTerm.trim();
     const searchExp = createSearchRegExp(searchTerm);
     let scrolled = false;
-    console.log('highlighting called', elements)
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -34,17 +31,21 @@ export const highlightTerms = (
                 innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
             }
 
-            element.setAttribute('lwc:dom', 'manual')
             element.innerHTML = innerHtml;
         } catch (e) {
             console.error(e, element);
         }
 
-        console.log("should i scroll?");
+        element
+            .querySelectorAll("mark")
+            .forEach(
+                (el) =>
+                    (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
+            );
+
         const mark = element.querySelector("mark");
         if (mark && !scrolled) {
             scrolled = true;
-            console.log("scrolling", mark);
             mark.scrollIntoView({ block: "nearest" });
         }
     });