@salesforcedevs/dx-components 0.25.1 → 0.25.2-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.25.1",
+    "version": "0.25.2-alpha.30",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,6 +28,5 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    },
-    "gitHead": "19fa005af70d80558071eaacf3b0366d99004754"
+    }
 }

package/src/modules/dx/groupText/groupText.stories.ts

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import mockProps from "./__tests__/mockProps";
 import featureListMockProps from "../featuresList/__tests__/mockProps";
-import { renderStyle } from "../../utils/storybook/storybook";
+import { renderStyle } from "../../utils-internal/storybook/storybook";
 
 export default {
     title: "dx/dx-group-text",

package/src/modules/dx/sidebar/sidebar.stories.ts

@@ -1,5 +1,8 @@
 import { html } from "lit-html";
-import { coveoXMLDocsConfig, coveoSFDocsConfig } from "../../utils/coveo/coveo";
+import {
+    coveoXMLDocsConfig,
+    coveoSFDocsConfig
+} from "../../utils-internal/coveo/coveo";
 import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
 
 export default {

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

@@ -78,10 +78,18 @@ export default class Sidebar extends LightningElement {
         this.expanded = !this.matchMedia.matches;
         this.onMediaChange(this.matchMedia);
         this.matchMedia.addEventListener("change", this.onMediaChange);
+        window.addEventListener(
+            "referencecontentloaded",
+            this.dispatchHighlightedTermChange
+        );
     }
 
     disconnectedCallback() {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
+        window.removeEventListener(
+            "referencecontentloaded",
+            this.dispatchHighlightedTermChange
+        );
     }
 
     private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
@@ -120,16 +128,23 @@ export default class Sidebar extends LightningElement {
         window.clearTimeout(this._searchTimeout);
         this._searchTimeout = window.setTimeout(() => {
             this.assignFilteredTrees();
-            this.dispatchEvent(
-                new CustomEvent("highlightedtermchange", {
-                    detail: this.searchText,
-                    composed: true,
-                    bubbles: true
-                })
-            );
+            this.dispatchHighlightedTermChange();
         }, WAIT_TIME);
     }
 
+    private dispatchHighlightedTermChange = () => {
+        this.dispatchEvent(
+            new CustomEvent("highlightedtermchange", {
+                detail: {
+                    query: this.searchText,
+                    termsToHighlight: [this.searchText]
+                },
+                composed: true,
+                bubbles: true
+            })
+        );
+    };
+
     private assignFilteredTrees() {
         this.filteredTrees = this._trees
             .map((singleTree) => {

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

@@ -1,9 +1,5 @@
-import { createElement } from "lwc";
 import SidebarSearch from "dx/sidebarSearch";
-import {
-    createRenderComponent,
-    renderLightningElement
-} from "utils-internal/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import { coveoXMLDocsConfig } from "utils-internal/coveo";
 import { mockQueryParameter, unmockQueryParameter } from "utils-internal/jest";
 import { SESSION_KEY } from "dx/sidebarSearch";
@@ -72,62 +68,6 @@ describe(TAG, () => {
         return expect(element).toBeAccessible();
     });
 
-    describe("highlighting", () => {
-        afterEach(unmockQueryParameter);
-
-        it("triggers on initial render when a search value exists", () => {
-            mockQueryParameter(QUERY);
-            const element = createElement(TAG, { is: SidebarSearch });
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-            renderLightningElement(element, PROPS);
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: QUERY
-                })
-            );
-        });
-
-        it("does not trigger on initial render when a search value does not exist", () => {
-            const element = createElement(TAG, { is: SidebarSearch });
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-            renderLightningElement(element, PROPS);
-            expect(dispatchEventSpy).not.toHaveBeenCalledWith(
-                expect.objectContaining({ type: "highlightedtermchange" })
-            );
-        });
-
-        it("triggers on input change with non-empty value", () => {
-            const element = render(PROPS);
-            const dxInput = element.shadowRoot.querySelector("dx-input");
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-
-            dxInput.dispatchEvent(new CustomEvent("change", { detail: QUERY }));
-
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: QUERY
-                })
-            );
-        });
-
-        it("triggers on input change with empty value", () => {
-            const element = render(PROPS);
-            const dxInput = element.shadowRoot.querySelector("dx-input");
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-
-            dxInput.dispatchEvent(new CustomEvent("change", { detail: "" }));
-
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: ""
-                })
-            );
-        });
-    });
-
     it("correctly consumes a valid session storage object", () => {
         mockQueryParameter(mockPreloadedState.state.query.q);
 

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

@@ -94,6 +94,30 @@ 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;
+        }
+
+        const flattenTerms = (terms: Object): string[] =>
+            Object.entries(terms).reduce((acc, [key, value]) => {
+                if (Array.isArray(value)) {
+                    return [...acc, key, ...value];
+                }
+                const values = flattenTerms(value);
+                return [...acc, key, ...values];
+            }, []);
+
+        const terms = flattenTerms({
+            ...termsToHighlight,
+            ...phrasesToHighlight
+        });
+
+        return Array.from(new Set([this.value, ...terms].flat(2))) as string[];
+    }
+
     private get hasCorrectCoveoConfig(): boolean {
         const coveoConfigurations = [
             this.coveoOrganizationId,
@@ -147,12 +171,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;
     }
 
@@ -227,10 +245,6 @@ export default class SidebarSearch extends LightningElement {
             this.onResultListChange
         );
 
-        if (this.value) {
-            this.dispatchHighlightedTermChange();
-        }
-
         if (!this.preloadedState) {
             if (this.value) {
                 this.submitSearch();
@@ -333,6 +347,7 @@ export default class SidebarSearch extends LightningElement {
 
     private dispatchOnChangeEvent(results: Result[]) {
         this.updateSessionStorage();
+        this.dispatchHighlightedTermChange();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -347,15 +362,20 @@ 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) {
+            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) => ({
@@ -410,7 +430,6 @@ export default class SidebarSearch extends LightningElement {
         this.value = e.detail;
 
         this.handleValueChange(false);
-        this.dispatchHighlightedTermChange();
     }
 
     private onInputFocus() {

package/src/modules/dx/toc/__tests__/mockProps.ts

@@ -17,6 +17,12 @@ export default {
                 "Why build on Quip? This is an extra long blurb to test the toc wrapping ability",
             id: "quip",
             anchor: "#test3"
+        },
+        {
+            label:
+                "SomeLongExampleWordWithoutAnyBreaks and Then a Word",
+            id: "long-word",
+            anchor: "#test4"
         }
     ]
 };

package/src/modules/dx/toc/toc.css

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: row-reverse;
     width: var(--dx-c-toc-width);
+    word-break: break-word;
 }
 
 .toc_collapsed {

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

@@ -10,99 +10,101 @@ describe("highlight utility", () => {
 
     it("highlights text that matches search criteria", () => {
         container.innerHTML = mockContent;
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "apex"
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: "apex",
+            termsToHighlight: ["apex"]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(14);
     });
 
     it("doesn't highlight elements that contains dx/docs components", () => {
-        const searchTerm = "customreport";
+        const query = "customreport";
         const codeBlock = createElement("dx-code-block", { is: CodeBlock });
         Object.assign(codeBlock, {
-            codeBlock: searchTerm,
+            codeBlock: query,
             language: "text"
         });
         container.appendChild(document.createElement("p"));
         container.firstElementChild?.appendChild(codeBlock);
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            searchTerm
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query,
+            termsToHighlight: [query]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(0);
-        expect(codeBlock.shadowRoot.innerHTML).toMatch(searchTerm); // sanity check
+        expect(codeBlock.shadowRoot.innerHTML).toMatch(query); // sanity check
     });
 
     it("doesn't highlight terms separated by html tags", () => {
+        const query = "loadDatawithin";
         container.innerHTML = "<p>loadData<span>within</span></p>";
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "loadDatawithin"
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query,
+            termsToHighlight: [query]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(0);
     });
 
     it("escapes regex especial characters", () => {
+        const query = "apex.+";
         container.innerHTML = mockContent;
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "apex.+"
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query,
+            termsToHighlight: [query]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(0);
     });
 
     it("cleans previous search result before searching for a new term", () => {
-        const firstSearch = "apex";
-        const secondSearch = "salesforce";
+        const firstQuery = "apex";
+        const secondQuery = "salesforce";
 
         container.innerHTML = mockContent;
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            firstSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: firstQuery,
+            termsToHighlight: [firstQuery]
+        });
         const firstMarks = container.querySelectorAll("mark");
         expect(firstMarks).toHaveLength(14);
         firstMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(firstSearch)
+            expect(textContent?.toLowerCase()).toBe(firstQuery)
         );
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            secondSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: secondQuery,
+            termsToHighlight: [secondQuery]
+        });
         const secondMarks = container.querySelectorAll("mark");
         expect(secondMarks).toHaveLength(4);
         secondMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(secondSearch)
+            expect(textContent?.toLowerCase()).toBe(secondQuery)
         );
     });
 
     it("cleans all marks if the search term is empty string", () => {
-        const firstSearch = "apex";
-        const secondSearch = "";
+        const firstQuery = "apex";
+        const secondQuery = "";
 
         container.innerHTML = mockContent;
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            firstSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: firstQuery,
+            termsToHighlight: [firstQuery]
+        });
         const firstMarks = container.querySelectorAll("mark");
         expect(firstMarks).toHaveLength(14);
         firstMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(firstSearch)
+            expect(textContent?.toLowerCase()).toBe(firstQuery)
         );
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            secondSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: secondQuery,
+            termsToHighlight: [secondQuery]
+        });
         const secondMarks = container.querySelectorAll("mark");
         expect(secondMarks).toHaveLength(0);
         secondMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(secondSearch)
+            expect(textContent?.toLowerCase()).toBe(secondQuery)
         );
     });
 });

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

@@ -1,14 +1,16 @@
 import { createSearchRegExp } from "utils-internal/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;
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -17,16 +19,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}`
+            );
         }
 
-        element.innerHTML = innerHtml;
+        const mark = element.querySelector("mark");
+        if (mark && !scrolled) {
+            scrolled = true;
+            mark.scrollIntoView({ block: "nearest" });
+        }
     });
 };

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

@@ -1,5 +1,12 @@
 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(
+        `(?:\\b|[^A-Za-z0-9]\\K)(?:${escaped.join(
+            "|"
+        )})(?![^<>]*>)(?=\\b|[^A-Za-z0-9])`,
+        "gi"
+    );
+};

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.