Unverified Commit 34194f7a authored Aug 06, 2022 by Lauri Timmanee

Issue #3274937 by nod_, mrinalini9, woldtwerk, bnjmnm, Dom., Wim Leers,...

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

(cherry picked from commit 8969fafd)

parent f0a78511

core/modules/ckeditor5/ckeditor5.module

+9 −0

Original line number	Diff line number	Diff line
		@@ -446,6 +446,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

+18 −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.
		*/

		(($) => {
		$.widget('ui.dialog', $.ui.dialog, {
		// Override core override of jQuery UI's `_allowInteraction()` so that
		// CKEditor 5 in modals can work as expected.
		// @see https://api.jqueryui.com/dialog/#method-_allowInteraction
		_allowInteraction(event) {
		return event.target.classList.contains('ck') \|\| this._super(event);
		},
		});
		})(jQuery);

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

0 → 100644

+14 −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
		**/

		(function ($) {
		$.widget('ui.dialog', $.ui.dialog, {
		_allowInteraction: function _allowInteraction(event) {
		return event.target.classList.contains('ck') \|\| this._super(event);
		}
		});
		})(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'