feat: support stacking text styles

examples/text.js

@@ -106,16 +106,18 @@ onKeyDown("down", () => {
 
 // Use this syntax and style option to style chunks of text, with CharTransformFunc.
 add([
-    text("[green]oh hi[/green] here's some [wavy]styled[/wavy] text", {
+    text("[green]oh hi[/green] here's some [wavy][rainbow]styled[/rainbow][/wavy] text", {
         width: width(),
         styles: {
             "green": {
                 color: rgb(128, 128, 255),
             },
             "wavy": (idx, ch) => ({
-                color: hsl2rgb((time() * 0.2 + idx * 0.1) % 1, 0.7, 0.8),
                 pos: vec2(0, wave(-4, 4, time() * 6 + idx * 0.5)),
             }),
+            "rainbow": (idx, ch) => ({
+                color: hsl2rgb((time() * 0.2 + idx * 0.1) % 1, 0.7, 0.8),
+            }),
         },
     }),
     pos(pad, height() - pad),

src/constants.ts

@@ -95,9 +95,7 @@ export const COMP_EVENTS = new Set([
     "inspect",
     "drawInspect",
 ]);
-// TODO: escape
-// eslint-disable-next-line
-export const TEXT_STYLE_RE = /\[(?<style>\w+)\](?<text>.*?)\[\/\k<style>\]/g;
+export const MULTI_WORD_RE = /^\w+$/;
 export const DEF_OFFSCREEN_DIS = 200;
 // maximum y velocity with body()
 export const DEF_JUMP_FORCE = 640;

src/gfx/formatText.ts

@@ -4,7 +4,7 @@ import {
     DEF_TEXT_CACHE_SIZE,
     FONT_ATLAS_HEIGHT,
     FONT_ATLAS_WIDTH,
-    TEXT_STYLE_RE,
+    MULTI_WORD_RE
 } from "../constants";
 import { fontCacheC2d, fontCacheCanvas, gfx } from "../kaplay";
 import { Color } from "../math/color";
@@ -43,19 +43,56 @@ function compileStyledText(text: string): {
     text: string;
 } {
     const charStyleMap = {} as Record<number, string[]>;
-    // get the text without the styling syntax
-    const renderText = text.replace(TEXT_STYLE_RE, "$2");
-    let idxOffset = 0;
-
-    // put each styled char index into a map for easy access when iterating each char
-    for (const match of text.matchAll(TEXT_STYLE_RE)) {
-        if (!match?.groups) continue;
-        const origIdx = match.index - idxOffset;
-        for (let i = 0; i < match.groups.text.length; i++) {
-            charStyleMap[i + origIdx] = [match.groups.style];
+    let renderText = "";
+    let styleStack: [string, number][] = [];
+    let lastIndex = 0;
+    let skipCount = 0;
+
+    for (let i = 0; i < text.length; i++) {
+        if (i !== lastIndex + 1) skipCount += i - lastIndex;
+        lastIndex = i;
+
+        if (text[i] === "\\" && text[i + 1] === "[") continue;
+
+        if ((i === 0 || text[i - 1] !== "\\") && text[i] === "[") {
+            const start = i;
+
+            i++;
+
+            let isClosing = text[i] === "/";
+            let style = "";
+
+            if (isClosing) i++;
+
+            while (i < text.length && text[i] !== "]")
+                style += text[i++];
+
+            if (
+                !MULTI_WORD_RE.test(style) ||
+                i >= text.length ||
+                text[i] !== "]" ||
+                (isClosing && (styleStack.length === 0 || styleStack[styleStack.length - 1][0] !== style))
+            ) {
+                i = start;
+            } else {
+                if (!isClosing) styleStack.push([style, start]);
+                else styleStack.pop();
+
+                continue;
+            }
+        }
+
+        renderText += text[i];
+        if (styleStack.length > 0) charStyleMap[i - skipCount] = styleStack.map(([name]) => name);
+    }
+
+    if  (styleStack.length > 0) {
+        while (styleStack.length > 0) {
+            const [_, start] = styleStack.pop()!;
+            text = text.substring(0, start) + "\\" + text.substring(start);
         }
-        // omit the style syntax in format string when calculating index
-        idxOffset += match[0].length - match.groups.text.length;
+
+        return compileStyledText(text);
     }
 
     return {