Issue #3264727 by lauriii, Wim Leers, benjifisher, andregp, AaronMcHale,... (504dfae9) · Commits · project / drupal

core/modules/ckeditor5/ckeditor5.ckeditor5.yml

+33 −15

Original line number	Diff line number	Diff line
		@@ -474,12 +474,25 @@ ckeditor5_imageAlign:
		config:
		image:
		toolbar:
		- name: 'imageStyle:icons'
		items:
		- '\|'
		- 'imageStyle:block'
		- 'imageStyle:alignLeft'
		- 'imageStyle:alignCenter'
		- 'imageStyle:alignRight'
		defaultItem: 'imageStyle:alignCenter'
		- 'imageStyle:inline'
		- '\|'
		styles:
		options:
		- inline
		- name: 'block'
		icon: 'left'
		title: 'Break text'
		- name: 'alignLeft'
		title: 'Align left and wrap text'
		- name: 'alignCenter'
		title: 'Align center and break text'
		- name: 'alignRight'
		title: 'Align right and wrap text'
		drupal:
		label: Image align
		elements:
		@@ -564,31 +577,36 @@ media_mediaAlign:
		drupalElementStyles:
		options:
		- name: 'alignRight'
		title: 'Right aligned media'
		title: 'Align right and wrap text'
		icon: 'objectRight'
		attributeName: 'data-align'
		attributeValue: 'right'
		modelElements: [ 'drupalMedia' ]
		- name: 'alignLeft'
		title: 'Left aligned media'
		title: 'Align left and wrap text'
		icon: 'objectLeft'
		attributeName: 'data-align'
		attributeValue: 'left'
		modelElements: [ 'drupalMedia' ]
		- name: 'alignCenter'
		title: 'Centered media'
		title: 'Align center and break text'
		icon: 'objectCenter'
		attributeName: 'data-align'
		attributeValue: 'center'
		modelElements: ['drupalMedia']
		- name: 'breakText'
		title: 'Break text'
		icon: 'objectBlockLeft'
		isDefault: true
		modelElements: [ 'drupalMedia' ]
		drupalMedia:
		toolbar:
		- name: 'drupalMedia:align'
		items:
		- '\|'
		- 'drupalElementStyle:breakText'
		- 'drupalElementStyle:alignLeft'
		- 'drupalElementStyle:alignCenter'
		- 'drupalElementStyle:alignRight'
		defaultItem: 'drupalElementStyle:alignCenter'
		- '\|'
		drupal:
		label: Media align
		library: ckeditor5/drupal.ckeditor5.mediaAlign

core/modules/ckeditor5/js/build/drupalMedia.js

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalelementstyle/drupalelementstylecommand.js

+17 −0

Original line number	Diff line number	Diff line
		@@ -84,6 +84,23 @@ export default class DrupalElementStyleCommand extends Command {

		if (this.isEnabled) {
		this.value = element.getAttribute('drupalElementStyle');

		// If value is falsy, check if there is a default style to apply to the
		// element.
		if (!this.value) {
		// eslint-disable-next-line no-restricted-syntax
		for (const [name, style] of this._styles.entries()) {
		if (style.isDefault) {
		const appliesToCurrentElement = style.modelElements.find(
		(modelElement) => element.is('element', modelElement),
		);
		if (appliesToCurrentElement) {
		this.value = name;
		break;
		}
		}
		}
		}
		} else {
		this.value = false;
		}

core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalelementstyle/drupalelementstyleediting.js

+4 −1

Original line number	Diff line number	Diff line
		@@ -209,7 +209,10 @@ export default class DrupalElementStyleEditing extends Plugin {
		return style;
		})
		.filter((style) => {
		if (!style.attributeName \|\| !style.attributeValue) {
		if (
		!style.isDefault &&
		(!style.attributeName \|\| !style.attributeValue)
		) {
		console.warn(
		'drupalElementStyles options must include attributeName and attributeValue.',
		);

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTest.php

+69 −0

Original line number	Diff line number	Diff line
		@@ -357,6 +357,75 @@ public function providerLinkability(): array {
		];
		}

		/**
		* Tests alignment integration.
		*
		* @dataProvider providerAlignment
		*/
		public function testAlignment(string $image_type): void {
		$assert_session = $this->assertSession();
		$page = $this->getSession()->getPage();
		// Make the test content have either a block image or an inline image.
		$img_tag = '<img alt="drupalimage test image" data-entity-type="file" data-entity-uuid="' . $this->file->uuid() . '" src="' . $this->file->createFileUrl() . '" />';
		$this->host->body->value .= $image_type === 'block'
		? $img_tag
		: "<p>$img_tag</p>";
		$this->host->save();

		$image_selector = $image_type === 'block' ? '.ck-widget.image' : '.ck-widget.image-inline';
		$default_alignment = $image_type === 'block' ? 'Break text' : 'In line';

		$this->drupalGet($this->host->toUrl('edit-form'));
		$this->waitForEditor();
		$this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector));

		// Ensure that the default alignment option matches expectation.
		$this->click($image_selector);
		$this->assertVisibleBalloon('[aria-label="Image toolbar"]');
		$this->assertTrue($this->getBalloonButton($default_alignment)->hasClass('ck-on'));
		$editor_dom = $this->getEditorDataAsDom();
		$drupal_media_element = $editor_dom->getElementsByTagName('img')
		->item(0);
		$this->assertFalse($drupal_media_element->hasAttribute('data-align'));
		$this->getBalloonButton('Align center and break text')->click();

		// Assert the alignment class exists after editing downcast.
		$this->assertNotEmpty($assert_session->waitForElement('css', '.ck-widget.image.image-style-align-center'));
		$editor_dom = $this->getEditorDataAsDom();
		$drupal_media_element = $editor_dom->getElementsByTagName('img')
		->item(0);
		$this->assertEquals('center', $drupal_media_element->getAttribute('data-align'));

		$page->pressButton('Save');
		// Check that the 'content has been updated' message status appears to confirm we left the editor.
		$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.messages.messages--status'));
		// Check that the class is correct in the front end.
		$assert_session->elementExists('css', 'img.align-center');
		// Go back to the editor to check that the alignment class still exists.
		$edit_url = $this->getSession()->getCurrentURL() . '/edit';
		$this->drupalGet($edit_url);
		$this->waitForEditor();
		$assert_session->elementExists('css', '.ck-widget.image.image-style-align-center');

		// Ensure that "Centered image" alignment option is selected.
		$this->click('.ck-widget.image');
		$this->assertVisibleBalloon('[aria-label="Image toolbar"]');
		$this->assertTrue($this->getBalloonButton('Align center and break text')->hasClass('ck-on'));
		$this->getBalloonButton('Break text')->click();
		$this->assertTrue($assert_session->waitForElementRemoved('css', '.ck-widget.image.image-style-align-center'));
		$editor_dom = $this->getEditorDataAsDom();
		$drupal_media_element = $editor_dom->getElementsByTagName('img')
		->item(0);
		$this->assertFalse($drupal_media_element->hasAttribute('data-align'));
		}

		public function providerAlignment() {
		return [
		'Block image' => ['block'],
		'Inline image' => ['inline'],
		];
		}

		/**
		* Checks that width attribute is correct after upcasting, then downcasting.
		*