fix: draw emoji

src/canvas/util.ts

@@ -10,6 +10,7 @@ import {
   ERROR_FORMULA_COLOR,
   dpr,
   isEmpty,
+  splitToWords,
 } from '@/util';
 import { ModelCellType, CanvasOverlayPosition, ErrorTypes, Point, EUnderLine, IWindowSize, ResultType } from '@/types';
 
@@ -116,8 +117,7 @@ export function renderCell(
     fillStyle = ERROR_FORMULA_COLOR;
   }
   const result: IRenderCellResult = {};
-  // unicode
-  const texts = [...text];
+  const texts = splitToWords(text)
   if (texts.length === 0) {
     return result;
   }

src/formula/__tests__/interpreter/function.test.ts

@@ -77,4 +77,11 @@ describe('parseFormula function', () => {
       expressionStr: '',
     });
   });
+  it('function CONCAT', () => {
+    expect(parseFormula('CONCAT("😊", "👨‍👨‍👧‍👧", "👦🏾")')).toEqual({
+      error: null,
+      result: '😊👨‍👨‍👧‍👧👦🏾',
+      expressionStr: 'CONCAT(😊,👨‍👨‍👧‍👧,👦🏾)',
+    });
+  });
 });

src/formula/eval.ts

@@ -2,7 +2,13 @@ import { Scanner } from './scanner';
 import { Parser } from './parser';
 import formulas, { CustomError } from './formula';
 import { Interpreter } from './interpreter';
-import { CellDataMap, InterpreterResult, DefinedNamesMap, FormulaData, IRange } from '@/types';
+import {
+  CellDataMap,
+  InterpreterResult,
+  DefinedNamesMap,
+  FormulaData,
+  IRange,
+} from '@/types';
 
 export function parseFormula(
   source: string,
@@ -14,7 +20,12 @@ export function parseFormula(
   try {
     const list = new Scanner(source).scan();
     const expressions = new Parser(list).parse();
-    const result = new Interpreter(expressions, cellData, definedNamesMap, functionMap).interpret();
+    const result = new Interpreter(
+      expressions,
+      cellData,
+      definedNamesMap,
+      functionMap,
+    ).interpret();
 
     const strList: string[] = [];
     for (const item of expressions) {

src/formula/expression.ts

@@ -124,7 +124,9 @@ export class CallExpression implements Expression {
     return visitor.visitCallExpression(this);
   }
   toString(): string {
-    return `${this.name.toString().toUpperCase()}(${this.params.map((item) => item.toString()).join(',')})`;
+    return `${this.name.toString().toUpperCase()}(${this.params
+      .map((item) => item.toString())
+      .join(',')})`;
   }
 }
 export class CellRangeExpression implements Expression {
@@ -140,7 +142,9 @@ export class CellRangeExpression implements Expression {
     return visitor.visitCellRangeExpression(this);
   }
   toString(): string {
-    return this.left.toString() + this.operator.toString() + this.right.toString();
+    return (
+      this.left.toString() + this.operator.toString() + this.right.toString()
+    );
   }
 }
 

src/formula/parser.ts

@@ -154,35 +154,7 @@ export class Parser {
       if (errorSet.has(realValue as ErrorTypes)) {
         throw new CustomError(realValue as ErrorTypes);
       }
-      // if (this.match(TokenType.EXCLAMATION)) {
-      //   const expr = this.expression();
-      //   if (expr instanceof TokenExpression) {
-      //     return this.addCellExpression(expr.value, expr.type, name);
-      //   }
-      //   throw new CustomError('#REF!');
-      // }
       return new TokenExpression(name);
-      // const newToken = new Token(type, realValue);
-      // if (this.isFunctionName(realValue)) {
-      //   return new TokenExpression(new Token(type, getFunctionName(realValue)))
-      // }
-      // if (/^[a-z]+$/i.test(value)) {
-      //   return new TokenExpression(name);
-      // }
-      // if (
-      //   /^\$[A-Z]+\$\d+$/.test(realValue) ||
-      //   /^\$[A-Z]+$/.test(realValue) ||
-      //   /^\$\d+$/.test(realValue)
-      // ) {
-      //   return this.addCellExpression(newToken, 'absolute', null);
-      // }
-      // if (/^\$[A-Z]+\d+$/.test(realValue) || /^[A-Z]+\$\d+$/.test(realValue)) {
-      //   return this.addCellExpression(newToken, 'mixed', null);
-      // }
-      // if (/^[A-Z]+\d+$/.test(realValue) || /^[A-Z]+$/.test(realValue)) {
-      //   return this.addCellExpression(newToken, 'relative', null);
-      // }
-      // return new TokenExpression(name);
     }
 
     throw new CustomError('#ERROR!');

src/formula/scanner.ts

@@ -1,6 +1,7 @@
 import { TokenType } from '@/types';
 import { Token } from './token';
 import { CustomError } from './formula';
+import { splitToWords } from '@/util'
 
 const emptyData = '';
 const identifierMap = new Map<string, TokenType>([
@@ -14,8 +15,7 @@ export class Scanner {
   private start = 0;
   private readonly tokens: Token[] = [];
   constructor(source: string) {
-    // unicode
-    this.list = [...source];
+    this.list = splitToWords(source)
   }
   scan(): Token[] {
     while (!this.isAtEnd()) {

src/model/mockModel.ts

@@ -50,7 +50,7 @@ export const MOCK_MODEL: WorkBookJSON = {
     1: {
       0: {
         0: {
-          value: '1',
+          value: '1abcd',
           style: {
             fontColor: '#ff0000',
           },
@@ -75,6 +75,33 @@ export const MOCK_MODEL: WorkBookJSON = {
             underline: EUnderLine.SINGLE,
           },
         },
+        6: {
+          formula: '=CONCAT("😊", "👨‍👨‍👧‍👧", "👦🏾")',
+          style: {
+            fontSize: 30,
+          },
+        },
+        7: {
+          value: 'Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞',
+          style: {
+            fontSize: 30,
+          },
+        },
+        8: {
+          value: '뎌쉐',
+          style: {
+            fontSize: 30,
+          },
+        },
+        9: {
+          value: 'Ĺo͂řȩm̅',
+          style: {
+            fontSize: 30,
+          },
+        },
+        10: {
+          value: '🌷🎁💩😜👍🏳️‍🌈',
+        },
       },
       3: {
         0: {
@@ -136,6 +163,18 @@ export const MOCK_MODEL: WorkBookJSON = {
         widthOrHeight: 100,
         isHide: true,
       },
+      6: {
+        widthOrHeight: 200,
+        isHide: false
+      },
+      7: {
+        widthOrHeight: 200,
+        isHide: false
+      },
+      10: {
+        widthOrHeight: 100,
+        isHide: false
+      },
     },
   },
   definedNames: {

src/util/__tests__/util.test.ts

@@ -1,4 +1,10 @@
-import { getListMaxNum, isNumber, parseNumber, getDefaultSheetInfo } from '../util';
+import {
+  getListMaxNum,
+  isNumber,
+  parseNumber,
+  getDefaultSheetInfo,
+  splitToWords,
+} from '../util';
 
 describe('util.test.ts', () => {
   describe('getListMaxNum', () => {
@@ -74,4 +80,9 @@ describe('util.test.ts', () => {
       expect(parseNumber('1.2')).toEqual(1.2);
     });
   });
+  describe('splitToWords', () => {
+    it('should splitToWords', () => {
+      expect(splitToWords('😊👨‍👨‍👧‍👧👦🏾')).toEqual(['😊', '👨‍👨‍👧‍👧', '👦🏾']);
+    });
+  });
 });

src/util/util.ts

@@ -45,7 +45,9 @@ export function getListMaxNum(list: string[] = []): number {
   return Math.max(Math.max(...idList), 0);
 }
 
-export function getDefaultSheetInfo(list: WorksheetType[] = []): Pick<WorksheetType, 'name' | 'sheetId'> {
+export function getDefaultSheetInfo(
+  list: WorksheetType[] = [],
+): Pick<WorksheetType, 'name' | 'sheetId'> {
   const sheetId = getListMaxNum(list.map((item) => item.sheetId)) + 1;
   return {
     name: `${SHEET_NAME_PREFIX}${sheetId}`,
@@ -60,3 +62,9 @@ export function isTestEnv(): boolean {
 export function isDevEnv(): boolean {
   return process.env.NODE_ENV === 'development';
 }
+
+export function splitToWords(str: string): string[] {
+  // unicode
+  const list = new Intl.Segmenter().segment(str);
+  return [...list].map((x) => x.segment);
+}