Update Token.jsx

huggingface · Feb 22, 2024 · 6df68ae · 6df68ae
1 parent 9b4f65c
commit 6df68ae
Showing 1 changed file with 13 additions and 11 deletions.
diff --git 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>)
 }