From 66716279adbd8b1f34b5f0ed880d94a261c83bf0 Mon Sep 17 00:00:00 2001
From: Alexander Zielonka <zielonka@zeasy.software>
Date: Mon, 12 Jan 2026 03:31:20 +0100
Subject: [PATCH] Fix syntax highlighting regex order in config editors

The number regex was applied after the boolean regex, causing it to
match "400" in CSS class names like "text-orange-400" and corrupt
the HTML output. Now uses placeholder tokens to mark numbers before
adding any HTML tags.

Affected editors: Palworld, Zomboid, OpenTTD

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 gsm-frontend/src/components/OpenTTDConfigEditor.jsx  | 7 +++++--
 gsm-frontend/src/components/PalworldConfigEditor.jsx | 7 +++++--
 gsm-frontend/src/components/ZomboidConfigEditor.jsx  | 9 +++++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/gsm-frontend/src/components/OpenTTDConfigEditor.jsx b/gsm-frontend/src/components/OpenTTDConfigEditor.jsx
index b30dfa1..78184b2 100644
--- a/gsm-frontend/src/components/OpenTTDConfigEditor.jsx
+++ b/gsm-frontend/src/components/OpenTTDConfigEditor.jsx
@@ -91,10 +91,13 @@ export default function OpenTTDConfigEditor({ token }) {
         const key = highlighted.substring(0, idx)
         const value = highlighted.substring(idx + 1)
 
-        // Color numbers, true/false, and quoted strings
+        // Color numbers first (with placeholders), then booleans
+        // This prevents the regex from matching numbers in CSS class names like "text-orange-400"
         let coloredValue = value
+          .replace(/\b(\d+)\b/g, '%%%NUM_START%%%$1%%%NUM_END%%%')
           .replace(/\b(true|false)\b/gi, '<span class="text-orange-400">$1</span>')
-          .replace(/\b(\d+)\b/g, '<span class="text-cyan-400">$1</span>')
+          .replace(/%%%NUM_START%%%/g, '<span class="text-cyan-400">')
+          .replace(/%%%NUM_END%%%/g, '</span>')
 
         highlighted = `<span class="text-blue-400">${key}</span>=<span class="text-amber-300">${coloredValue}</span>`
       }
diff --git a/gsm-frontend/src/components/PalworldConfigEditor.jsx b/gsm-frontend/src/components/PalworldConfigEditor.jsx
index f3b7752..79d7166 100644
--- a/gsm-frontend/src/components/PalworldConfigEditor.jsx
+++ b/gsm-frontend/src/components/PalworldConfigEditor.jsx
@@ -152,10 +152,13 @@ export default function PalworldConfigEditor({ token }) {
         const key = highlighted.substring(0, idx)
         const value = highlighted.substring(idx + 1)
 
-        // Color boolean values
+        // Color numbers first (before adding any HTML tags), then booleans
+        // This prevents the regex from matching numbers in CSS class names like "text-orange-400"
         let coloredValue = value
+          .replace(/\b(\d+\.?\d*)\b/g, '%%%NUM_START%%%$1%%%NUM_END%%%')
           .replace(/\b(True|False)\b/gi, '<span class="text-orange-400">$1</span>')
-          .replace(/\b(\d+\.?\d*)\b/g, '<span class="text-cyan-400">$1</span>')
+          .replace(/%%%NUM_START%%%/g, '<span class="text-cyan-400">')
+          .replace(/%%%NUM_END%%%/g, '</span>')
 
         highlighted = `<span class="text-blue-400">${key}</span>=<span class="text-amber-300">${coloredValue}</span>`
       }
diff --git a/gsm-frontend/src/components/ZomboidConfigEditor.jsx b/gsm-frontend/src/components/ZomboidConfigEditor.jsx
index 014b8f2..ee2c41b 100644
--- a/gsm-frontend/src/components/ZomboidConfigEditor.jsx
+++ b/gsm-frontend/src/components/ZomboidConfigEditor.jsx
@@ -122,12 +122,13 @@ export default function ZomboidConfigEditor({ token }) {
           const comment = highlighted.substring(idx)
           highlighted = `${code}<span class="text-emerald-500">${comment}</span>`
         }
-        // Highlight true/false/nil
+        // Highlight numbers first (with placeholders), then booleans
+        // This prevents the regex from matching numbers in CSS class names like "text-orange-400"
         highlighted = highlighted
+          .replace(/\b(\d+\.?\d*)\b/g, '%%%NUM_START%%%$1%%%NUM_END%%%')
           .replace(/\b(true|false|nil)\b/g, '<span class="text-orange-400">$1</span>')
-        // Highlight numbers
-        highlighted = highlighted
-          .replace(/\b(\d+\.?\d*)\b/g, '<span class="text-cyan-400">$1</span>')
+          .replace(/%%%NUM_START%%%/g, '<span class="text-cyan-400">')
+          .replace(/%%%NUM_END%%%/g, '</span>')
       } else {
         // INI: # comments
         if (line.trim().startsWith('#')) {