How do I save/handle/load data when using React/Vue/Angular components?
📝 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
onAutosavefor 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
onChangecallback 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.
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.
And to add more, this also influences the Builder output snippets for each framework.
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).