Handle formatting

resources/views/forms/components/json-input.blade.php

@@ -3,9 +3,6 @@
     :field="$field"
 
 >
-    @php
-        ray($getStatePath())
-    @endphp
     <div
         x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }"
         style="position: relative; border-radius: 0.375rem;"
@@ -14,7 +11,7 @@
         <div
             wire:ignore
             x-init="
-                codeMirrorEditor = CodeMirror($refs.input, {
+                {{ str_replace('.', '', $getId()) }} = CodeMirror($refs.{{ str_replace('.', '', $getId()) }}, {
                     mode: 'application/json',
                     lineNumbers: {{ json_encode($getHasLineNumbers()) }},
                     lineWrapping: {{ json_encode($getHasLineWrapping()) }},
@@ -57,19 +54,25 @@
                     }
                 });
 
-                codeMirrorEditor.setSize('100%', '100%');
-                codeMirrorEditor.setValue(state ?? '{}');
+                {{ str_replace('.', '', $getId()) }}.setSize('100%', '100%');
+                {{ str_replace('.', '', $getId()) }}.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
 
                 setTimeout(function() {
-                        codeMirrorEditor.refresh();
+                        {{ str_replace('.', '', $getId()) }}.refresh();
                 }, 1);
 
-                codeMirrorEditor.on('change', () => state = codeMirrorEditor.getValue())
+                {{ str_replace('.', '', $getId()) }}.on('change', function () {
+                    try {
+                        state = JSON.parse({{ str_replace('.', '', $getId()) }}.getValue())
+                    } catch (e) {
+                        state = {{ str_replace('.', '', $getId()) }}.getValue();
+                    }
+                });
             "
         >
             <div
                 wire:ignore
-                x-ref="input"
+                x-ref="{{ str_replace('.', '', $getId()) }}"
             ></div>
         </div>
     </div>

resources/views/infolists/components/json-entry.blade.php

@@ -6,12 +6,13 @@
         <div
             wire:ignore
             x-init="
-                codeMirrorEditor = CodeMirror($refs.input, {
+                {{ str_replace('.', '', $getId()) }} = CodeMirror($refs.{{ str_replace('.', '', $getId()) }}, {
                     mode: 'application/json',
                     readOnly: true,
                     lineNumbers: {{ json_encode($getHasLineNumbers()) }},
                     lineWrapping: {{ json_encode($getHasLineWrapping()) }},
                     autoCloseBrackets: {{ json_encode($getHasAutoCloseBrackets()) }},
+                    lineNumbers: {{ json_encode($getHasLineNumbers()) }},
                     viewportMargin: Infinity,
                     theme: '{{ $getHasDarkTheme() ? 'darcula' : 'default' }}',
                     foldGutter: {{ json_encode($getHasFoldingCode()) }},
@@ -50,17 +51,17 @@
                     }
                 });
 
-                codeMirrorEditor.setSize(null, '100%');
-                codeMirrorEditor.setValue({{ json_encode($getState()) }} ?? '{}');
+                {{ str_replace('.', '', $getId()) }}.setSize(null, '100%');
+                {{ str_replace('.', '', $getId()) }}.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
 
                 setTimeout(function() {
-                        codeMirrorEditor.refresh();
+                        {{ str_replace('.', '', $getId()) }}.refresh();
                 }, 1);
             "
         >
             <div
                 wire:ignore
-                x-ref="input"
+                x-ref="{{ str_replace('.', '', $getId()) }}"
             ></div>
         </div>
     </div>

src/Forms/Components/JsonInput.php

@@ -20,4 +20,15 @@ class JsonInput extends Field
     use HasLineWrapping;
 
     protected string $view = 'filament-json-field::forms.components.json-input';
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        $this
+            ->rules(['array'])
+            ->validationMessages([
+                'array' => __('The :attribute must be valid JSON.'),
+            ]);
+    }
 }

tests/JsonEntryFieldTest.php

@@ -38,6 +38,18 @@
     expect($field->getHasLineNumbers())->toBe(true);
 });
 
+it('can have line wrapping code ', function () {
+    $field = JsonEntry::make('json');
+
+    expect($field->getHasLineWrapping())->toBe(true);
+
+    $field->lineWrapping(false);
+    expect($field->getHasLineWrapping())->toBe(false);
+
+    $field->lineWrapping(true);
+    expect($field->getHasLineWrapping())->toBe(true);
+});
+
 it('can have code ', function () {
     $field = JsonEntry::make('json');
 

tests/JsonInputFieldTest.php

@@ -38,6 +38,18 @@
     expect($field->getHasLineNumbers())->toBe(true);
 });
 
+it('can have line wrapping code ', function () {
+    $field = JsonInput::make('json');
+
+    expect($field->getHasLineWrapping())->toBe(true);
+
+    $field->lineWrapping(false);
+    expect($field->getHasLineWrapping())->toBe(false);
+
+    $field->lineWrapping(true);
+    expect($field->getHasLineWrapping())->toBe(true);
+});
+
 it('can have code ', function () {
     $field = JsonInput::make('json');