Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 293751

CKEditor 5 balloons invisible when CKEditor 5 is used inside a modal

$
0
0

Problem/Motivation

Modal dialogs (such as the link dialog) in the CKEditor 5 WYSIWYG toolbar do not activate when CKEditor is within a modal. This may be a regression of #3274937: Get CKEditor 5 to work in (modal) dialogs

Steps to reproduce

Simple steps to reproduce quickly:

  1. Install ckeditor_test test module
  2. Go to /ckeditor5_test/dialog
  3. Click add node
  4. Click on the link toolbar icon

Real world example to reproduce:

  1. Create a content type (eg: Article) with a Media field that references the Image media type
  2. Add a rich text field to the Image media entity type (eg: Caption) and configure it to use a text format that supports links and uses CKEditor 5.
  3. Add a new node (eg Article) and add a new Image.
  4. Try to link text in the rich text field.

Screen recording trying to link image caption text.

Cause

This is a CSS z-index issue. The z-index of the CK5 balloon modals is 1000. While the z-index of the jQueryUI Dialog modals is 1260. The z-index needs to be set to a minimum of 1261.

Proposed resolution

Fix the bug that is preventing text from being linked.

Remaining tasks

  1. Identify cause of bug
  2. Submit merge request
  3. Test
  4. Get maintainer approval

User interface changes

Balloons from CK Editor are now visible within dialogs, pop-ups, and modal windows.

Introduced terminology

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

Balloons from CK Editor are now visible within dialogs, pop-ups, and modal windows.


Viewing all articles
Browse latest Browse all 293751

Trending Articles