Pass initial value to editor function call

app/View/Form/Editor.php

@@ -31,14 +31,18 @@ class Editor extends Component
                 @endif
 
                 <div class="relative w-full h-full">
-                    <div class="
+                    <div
+                        class="
                         w-full border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg
                         group-[.size-default]:border-2 group-[.size-sm]:border
                         group-[.size-default]:text-sm group-[.size-sm]:text-xs
                         group-[.size-default]:p-2 group-[.size-sm]:p-1
-                        " @updated="$wire.{{$attributes->wire('model')->value}} = $event.detail" x-bind="editor"x-data="{
+                        "
-                            value: $wire.{{$attributes->wire('model')->value}},
+                        @updated="$wire.{{$attributes->wire('model')->value}} = $event.detail"
-                        }" id="{{$id}}" {{$attributes}}></div>
+                        x-data="editor($wire.{{$attributes->wire('model')->value}})"
+                        id="{{$id}}"
+                        {{$attributes}}
+                    ></div>
                     <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint>{{$hint}}</x-form::hint>

resources/livewire-js/app.js

@@ -18,7 +18,7 @@ Alpine.plugin(
 window.addEventListener('success', (event) => success(event.detail[0]));
 
 document.addEventListener('alpine:init', () => {
-    Alpine.bind('editor', () => editor);
+    Alpine.data('editor', editor);
 });
 
 Livewire.start();

resources/livewire-js/editor.js

@@ -5,11 +5,11 @@ import Paragraph from '@editorjs/paragraph';
 import NestedList from '@editorjs/nested-list';
 import Alert from 'editorjs-alert';
 
-export default {
+export default (initialValue) => ({
-    'editor': null,
+    editor: null,
-    'value': null,
+    value: initialValue,
 
-    'x-init': function () {
+    init: function () {
         var tools = {
             paragraph: {
                 class: Paragraph,
@@ -57,4 +57,4 @@ export default {
             }, 200),
         });
     },
-};
+});