Does not seem to work with CKEditor5

Hi,
The code below worked for me with CKEditor 5 in Drupal 9.5 when conducting a feasibility study.

Proposed resolution
Modify /node_edit_protection/node-edit-protection.js.
------
L.62
// Add CKEditor support.
if (typeof (CKEDITOR) != 'undefined' && typeof (CKEDITOR.instances) != 'undefined') {
for (var i in CKEDITOR.instances) {
if (CKEDITOR.instances[i].checkDirty()) {
edit = true;
break;
}
}
}

// Add these code for CKEditor 5 support.
var elements = document.getElementsByClassName('js-text-full text-full resize-vertical');
if (elements) {
for (var i in elements) {
if (elements[i].hasAttribute) {
var editor = Drupal.CKEditor5Instances.get(elements[i].getAttribute('data-ckeditor5-id'));
if (editor) {
if (elements[i].getAttribute('data-editor-value-is-changed')) {
edit = true;
break;
}
}
}
}
}

This patch will fix the issue with Drupal 10. Try this.

@shailja179 That patch worked perfectly!

Works exactly as expected now.

Thank you so much.

@duckydan,
Please change the status for issue then.Its still in needs review.

vincent.hoehn → made their first commit to this issue’s fork.

Thank you for this patch. With the CKEditor5 it works well. I hope this gets merged quickly.

Patch #3 fails if you have a plain text area (In my case Revision log message)

So updated patch to work with that.

Patch #10 fails in for Drupal 10.2.2 CKEditor in case you input unstyled text. By changing the query selector method from getElementsByClassName('js-text-full text-full resize-vertical'), that looks for 'js-text-full text-full resize-vertical', to querySelectorAll('.js-text-full, .text-full, .resize-vertical') which returns elements with any of these classes, works fine.

Patch #10 fails in for Drupal 10.2.2 CKEditor in case you input unstyled text. By changing the query selector method from getElementsByClassName('js-text-full text-full resize-vertical'), that looks for 'js-text-full text-full resize-vertical', to querySelectorAll('.js-text-full, .text-full, .resize-vertical') which returns elements with any of these classes, works fine.

The proposed code looks more complicated than it needs to be.
The following check should be sufficient:

    if (document.querySelector('[data-ckeditor5-id][data-editor-value-is-changed=true]')) {
      [...] // Changes in ckeditor exist.
    }

Overall the code can be cleaned up like this:

  const unsavedChangesExist = () => {
    if (click) {
      return false;
    }
    if (edit) {
      return true;
    }
    // Check modifications in CKEditor 4 instances.
    if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances) {
      for (const instance of CKEDITOR.instances) {
        if (instance.checkDirty()) {
          return true;
        }
      }
    }
    // Check modifications in CKEditor 5 instances.
    if (document.querySelector('[data-ckeditor5-id][data-editor-value-is-changed=true]')) {
      return true;
    }
    return false;
  };

  // Handle backbutton, exit etc.
  window.onbeforeunload = function() {
    if (unsavedChangesExist()) {
      // Force the warning dialog.
      return true;
    }
    // Do not show the warning dialog.
    return null;
  }

Adding support for Gin Admin Theme,

The unsaved changes dialog shows up when the Save button is clicked.
This only happens if the Admin Theme is set to Gin, because the Save button exists in the header region and not inside .node-form

Updating the submit button event handling to also check for Save button under gin theme container, if that exists.