Unverified Commit 6d6ab587 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3274937 by nod_, woldtwerk, Dom., Wim Leers: Get CKEditor 5 to work in (modal) dialogs

parent f90d8922

core/modules/ckeditor5/ckeditor5.module

+9 −0
Original line number Diff line number Diff line
@@ -440,6 +440,15 @@ function ckeditor5_library_info_alter(&$libraries, $extension) { 
    }

  }



  if ($extension === 'core') {

    // CSS rule to resolve the conflict with z-index between CKEditor 5 and jQuery UI.

    $libraries['drupal.dialog']['css']['component']['modules/ckeditor5/css/ckeditor5.dialog.fix.css'] = [];

    // Fix the CKEditor 5 focus management in dialogs. Modify the library

    // declaration to ensure this file is always loaded after

    // drupal.dialog.jquery-ui.js.

    $libraries['drupal.dialog']['js']['modules/ckeditor5/js/ckeditor5.dialog.fix.js'] = [];

  }



  // Only add translation processing if the locale module is enabled.

  if (!$moduleHandler->moduleExists('locale')) {

    return;

core/modules/ckeditor5/css/ckeditor5.dialog.fix.css

0 → 100644
+3 −0
Original line number Diff line number Diff line 
.ui-dialog ~ .ck-body-wrapper {

  --ck-z-modal: 1261;

}

core/modules/ckeditor5/js/ckeditor5.dialog.fix.es6.js

0 → 100644
+29 −0
Original line number Diff line number Diff line 
/**

 * @file

 * This file overrides the way jQuery UI focus trap works.

 *

 * When a focus event is fired while a CKEditor 5 instance is focused, do not

 * trap the focus and let CKEditor 5 manage that focus.

 */



(($) => {

  // Get core version of the _focusTabbable method.

  const oldFocusTabbable = $.ui.dialog._proto._focusTabbable;



  $.widget('ui.dialog', $.ui.dialog, {

    // Override core override of jQuery UI's `_focusTabbable()` so that

    // CKEditor 5 in modals can work as expected.

    _focusTabbable() {

      // When the focused element is a CKEditor 5 instance, disable jQuery UI

      // focus trap and delegate focus trap to CKEditor 5.

      const hasFocus = this._focusedElement

        ? this._focusedElement.get(0)

        : null;

      // In case the element is a CKEditor 5 instance, do not change focus

      // management.

      if (!(hasFocus && hasFocus.ckeditorInstance)) {

        oldFocusTabbable.call(this);

      }

    },

  });

})(jQuery);

core/modules/ckeditor5/js/ckeditor5.dialog.fix.js

0 → 100644
+20 −0
Original line number Diff line number Diff line 
/**

* DO NOT EDIT THIS FILE.

* See the following change record for more information,

* https://www.drupal.org/node/2815083

* @preserve

**/



($ => {

  const oldFocusTabbable = $.ui.dialog._proto._focusTabbable;

  $.widget('ui.dialog', $.ui.dialog, {

    _focusTabbable() {

      const hasFocus = this._focusedElement ? this._focusedElement.get(0) : null;



      if (!(hasFocus && hasFocus.ckeditorInstance)) {

        oldFocusTabbable.call(this);

      }

    }



  });

})(jQuery);
 
 No newline at end of file

core/modules/ckeditor5/tests/modules/ckeditor5_test/ckeditor5_test.routing.yml

+7 −0
Original line number Diff line number Diff line
@@ -4,3 +4,10 @@ ckeditor5_test.off_canvas: 
    _controller: '\Drupal\ckeditor5_test\Controller\CKEditor5OffCanvasTestController::testOffCanvas'

  requirements:

    _access: 'TRUE'



ckeditor5_test.dialog:

  path: '/ckeditor5_test/dialog'

  defaults:

    _controller: '\Drupal\ckeditor5_test\Controller\CKEditor5DialogTestController::testDialog'

  requirements:

    _access: 'TRUE'