@salesforcedevs/dx-components 0.19.3-alpha.37 → 0.19.3-alpha.40

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 +20 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.19.3-alpha.37",
3
+ "version": "0.19.3-alpha.40",
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);
@@ -22,14 +22,20 @@ export const highlightTerms = (
22
22
 
23
23
  try {
24
24
  if (element.innerHTML.match(MARK_TAGS)) {
25
- element.innerHTML.replace(
26
- // Remove previously added mark tags
27
- MARK_TAGS,
28
- ""
25
+ // Remove previously added mark tags
26
+ console.log(
27
+ "matching marks",
28
+ element,
29
+ element.style.backgroundColor
29
30
  );
31
+ element.innerHTML = element.innerHTML.replace(MARK_TAGS, "");
30
32
  }
31
33
  if (element.innerHTML.match(searchExp) && query) {
32
- element.innerHTML.replace(searchExp, "<mark>$&</mark>");
34
+ console.log("matching", element);
35
+ element.innerHTML = element.innerHTML.replace(
36
+ searchExp,
37
+ "<mark>$&</mark>"
38
+ );
33
39
  }
34
40
  } catch (e) {
35
41
  console.error(
@@ -37,12 +43,14 @@ export const highlightTerms = (
37
43
  );
38
44
  }
39
45
 
40
- // element
41
- // .querySelectorAll("mark")
42
- // .forEach(
43
- // (el) =>
44
- // (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
45
- // );
46
+ console.log(element.querySelectorAll("mark"))
47
+
48
+ element
49
+ .querySelectorAll("mark")
50
+ .forEach(
51
+ (el) =>
52
+ (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
53
+ );
46
54
 
47
55
  const mark = element.querySelector("mark");
48
56
  if (mark && !scrolled) {