@salesforcedevs/dx-components 0.19.3-alpha.5 → 0.19.3-alpha.50

package/package.json

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

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -122,7 +122,10 @@ export default class Sidebar extends LightningElement {
             this.assignFilteredTrees();
             this.dispatchEvent(
                 new CustomEvent("highlightedtermchange", {
-                    detail: this.searchText,
+                    detail: {
+                        query: this.searchText,
+                        termsToHighlight: [this.searchText]
+                    },
                     composed: true,
                     bubbles: true
                 })

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();
 
@@ -88,6 +89,25 @@ export default class SidebarSearch extends LightningElement {
     private fetchingMoreResults: boolean = false;
     private didRender = false;
 
+    private get termsToHighlight(): string[] | null {
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return null;
+        }
+        return Array.from(
+            new Set(
+                [
+                    this.value,
+                    Object.keys(termsToHighlight),
+                    Object.keys(phrasesToHighlight),
+                    Object.values(termsToHighlight),
+                    Object.values(phrasesToHighlight)
+                ].flat(2)
+            )
+        ) as string[];
+    }
+
     private get hasCorrectCoveoConfig(): boolean {
         const coveoConfigurations = [
             this.coveoOrganizationId,
@@ -140,12 +160,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 +231,6 @@ export default class SidebarSearch extends LightningElement {
             this.onResultListChange
         );
 
-        if (this.value) {
-            this.dispatchHighlightedTermChange();
-        }
-
         if (!this.preloadedState) {
             if (this.value) {
                 this.submitSearch();
@@ -323,6 +333,7 @@ export default class SidebarSearch extends LightningElement {
 
     private dispatchOnChangeEvent(results: Result[]) {
         this.updateSessionStorage();
+        this.dispatchHighlightedTermChange();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -337,15 +348,21 @@ export default class SidebarSearch extends LightningElement {
         this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
     }
 
-    private dispatchHighlightedTermChange() {
-        this.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: this.value,
-                composed: true,
-                bubbles: true
-            })
-        );
-    }
+    private dispatchHighlightedTermChange = () => {
+        if (this.termsToHighlight) {
+            console.log('dispatching terms to highlight')
+            this.dispatchEvent(
+                new CustomEvent("highlightedtermchange", {
+                    detail: {
+                        query: this.value,
+                        termsToHighlight: this.termsToHighlight
+                    },
+                    composed: true,
+                    bubbles: true
+                })
+            );
+        }
+    };
 
     private updateRecentSearches = () =>
         (this.recentSearches = UserRecentSearches.get().map((item: string) => ({
@@ -400,7 +417,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,15 +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-") ||
@@ -18,24 +20,27 @@ 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
+                element.innerHTML = element.innerHTML.replace(MARK_TAGS, "");
+            }
+            if (element.innerHTML.match(searchExp) && query) {
+                element.innerHTML = element.innerHTML.replace(
+                    searchExp,
+                    '<mark style="background-color:var(--dx-g-yellow-vibrant-90)">$&</mark>'
+                );
+            }
+        } catch (e) {
+            console.error(
+                `${element} could not be parsed by the highlight utility: ${e}`
+            );
         }
 
         const mark = element.querySelector("mark");
-
         if (mark && !scrolled) {
-            console.log(mark)
             scrolled = true;
-            mark.scrollIntoView();
+            mark.scrollIntoView({ block: "nearest" });
         }
-
-        element.innerHTML = innerHtml;
     });
 };

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");
+};