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

Reading this https://devdojo.com/tnylea/laravel-livewire-trix-editor-component article
I added trix-editor on laravel 10 / livewire 3 app / kubuntu 22.04 / Google Chrome
Version 123 / trix 1.3.1 / . 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 :

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
}

and using of this component on blade form :

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

[![enter image description here][1]][1]

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

Checking output of trixEditor.getAttribute('value') var - I see image is not inside of trixEditor.getAttribute('value') : this html block is cut off :

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

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

even in case if after adding image I add some text after image - I see this new text block

I suppose this is problem on trix side, not livewire ? Can it be some security issue ?

[1]: https://i.stack.imgur.com/U2RtX.png

Start with the provided trix-editor markup and the trix-blur, trix-attachment-add, and uploadTrixImage handlers. Reproduce with Trix 1.3.1 in Chrome after inserting an image, then inspect the hidden input's value and the Livewire value as text is added. Done means the saved HTML retains the image and following content, or the integration limitation is documented.

Written by the indexing model from the issue text.