@salesforcedevs/dx-components 0.19.3-alpha.3 → 0.19.3-alpha.33

package/package.json

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

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

@@ -27,6 +27,7 @@ export const SESSION_KEY = "dx-sidebar-search-state";
 
 const DEFAULT_RESULT_COUNT = 20;
 const SEARCH_DEBOUNCE_DELAY = 780;
+const HIGHLIGHT_DEBOUNCE_DELAY = 200;
 
 const UserRecentSearches = new RecentSearches();
 
@@ -140,12 +141,6 @@ 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) {
-            this.dispatchHighlightedTermChange();
-        }
-
         this.didRender = true;
     }
 
@@ -217,10 +212,6 @@ export default class SidebarSearch extends LightningElement {
             this.onResultListChange
         );
 
-        if (this.value) {
-            this.dispatchHighlightedTermChange();
-        }
-
         if (!this.preloadedState) {
             if (this.value) {
                 this.submitSearch();
@@ -323,6 +314,7 @@ export default class SidebarSearch extends LightningElement {
 
     private dispatchOnChangeEvent(results: Result[]) {
         this.updateSessionStorage();
+        this.dispatchHighlightedTermChange();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -337,15 +329,32 @@ export default class SidebarSearch extends LightningElement {
         this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
     }
 
-    private dispatchHighlightedTermChange() {
+    private dispatchHighlightedTermChange = () => {
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return;
+        }
+        const normalizedTermsToHighlight = Array.from(
+            new Set(
+                [
+                    this.value,
+                    Object.values(termsToHighlight),
+                    Object.values(phrasesToHighlight)
+                ].flat(2)
+            )
+        );
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
-                detail: this.value,
+                detail: {
+                    query: this.value,
+                    termsToHighlight: normalizedTermsToHighlight
+                },
                 composed: true,
                 bubbles: true
             })
         );
-    }
+    };
 
     private updateRecentSearches = () =>
         (this.recentSearches = UserRecentSearches.get().map((item: string) => ({
@@ -400,7 +409,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,13 +2,16 @@ import { createSearchRegExp } from "utils/regexps";
 
 const MARK_TAGS = /<\/?mark>/gi;
 
+// mark tags dif color on ref page
+
 export const highlightTerms = (
     // eslint-disable-next-line no-undef
     elements: NodeListOf<Element>,
-    searchTerm: string
+    { query, termsToHighlight }: { query: string; termsToHighlight: string[] }
 ): void => {
-    searchTerm = searchTerm.trim();
-    const searchExp = createSearchRegExp(searchTerm);
+    const searchExp = createSearchRegExp(termsToHighlight);
+    let scrolled = false;
+    console.log({ elements, query, termsToHighlight, searchExp });
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -17,20 +20,33 @@ export const highlightTerms = (
             return;
         }
 
-        let innerHtml = element.innerHTML.replace(
-            // Remove previously added mark tags
-            MARK_TAGS,
-            ""
-        );
+        try {
+            let innerHtml = element.innerHTML.replace(
+                // Remove previously added mark tags
+                MARK_TAGS,
+                ""
+            );
+
+            if (query) {
+                innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+            }
 
-        if (searchTerm) {
-            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+            element.innerHTML = innerHtml;
+        } catch (e) {
+            console.error(e, element);
         }
 
-        element.innerHTML = innerHtml;
+        // element
+        //     .querySelectorAll("mark")
+        //     .forEach(
+        //         (el) =>
+        //             (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
+        //     );
+
+        const mark = element.querySelector("mark");
+        if (mark && !scrolled) {
+            scrolled = true;
+            mark.scrollIntoView({ block: "nearest" });
+        }
     });
-    if (elements.length > 0) {
-        console.log(elements[0], 'scrolling')
-        elements[0].scrollIntoView(true);
-    }
 };

package/src/modules/utils/regexps/regexps.ts

@@ -1,5 +1,7 @@
 const escapeRegExp = (text: string) =>
     text.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
 
-export const createSearchRegExp = (searchTerm: string): RegExp =>
-    new RegExp(`(?:${escapeRegExp(searchTerm)})(?![^<>]*>)`, "gi");
+export const createSearchRegExp = (searchTerms: string[]): RegExp => {
+    const escaped = searchTerms.map((term) => escapeRegExp(term.trim()));
+    return new RegExp(`(?:${escaped.join("|")})(?![^<>]*>)`, "gi");
+};