FIX: Use unicode code points in getFormulaHTML function

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!(

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);