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

I will have a look later but to prepopulate it you can use x-init

Maybe not :(

ok, you can use value on the hidden input.

<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" input="content">
         </trix-editor>
     </div>
    @error('content') <span class="error">{{ $message }}</span> @enderror
</div>

I've not dabbled with the attachments bit yet but hopefully it is also fixable

@deanzod
Sorry, I was unclear. There is no issue with setting the initial value. It is when you alter the value in backend that Alpine, entangle doesn’t update trix. The only value you can update, from backend is null.
I already have a working version for attachments, but that had to use $refs, like in my example.

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