Why image tag is cut off in trix editor component of livewire app m?

[sergeynilov]

Reading this https://devdojo.com/tnylea/laravel-livewire-trix-editor-component article
I added trix-editor on laravel 10 / livewire 3 app. It works but until image is selected into trix editor - saving content all html from the point when image is selected is cut.

I have a trix editor component :

<div wire:ignore>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.min.css" />

    <input id="{{ $trixId }}" type="hidden" name="content" value="{{ $value }}">
    <trix-editor wire:ignore input="{{ $trixId }}"></trix-editor>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.min.js"></script>
</div>

<script>
    var trixEditor = document.getElementById("{{ $trixId }}")
    var mimeTypes = ["image/png", "image/jpeg", "image/jpg"];

    console.log('trixEditor::')
    console.log(trixEditor)


    addEventListener("trix-blur", function(event) {
        console.log('trix-blur  trixEditor.getAttribute(value)::')
        console.log(trixEditor.getAttribute('value'))

        @this.set('value', trixEditor.getAttribute('value'));
    })


    addEventListener("trix-file-accept", function(event) {
        if (! mimeTypes.includes(event.file.type) ) {
            // file type not allowed, prevent default upload
            return event.preventDefault();
        }
    });

    addEventListener("trix-attachment-add", function(event){
        uploadTrixImage(event.attachment);
    });

    function uploadTrixImage(attachment){
        // upload with livewire
    @this.upload(
        'photos',
        attachment.file,
        function (uploadedURL) {

            // We need to create a custom event.
            // This event will create a pause in thread execution until we get the Response URL from the Trix Component @completeUpload
            const trixUploadCompletedEvent = `trix-upload-completed:${btoa(uploadedURL)}`;
            const trixUploadCompletedListener = function(event) {
                attachment.setAttributes(event.detail);
                window.removeEventListener(trixUploadCompletedEvent, trixUploadCompletedListener);
            }

            window.addEventListener(trixUploadCompletedEvent, trixUploadCompletedListener);

            // call the Trix Component @completeUpload below
        @this.call('completeUpload', uploadedURL, trixUploadCompletedEvent);
        },
        function() {},
        function(event){
            attachment.setUploadProgress(event.detail.progress);
        },
    )
        // complete the upload and get the actual file URL
    }


</script>

and using of this component on blade form :

<div class="editor_field_block_wrapper">
    <div class="editor_field_block_device_splitter">
        <div class="w-4/12 pb-0 pl-2 md:pt-3 ">
            <label for="content" class="editor_field_block_device_label">
                Content <span class="editor_form_aria_required" aria-required="true"> * </span>
                <br>$content::{{ $content }}
            </label>
        </div>
        <div class="p-2 w-full" wire:ignore>
            @livewire('trix-editor', ['value' => $content, 'imagesPath' => $imagesPath])
            @error('content') <span class="editor_form_validation_error">{{ $message }}</span> @enderror
        </div>
    </div>
</div>

But even outputting $content var on the content I see :

Any hints why image is cleared and can I fix it ?

[sergeynilov]

Updated info on this issue #1142