WIP

Author: RhysLees

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>

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>