Problem/Motivation
webform.form.unsaved.js tracks unsaved changes on forms carrying the js-webform-unsaved class by binding change/keypress on inputs, plus a dedicated block for CKEditor:
// Track all CKEditor change events.
// @see https://ckeditor.com/old/forums/Support/CKEditor-jQuery-change-event
if (window.CKEDITOR && !CKEDITOR.webformUnsaved) {
CKEDITOR.webformUnsaved = true;
CKEDITOR.on('instanceCreated', function (event) {
event.editor.on('change', function (evt) {
unsaved = true;
});
});
}
This was added in #2989090 (2018) when CKEditor 4 was the only editor available in Drupal core. CKEditor 5 has no window.CKEDITOR global, so this block never runs, and CKEditor 5 doesn't fire native change/keypress on its source <textarea> either (it only syncs the textarea value lazily on save/detach). The result: editing a CKEditor 5 field on a js-webform-unsaved form does not set the unsaved flag, so navigating away shows no warning, while editing a plain text field does.
Steps to reproduce
- Go to
/admin/structure/webform/config. - Enable Warn users about unsaved changes for all webforms and save.
- On any form, add an element that uses CKEditor, e.g. Text format with Full HTML.
- Open the form and make a change to the CKEditor field and navigate to another page -> no This page is asking you to confirm that you want to leave... alert shown.
- Editing other elements and then navigating away will show the alert.
Proposed resolution
Drupal core's own editor integration already fires a formUpdated event on the field when CKEditor 5 content changes (core/modules/editor/js/editor.js, via Drupal.editors[format].onChange(...)). webform.form.unsaved.js could probably listen for that too, instead of/in addition to the legacy window.CKEDITOR check.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | 3618926 after, empty.mov | 1.52 MB | csakiistvan |
| #5 | 3618926 after.mov | 5.34 MB | csakiistvan |
| #5 | 3618926 before.mov | 5.33 MB | csakiistvan |
Issue fork webform-3618926
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
tuuuukka commentedOpened a merge request, please review. It's a pretty simple fix.
Comment #4
csakiistvanComment #5
csakiistvan@tuuuukka Reviewed your MR, nothing to report.
✅ Tested and works — with
default_form_unsavedenabled and a webform holding a textfield plus atext_formatelement on Full HTML (CKEditor 5), editing only the CKEditor field and navigating away gave no leave-page warning; after applying MR !933 on 6.3.x (e0f2f213b), runningdrush crand hard-reloading the form, the same edit does warn, the plain textfield still warns, and loading the form or clicking into the editor without typing does not — so CKEditor 5 changes are tracked without a false positive on load.Comment #6
csakiistvan