How do I save/handle/load data when using React/Vue/Angular components? #16717
Open
Description
📝 Provide a description of requested docs changes
Problems
The following 3 guides:
- https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html
- https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html
- https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/vuejs-v3.html
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.