From 65f17384737b92713fb14f009db9f3cb0e57ea6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Mon, 9 Dec 2024 19:52:12 +0100
Subject: [PATCH] FIX: Use unicode code points in getFormulaHTML function

---
 base/src/expressions/lexer/test/test_util.rs | 19 +++++++++++++++++++
 webapp/src/components/editor/util.tsx        | 16 +++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/base/src/expressions/lexer/test/test_util.rs b/base/src/expressions/lexer/test/test_util.rs
index 51a0726..998f489 100644
--- a/base/src/expressions/lexer/test/test_util.rs
+++ b/base/src/expressions/lexer/test/test_util.rs
@@ -24,6 +24,25 @@ fn test_get_tokens() {
     assert_eq!(l.end, 10);
 }
 
+#[test]
+fn get_tokens_unicode() {
+    let formula = "'🇵🇭 Philippines'!A1";
+    let t = get_tokens(formula);
+    assert_eq!(t.len(), 1);
+
+    let expected = TokenType::Reference {
+        sheet: Some("🇵🇭 Philippines".to_string()),
+        row: 1,
+        column: 1,
+        absolute_column: false,
+        absolute_row: false,
+    };
+    let l = t.first().expect("expected token");
+    assert_eq!(l.token, expected);
+    assert_eq!(l.start, 0);
+    assert_eq!(l.end, 19);
+}
+
 #[test]
 fn test_simple_tokens() {
     assert_eq!(
diff --git a/webapp/src/components/editor/util.tsx b/webapp/src/components/editor/util.tsx
index 85f9487..005239b 100644
--- a/webapp/src/components/editor/util.tsx
+++ b/webapp/src/components/editor/util.tsx
@@ -7,6 +7,16 @@ import {
 } from "@ironcalc/wasm";
 import type { ActiveRange } from "../workbookState";
 
+function sliceString(
+  text: string,
+  startScalar: number,
+  endScalar: number,
+): string {
+  const scalarValues = Array.from(text);
+  const sliced = scalarValues.slice(startScalar, endScalar);
+  return sliced.join("");
+}
+
 export function tokenIsReferenceType(token: TokenType): token is Reference {
   return typeof token === "object" && "Reference" in token;
 }
@@ -127,7 +137,7 @@ function getFormulaHTML(
         }
         html.push(
           <span key={index} style={{ color }}>
-            {formula.slice(start, end)}
+            {sliceString(formula, start, end)}
           </span>,
         );
         activeRanges.push({
@@ -162,7 +172,7 @@ function getFormulaHTML(
         }
         html.push(
           <span key={index} style={{ color }}>
-            {formula.slice(start, end)}
+            {sliceString(formula, start, end)}
           </span>,
         );
         colorCount += 1;
@@ -176,7 +186,7 @@ function getFormulaHTML(
           color,
         });
       } else {
-        html.push(<span key={index}>{formula.slice(start, end)}</span>);
+        html.push(<span key={index}>{sliceString(formula, start, end)}</span>);
       }
     }
     html = [<span key="equals">=</span>].concat(html);