From 61ba22c8dd6149f873b05b1bac6615ec2e1df5dd Mon Sep 17 00:00:00 2001
From: Rhys Lees <43909932+RhysLees@users.noreply.github.com>
Date: Fri, 22 Mar 2024 13:11:51 +0000
Subject: [PATCH 1/4] WIP

---
 .../forms/components/json-input.blade.php     | 13 ++++---
 .../infolists/components/json-entry.blade.php | 39 +++----------------
 src/Forms/Components/JsonInput.php            |  9 +++++
 tests/JsonEntryFieldTest.php                  | 12 ++++++
 tests/JsonInputFieldTest.php                  | 12 ++++++
 5 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/resources/views/forms/components/json-input.blade.php b/resources/views/forms/components/json-input.blade.php
index eed5139..7a86e6e 100644
--- a/resources/views/forms/components/json-input.blade.php
+++ b/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;"
@@ -58,13 +55,19 @@
                 });
 
                 codeMirrorEditor.setSize('100%', '100%');
-                codeMirrorEditor.setValue(state ?? '{}');
+                codeMirrorEditor.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
 
                 setTimeout(function() {
                         codeMirrorEditor.refresh();
                 }, 1);
 
-                codeMirrorEditor.on('change', () => state = codeMirrorEditor.getValue())
+                codeMirrorEditor.on('change', function () {
+                    try {
+                        state = JSON.parse(codeMirrorEditor.getValue())
+                    } catch (e) {
+                        state = codeMirrorEditor.getValue();
+                    }
+                });
             "
         >
             <div
diff --git a/resources/views/infolists/components/json-entry.blade.php b/resources/views/infolists/components/json-entry.blade.php
index 488f87e..00e99a3 100644
--- a/resources/views/infolists/components/json-entry.blade.php
+++ b/resources/views/infolists/components/json-entry.blade.php
@@ -10,48 +10,21 @@
                     mode: 'application/json',
                     readOnly: true,
                     lineNumbers: {{ json_encode($getHasLineNumbers()) }},
-                    lineWrapping: {{ json_encode($getHasLineWrapping()) }},
-                    autoCloseBrackets: {{ json_encode($getHasAutoCloseBrackets()) }},
                     viewportMargin: Infinity,
                     theme: '{{ $getHasDarkTheme() ? 'darcula' : 'default' }}',
-                    foldGutter: {{ json_encode($getHasFoldingCode()) }},
-                    @php
-                        if($getHasFoldingCode()) {
-                            echo "extraKeys: {'Ctrl-Q': function(cm) { cm.foldCode(cm.getCursor()); }},";
-                        }
-                    @endphp
                     gutters: [
                         {{ json_encode($getHasLineNumbers()) }} ? 'CodeMirror-linenumbers' : '',
-                        {{ json_encode($getHasFoldingCode()) }} ? 'CodeMirror-foldgutter' : '',
                     ],
-                    foldOptions: {
-                        widget: (from, to) => {
-                            var count = undefined;
-
-                            // Get open / close token
-                            var startToken = '{', endToken = '}';
-                            var prevLine = codeMirrorEditor.getLine(from.line);
-                            if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
-                                startToken = '[', endToken = ']';
-                            }
-
-                            // Get json content
-                            var internal = codeMirrorEditor.getRange(from, to);
-                            var toParse = startToken + internal + endToken;
+                });
 
-                            // Get key count
-                            try {
-                                var parsed = JSON.parse(toParse);
-                                count = Object.keys(parsed).length;
-                            } catch(e) { }
+                @php
+                    $state = $getState();
 
-                            return count ? `\u21A4${count}\u21A6` : '\u2194';
-                        }
-                    }
-                });
+                    ray($state);
+                @endphp
 
                 codeMirrorEditor.setSize(null, '100%');
-                codeMirrorEditor.setValue({{ json_encode($getState()) }} ?? '{}');
+                codeMirrorEditor.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
 
                 setTimeout(function() {
                         codeMirrorEditor.refresh();
diff --git a/src/Forms/Components/JsonInput.php b/src/Forms/Components/JsonInput.php
index aabcc27..0403a32 100644
--- a/src/Forms/Components/JsonInput.php
+++ b/src/Forms/Components/JsonInput.php
@@ -20,4 +20,13 @@ class JsonInput extends Field
     use HasLineWrapping;
 
     protected string $view = 'filament-json-field::forms.components.json-input';
+
+    public function setUp(): void
+    {
+        $this
+            ->rules(['array'])
+            ->validationMessages([
+                'array' => __('The :attribute must be valid JSON.'),
+            ]);
+    }
 }
diff --git a/tests/JsonEntryFieldTest.php b/tests/JsonEntryFieldTest.php
index 5f591de..474ad01 100644
--- a/tests/JsonEntryFieldTest.php
+++ b/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');
 
diff --git a/tests/JsonInputFieldTest.php b/tests/JsonInputFieldTest.php
index 82f7e2a..0c5d728 100644
--- a/tests/JsonInputFieldTest.php
+++ b/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');
 

From 5b5523482a67663bcd0f0f408df9ca0f4e2a3df6 Mon Sep 17 00:00:00 2001
From: Rhys Lees <43909932+RhysLees@users.noreply.github.com>
Date: Fri, 22 Mar 2024 13:13:27 +0000
Subject: [PATCH 2/4] WIP

---
 resources/views/infolists/components/json-entry.blade.php | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/resources/views/infolists/components/json-entry.blade.php b/resources/views/infolists/components/json-entry.blade.php
index 00e99a3..8542c4f 100644
--- a/resources/views/infolists/components/json-entry.blade.php
+++ b/resources/views/infolists/components/json-entry.blade.php
@@ -17,12 +17,6 @@
                     ],
                 });
 
-                @php
-                    $state = $getState();
-
-                    ray($state);
-                @endphp
-
                 codeMirrorEditor.setSize(null, '100%');
                 codeMirrorEditor.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
 

From c145101e8062e61fe8fcea46062c1a7e0c21458f Mon Sep 17 00:00:00 2001
From: Rhys Lees <43909932+RhysLees@users.noreply.github.com>
Date: Fri, 22 Mar 2024 13:23:01 +0000
Subject: [PATCH 3/4] WIP

---
 src/Forms/Components/JsonInput.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Forms/Components/JsonInput.php b/src/Forms/Components/JsonInput.php
index 0403a32..ff59f2e 100644
--- a/src/Forms/Components/JsonInput.php
+++ b/src/Forms/Components/JsonInput.php
@@ -23,6 +23,8 @@ class JsonInput extends Field
 
     public function setUp(): void
     {
+        parent::setUp();
+
         $this
             ->rules(['array'])
             ->validationMessages([

From fc64bc9f8aa287c64fee79b4e290ab50f6deb4a6 Mon Sep 17 00:00:00 2001
From: Rhys Lees <43909932+RhysLees@users.noreply.github.com>
Date: Fri, 22 Mar 2024 14:36:00 +0000
Subject: [PATCH 4/4] WIP

---
 .../forms/components/json-input.blade.php     | 16 +++----
 .../infolists/components/json-entry.blade.php | 44 ++++++++++++++++---
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/resources/views/forms/components/json-input.blade.php b/resources/views/forms/components/json-input.blade.php
index 7a86e6e..76158f2 100644
--- a/resources/views/forms/components/json-input.blade.php
+++ b/resources/views/forms/components/json-input.blade.php
@@ -11,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()) }},
@@ -54,25 +54,25 @@
                     }
                 });
 
-                codeMirrorEditor.setSize('100%', '100%');
-                codeMirrorEditor.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
+                {{ 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', function () {
+                {{ str_replace('.', '', $getId()) }}.on('change', function () {
                     try {
-                        state = JSON.parse(codeMirrorEditor.getValue())
+                        state = JSON.parse({{ str_replace('.', '', $getId()) }}.getValue())
                     } catch (e) {
-                        state = codeMirrorEditor.getValue();
+                        state = {{ str_replace('.', '', $getId()) }}.getValue();
                     }
                 });
             "
         >
             <div
                 wire:ignore
-                x-ref="input"
+                x-ref="{{ str_replace('.', '', $getId()) }}"
             ></div>
         </div>
     </div>
diff --git a/resources/views/infolists/components/json-entry.blade.php b/resources/views/infolists/components/json-entry.blade.php
index 8542c4f..ffcd05e 100644
--- a/resources/views/infolists/components/json-entry.blade.php
+++ b/resources/views/infolists/components/json-entry.blade.php
@@ -6,28 +6,62 @@
         <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()) }},
+                    @php
+                        if($getHasFoldingCode()) {
+                            echo "extraKeys: {'Ctrl-Q': function(cm) { cm.foldCode(cm.getCursor()); }},";
+                        }
+                    @endphp
                     gutters: [
                         {{ json_encode($getHasLineNumbers()) }} ? 'CodeMirror-linenumbers' : '',
+                        {{ json_encode($getHasFoldingCode()) }} ? 'CodeMirror-foldgutter' : '',
                     ],
+                    foldOptions: {
+                        widget: (from, to) => {
+                            var count = undefined;
+
+                            // Get open / close token
+                            var startToken = '{', endToken = '}';
+                            var prevLine = codeMirrorEditor.getLine(from.line);
+                            if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
+                                startToken = '[', endToken = ']';
+                            }
+
+                            // Get json content
+                            var internal = codeMirrorEditor.getRange(from, to);
+                            var toParse = startToken + internal + endToken;
+
+                            // Get key count
+                            try {
+                                var parsed = JSON.parse(toParse);
+                                count = Object.keys(parsed).length;
+                            } catch(e) { }
+
+                            return count ? `\u21A4${count}\u21A6` : '\u2194';
+                        }
+                    }
                 });
 
-                codeMirrorEditor.setSize(null, '100%');
-                codeMirrorEditor.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
+                {{ 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>