From 42523891662ea2c3c12791eaa79490bce88fce71 Mon Sep 17 00:00:00 2001
From: Arjun Patel <arjun453@gmail.com>
Date: Mon, 4 Nov 2024 14:21:39 -0500
Subject: [PATCH] fix typing

---
 apps/parsley/src/utils/highlightHtml/index.tsx        | 2 +-
 apps/parsley/src/utils/renderHtml/index.tsx           | 9 +++++----
 apps/parsley/src/utils/renderHtml/renderHtml.test.tsx | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/parsley/src/utils/highlightHtml/index.tsx b/apps/parsley/src/utils/highlightHtml/index.tsx
index 4b2aaab37..58a544883 100644
--- a/apps/parsley/src/utils/highlightHtml/index.tsx
+++ b/apps/parsley/src/utils/highlightHtml/index.tsx
@@ -48,7 +48,7 @@ export const highlightHtml = (
 
         const highlightedHtml = renderHtml(highlightedText, {
           preserveAttributes: ["mark"],
-          transform: {
+          swapMap: {
             mark: Highlight as unknown as React.ReactNode,
           },
         });
diff --git a/apps/parsley/src/utils/renderHtml/index.tsx b/apps/parsley/src/utils/renderHtml/index.tsx
index 1f70ec5dd..8eb046408 100644
--- a/apps/parsley/src/utils/renderHtml/index.tsx
+++ b/apps/parsley/src/utils/renderHtml/index.tsx
@@ -1,4 +1,5 @@
 import parse, {
+  DOMNode,
   Element,
   HTMLReactParserOptions,
   domToReact,
@@ -7,7 +8,7 @@ import { escapeTags } from "utils/escapeTags";
 
 interface renderHtmlOptions extends HTMLReactParserOptions {
   preserveAttributes?: string[];
-  transform?: {
+  swapMap?: {
     [key: string]: React.ReactNode;
   };
 }
@@ -29,8 +30,8 @@ const renderHtml = (html: string = "", options: renderHtmlOptions = {}) => {
   return parse(escapedHtml, {
     replace: (domNode) => {
       if (domNode instanceof Element) {
-        if (options.transform && options.transform[domNode.name]) {
-          const SwapComponent = options.transform[domNode.name];
+        if (options.transform && options.swapMap?.[domNode.name]) {
+          const SwapComponent = options.swapMap[domNode.name];
           // SwapComponent is just what ever component we want to return from the transform object
           const extraProps =
             options.preserveAttributes &&
@@ -41,7 +42,7 @@ const renderHtml = (html: string = "", options: renderHtmlOptions = {}) => {
           return (
             // @ts-expect-error
             <SwapComponent className={extraProps.class} {...extraProps}>
-              {domToReact(domNode.children)}
+              {domToReact(domNode.children as DOMNode[])}
             </SwapComponent>
           );
         }
diff --git a/apps/parsley/src/utils/renderHtml/renderHtml.test.tsx b/apps/parsley/src/utils/renderHtml/renderHtml.test.tsx
index a72c11c11..0ec9112d8 100644
--- a/apps/parsley/src/utils/renderHtml/renderHtml.test.tsx
+++ b/apps/parsley/src/utils/renderHtml/renderHtml.test.tsx
@@ -39,7 +39,7 @@ describe("renderHtml", () => {
       <>
         {renderHtml("test <span data-cy='element'>string</span>", {
           // @ts-expect-error - This is expecting a react component but its an Emotion component which are virtually the same thing
-          transform: { span: Component },
+          swapMap: { span: Component },
         })}
       </>,
     );