Filament•15mo ago

Triggering state change

I'm trying to create a custom component that's a block editor, using the Laraberg library (https://github.com/VanOns/laraberg). The laraberg editor gets initialized from a textfield, this textfields value is then updated on submit. The value does get updated, but it doesn't seem to update the state, meaning null gets sent to the backend. This is the code for the component I have right now.

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
        x-cloak
        wire:ignore
        x-init="$nextTick(() => {
            Laraberg.init('laraberg-input', { laravelFilemanager: true, height: '800px' });
        })"
    >
        <textarea id="laraberg-input" name="laraberg-body"x-model="state"></textarea>
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
        x-cloak
        wire:ignore
        x-init="$nextTick(() => {
            Laraberg.init('laraberg-input', { laravelFilemanager: true, height: '800px' });
        })"
    >
        <textarea id="laraberg-input" name="laraberg-body"x-model="state"></textarea>
    </div>
</x-dynamic-component>

12 Replies

Patrick Boivin•15mo ago

If you inspect the textarea in the browser, does it contain the correct content?

OliverdamOP•15mo ago

It does, when I submit it flashes there, and if I instead of creating a record dd. So it doesn't go further I can also see it. If I try submitting again after that it's still null, but if I type a letter into the textarea (that still has the content), it then gets saved when I click submit again. This is the reason i'm thinking something is not triggering the state change.

Patrick Boivin•15mo ago

and if I instead of creating a record dd

Where did you try dd()?

OliverdamOP•15mo ago

In handleRecordCreation

Patrick Boivin•15mo ago

And you can see the data from the textarea, in the output of dd?

OliverdamOP•15mo ago

no the data for the textarea is always null. Until I manually type in it.

Patrick Boivin•15mo ago

Hmm... I'm thinking the issue is with x-model maybe? Do you have any other way of getting the state of the Laraberg editor in JS? Something like an event listener, where you could manually update this.state

OliverdamOP•15mo ago

Not as far as I know. And the source for the js doesn't seem to be public, only the minified version.

Patrick Boivin•15mo ago

I don't have any experience with this package unfortunately, but I'm thinking the first step would be to verify that you are getting the data from the editor in state. What if you setup an Alpine watcher ($watch()) and console.log() the state when it changes?

OliverdamOP•15mo ago

Did you mean to watch the state? If I do that I can confirm that it only updates the state when I manually type in the textbox. Not when Laraberg changes it.

Patrick Boivin•15mo ago

Ok, so that's the issue. Not sure why but it seems like x-model will not work in this context I think this is the JS part of the package : https://github.com/VanOns/block-editor Maybe there's a hook in there where you can listen for internal state changes from the editor.

OliverdamOP•15mo ago

Thanks I'll try and dive into it.

Gaming

Programming

Triggering state change