Skip to content

Commit bc59b92

Browse files
RhysLeesRhysLees
committed
WIP
1 parent cc7ff72 commit bc59b92

File tree

8 files changed

+112
-155
lines changed

8 files changed

+112
-155
lines changed

‎dist/laravel-filament-json-field.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/laravel-filament-json-field.js‎

Lines changed: 19 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/laravel-filament-json-field.css‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎resources/js/laravel-filament-json-field.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import CodeMirror from "codemirror";
44
// Core CodeMirror
55
import "codemirror/lib/codemirror.css";
66

7-
// Custom styles
8-
import "../css/laravel-filament-json-field.css";
9-
107
// Modes
118
import "codemirror/mode/javascript/javascript";
129

@@ -30,7 +27,6 @@ import "codemirror/addon/fold/foldgutter.css";
3027

3128
// Themes
3229
import "codemirror/theme/material.css";
33-
import "codemirror/theme/default.css";
3430

3531
// Make CodeMirror available globally
3632
window.CodeMirror = CodeMirror;

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

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,73 @@
33
:entry="$entry"
44
>
55
<div
6-
x-data="{
7-
editor: null,
8-
init() {
9-
this.$nextTick(() => {
10-
this.initializeEditor();
11-
});
12-
},
13-
initializeEditor() {
14-
if (typeof window.CodeMirror === 'undefined') {
15-
setTimeout(() => this.initializeEditor(), 100);
16-
return;
17-
}
18-
19-
try {
20-
this.editor = window.CodeMirror(this.$refs.cm, {
21-
value: {{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}',
22-
mode: 'application/json',
23-
readOnly: true,
24-
lineNumbers: {{ json_encode($getHasLineNumbers()) }},
25-
lineWrapping: {{ json_encode($getHasLineWrapping()) }},
26-
autoCloseBrackets: {{ json_encode($getHasAutoCloseBrackets()) }},
27-
viewportMargin: Infinity,
28-
theme: '{{ $getHasDarkTheme() ? 'darcula' : 'default' }}',
29-
foldGutter: {{ json_encode($getHasFoldingCode()) }},
30-
@php
31-
if($getHasFoldingCode()) {
32-
echo "gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],";
33-
echo "foldOptions: {";
34-
echo " widget: (from, to) => {";
35-
echo " let count;";
36-
echo " let startToken = '{', endToken = '}';";
37-
echo " let prevLine = this.editor.getLine(from.line);";
38-
echo " if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {";
39-
echo " startToken = '[', endToken = ']';";
40-
echo " }";
41-
echo " let internal = this.editor.getRange(from, to);";
42-
echo " let toParse = startToken + internal + endToken;";
43-
echo " try {";
44-
echo " let parsed = JSON.parse(toParse);";
45-
echo " count = Object.keys(parsed).length;";
46-
echo " } catch (e) {}";
47-
echo " return count ? `\\u21A4${count}\\u21A6` : '\\u2194';";
48-
echo " }";
49-
echo "},";
50-
echo "extraKeys: {";
51-
echo " 'Ctrl-Q': function(cm) { cm.foldCode(cm.getCursor()); }";
52-
echo "},";
53-
}
54-
@endphp
55-
});
56-
57-
this.editor.setSize('100%', '100%');
58-
59-
} catch (error) {
60-
console.error('CodeMirror initialization failed:', error);
61-
}
62-
}
63-
}"
64-
wire:ignore
6+
style="position: relative; border-radius: 0.375rem; overflow-x: scroll;"
7+
x-cloak
658
>
66-
<div
67-
x-ref="cm"
68-
style="height: 200px; border: 1px solid #d1d5db; border-radius: 0.375rem;"
69-
></div>
9+
<div
10+
wire:ignore
11+
x-init="
12+
const config = {
13+
mode: {name: 'javascript', json: true},
14+
readOnly: true,
15+
lineNumbers: {{ json_encode($getHasLineNumbers()) }},
16+
lineWrapping: {{ json_encode($getHasLineWrapping()) }},
17+
autoCloseBrackets: {{ json_encode($getHasAutoCloseBrackets()) }},
18+
viewportMargin: Infinity,
19+
theme: '{{ $getHasDarkTheme() ? 'material' : 'default' }}',
20+
foldGutter: {{ json_encode($getHasFoldingCode()) }},
21+
@php
22+
if($getHasFoldingCode()) {
23+
echo "extraKeys: {'Ctrl-Q': function(cm) { cm.foldCode(cm.getCursor()); }},";
24+
}
25+
@endphp
26+
gutters: {{ json_encode($getGutters()) }},
27+
foldOptions: {
28+
widget: (from, to) => {
29+
var count = undefined;
30+
31+
// Get open / close token
32+
var startToken = '{', endToken = '}';
33+
var prevLine = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getLine(from.line);
34+
if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
35+
startToken = '[', endToken = ']';
36+
}
37+
38+
// Get json content
39+
var internal = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getRange(from, to);
40+
var toParse = startToken + internal + endToken;
41+
42+
// Get key count
43+
try {
44+
var parsed = JSON.parse(toParse);
45+
count = Object.keys(parsed).length;
46+
} catch(e) { }
47+
48+
return count ? `\u21A4${count}\u21A6` : '\u2194';
49+
}
50+
}
51+
};
52+
53+
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }} = window.CodeMirror($refs.{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}, config);
54+
55+
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.setSize('100%', '100%');
56+
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
57+
58+
@php
59+
if($getHasFoldedCode()) {
60+
echo preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) . ".foldCode(window.CodeMirror.Pos(0, 0));";
61+
}
62+
@endphp
63+
64+
setTimeout(function() {
65+
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.refresh();
66+
}, 1);
67+
"
68+
>
69+
<div
70+
wire:ignore
71+
x-ref="{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}"
72+
></div>
73+
</div>
7074
</div>
7175
</x-dynamic-component>

‎src/Concerns/HasGutters.php‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?php
2+
3+
namespace CodebarAg\FilamentJsonField\Concerns;
4+
5+
trait HasGutters
6+
{
7+
public function getGutters(): array
8+
{
9+
$gutters = [];
10+
11+
if ($this->getHasLineNumbers()) {
12+
$gutters[] = 'CodeMirror-linenumbers';
13+
}
14+
15+
if ($this->getHasFoldingCode()) {
16+
$gutters[] = 'CodeMirror-foldgutter';
17+
}
18+
19+
return $gutters;
20+
}
21+
}

‎src/Forms/Components/JsonInput.php‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
use CodebarAg\FilamentJsonField\Concerns\HasAutoCloseBrackets;
66
use CodebarAg\FilamentJsonField\Concerns\HasDarkTheme;
77
use CodebarAg\FilamentJsonField\Concerns\HasFoldingCode;
8+
use CodebarAg\FilamentJsonField\Concerns\HasGutters;
89
use CodebarAg\FilamentJsonField\Concerns\HasLineNumbers;
910
use CodebarAg\FilamentJsonField\Concerns\HasLineWrapping;
1011
use Filament\Forms\Components\Concerns\CanBeReadOnly;
@@ -16,6 +17,7 @@ class JsonInput extends Field
1617
use HasAutoCloseBrackets;
1718
use HasDarkTheme;
1819
use HasFoldingCode;
20+
use HasGutters;
1921
use HasLineNumbers;
2022
use HasLineWrapping;
2123

@@ -36,19 +38,4 @@ public function setUp(): void
3638
'array' => __('The :attribute must be valid JSON.'),
3739
]);
3840
}
39-
40-
public function getGutters(): array
41-
{
42-
$gutters = [];
43-
44-
if ($this->getHasLineNumbers()) {
45-
$gutters[] = 'CodeMirror-linenumbers';
46-
}
47-
48-
if ($this->getHasFoldingCode()) {
49-
$gutters[] = 'CodeMirror-foldgutter';
50-
}
51-
52-
return $gutters;
53-
}
5441
}

‎src/Infolists/Components/JsonEntry.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
use CodebarAg\FilamentJsonField\Concerns\HasAutoCloseBrackets;
66
use CodebarAg\FilamentJsonField\Concerns\HasDarkTheme;
77
use CodebarAg\FilamentJsonField\Concerns\HasFoldingCode;
8+
use CodebarAg\FilamentJsonField\Concerns\HasGutters;
89
use CodebarAg\FilamentJsonField\Concerns\HasLineNumbers;
910
use CodebarAg\FilamentJsonField\Concerns\HasLineWrapping;
1011
use Filament\Infolists\Components\Entry;
@@ -14,6 +15,7 @@ class JsonEntry extends Entry
1415
use HasAutoCloseBrackets;
1516
use HasDarkTheme;
1617
use HasFoldingCode;
18+
use HasGutters;
1719
use HasLineNumbers;
1820
use HasLineWrapping;
1921

0 commit comments

Comments
 (0)