From f85a1f5601798ab3ec8a76a50a9ea1aa60445308 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 16 Jan 2024 23:00:58 +0000
Subject: [PATCH] Updated part of the correction display for Writing

---
 src/components/Solutions/Writing.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Solutions/Writing.tsx b/src/components/Solutions/Writing.tsx
index fad9ff5a..9c5f39f9 100644
--- a/src/components/Solutions/Writing.tsx
+++ b/src/components/Solutions/Writing.tsx
@@ -12,19 +12,26 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
 	const formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => {
-		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"));
+		const misspelled = errors.map((x) => x.misspelled);
+		console.log({misspelled});
+		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"), "g");
+		console.log(errorRegex.global);
 
 		return (
 			<>
-				{reactStringReplace(solution, errorRegex, (match) => {
-					const correction = errors.find((x) => x.misspelled === match)?.correction;
+				{solution.split(" ").map((word) => {
+					if (!misspelled.includes(word)) return <>{word} </>;
 
+					const correction = errors.find((x) => x.misspelled === word)?.correction;
 					return (
-						<span
-							data-tip={correction ? correction : undefined}
-							className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
-							{match}
-						</span>
+						<>
+							<span
+								key={word}
+								data-tip={correction ? correction : undefined}
+								className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
+								{word}
+							</span>{" "}
+						</>
 					);
 				})}
 			</>