Allow ElementEditor.js serializer to be extensible

[engram-design]

We have a use-case for Hyper and Vizy where we use Field Layouts to let users define Craft fields to show in repeatable blocks in the respective plugins. Under the hood, this process is us rendering these field layouts with Craft/Twig, which are then embedded in Vue components client-side in the field.

In practice, this process is triggering unload warnings, and content changes. This is due to the fact that the mere process of adding the field layout HTML (so users can add content to fields) is being added after-render with JS, and Craft's ElementEditor is detecting that as a change, and creating a new draft.

I've looked at several options like delta updates, refactoring our plugins, but short of simply using jQuery and ditching Vue, we're pretty limited with things.

Both of these plugins serialize the content in them to a single JSON input for the field. As such, the only content our field cares about is a single input. We need to retain the name attributes on field layout fields, so that we can serialize it and save it to our content for Hyper/Vizy fields.

One way I believe we can get around this is to change the serializer for the ElementEditor to exclude any fields found within a container (our Vizy/Hyper blocks). This would mean that none of the data within this container is sent to the server, which is exactly what we want.

One approach is to create a custom function to replace jQuery's serialize() function:

$.fn.customSerialize = function() {
    var includedElements = this.find(':input, select, textarea, button').filter(function() {
        return $(this).closest('[data-exclude-serialization]').length === 0;
    });
    
    return includedElements.serialize();
};

This allows us to surround content with a data-exclude-serialization attribute, and the ElementEditor will ignore any form elements it sees within that.

Of course, that might be a bit "ick" for you to use that, and another approach is to allow the serializer to be customised. I know you already have that in place for the main <form> element, and the ElementEditor.js class already makes use of that. We would need to be able to extend the ElementEditor's own serializer. I suppose in this case, what if you have multiple fields vying to change the serializer? That may also not be the best option.

Finally, a JS-based event might be better?

[brandonkelly]

Just added a serializeForm event to Craft.ElementEditor for Craft 4.13 and 5.5 (78d4818).

$(myContainer).closest('form').data('elementEditor').on('serializeForm', (ev) => {
  // remove unwanted params
  ev.data.serialized = ev.data.serialized.replace(/&unwanted-input[^&]*/g, '');
})

[engram-design]

Thanks @brandonkelly, you're a champ!

[brandonkelly]

Craft 4.13.0 and 5.5.0 are out with that new event 🎉

[bymayo]

@brandonkelly Amazing thanks!

[bymayo]

@brandonkelly @engram-design Do you know when Craft 5.5 is likely to be released (I know this is a hard ask!) only because it is making Hyper pretty much unusable at the moment, and our clients are getting frustrated with the autosave feature freaking out.

[brandonkelly]

@bymayo Currently planning to release 5.5 in early November, unless something major comes up.