@salesforcedevs/dx-components 0.19.3-alpha.35 → 0.19.3-alpha.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/modules/utils/highlight/highlight.ts +29 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.19.3-alpha.35",
3
+ "version": "0.19.3-alpha.39",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/utils/highlight/highlight.ts CHANGED
@@ -6,7 +6,7 @@ const MARK_TAGS = /<\/?mark>/gi;
6
6
 
7
7
  export const highlightTerms = (
8
8
  // eslint-disable-next-line no-undef
9
- elements: NodeListOf<Element>,
9
+ elements: NodeListOf<HTMLElement>,
10
10
  { query, termsToHighlight }: { query: string; termsToHighlight: string[] }
11
11
  ): void => {
12
12
  const searchExp = createSearchRegExp(termsToHighlight);
@@ -21,27 +21,38 @@ export const highlightTerms = (
21
21
  }
22
22
 
23
23
  try {
24
- let innerHtml = element.innerHTML.replace(
25
- // Remove previously added mark tags
26
- MARK_TAGS,
27
- ""
28
- );
29
-
30
- if (query) {
31
- innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
24
+ if (element.innerHTML.match(MARK_TAGS)) {
25
+ console.log(
26
+ "matching marks",
27
+ element,
28
+ element.style.backgroundColor
29
+ );
30
+ element.innerHTML = element.innerHTML.replace(
31
+ // Remove previously added mark tags
32
+ MARK_TAGS,
33
+ ""
34
+ );
35
+ }
36
+ if (element.innerHTML.match(searchExp) && query) {
37
+ console.log("matching", element);
38
+ element.innerHTML = element.innerHTML.replace(
39
+ searchExp,
40
+ "<mark>$&</mark>"
41
+ );
42
+ element.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)";
32
43
  }
33
-
34
- element.innerHTML = innerHtml;
35
44
  } catch (e) {
36
- console.error(`${element} could not be parsed by the highlight utility: ${e}`);
45
+ console.error(
46
+ `${element} could not be parsed by the highlight utility: ${e}`
47
+ );
37
48
  }
38
49
 
39
- // element
40
- // .querySelectorAll("mark")
41
- // .forEach(
42
- // (el) =>
43
- // (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
44
- // );
50
+ element
51
+ .querySelectorAll("mark")
52
+ .forEach(
53
+ (el) =>
54
+ (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
55
+ );
45
56
 
46
57
  const mark = element.querySelector("mark");
47
58
  if (mark && !scrolled) {