Issue #3510600 by tocab, grimreaper: Override Drupal.dialog to ensure generic modal integration:

- node preview modal
- text format change modal
- Media Library Edit modal closes on submit

assets/css/component/dialog.css

+.modal-footer .ui-dialog-buttonset {
+  gap: var(--bs-modal-footer-gap);
+}

assets/js/misc/dialog/dialog.ajax.js

@@ -17,18 +17,7 @@
       const $context = $(context);
 
       if (!$('#drupal-modal').length) {
-        // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
-        // sit on top of dialogs. For more information see
-        // http://api.jqueryui.com/theming/stacking-elements/.
-        $(
-          `<div id="drupal-modal" class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog ui-front" role="document">
-              <div class="modal-content"></div>
-            </div>
-          </div>`,
-        )
-          .hide()
-          .appendTo('body');
+        $(`<div id="drupal-modal"></div>`).appendTo('body');
       }
 
       const $dialog = $context.closest('#drupal-modal');
@@ -162,31 +151,14 @@
     if (ajax.dialogRenderer === 'off_canvas') {
       return openOffCanvasDialog(ajax, response, status);
     }
-
     if (!response.selector) {
       return false;
     }
     let $dialog = $(response.selector);
     if (!$dialog.length) {
-      // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
-      // sit on top of dialogs. For more information see
-      // http://api.jqueryui.com/theming/stacking-elements/.
       $dialog = $(
-        `<div id="${response.selector.replace(
-          /^#/,
-          '',
-        )}" class="modal fade" tabindex="-1" role="dialog">
-          <div class="modal-dialog ui-front" role="document">
-            <div class="modal-content"></div>
-          </div>
-        </div>`,
-      )
-        .hide()
-        .appendTo('body');
-    }
-
-    if (!ajax.wrapper) {
-      response.selector = `${response.selector.toString()} .modal-content`;
+        `<div id="${response.selector.replace(/^#/, '')}"></div>`,
+      ).appendTo('body');
     }
 
     response.command = 'insert';
@@ -201,13 +173,6 @@
     ) {
       Drupal.autocomplete.options.appendTo = response.selector;
     }
-    if (
-      response.dialogOptions.modalDialogWrapBody === undefined ||
-      response.dialogOptions.modalDialogWrapBody === true ||
-      response.dialogOptions.modalDialogWrapBody === 'true'
-    ) {
-      response.data = `<div class="modal-body">${response.data}</div>`;
-    }
     ajax.commands.insert(ajax, response, status);
 
     // Move the buttons to the Bootstrap dialog buttons area.
@@ -234,13 +199,13 @@
     // Bind dialogButtonsChange.
     $dialog.on('dialogButtonsChange', () => {
       const buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
-      const dialog = Drupal.uiSuiteDialog($dialog.get(0));
+      const dialog = Drupal.dialog($dialog.get(0));
       dialog.updateButtons(buttons);
     });
 
     // Open the dialog itself.
     response.dialogOptions = response.dialogOptions || {};
-    const dialog = Drupal.uiSuiteDialog($dialog.get(0), response.dialogOptions);
+    const dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
     if (response.dialogOptions.modal) {
       dialog.showModal();
     } else {
@@ -258,7 +223,7 @@
       if ($dialog.hasClass('offcanvas')) {
         Drupal.uiSuiteOffCanvas($dialog.get(0)).close();
       } else {
-        Drupal.uiSuiteDialog($dialog.get(0)).close();
+        Drupal.dialog($dialog.get(0)).close();
       }
     }
 

assets/js/misc/dialog/dialog.js

@@ -31,7 +31,7 @@
     buttonClass: 'btn',
     buttonPrimaryClass: 'btn-primary',
     close: function close(event) {
-      Drupal.uiSuiteDialog(event.target).close();
+      Drupal.dialog(event.target).close();
       Drupal.detachBehaviors(event.target, null, 'unload');
     },
     dialogClasses: '',
@@ -70,10 +70,28 @@
    * @return {Drupal.dialog~dialogDefinition}
    *   The dialog instance.
    */
-  Drupal.uiSuiteDialog = (element, options) => {
+  Drupal.dialog = (element, options) => {
     let undef;
 
-    const $element = $(element);
+    let $element = $(element);
+    if ($element.parents('.modal').length === 1) {
+      $element = $element.parents('.modal');
+    } else if (!$element.hasClass('modal')) {
+      // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
+      // sit on top of dialogs. For more information see
+      // http://api.jqueryui.com/theming/stacking-elements/.
+      $element = $(
+        `<div class="modal fade" tabindex="-1" role="dialog">
+          <div class="modal-dialog ui-front" role="document">
+            <div class="modal-content">
+              <div class="modal-body"></div>
+            </div>
+          </div>
+        </div>`,
+      ).appendTo('body');
+      $('.modal-body', $element).append(element);
+    }
+
     const domElement = $element.get(0);
 
     const dialog = {
@@ -115,7 +133,7 @@
           .html(buttonObject.text);
 
         if (
-          $(button).attr('class') &&
+          !$(button).attr('class') ||
           !$(button)
             .attr('class')
             .match(/\bbtn-.*/)
@@ -160,8 +178,19 @@
       ) {
         $('.modal-dialog', $element).addClass(settings.classes['ui-dialog']);
       }
+      if (
+        settings.classes !== undefined &&
+        settings.classes['ui-dialog-content'] !== undefined
+      ) {
+        $element.addClass(settings.classes['ui-dialog-content']);
+      }
 
       // The modal dialog header.
+      const $header = $element.find('.modal-header');
+      if ($header.length === 1) {
+        // Clear previous header.
+        $header.remove();
+      }
       if (settingIsTrue(settings.dialogShowHeader)) {
         let modalHeader = '<div class="modal-header">';
         const heading = settings.dialogHeadingLevel;
@@ -183,10 +212,13 @@
         $element.attr('data-bs-keyboard', 'false');
       }
 
-      if (
-        settingIsTrue(settings.drupalAutoButtons) &&
-        settings.buttons.length > 0
-      ) {
+      // The modal dialog footer.
+      const $footer = $element.find('.modal-footer');
+      if ($footer.length === 1) {
+        // Clear previous footer.
+        $footer.remove();
+      }
+      if (settings.buttons?.length > 0) {
         updateButtons(settings.buttons);
       }
 

ui_suite_bootstrap.libraries.yml

@@ -49,6 +49,9 @@ drupal.checkbox:
 drupal.dialog:
   js:
     assets/js/misc/dialog/dialog.js: {}
+  css:
+    component:
+      assets/css/component/dialog.css: {}
   dependencies:
     - core/jquery
     - core/drupal
@@ -65,13 +68,13 @@ drupal.dialog.ajax:
 drupal.dialog.off_canvas:
   js:
     assets/js/misc/dialog/dialog.off-canvas.js: {}
+  css:
+    component:
+      assets/css/component/off-canvas.css: {}
   dependencies:
     - core/jquery
     - core/drupal
     - core/drupalSettings
-  css:
-    component:
-      assets/css/component/off-canvas.css: {}
 
 drupal.layout_builder:
   css: