fix missing force execution in in order to set attributes even when t…

…he Balloon form has still not been used - Issue #3337618 by mvogel

CHANGELOG.md

@@ -17,6 +17,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - add cpsell project words for Gitlab-CI
 - add phpstan.neon in order to ignore new static() errors
 
+### Fixed
+- fix missing force execution in in order to set attributes even when the Balloon form has still not been used - Issue #3337618 by mvogel
+
 ## [2.2.0] - 2023-10-17
 ### Added
 - CKEditor 5: Allow disabling the Balloon - Issue #3337623 by mvogel, wengerk

js/ckeditor5_plugins/editorAdvancedImage/src/EditorAdvancedImageCommand.js

@@ -72,6 +72,9 @@ export default class EditorAdvancedImageCommand extends Command {
     if (element.hasAttribute("id")) {
       this.attributes.id = element.getAttribute("id");
     }
+
+    // Force an execution at refresh time in order to set attributes even when the Balloon form has still not been used.
+    this.execute(this.attributes);
   }
 
   /**

tests/src/FunctionalJavascript/CKEditor5EditorAdvancedImageDialogTest.php

@@ -275,6 +275,39 @@ public function testDefaultClass(): void {
     self::assertSame("img-fluid", $eai_input->getValue());
   }
 
+  /**
+   * Tests that EditorAdvancedImage default class feature works.
+   *
+   * The difference to testDefaultClass() is, that the Editor Advanced Image
+   * form will not be opened and saved. The default class should be applied
+   * anyway.
+   */
+  public function testDefaultClassWithoutInteraction(): void {
+    // Update text format and editor to allow editing of the class attribute via
+    // the EditorAdvancedImage plugin.
+    $editor = Editor::load('test_format');
+    $settings = $editor->getSettings();
+    $settings['plugins']['editor_advanced_image_image']['enabled_attributes'][] = 'class';
+    $settings['plugins']['editor_advanced_image_image']['default_class'] = 'img-responsive';
+    $editor->setSettings($settings)->save();
+
+    $page = $this->getSession()->getPage();
+
+    $this->drupalGet($this->testNode->toUrl('edit-form'));
+    $this->waitForEditor();
+    $assert_session = $this->assertSession();
+
+    // Confirm the images widget exists.
+    $this->assertNotEmpty($image_block = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.image"));
+
+    // Open the Image balloon.
+    $image_block->click();
+
+    // Save the node and confirm that the attribute text is retained.
+    $page->pressButton('Save');
+    $this->assertNotEmpty($assert_session->waitForElement('css', 'img[class="img-responsive"]'));
+  }
+
   /**
    * A collection of attribute to enable and ensure works when enabled.
    */
@@ -320,7 +353,7 @@ public function testDisabledBalloon(): void {
 
     // Ensure the Default Class has been applied directly when the image has
     // been added to CKEditor 5.
-    $this->assertEmpty($assert_session->waitForElement('css', 'img[class="img-responsive"]'));
+    $this->assertNotEmpty($assert_session->waitForElement('css', 'img[class="img-responsive"]'));
 
     // Ensure that the Editor Advanced Image button is not visible on the Image
     // Balloon.
@@ -329,7 +362,7 @@ public function testDisabledBalloon(): void {
 
     // Save the node and confirm that the attribute text is retained.
     $page->pressButton('Save');
-    $this->assertEmpty($assert_session->waitForElement('css', 'img[class="img-responsive"]'));
+    $this->assertNotEmpty($assert_session->waitForElement('css', 'img[class="img-responsive"]'));
   }
 
 }