How do I save/handle/load data when using React/Vue/Angular components?

Reinmar commented 1 month ago

📝 Provide a description of requested docs changes

Problems

The following 3 guides:

None of them explains how to handle data.

At the same time, the dedicated guide for getting and setting data covers it from the vanilla JS perspective. Which isn't necessary translatable.

Finally, I remember we discussed people using the onChange() attribute of the React component which is an anti-pattern due to performance and UX implciations.

However, it's not a surprise that people use the wrong method if we don't offer nor document the correct ones.

Definition of done

The generic Getting and setting data guide should have short sections for Angular/Vue/React (titled in a discoverable way) sending people to the specific sections in framework guides.
We should agree on the recommended ways to handle saving data via integrations: covering autosaving and saving on demand. Potentially, we may need to expose new API on the existing components (like onAutosave for React).
We should document the recommended ways to autosaving, saving on demand and setting data in all 3 integration guides. At the end of these we can still link to the generic one if it'll still contain valuable information extending those baseline recommendations.
Non-recommended, anti-pattern solutions should be pointed out. E.g. the onChange callback should be extended with a note that it's not recommended to use it to save data (link to onAutosave).

These are the minimal steps. We can do more ofc.

Witoso commented 1 month ago

The decision here may also influence if we decide in the future to add saving data mechanism to other integration pages (e.g. Laravel, .NET). So let's keep it in mind.

Witoso commented 1 month ago

And to add more, this also influences the Builder output snippets for each framework.

ckeditor / ckeditor5