Trix Editor with Livewire

Hello @henry75958,

Here is how I have set it up in one of my projects. I hope this helps.

class TrixFileUploadController extends Controller
{
    public function __invoke(Request $request): array
    {
        $path = $request->attachment->store('trix-attachments', 'public');
        $url = Storage::disk('public')->url(tenant()->storagePath().'/'.$path);

        return [
            'href' => $url,
            'url' => $url,
        ];
    }
}

@props(['entangle', 'allowFileUploads' => false])

@push('head')
    <link rel="stylesheet" href="https://unpkg.com/trix@2.0.0-alpha.1/dist/trix.css">
    <script src="https://unpkg.com/trix@2.0.0-alpha.1/dist/trix.umd.js"></script>
@endpush

<div
    wire:ignore
    x-data="{ value: @entangle($entangle) }"
    x-init="$refs.trix.editor.loadHTML(value)"
    x-id="['trix']"
    @trix-change="value = $refs.input.value"
    @if (!$allowFileUploads) @trix-file-accept.prevent @endif
    class="w-full"
>
    <input x-ref="input" type="hidden" :id="$id('trix')">

    <trix-editor x-ref="trix" :input="$id('trix')" class="prose bg-white"></trix-editor>
</div>

@if (!$allowFileUploads)
    <style>
        [data-trix-button-group="file-tools"] {
            display: none !important;
        }
    </style>
@else
    <script>
        addEventListener("trix-attachment-add", async function(event) {
            const formData = new FormData();
            formData.append("attachment", event.attachment.file);

            const setProgress = (progress) => {
                event.attachment.setUploadProgress(progress);
            };

            const setAttributes = (attributes) => {
                event.attachment.setAttributes(attributes);
            };

            let response = await axios.post(
                '{{ route('trix-file-upload') }}',
                formData, {
                    onUploadProgress: function(progressEvent) {
                        const progress = (progressEvent.loaded / progressEvent.total) * 100;
                        setProgress(progress);
                    },
                },
            );

            setAttributes(response.data);
        });
    </script>
@endif

<x-trix-editor entangle="notes" />

In your Livewire component. Make sure to add a corresponding property.

public string $notes = '';

Route::post('/trix-file-upload', TrixFileUploadController::class)
    ->name('trix-file-upload');

You will need to handle the clean up yourself. It's not hard to do though. See the trix-attachment-remove hook.

https://github.com/basecamp/trix?tab=readme-ov-file#observing-editor-changes