ZeasyAlex/GSM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix syntax highlighting regex order in config editors
All checks were successful
Deploy GSM / deploy (push) Successful in 22s
Details

Browse Source 
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>
This commit is contained in:
Alexander Zielonka
2026-01-12 03:31:20 +01:00
parent 8447484270
commit 66716279ad
3 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
gsm-frontend/src/components/OpenTTDConfigEditor.jsx
View File

@@ -91,10 +91,13 @@ export default function OpenTTDConfigEditor({ token }) {
const key = highlighted.substring(0, idx) const key = highlighted.substring(0, idx)
const value = highlighted.substring(idx + 1) 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 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(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>` highlighted = `<span class="text-blue-400">${key}</span>=<span class="text-amber-300">${coloredValue}</span>`
} }

7
gsm-frontend/src/components/PalworldConfigEditor.jsx
View File

@@ -152,10 +152,13 @@ export default function PalworldConfigEditor({ token }) {
const key = highlighted.substring(0, idx) const key = highlighted.substring(0, idx)
const value = highlighted.substring(idx + 1) 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 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(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>` highlighted = `<span class="text-blue-400">${key}</span>=<span class="text-amber-300">${coloredValue}</span>`
} }

9
gsm-frontend/src/components/ZomboidConfigEditor.jsx
View File

@@ -122,12 +122,13 @@ export default function ZomboidConfigEditor({ token }) {
const comment = highlighted.substring(idx) const comment = highlighted.substring(idx)
highlighted = `${code}<span class="text-emerald-500">${comment}</span>` 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 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>') .replace(/\b(true|false|nil)\b/g, '<span class="text-orange-400">$1</span>')
// Highlight numbers .replace(/%%%NUM_START%%%/g, '<span class="text-cyan-400">')
highlighted = highlighted .replace(/%%%NUM_END%%%/g, '</span>')
.replace(/\b(\d+\.?\d*)\b/g, '<span class="text-cyan-400">$1</span>')
} else { } else {
// INI: # comments // INI: # comments
if (line.trim().startsWith('#')) { if (line.trim().startsWith('#')) {