search

formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.89k stars 1.06k forks source link

[BUG] Form builder becomes unresponsive to user interaction with multiple ckeditor fields #4695

Closed bfoese closed 9 months ago

bfoese commented 2 years ago

Environment

Please provide as many details as you can:

Steps to Reproduce

  1. Use Formio Form Builder (https://formio.github.io/formio.js/app/builder) to create a form with a larger number (e.g. 14) of Text Area fields, all of them using 'ckeditor' as editor type
  2. Interact with this form by adding more fields of any type or removing some
  3. Throughout these tasks, the Form Builder becomes more and more unresponsive to the user actions in terms of rendering and reaction to button clicks
  4. In contrast, open a new tab with another Form Builder instance and repeat building the afore mentioned form, but instead of 'ckeditor', use 'quill' for the Text Area fields. Compare the responsiveness in this form to the first one

Expected behavior

Formio Form Builder should not become laggy (unresponsive to user actions, slow rendering) after adding multiple Text Area fields with editor type 'ckeditor'.

Observed behavior

The Form Builder responsiveness to user actions seems to decrease when the number of Text Area fields with editor type 'ckeditor' increases in the form.

Example

Please see the attached videos for demonstration of the difference in user interaction responsiveness.

Interaction with a form that contains a number of Text Areas using ckeditor: https://user-images.githubusercontent.com/1623552/165938669-d26b87d5-a200-4ca4-8b97-81beb905453e.mov

Interaction with a form that contains a number of Text Areas using quill: https://user-images.githubusercontent.com/1623552/165938653-609d1b2b-f598-4a9e-b00a-34ac42fcd386.mov

Impact

We came to the conclusion that quill is not a decent choice, because the generated output contains vendor specific markup that requires vendor style sheets for proper rendering. This makes it impossible to export data collected with quill editor for external consumers without pre-processing. In contrast, ckeditor generates html markup without vendor specific attributions that could be exported as-is. The only show stopper at this point is the laggy performance of Form Builder when multiple ckeditor fields are present in the form.

daneformio commented 9 months ago

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!