From 5adac8196e37f9c221ec0cb39cd5caa7cfa033f3 Mon Sep 17 00:00:00 2001
From: lindapaiste <lindapaiste@gmail.com>
Date: Mon, 7 Feb 2022 18:11:52 -0600
Subject: [PATCH] feat(highlighter): allow `mark` element to be customized
 (#94)

---
 src/Highlighter.tsx            | 13 +++++++++++--
 src/tests/Highlighter.spec.tsx | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/Highlighter.tsx b/src/Highlighter.tsx
index 4138ed4..88a0cf1 100644
--- a/src/Highlighter.tsx
+++ b/src/Highlighter.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 
 function Highlighter(props: IHighlighterProps) {
   if (Array.isArray(props.text)) {
+    const Mark = props.mark || 'mark';
     return (
       <>
         {props.text.map(({ text, isHighlighted }, index) => {
           const key = `${text}${index}`; // TODO: generate id
 
           if (isHighlighted) {
-            // TODO: allow custom highlight element
-            return <mark key={key}>{text}</mark>;
+            return <Mark key={key}>{text}</Mark>;
           }
 
           return <React.Fragment key={key}>{text}</React.Fragment>;
@@ -22,7 +22,16 @@ function Highlighter(props: IHighlighterProps) {
 }
 
 interface IHighlighterProps {
+  /**
+   * The text to display.
+   * Either a `string` or an array of formatted results from the FuzzyHighlighter.
+   */
   text: string | { text: string; isHighlighted: boolean }[];
+  /**
+   * Custom JSX element to surround highlighted text.
+   * Default: 'mark'
+   */
+  mark?: keyof JSX.IntrinsicElements | React.ComponentType;
 }
 
 export { Highlighter };
diff --git a/src/tests/Highlighter.spec.tsx b/src/tests/Highlighter.spec.tsx
index 1a147d3..efcc442 100644
--- a/src/tests/Highlighter.spec.tsx
+++ b/src/tests/Highlighter.spec.tsx
@@ -26,4 +26,20 @@ describe("Highlighter", () => {
     const wrapper = shallow(<Highlighter text={"Old"} />);
     expect(wrapper.html()).toEqual("Old");
   });
+
+  test("prop `mark` as a custom component", () => {
+    const Mark: React.FC = ({children}) => (
+        <span className="marked-text">{children}</span>
+    );
+    const wrapper = shallow(
+        <Highlighter
+            text={[
+              { text: "O", isHighlighted: true },
+              { text: "ld", isHighlighted: false },
+            ]}
+            mark={Mark}
+        />
+    );
+    expect(wrapper.html()).toEqual("<span class=\"marked-text\">O</span>ld");
+  });
 });