Livewire trix input

trix.blade.php

@push('body-styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css">
@endpush

<form x-data="form()">

<input x-ref="description" id="description" name="description" value='{{ $description }}' type="hidden" />
<div wire:ignore>
    <trix-editor input="description"></trix-editor>
</div>

<input x-ref="info" id="info" name="info" value='{{ $info }}' type="hidden" />
<div wire:ignore>
    <trix-editor input="info"></trix-editor>
</div>

<button x-on:click.prevent="save">Save</button>
</form>

@push('scripts')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.js"></script>
<script>
    function form() {
        return {
            save() {
                window.livewire.emit('alpineSave', {
                    info: this.$refs.info.value,
                    description: this.$refs.description.value,
                });
            }
        }
    }
</script>
@endpush

//livewire component
protected $listeners = ['alpineSave'];
public function alpineSave($array) {
        $this->fill([
            'info' => data_get($array, 'info'),
            'description' => data_get($array, 'description'),
        ]);
        // save the data ...
}

@ighmouraceneb
I'm on AlpineJS 2.7.3, Livewire 2.3.5 and Trix 1.2.0, and I have no errors.

@tanthammar

@ighmouraceneb
I'm on AlpineJS 2.7.3, Livewire 2.3.5 and Trix 1.2.0, and I have no errors.

@tanthammar
in my case, I generate the inputs automatically. so we can have 0,1,2 ... trix-editor
so in the view I have this

@foreach($fields as $index => $field)
   <x-back.input.label for="'{{ $field->field->value }}-{{ $index }}'">{{__($field->config['label'])}}</x-back.input.label>
     <x-back.input.trix-text
                 id="'{{ $field->field->value }}-{{ $index }}'"
                wire:model.defer="textFormattedLongSummary.{{ $index }}"
                :error="$errors->first('textFormattedLongSummary.'.$index)">
     </x-back.input.trix-text>
@endforeach

component trix-text :

@php
    $id = md5($attributes->wire('model'));

@endphp
<div
    class="rounded-md shadow-sm"
    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="{{$id}}"  type="hidden">
    <trix-editor input="{{$id}}" x-ref="trix" class="form-textarea block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"></trix-editor>
</div>

and in the controller I defined as follows:

   public $TextFormattedLongSummary = [];

in the console I have this error

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at SupportAlpine.js:70
    at Array.forEach (<anonymous>)
    at SupportAlpine.js:55
    at alpine.js:1465
    at Array.forEach (<anonymous>)
    at new Component (alpine.js:1465)
    at Object.initializeComponent (alpine.js:1870)
    at alpine.js:1857
    at alpine.js:1835

Apparently @entangle does not support nested arrays

I init the array in the mount function and it worked :

   public function mount()
    {
        foreach ($this->fields as $index => $field) {
 
            if($field->field->value === "TextFormattedLongSummary") {
                $this->TextFormattedLongSummary[$index] = "";
            }
        }
    }

the problem is solved with version v2.3.6 of livewire

Anyone had issues with not being able to pasting using this setup?

the upload is not adding up. Initial wire:model does not hold the uploaded image. Any assistant to handle the uploaded images and text together in the same livewire component? Thank you