From 6df68aeaa66437d754cd7c6cec2d647fc68438b1 Mon Sep 17 00:00:00 2001
From: Joshua Lochner <admin@xenova.com>
Date: Thu, 22 Feb 2024 19:31:18 +0200
Subject: [PATCH] Update Token.jsx

---
 .../src/components/Token.jsx                  | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/examples/tokenizer-playground/src/components/Token.jsx b/examples/tokenizer-playground/src/components/Token.jsx
index 579b000f9..8987eb9ce 100644
--- a/examples/tokenizer-playground/src/components/Token.jsx
+++ b/examples/tokenizer-playground/src/components/Token.jsx
@@ -1,3 +1,5 @@
+import { Fragment } from 'react';
+
 const COLOURS = [
     'bg-purple-300',
     'bg-green-300',
@@ -7,15 +9,15 @@ const COLOURS = [
 ]
 
 export function Token({ text, position, margin }) {
-    const isNormal = text !== '\n'
-
-    return (
-        isNormal ? (
-            <span
-            style={{marginLeft: margin}}
-            
-            className={`leading-5 ${COLOURS[position % COLOURS.length]}`}>
-                {text}
-            </span>) : <br />
-    )
+    const textWithLineBreaks = text.split('\n').map((line, index, array) => (
+        <Fragment key={index}>
+            {line}
+            {index !== array.length - 1 && <br />}
+        </Fragment>
+    ));
+    return (<span
+        style={{ marginLeft: margin }}
+        className={`leading-5 ${textWithLineBreaks.length === 1 ? 'inline-block ' : ''}${COLOURS[position % COLOURS.length]}`}>
+        {textWithLineBreaks}
+    </span>)
 }
\ No newline at end of file