fix: consecutive modifiers not applying

Author: jejebecarte

README.md

@@ -62,7 +62,7 @@ $ npm install minecraft-text-canvas
 The following example simply renders an example input text with some basic markup:
 
 ```javascript
-const render = require('minecraft-text-canvas');
+import render from 'minecraft-text-canvas';
 const result = render('&cExample &r&btext');
 ```
 

TODO.txt

@@ -1,2 +1,2 @@
-Escaping markup
-Full markup support
+Support underline, strikethrough, italic
+Escaping markup

src/constants.ts

@@ -1,6 +1,6 @@
 export const FONT_SIZE = 8;
 export const FONT_OFFSET = 1;
-export const SUPPORTED_MODIFIERS = /&(?:0|1|2|3|4|5|6|7|8|9|a|b|c|d|e|f|l|r)/g;
+export const SUPPORTED_MODIFIERS_GLOBAL = /&(?:0|1|2|3|4|5|6|7|8|9|a|b|c|d|e|f|l|r)/g;
 export const TEXT_COLORS = {
     '0': 0x000,
     '1': 0x00a,

src/lib/getFormattedWidth.ts

@@ -1,5 +1,5 @@
 import { CanvasRenderingContext2D } from 'canvas';
-import { FONT_OFFSET, SUPPORTED_MODIFIERS } from '../constants';
+import { FONT_OFFSET, SUPPORTED_MODIFIERS_GLOBAL } from '../constants';
 
 const BOLD_REGEX = /&l(.*?)(?:&r|$)/g;
 
@@ -10,7 +10,7 @@ export default function getFormattedWidth(unformattedText: string, ctx: CanvasRe
     // Remove all modifiers and split by line break to calculate text width
     const wrappedText = unformattedText.split(/\r\n|\r|\n/g);
     wrappedText.forEach((line) => {
-        let lineWidth = ctx.measureText(line.replaceAll(SUPPORTED_MODIFIERS, '')).width;
+        let lineWidth = ctx.measureText(line.replaceAll(SUPPORTED_MODIFIERS_GLOBAL, '')).width;
 
         // If bold carries over from previous line, prefix the line with '&l' so it fits the regex
         const boldSubstrings = isBold ? `&l${line}`.match(BOLD_REGEX) : line.match(BOLD_REGEX);
@@ -20,7 +20,7 @@ export default function getFormattedWidth(unformattedText: string, ctx: CanvasRe
 
             boldSubstrings.forEach((subStr) => {
                 // Remove all modifiers in the text
-                const subStrRemovedModifiers = subStr.replaceAll(SUPPORTED_MODIFIERS, '');
+                const subStrRemovedModifiers = subStr.replaceAll(SUPPORTED_MODIFIERS_GLOBAL, '');
                 lineWidth += subStrRemovedModifiers.length * FONT_OFFSET;
             });
         }

src/lib/renderText.ts

@@ -2,7 +2,7 @@ import { CanvasRenderingContext2D } from 'canvas';
 import {
     FONT_SIZE,
     FONT_OFFSET,
-    SUPPORTED_MODIFIERS,
+    SUPPORTED_MODIFIERS_GLOBAL,
     TEXT_COLORS,
     TEXT_SHADOW_COLORS,
 } from '../constants';
@@ -19,7 +19,11 @@ export default function renderText(text: string, ctx: CanvasRenderingContext2D)
         const nextChar = text[i + 1];
 
         // Check if this character and the next one are a supported modifier
-        if (char === '&' && SUPPORTED_MODIFIERS.test(char + nextChar)) {
+        // WARNING: JavaScript has inconsistent RegEx test behaviour with the global flag enabled -
+        // On subsequent test() calls, it begins searching from the index of the previous match.
+        // For this reason, we have to create a new, non-global RegEx to test our expression.
+        // I hate JS.
+        if (char === '&' && new RegExp(SUPPORTED_MODIFIERS_GLOBAL.source).test(char + nextChar)) {
             if (nextChar && nextChar in TEXT_COLORS) {
                 currentColor = TEXT_COLORS[nextChar as HexDigit];
                 currentShadowColor = TEXT_SHADOW_COLORS[nextChar as HexDigit];
@@ -33,7 +37,7 @@ export default function renderText(text: string, ctx: CanvasRenderingContext2D)
                 continue;
             }
 
-            // Skip the next character as it is modifying
+            // Skip the next character as it is part of a modifying sequence
             i += 1;
         } else if (char === '\n') {
             cursorX = 0;