Skip to content

Commit e96c80e

Browse files
RhysLeesRhysLees
committed
wip
1 parent 2f4e548 commit e96c80e

File tree

5 files changed

+30
-47
lines changed

5 files changed

+30
-47
lines changed

‎bin/build.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,4 @@ await esbuild.build({
1010
treeShaking: true,
1111
target: ['es2020'],
1212
minify: true,
13-
});
14-
15-
// Build CSS (if needed in the future)
16-
// await esbuild.build({
17-
// entryPoints: ['./resources/css/laravel-filament-json-field.css'],
18-
// outfile: './dist/laravel-filament-json-field.css',
19-
// bundle: true,
20-
// platform: 'browser',
21-
// minify: true,
22-
// });
13+
});

‎composer.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"filament/forms": "^4.0",
2626
"filament/infolists": "^4.0",
2727
"filament/support": "^4.0",
28-
"filament/tables": "^4.0",
2928
"illuminate/contracts": "^12.0",
3029
"livewire/livewire": "^3.6",
3130
"spatie/laravel-package-tools": "^1.19"

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11

22
import CodeMirror from "codemirror";
33

4-
// Core CodeMirror
54
import "codemirror/lib/codemirror.css";
65

7-
// Modes
86
import "codemirror/mode/javascript/javascript";
97

10-
// Addons
118
import "codemirror/addon/edit/closebrackets";
129
import "codemirror/addon/edit/closetag";
1310
import "codemirror/addon/edit/continuelist";
1411
import "codemirror/addon/edit/matchbrackets";
1512
import "codemirror/addon/edit/matchtags";
1613
import "codemirror/addon/edit/trailingspace";
1714

18-
// Folding
1915
import "codemirror/addon/fold/brace-fold";
2016
import "codemirror/addon/fold/comment-fold";
2117
import "codemirror/addon/fold/foldcode";
@@ -25,8 +21,6 @@ import "codemirror/addon/fold/markdown-fold";
2521
import "codemirror/addon/fold/xml-fold";
2622
import "codemirror/addon/fold/foldgutter.css";
2723

28-
// Themes
2924
import "codemirror/theme/material.css";
3025

31-
// Make CodeMirror available globally
3226
window.CodeMirror = CodeMirror;

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

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
:component="$getFieldWrapperView()"
33
:field="$field"
44
>
5+
@php
6+
$cmId = preg_replace('/[^a-zA-Z0-9_]/', '_', $getId());
7+
@endphp
58
<div
69
x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }"
710
style="position: relative; border-radius: 0.375rem; overflow-x: scroll;"
@@ -10,7 +13,7 @@
1013
<div
1114
wire:ignore
1215
x-init="
13-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }} = CodeMirror($refs.{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}, {
16+
const config = {
1417
mode: {name: 'javascript', json: true},
1518
lineNumbers: {{ json_encode($getHasLineNumbers()) }},
1619
lineWrapping: {{ json_encode($getHasLineWrapping()) }},
@@ -23,26 +26,20 @@
2326
echo "extraKeys: {'Ctrl-Q': function(cm) { cm.foldCode(cm.getCursor()); }},";
2427
}
2528
@endphp
26-
gutters: [
27-
{{ json_encode($getHasLineNumbers()) }} ? 'CodeMirror-linenumbers' : '',
28-
{{ json_encode($getHasFoldingCode()) }} ? 'CodeMirror-foldgutter' : '',
29-
],
29+
gutters: {{ json_encode($getGutters()) }},
3030
foldOptions: {
3131
widget: (from, to) => {
3232
var count = undefined;
3333
34-
// Get open / close token
3534
var startToken = '{', endToken = '}';
36-
var prevLine = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getLine(from.line);
35+
var prevLine = {{ $cmId }}.getLine(from.line);
3736
if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
3837
startToken = '[', endToken = ']';
3938
}
4039
41-
// Get json content
42-
var internal = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getRange(from, to);
40+
var internal = {{ $cmId }}.getRange(from, to);
4341
var toParse = startToken + internal + endToken;
4442
45-
// Get key count
4643
try {
4744
var parsed = JSON.parse(toParse);
4845
count = Object.keys(parsed).length;
@@ -51,33 +48,35 @@
5148
return count ? `\u21A4${count}\u21A6` : '\u2194';
5249
}
5350
}
54-
});
51+
};
52+
53+
{{ $cmId }} = window.CodeMirror($refs.{{ $cmId }}, config);
5554
56-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.setSize('100%', '100%');
57-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
55+
{{ $cmId }}.setSize('100%', '100%');
56+
{{ $cmId }}.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
5857
5958
@php
6059
if($getHasFoldedCode()) {
61-
echo preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) . ".foldCode(CodeMirror.Pos(0, 0));";
60+
echo "$cmId.foldCode(window.CodeMirror.Pos(0, 0));";
6261
}
6362
@endphp
6463
6564
setTimeout(function() {
66-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.refresh();
65+
{{ $cmId }}.refresh();
6766
}, 1);
6867
69-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.on('change', function () {
68+
{{ $cmId }}.on('change', function () {
7069
try {
71-
state = JSON.parse({{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getValue())
70+
state = JSON.parse({{ $cmId }}.getValue())
7271
} catch (e) {
73-
state = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getValue();
72+
state = {{ $cmId }}.getValue();
7473
}
7574
});
7675
"
7776
>
7877
<div
7978
wire:ignore
80-
x-ref="{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}"
79+
x-ref="{{ $cmId }}"
8180
></div>
8281
</div>
8382
</div>

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
:component="$getEntryWrapperView()"
33
:entry="$entry"
44
>
5+
@php
6+
$cmId = preg_replace('/[^a-zA-Z0-9_]/', '_', $getId());
7+
@endphp
58
<div
69
style="position: relative; border-radius: 0.375rem; overflow-x: scroll;"
710
x-cloak
@@ -28,18 +31,15 @@
2831
widget: (from, to) => {
2932
var count = undefined;
3033
31-
// Get open / close token
3234
var startToken = '{', endToken = '}';
33-
var prevLine = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getLine(from.line);
35+
var prevLine = {{ $cmId }}.getLine(from.line);
3436
if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
3537
startToken = '[', endToken = ']';
3638
}
3739
38-
// Get json content
39-
var internal = {{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.getRange(from, to);
40+
var internal = {{ $cmId }}.getRange(from, to);
4041
var toParse = startToken + internal + endToken;
4142
42-
// Get key count
4343
try {
4444
var parsed = JSON.parse(toParse);
4545
count = Object.keys(parsed).length;
@@ -50,25 +50,25 @@
5050
}
5151
};
5252
53-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }} = window.CodeMirror($refs.{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}, config);
53+
{{ $cmId }} = window.CodeMirror($refs.{{ $cmId }}, config);
5454
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) }} ?? '{}');
55+
{{ $cmId }}.setSize('100%', '100%');
56+
{{ $cmId }}.setValue({{ json_encode(json_encode($getState(), JSON_PRETTY_PRINT), JSON_UNESCAPED_SLASHES) }} ?? '{}');
5757
5858
@php
5959
if($getHasFoldedCode()) {
60-
echo preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) . ".foldCode(window.CodeMirror.Pos(0, 0));";
60+
echo "$cmId.foldCode(window.CodeMirror.Pos(0, 0));";
6161
}
6262
@endphp
6363
6464
setTimeout(function() {
65-
{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}.refresh();
65+
{{ $cmId }}.refresh();
6666
}, 1);
6767
"
6868
>
6969
<div
7070
wire:ignore
71-
x-ref="{{ preg_replace('/[^a-zA-Z0-9_]/', '_', $getId()) }}"
71+
x-ref="{{ $cmId }}"
7272
></div>
7373
</div>
7474
</div>

0 commit comments

Comments
 (0)