fix: JSON validation for unquoted @placeholders@

src/componets/content/ConfigTemplate.tsx

@@ -35,9 +35,10 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
   }
 
   function handleSave() {
-    // Validate JSON before saving
+    // Validate JSON before saving (with placeholder support)
     try {
-      JSON.parse(draftContent);
+      const sanitizedValue = draftContent.replace(/@[^@]+@/g, '1');
+      JSON.parse(sanitizedValue);
       setJsonError(null);
       props.onSaved(draftContent);
       setMode('view');
@@ -52,12 +53,8 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
     try {
       if (value.trim()) {
         // Replace @placeholders@ with valid JSON values for validation
-        // Handle both quoted "@placeholder@" and unquoted @placeholder@
-        let sanitizedValue = value
-          // Replace quoted placeholders: "@host@" -> "__PLACEHOLDER__"
-          .replace(/"@[^"]+@"/g, '"__PLACEHOLDER__"')
-          // Replace unquoted placeholders between : and , or } : @port@ -> "__PLACEHOLDER__"
-          .replace(/:\s*@[^,\s}]+@/g, ': "__PLACEHOLDER__"');
+        // Strategy: Replace ALL @...@ patterns with "1" (valid for both string and numeric contexts)
+        const sanitizedValue = value.replace(/@[^@]+@/g, '1');
         
         JSON.parse(sanitizedValue);
         setJsonError(null);

src/test/ConfigTemplate.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+
+describe('JSON Validation with @placeholders@', () => {
+  /**
+   * Helper function that mimics the validation logic in ConfigTemplate.tsx
+   */
+  function validateJsonWithPlaceholders(value: string): { valid: boolean; error?: string } {
+    try {
+      if (!value.trim()) {
+        return { valid: true };
+      }
+
+      // This is the current implementation from ConfigTemplate.tsx
+      // Replace ALL @...@ patterns with "1" (valid for both string and numeric contexts)
+      const sanitizedValue = value.replace(/@[^@]+@/g, '1');
+
+      JSON.parse(sanitizedValue);
+      return { valid: true };
+    } catch (e) {
+      return { valid: false, error: (e as Error).message };
+    }
+  }
+
+  it('should validate quoted placeholders', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": "@port@"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate unquoted placeholders', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate mixed quoted and unquoted placeholders', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@,
+      "ApiPath": "@host@:@port@/v1/data",
+      "MessageBroker": {
+        "hosts": @MessageBrokerHosts@
+      }
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate placeholders inside strings (URLs)', () => {
+    const json = `{
+      "ApiUrl": "http://@host@:@port@/api"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should validate complex real-world template', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@,
+
+      "ApiPath": "@host@:@port@/v1/data",
+
+      "MessageBroker": {
+        "hosts": @MessageBrokerHosts@
+      },
+
+      "basePath": "./@env_name@/in",
+
+      "NoParam": "@no_param@"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should reject invalid JSON structure', () => {
+    const json = `{
+      "Host": "@host@",
+      "Port": @port@
+      "Missing": "comma"
+    }`;
+    
+    const result = validateJsonWithPlaceholders(json);
+    expect(result.valid).toBe(false);
+    expect(result.error).toContain('Expected');
+  });
+
+  it('should handle empty value', () => {
+    const result = validateJsonWithPlaceholders('');
+    expect(result.valid).toBe(true);
+  });
+
+  it('should handle whitespace only', () => {
+    const result = validateJsonWithPlaceholders('   \n\t  ');
+    expect(result.valid).toBe(true);
+  });
+});