Trix Integration with Livewire And Alpine js

form.blade.php

/* Component Render */

<x-rich-text  wire:model.lazy="description"></x-rich-text>

rich-text.blade.php

/* Blade Component */

<div

    x-data="{
        value: @entangle($attributes->wire('model')),
        isFocused() { return document.activeElement !== this.$refs.trix },
        setValue() { this.$refs.trix.editor.loadHTML(this.value) },
    }"
    x-init="setValue(); $watch('value', () => isFocused() && setValue())"
    x-on:trix-change="value = $event.target.value"
    {{ $attributes->whereDoesntStartWith('wire:model') }}
    wire:ignore
>
    <input id="x" type="hidden">
    <trix-editor x-ref="trix" input="x" class="form-textarea"></trix-editor>
</div>