@salesforcedevs/dx-components 0.19.3-alpha.4 → 0.19.3-alpha.43

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha.4",
+    "version": "0.19.3-alpha.43",
     "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,34 @@ 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.keys(termsToHighlight),
+                    Object.keys(phrasesToHighlight),
+                    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 +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

@@ -1,14 +1,17 @@
 import { createSearchRegExp } from "utils/regexps";
 
-const MARK_TAGS = /<\/?mark>/gi;
+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
+    elements: NodeListOf<HTMLElement>,
+    { 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,43 @@ export const highlightTerms = (
             return;
         }
 
-        let innerHtml = element.innerHTML.replace(
-            // Remove previously added mark tags
-            MARK_TAGS,
-            ""
-        );
-
-        if (searchTerm) {
-            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        try {
+            if (element.innerHTML.match(MARK_TAGS)) {
+                // Remove previously added mark tags
+                console.log(
+                    "matching marks",
+                    element,
+                    element.style.backgroundColor
+                );
+                element.innerHTML = element.innerHTML.replace(MARK_TAGS, "");
+            }
+            if (element.innerHTML.match(searchExp) && query) {
+                console.log("matching", element, element.innerHTML);
+                element.innerHTML = element.innerHTML.replace(
+                    searchExp,
+                    "<mark>$&</mark>"
+                );
+                console.log("matching modified", element.innerHTML);
+            }
+        } catch (e) {
+            console.error(
+                `${element} could not be parsed by the highlight utility: ${e}`
+            );
         }
 
-        element.innerHTML = innerHtml;
+        console.log(element.querySelectorAll("mark"));
+
+        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");
+};