HighlightText now retains spacing and linebreaks

kreneskyp · May 29, 2023 · d357bc7 · d357bc7
1 parent dac47c9
commit d357bc7
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/frontend/components/HighlightText.js b/frontend/components/HighlightText.js
@@ -11,24 +11,23 @@ const HighlightText = ({ content }) => {
   const { mention, artifact } = useChatColorMode();
 
   const formattedContent = React.useMemo(() => {
-    // Match @mentions and {artifacts} and return an array of Chakra Text components
-    return content.split(" ").map((word, idx) => {
-      if (word.startsWith("@")) {
-        // Word is a mention
+    return content.split(/(\s|\n)/).map((segment, idx) => {
+      if (segment.startsWith("@")) {
         return (
           <Text as="span" color={mention} key={idx}>
-            {word + " "}
+            {segment}
           </Text>
         );
-      } else if (word.startsWith("{") && word.endsWith("}")) {
-        // Word is an artifact
+      } else if (segment.startsWith("{") && segment.endsWith("}")) {
         return (
           <Text as="span" color={artifact} key={idx}>
-            {word + " "}
+            {segment}
           </Text>
         );
+      } else if (segment === "\n") {
+        return <br key={idx} />;
       } else {
-        return word + " ";
+        return segment;
       }
     });
   }, [content]);