Allow search in trascript

src/stories/highlight/_types.tsx

@@ -17,6 +17,8 @@ export interface HighlightArgs {
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
 
   handleSelection?: (part: { from: number; to: number; text: string }) => void;
+
+  search?: string;
 }
 
 export interface Observation {
@@ -32,7 +34,7 @@ export interface WordProps extends ISpanProps {
   end: number;
   currentTime?: number;
   observations?: Observation[];
-
+  text: string;
   /** Adjusts the font size. By default font size is medium */
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
 }

src/stories/highlight/highlightContext.tsx

@@ -0,0 +1,51 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+export type HighlightContextType = {
+  searchTerm: string;
+};
+
+export const HighlightContext = createContext<HighlightContextType | null>(
+  null
+);
+
+export const HighlightContextProvider = ({
+  term,
+  children,
+}: {
+  term?: string;
+  children: React.ReactNode;
+}) => {
+  const [searchTerm, setsearchTerm] = useState<string>(term ?? "");
+
+  useEffect(() => {
+    setsearchTerm(term ?? "");
+  }, [term]);
+
+  const HighlightContextValue = useMemo(
+    () => ({
+      searchTerm,
+    }),
+    [searchTerm]
+  );
+
+  return (
+    <HighlightContext.Provider value={HighlightContextValue}>
+      {children}
+    </HighlightContext.Provider>
+  );
+};
+
+export const useHighlightContext = () => {
+  const context = useContext(HighlightContext);
+
+  if (!context)
+    throw new Error("Provider not found for HighlightContextProvider");
+
+  return context; // Now we can use the context in the component, SAFELY.
+};

src/stories/highlight/index.stories.tsx

@@ -9,10 +9,12 @@ import { theme } from "../theme";
 import { getColor } from "../theme/utils";
 import { Paragraph } from "../typography/paragraph";
 import { HighlightArgs, Observation } from "./_types";
+import useDebounce from "../../hooks/useDebounce";
 
 interface StoryArgs extends HighlightArgs {
   words: { start: number; end: number; word: string; speaker: number }[];
   currentTime: number;
+  includeSearch?: boolean;
 }
 
 const Template: StoryFn<StoryArgs> = (args) => {
@@ -21,9 +23,10 @@ const Template: StoryFn<StoryArgs> = (args) => {
     to: number;
     text: string;
   }>();
-
+  const [searchValue, setSearchValue] = useState<string>("");
   const [observations, setObservations] = useState<Observation[]>([]);
-  console.log("🚀 ~ observations:", observations);
+
+  const debauncedValue = useDebounce(searchValue, 300);
 
   const handleAddObservation = () => {
     if (selection) {
@@ -41,16 +44,26 @@ const Template: StoryFn<StoryArgs> = (args) => {
 
   return (
     <>
-      <b>Testo non selezionabile</b>
+      <b>Unselectable text:</b>
       <br />
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit numquam
-      magni debitis saepe placeat quis optio hic similique ratione
-      exercitationem quasi illo, perferendis quidem atque. Accusamus optio quae
-      tempora a.
+      Listed below are the words that will be highlighted when selected. Not
+      every paragraph can be selected, like this one.
       <hr style={{ margin: `10px 0` }} />
-      <b>Testo selezionabile</b>
-      <br />
-      <Highlight {...args} handleSelection={(part) => setSelection(part)}>
+      {args.includeSearch && (
+        <input
+          type="text"
+          placeholder="Search"
+          onChange={(e) => setSearchValue(e.target.value)}
+        />
+      )}
+      <p>
+        <b>Selectable text:</b>
+      </p>
+      <Highlight
+        {...args}
+        search={debauncedValue}
+        handleSelection={(part) => setSelection(part)}
+      >
         {args.words.map((item, index) => (
           <>
             <Highlight.Word
@@ -59,9 +72,8 @@ const Template: StoryFn<StoryArgs> = (args) => {
               end={item.end}
               observations={observations}
               currentTime={args.currentTime}
-            >
-              {item.word}
-            </Highlight.Word>
+              text={item.word}
+            />
           </>
         ))}
       </Highlight>
@@ -110,7 +122,6 @@ const VideoTemplate: StoryFn<StoryArgs> = (args) => {
   }, [videoRef]);
 
   const [observations, setObservations] = useState<Observation[]>([]);
-  console.log("🚀 ~ observations:", observations);
 
   const handleAddObservation = () => {
     if (selection) {
@@ -140,9 +151,8 @@ const VideoTemplate: StoryFn<StoryArgs> = (args) => {
                     end={item.end}
                     observations={observations}
                     currentTime={currentTime}
-                  >
-                    {item.word}
-                  </Highlight.Word>
+                    text={item.word}
+                  />
                 </>
               ))}
             </Highlight>
@@ -529,6 +539,12 @@ VideoSync.args = {
   ...defaultArgs,
 };
 
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  ...defaultArgs,
+  includeSearch: true,
+};
+
 export default {
   title: "Molecules/Highlight",
   component: Highlight,

src/stories/highlight/index.tsx

@@ -1,8 +1,10 @@
 import { Span as ZendeskSpan } from "@zendeskgarden/react-typography";
-import styled from "styled-components";
-import { HighlightArgs, Observation, WordProps } from "./_types";
 import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
+import styled from "styled-components";
 import { getColor } from "../theme/utils";
+import { HighlightArgs, Observation, WordProps } from "./_types";
+import { HighlightContextProvider } from "./highlightContext";
+import { Searchable } from "./searchable";
 
 const StyledWord = styled(ZendeskSpan)<
   WordProps & { observation?: Observation }
@@ -105,14 +107,19 @@ const Highlight = (props: PropsWithChildren<HighlightArgs>) => {
     };
   }, [ref, props, handleSelectionChange]);
 
-  return <WordsContainer ref={ref}>{props.children}</WordsContainer>;
+  return (
+    <HighlightContextProvider term={props.search}>
+      <WordsContainer ref={ref}>{props.children}</WordsContainer>;
+    </HighlightContextProvider>
+  );
 };
 
 const Word = (props: WordProps) => {
   const isActive =
     props.currentTime &&
     props.currentTime >= props.start &&
     props.currentTime < props.end;
+
   // Is there an observation that contains this word?
   const observation = props.observations?.find(
     (obs) => props.start >= obs.start && props.end <= obs.end
@@ -127,7 +134,13 @@ const Word = (props: WordProps) => {
       className={!!observation ? "highlighted" : ""}
       {...(!!observation ? { tag: "observation" } : {})}
     >
-      {isActive ? <ActiveWord>{props.children}</ActiveWord> : props.children}
+      {isActive ? (
+        <ActiveWord>
+          <Searchable start={props.start} text={props.text} />
+        </ActiveWord>
+      ) : (
+        <Searchable start={props.start} text={props.text} />
+      )}
       {!observation && " "}
     </StyledWord>
   );

src/stories/highlight/searchable.tsx

@@ -0,0 +1,29 @@
+import { useHighlightContext } from "./highlightContext";
+
+export const Searchable = ({
+  start,
+  text,
+}: {
+  start: number;
+  text: string;
+}) => {
+  const { searchTerm } = useHighlightContext();
+
+  if (searchTerm) {
+    const parts = text.split(new RegExp(`(${searchTerm})`, "gi"));
+
+    return (
+      <>
+        {parts.map((part, index) =>
+          part.toLowerCase() === searchTerm.toLowerCase() ? (
+            <mark key={index}>{part}</mark>
+          ) : (
+            <>{part}</>
+          )
+        )}
+      </>
+    );
+  }
+
+  return <>{text}</>;
+};