refactor: reset modifiers on newline

fix: multiple newlines not working
build: bump to version 1.0.2

Author: jejebecarte

package.json

@@ -1,6 +1,6 @@
 {
     "name": "minecraft-text-canvas",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "Generate images of Minecraft text using markup.",
     "license": "MIT",
     "main": "dist/index.js",

src/constants.ts

@@ -1,6 +1,7 @@
 export const FONT_SIZE = 8;
 export const FONT_OFFSET = 1;
 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 NEWLINE_REGEX = /\r?\n/;
 export const TEXT_COLORS = {
     '0': 0x000,
     '1': 0x00a,

src/lib/getFormattedWidth.ts

@@ -1,29 +1,21 @@
 import { CanvasRenderingContext2D } from 'canvas';
-import { FONT_OFFSET, SUPPORTED_MODIFIERS_GLOBAL } from '../constants';
+import { FONT_OFFSET, NEWLINE_REGEX, SUPPORTED_MODIFIERS_GLOBAL } from '../constants';
 
 const BOLD_REGEX = /&l(.*?)(?:&r|$)/g;
 
 export default function getFormattedWidth(unformattedText: string, ctx: CanvasRenderingContext2D) {
     let greatestFormattedWidth = 0;
-    let isBold = false;
 
     // Remove all modifiers and split by line break to calculate text width
-    const wrappedText = unformattedText.split(/\r\n|\r|\n/g);
-    wrappedText.forEach((line) => {
+    unformattedText.split(NEWLINE_REGEX).forEach((line) => {
         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);
-        if (boldSubstrings) {
-            // Check if the bold modifier extends to the next line
-            isBold = !boldSubstrings[-1]?.endsWith('&r');
-
-            boldSubstrings.forEach((subStr) => {
-                // Remove all modifiers in the text
-                const subStrRemovedModifiers = subStr.replaceAll(SUPPORTED_MODIFIERS_GLOBAL, '');
-                lineWidth += subStrRemovedModifiers.length * FONT_OFFSET;
-            });
-        }
+        const boldSubstrings = line.match(BOLD_REGEX);
+        boldSubstrings?.forEach((subStr) => {
+            // Remove all modifiers in the text
+            const subStrRemovedModifiers = subStr.replaceAll(SUPPORTED_MODIFIERS_GLOBAL, '');
+            lineWidth += subStrRemovedModifiers.length * FONT_OFFSET;
+        });
 
         // If this is the widest line, set the overall width accordingly
         if (greatestFormattedWidth < lineWidth) {

src/lib/renderText.ts

@@ -5,68 +5,75 @@ import {
     SUPPORTED_MODIFIERS_GLOBAL,
     TEXT_COLORS,
     TEXT_SHADOW_COLORS,
+    NEWLINE_REGEX,
 } from '../constants';
 
 export default function renderText(text: string, ctx: CanvasRenderingContext2D) {
-    let cursorX = 0;
     let cursorY = FONT_SIZE - FONT_OFFSET;
-    let currentColor: number = TEXT_COLORS.f;
-    let currentShadowColor: number = TEXT_SHADOW_COLORS.f;
-    let isBold = false;
 
-    for (let i = 0; i < text.length; i++) {
-        const char = text[i] as string;
-        const nextChar = text[i + 1];
+    text.split(NEWLINE_REGEX).forEach((line) => {
+        let currentColor: number = TEXT_COLORS.f;
+        let currentShadowColor: number = TEXT_SHADOW_COLORS.f;
+        let isBold = false;
+        let cursorX = 0;
 
-        // Check if this character and the next one are a supported modifier
-        // 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];
-            } else if (nextChar === 'r') {
-                currentColor = TEXT_COLORS.f;
-                currentShadowColor = TEXT_SHADOW_COLORS.f;
-                isBold = false;
-            } else if (nextChar === 'l') {
-                isBold = true;
+        for (let i = 0; i < line.length; i++) {
+            const char = line[i] as string;
+            const nextChar = line[i + 1];
+
+            // Check if this character and the next one are a supported modifier
+            // WARNING: JavaScript has inconsistent RegEx test behaviour with the global flag enabled -
+            // On consecutive 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 (
+                nextChar &&
+                char === '&' &&
+                new RegExp(SUPPORTED_MODIFIERS_GLOBAL.source).test(char + nextChar)
+            ) {
+                if (nextChar in TEXT_COLORS) {
+                    currentColor = TEXT_COLORS[nextChar as HexDigit];
+                    currentShadowColor = TEXT_SHADOW_COLORS[nextChar as HexDigit];
+                } else if (nextChar === 'r') {
+                    currentColor = TEXT_COLORS.f;
+                    currentShadowColor = TEXT_SHADOW_COLORS.f;
+                    isBold = false;
+                } else if (nextChar === 'l') {
+                    isBold = true;
+                } else {
+                    continue;
+                }
+
+                // Skip the next character as it is part of a modifying sequence
+                i += 1;
             } else {
-                continue;
-            }
+                const shadowX = cursorX + FONT_OFFSET;
+                const shadowY = cursorY + FONT_OFFSET;
 
-            // Skip the next character as it is part of a modifying sequence
-            i += 1;
-        } else if (char === '\n') {
-            cursorX = 0;
-            cursorY = FONT_SIZE * 2 + FONT_OFFSET;
-        } else {
-            const shadowX = cursorX + FONT_OFFSET;
-            const shadowY = cursorY + FONT_OFFSET;
+                // Draw shadow
+                ctx.fillStyle = `#${currentShadowColor.toString(16)}`;
+                ctx.fillText(char, shadowX, shadowY);
+                if (isBold) {
+                    ctx.fillText(char, shadowX + FONT_OFFSET, shadowY);
+                }
 
-            // Draw shadow
-            ctx.fillStyle = `#${currentShadowColor.toString(16)}`;
-            ctx.fillText(char, shadowX, shadowY);
-            if (isBold) {
-                ctx.fillText(char, shadowX + FONT_OFFSET, shadowY);
-            }
+                // Draw text
+                ctx.fillStyle = `#${currentColor.toString(16)}`;
+                ctx.fillText(char, cursorX, cursorY);
+                if (isBold) {
+                    ctx.fillText(char, cursorX + FONT_OFFSET, cursorY);
+                }
 
-            // Draw text
-            ctx.fillStyle = `#${currentColor.toString(16)}`;
-            ctx.fillText(char, cursorX, cursorY);
-            if (isBold) {
-                ctx.fillText(char, cursorX + FONT_OFFSET, cursorY);
-            }
+                // Add extra space in between letters if character is bold
+                let { width } = ctx.measureText(char);
+                if (isBold) {
+                    width += FONT_OFFSET;
+                }
 
-            // Add extra space in between letters if character is bold
-            let { width } = ctx.measureText(char);
-            if (isBold) {
-                width += FONT_OFFSET;
+                cursorX += width;
             }
-
-            cursorX += width;
         }
-    }
+
+        // Move the cursor down to the next line. Add double-spacing to account for shadow
+        cursorY += FONT_SIZE + (FONT_OFFSET * 2);
+    });
 }