Any idea how to implement editor.js with alpinejs?

[adrian-ub]

https://editorjs.io/
I am using Livewire with AlpineJs and this is the code that I have, the editor can already be seen, but I have not been able to obtain the data:

<div x-data="{ value: @entangle($attributes->wire('model')) }" x-init="new EditorJS({ holder: $refs.input })"
    x-on:change="value = $event.target.value" class="flex rounded-md shadow-sm">

    <div {{ $attributes->whereDoesntStartWith('wire:model') }} x-ref="input" x-bind:value="value"
        class="rounded-none rounded-r-md flex-1 form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">
    </div>
</div>

[eckeriaue]

Hi ! I am facing the same problem. Here is how I decided to implement this functionality:

1 - We move all work with editor.js to a separate js file and create a plugin for alpine with directive registration inside.

import EditorJS from '@editorjs/editorjs'

export default function Editor(Alpine) {
    Alpine.directive('editor', (holder, { value, modifiers, expession }, { Alpine, effect, cleanup }) => {
        new EditorJS({ holder })
    })
}

2 - then simply use the code as follows

<script defer src="path/to/editor-js-alpine-plugin.js"></script>
<div x-editor></div>

I hope I've helped solve the problem

[ekwoka]

What events does EditorJS emit?