@salesforcedevs/dx-components 0.19.3-alpha.18 → 0.19.3-alpha.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha.18",
+    "version": "0.19.3-alpha.22",
     "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();
-            document.addEventListener('search-syncer-initialized', () => console.log('SEARCH SYNCER INITD'))
         }
 
         this.didRender = true;
@@ -337,6 +335,8 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchHighlightedTermChange = debounce(() => {
+        console.log(this.engine);
+        console.log(this.engine?.state.search.response.termsToHighlight);
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
                 detail: this.value,

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,19 @@ 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) => {
+            console.log(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" });
         }
     });