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 ...
}

Hmmm. Not sure I can recreate that issue. This is a barebones version I am testing with:

class Test extends Component
{
    public $content = 'hello';

    public function submit()
    {
        $this->validate(['content' => 'required']);
        $this->content = "goodbye";
    }
    public function render()
    {
        return view('livewire.test');
    }
}

<div>
    <form wire:submit.prevent="submit()">
        <div x-data="{ trix: @entangle('content').defer }">
            <input id="content" name="content" type="hidden" value="{{$content}}" />
            <div wire:ignore>
                <trix-editor x-model.debounce.300ms="trix">
                </trix-editor>
            </div>
            @error('content') <span class="error">{{ $message }}</span> @enderror
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

Anyone got trix working with attachments? I'm using something like this.

<div x-data="{ content: @entangle('content').defer }">
    <input type="hidden" id="x" value="{{ $initialValue }}"/>
    <div wire:ignore
         @trix-change="content = $event.target.value"
         @trix-attachment-add="attachmentAdd"
        <trix-editor input="x" class="form-input"></trix-editor>
    </div>
</div>

attachmentAdd just uploads the file and sets attributes on attachement from trix. It all works fine, however there is a problem. If I start with blank content and I drag and drop an image to trix and click save, it will not save. Even if I do

         @trix-change="content = $event.target.value; console.log(content)"

I can see that content is correct. However, for some reason @entangle does not update the server correctly.
🤔 anyone run into this?

@dsazup try @ryatkins version, think you have to use alpine $watch. Just tested to drop an attachment, with an empty Trix field, without issues.

Have you tested trix with v2.3.5. from livewire It gives me an error

alpine.js: 1873 Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)

On the other hand when I return to v2.2.8 the error disappears

@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