WIP

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

@@ -1,25 +1,67 @@
 <x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
-    @php
-        $identification =  $getId();
-    @endphp
+    <div
+        class="relative rounded-md"
+        x-cloak
+    >
+        <div
+            wire:ignore
+            x-init="
+                codeMirrorEditor = CodeMirror($refs.input, {
+                    mode: 'application/json',
+                    readOnly: true,
+                    lineNumbers: {{ json_encode($getHasLineNumbers()) }},
+                    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: [
+                        'CodeMirror-linenumbers',
+                        {{ json_encode($getHasFoldingCode()) }} ? 'CodeMirror-foldgutter' : ''
+                    ],
+                    foldOptions: {
+                        widget: (from, to) => {
+                            var count = undefined;
 
-    <div id="{{$identification}}" class="w-full"></div>
+                            // Get open / close token
+                            var startToken = '{', endToken = '}';
+                            var prevLine = codeMirrorEditor.getLine(from.line);
+                            if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
+                                startToken = '[', endToken = ']';
+                            }
 
-    <script>
-        var jsonData = @json($getState());
+                            // Get json content
+                            var internal = codeMirrorEditor.getRange(from, to);
+                            var toParse = startToken + internal + endToken;
 
-        var editor = CodeMirror(document.getElementById('{{$identification}}'), {
-            value: JSON.stringify(jsonData, null, 2),
-            mode: "application/json", // Set mode to JSON
-            lineNumbers: true,
-            readOnly: true,
-            autoCloseBrackets: true,
-            viewportMargin: Infinity,
-            theme: 'default',
-        });
-        editor.setSize(null, "100%");
+                            // Get key count
+                            try {
+                                var parsed = JSON.parse(toParse);
+                                count = Object.keys(parsed).length;
+                            } catch(e) { }
 
-        editor.setValue(JSON.stringify(jsonData, null, 2));
-    </script>
+                            return count ? `\u21A4${count}\u21A6` : '\u2194';
+                        }
+                    }
+                });
 
+                codeMirrorEditor.setSize(null, '100%');
+                codeMirrorEditor.setValue({{ json_encode($getState()) }});
+
+                setTimeout(function() {
+                        codeMirrorEditor.refresh();
+                }, 1);
+            "
+        >
+            <div
+                wire:ignore
+                x-ref="input"
+                class="w-full"
+            ></div>
+        </div>
+    </div>
 </x-dynamic-component>

src/Infolists/Components/JsonEntry.php

@@ -2,9 +2,66 @@
 
 namespace CodebarAg\FilamentCodemirror\Infolists\Components;
 
+use Closure;
 use Filament\Infolists\Components\Entry;
 
 class JsonEntry extends Entry
 {
     protected string $view = 'filament-codemirror::infolists.components.json-entry';
+
+    protected bool|Closure $hasLineNumbers = true;
+
+    protected bool|Closure $hasAutoCloseBrackets = true;
+
+    protected bool|Closure $hasDarkTheme = false;
+
+    protected bool|Closure $hasFoldingCode = true;
+
+    public function lineNumbers(bool|Closure $condition = true): static
+    {
+        $this->hasLineNumbers = $condition;
+
+        return $this;
+    }
+
+    public function autoCloseBrackets(bool|Closure $condition = true): static
+    {
+        $this->hasAutoCloseBrackets = $condition;
+
+        return $this;
+    }
+
+    public function darkTheme(bool|Closure $condition = true): static
+    {
+        $this->hasDarkTheme = $condition;
+
+        return $this;
+    }
+
+    public function foldingCode(bool|Closure $condition = true): static
+    {
+        $this->hasFoldingCode = $condition;
+
+        return $this;
+    }
+
+    public function getHasLineNumbers(): bool
+    {
+        return (bool) $this->evaluate($this->hasLineNumbers);
+    }
+
+    public function getHasAutoCloseBrackets(): bool
+    {
+        return (bool) $this->evaluate($this->hasAutoCloseBrackets);
+    }
+
+    public function getHasDarkTheme(): bool
+    {
+        return (bool) $this->evaluate($this->hasDarkTheme);
+    }
+
+    public function getHasFoldingCode(): bool
+    {
+        return (bool) $this->evaluate($this->hasFoldingCode);
+    }
 }