TinyMCE does not load data to update comment using wire:ignore

Question

I am able to successfully edit but. however, the comment date is not displayed. It simply goes blank. After editing the new edition is displayed successfully, I'm having trouble loading the old text data so I can edit the comment. Does anyone have any idea what could be wrong?

Thanks in advance. Any help is welcome.

<form wire:submit.prevent="updateComment" action="#" method="POST" class="space-y-4 px-4 py-6">
                    <div>
                       
                       
                        <div class="mb-2" wire:ignore>
                            
                            <textarea wire:model.defer="body" wire:key="body" x-data x-ref="body" name="post" cols="30" rows="4" class="page_text form-input  w-full bg-gray-100 rounded-xl border-none placeholder-gray-900 text-sm px-4 py-2" 
                                   x-init="
                                           tinymce.init({
                                                path_absolute: '/',
                                                selector: 'textarea.page_text',
                                                plugins: [
                                                     'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                                                      'searchreplace wordcount visualblocks visualchars code fullscreen ',
                                                      'insertdatetime media nonbreaking save table directionality',
                                                      'emoticons template paste textpattern  imagetools help  '
                                                       ],
                                                        toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help ',
                                                        relative_urls: false,
                                                        remove_script_host : false,
                                                        document_base_url: '{{config('app.url')}}/',
                                                        language: 'pt_BR',
                                                        setup: function (editor) {
                                                                editor.on('init change', function () {
                                                                          editor.save();
                                                                  });
                                                       editor.on('change', function (e) {
                                                                @this.set('body', editor.getContent());
                                                        });
                                                         },
                                                         });
                                                        ">
                               </textarea>
                    
                     
                        @error('body')
                            <p class="text-red text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

editcomment livewire

class EditComment extends Component
{
    public Comment $comment;
    public $body;

    protected $rules = [
        'body' => 'required|min:4',
    ];

    protected $listeners = ['setEditComment'];

    public function setEditComment($commentId)
    {
        $this->comment = Comment::findOrFail($commentId);
        $this->body = $this->comment->body;

        $this->emit('editCommentWasSet');
    }

    public function updateComment()
    {
        if (auth()->guest() || auth()->user()->cannot('update', $this->comment)) {
            abort(Response::HTTP_FORBIDDEN);
        }

        $this->validate();

        $this->comment->body = $this->body;
        $this->comment->save();

        $this->emit('commentWasUpdated', 'Comment was updated!');
    }

    public function render()
    {
        return view('livewire.edit-comment');
    }
}

Answer 1

Not sure why you are using whole body text as you wire:key but okay. Not sure will help you but I am using ckeditor5 like this:

<div wire:ignore class="form-group">
                <label for="prod.cont">{{ __('Content') }}</label>
                <textarea wire:model="prod.cont" name="prod.cont"
                          id="prod.cont" class="form-control"
                          placeholder="{{ __('Content...') }}">{{ $model->content }}</textarea>
                @error('prod.cont')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

So, the wire:key should not be the whole text and I would put it only on some kind of wrapping div, and wire:model should probably be without .defer.