Problem/Motivation

Drupal doesn't work well with multiple modals.

If your embedded content plugin form implements a form item that opens another modal, the current one will be closed.

This is a known issue that is being addressed by https://www.drupal.org/project/drupal/issues/2741877.

Proposed resolution

Apply the patch in https://www.drupal.org/files/issues/2021-04-29/2741877-77.patch and the patch proposed in this issue.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

nuez created an issue. See original summary.

nuez’s picture

Category: Bug report » Feature request
StatusFileSize
new759 bytes
wim leers’s picture

tlo405’s picture

So I'm actually still seeing this problem. So I have a custom plugin that adds a custom callout into the editor. This plugin contains a media field, so I have added a media field to the embedded content modal. Here is what the code looks like:

$form['image'] = $this->getEntityBrowserForm(
  // Entity Browser config entity ID.
  'entity_browser_id_here',
  // Default value as a string.
  $image ?? '',
  // Cardinality.
  1,
  // The view mode to use when displaying the entity in the table.
  'preview'
);
// Convert the wrapping container to a details element.
$form['image']['#type'] = 'details';
$form['image']['#title'] = $this->t('Image');
$form['image']['#open'] = TRUE;

This was based on the example from here.

This works fine using ckeditor4...I can make a selection and it gets inserted right into ckeditor (the media ID is stored as an html attribute like this: <callout data-image="media:1"></callout>. However in ckeditor5, when I go to submit the embedded content form, nothing happens. No errors in the console either. My media field is optional, so if I don't click the 'select media' button, everything is fine. The html gets inserted into the editor correctly and the data-image attribute is just blank. However, if I click 'select media' to open up the modal, then it breaks. Even if I immediately close the modal without making a selection, it still breaks. No HTML gets inserted into the editor.

I tried the patches listed above, but no luck.

@nuez, any possible idea what could be happening here? I see on the module home page it says "Drupal cannot deal with multiple modals. This will become an issue if you use this text filter in a modal, or you open a modal from the Embedded Content plugin form (Say for selecting a media entity with the Media Browser)". I'm just wondering if you ever saw this working using the media browser?

irsar’s picture

I am using https://www.drupal.org/project/uswds_ckeditor_integration with the embed content. But when I click on the embed content icon, its showing the loading icon for a second but doesn't load the modal window with the dropdown. When I debugged I am seeing AJAX error as below,
nAn AJAX HTTP error occurred.\nHTTP Result Code: 200\nDebugging information follows.\nPath: /embedded-content/dialog\nStatusText: OK\nResponseText: Deprecated: strlen(): Passing null to parameter #1 ($string) of type string is deprecated in /app/web/core/lib/Drupal/Component/Utility/Unicode.php on line 477\nDeprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /app/web/core/lib/Drupal/Component/Utility/Xss.php on line 69\n

milos.kroulik’s picture

It looks like the patch from #3 no longer applies:

$ patch -p1 < allow-stacked-modals.patch 
patching file src/Form/EmbeddedContentDialogForm.php
Hunk #1 FAILED at 80.
Hunk #2 succeeded at 189 (offset -4 lines).
1 out of 2 hunks FAILED -- saving rejects to file src/Form/EmbeddedContentDialogForm.php.rej

It looks like there should be a note on the project page, that nested modals issue currently can't be solved.

larowlan made their first commit to this issue’s fork.

larowlan’s picture

StatusFileSize
new718 bytes

Reroll for those using patches, also pushed updated MR

irsar’s picture

StatusFileSize
new449 bytes

With the latest patch we have to use the patch still, but the old patch is not working.

irsar’s picture

StatusFileSize
new728 bytes
larowlan’s picture

Status: Active » Needs review
StatusFileSize
new21.17 KB
new21.25 KB

The attached in conjunction with #2741877-109: Nested modals don't work: opening a modal from a modal closes the original allows you to embed inside embeds. Tested 4 layers deep 🤯

Interdiff against #9

nuez’s picture

Thank you for the reroll!

As you know the nested modals issue is a very old issue affecting a lot of use cases. I've proposed a solution in that issue , that might have an API change, non breaking though, (https://www.drupal.org/project/drupal/issues/2741877#comment-13559133 and later)

The issue is already 3 years old, but i think my suggestion is still the approach of the subsequent rerolls in that same issue.

@larowlan do you think we can move that issue forward and see if we can land it in core?

I'll have a chat with wim leers on slack see if he can help as well

Cheers,

larowlan’s picture

Yep, keeping an eye on that one too.

I'm not sure stacked modals is a great idea but 🤷‍♂️

nuez’s picture

Status: Needs review » Postponed

I agree that stacked modals might be not be a great idea UI wise, but it is a reality that cannot be ignored imho, and for which there is no real alternative.

The offset canvas modal is a solution to one extra layer. Opening the ckeditor5_embedded_content in an offset canvas would solve some issues, but that means that you can't use it in a block body, since that one also opens in an offset canvas. Maybe we should make it configurable that it opens in either offset or modal. That could solve some use cases. I'll put it on the roadmap for 2.x.

larowlan’s picture

Status: Postponed » Needs review
StatusFileSize
new2 KB
new19.18 KB

Realised I left behind some cruft from an earlier attempt in the last patch, removed it

DanielVeza made their first commit to this issue’s fork.

danielveza’s picture

I've rerolled the patch and pushed that straight to the MR

nuez’s picture

Status: Needs review » Closed (won't fix)

This issue is addressed in the embedded_content module which replaces this one. https://www.drupal.org/project/embedded_content