Skip to content

#3519141 Dialogs opened by CKEditor 5 should admin-theme just like the rest

Ben Mullinsrequested to merge
issue/experience_builder-3519141:3519141-dialogs-opened-by into 0.x

We need to address two types of dialogs that can be triggered via a widget using CKEditor 5

  • Dialogs triggered by buttons within the CKEditor5 editor such as the one when the Media Library button is clicked
  • Dialogs triggered by a direct call to Drupal.dialog() - not specific to CKEditor 5 but surfaced when the "change text format?" dialog appeared and was unstyled.

Solution Approach

Dialogs triggered by buttons within the CKEditor5 editor

Intercept Drupal.ckeditor5.openDialog and

  • add use_admin_theme=1 to the query, which instructs the renderer to use the admin theme
  • add useAdminTheme **=** **true **** to** the dialog settings, which notifies Drupal's AJAX api that attached CSS should be rewritten to be dialog-scoped

TO TEST THIS, USE THE PAGE DATA FORM WITH A FORMATTED TEXT FIELD THAT INCLUDES THE MEDIA LIBRARY BUTTON component instance forms do not use a text format that provides this. If the dialog is functional and is styled the same as the dialog triggered by a component instance form's image field, then it works.

Dialogs triggered by a direct call to Drupal.dialog()

If this isn't the first dialog opened, it would already work fine as the dialog-scoped CSS is already added via render process. However, if it is first dialog opened, the expected CSS might not be there yet and none will be added because a JS-only triggered dialog does not include attachments. To get around this, XB now provides dialog-scoped CSS of the admin theme's base & dialog styles when it first loads. The necessary CSS files are added to drupalSettings, and when the XB UI loads, these files are processed by XB's add_css override, so they're already present and dialog-scoped before a dialog even opens.

TO TEST THIS, I RECOMMEND USING THE xb_test_dialog_style MODULE ADDED IN THIS MR this adds a link to all component instance forms that says Trigger Drupal.dialog dialog. Click that and if the dialog buttons/background etc are styled like media library and (more importantly) you can see the contents and close the dialog by clicking the close icon. This works best with your admin theme set to a theme intended to be an admin theme such as Claro or Gin.

Edited by Ben Mullins

Merge request reports