Issue when using the editor in a repeater and reordering the items

[dlebedef]

Filament Version

3.2.46

Plugin Version

3.2.25

PHP Version

PHP 8.3

Problem description

When I use a repeater with the ->reorderable() method and I reorder items in the form it doesn't take into consideration any future modification to the texts. The editors that are reordered seem to lose the "connection/entanglement" and therefore any change in the text is not taken into consideration when I then save the form.

Expected behavior

If I modify the text after reordering the items inside a repeater and submit the for, the new text should be stored in the database.

Steps to reproduce

I'm using a Repeater inside a form with a slideOver() modal. Each item in the repeater consists of a TiptapEditor and a Toggle. The repeater handles a hasMany relationship.

Reproduction repository

No response

Relevant log output

No response

[awcodes]

Can you provide a reproduction repo please?

[dlebedef]

Sorry, didn't see your message and spent some time trying to figure out what was happening.

I created my own custom integration of the tiptap editor to be able to play around with the javascript file and followed a little bit your code.

At some point in my implementation I noticed that when reordering the items in the repeater I was getting two containers inside each tiptap integration. This was probably do to the fact that the custom fields where getting re-initialised and therefore the new Editor() method called again.

I found a similar issue in your repository with a fix.

That specific fix I believe solved completely the issue and more precisely this bit of code in your plugin.js (line 244) file:

if (editors[this.statePath]) {
    editors[this.statePath].destroy();
}

Since then you updated the code and eded up with this bit of code in the plugin.js (line 326) file:

if (this.$root._editor) {
    this.editorInstance = this.$root._editor;
    return;
}

I don't know if the first fix, using the destroy() method, was the most efficient solution, but it seems to work. The current code fixes the duplicated container issue but not the one I'm having with the lost connection/entanglement between the field and it's state.

I'll try to create a clean repo as soon as possible to share if it helps.

[dlebedef]

An additional note: while testing my own implementation I noticed that without this part of code:

if (this.$root._editor) {
    this.editorInstance = this.$root._editor;
    return;
}

A new instance of the tiptap editor is initiated and this second container (see attached image) is the one entangled to the state value. If I modify the text in this second container and then submit the form the modification to the text and model is correctly applied. If instead I modify the text of the first container and then submit the content will not be saved.

This is why I believe that after the reordering we lose te "connection" if we maintain the same instance of the editor.

Hope this additional note can be helpful.

[FDT2k]

Same issue for me, reordering in a repeater or a builder (nested or not) seems to lose state sync

[FDT2k]

downgraded to 3.2.9 and it's gone.