diff --git a/public/css/quill.snow.css b/public/css/quill.snow.css
index 70fc3ea..1db5f5d 100644
--- a/public/css/quill.snow.css
+++ b/public/css/quill.snow.css
@@ -943,3 +943,8 @@
.ql-container.ql-snow {
border: 1px solid #ccc;
}
+
+.ql-container, .ql-toolbar {
+ background-color: white!important;
+ color: black!important;
+}
diff --git a/public/js/quill-init.js b/public/js/quill-init.js
new file mode 100644
index 0000000..ecee86d
--- /dev/null
+++ b/public/js/quill-init.js
@@ -0,0 +1,24 @@
+document.addEventListener('alpine:init', () => {
+ Alpine.data('quill', () => ({
+ textarea: null,
+ editor: null,
+
+ init() {
+ this.textarea = this.$root.querySelector('.ql-textarea')
+ this.editor = this.$root.querySelector('.ql-editor')
+
+ const t = this
+
+ this.$nextTick(function() {
+ let quill = new Quill(`#${t.editor.id}`, {
+ theme: 'snow'
+ });
+
+ quill.on('text-change', () => {
+ t.textarea.value = t.editor.innerHTML || '';
+ t.textarea.dispatchEvent(new Event('change'));
+ });
+ })
+ },
+ }))
+})
diff --git a/resources/views/fields/quill.blade.php b/resources/views/fields/quill.blade.php
index 36612cc..85ac25d 100644
--- a/resources/views/fields/quill.blade.php
+++ b/resources/views/fields/quill.blade.php
@@ -9,37 +9,3 @@
])->except('x-bind:id')"
>{!! $value ?? '' !!}
-
-
-
-
diff --git a/src/Fields/Quill.php b/src/Fields/Quill.php
index 1518aba..01df5c7 100644
--- a/src/Fields/Quill.php
+++ b/src/Fields/Quill.php
@@ -13,5 +13,6 @@ final class Quill extends Textarea
protected array $assets = [
'vendor/moonshine-quill/css/quill.snow.css',
'vendor/moonshine-quill/js/quill.js',
+ 'vendor/moonshine-quill/js/quill-init.js',
];
}