Issue #3260554 by lauriii, hooroomoo, Wim Leers, nod_: [drupalMedia] Support... (bfbf08c0) · Commits · project / drupal

core/modules/ckeditor5/ckeditor5.ckeditor5.yml

+43 −0

Original line number	Diff line number	Diff line
		@@ -518,6 +518,49 @@ media_media:
		conditions:
		filter: media_embed

		media_mediaAlign:
		provider: media
		ckeditor5:
		plugins:
		- drupalMedia.DrupalElementStyle
		config:
		drupalElementStyles:
		options:
		- name: 'alignRight'
		title: 'Right aligned media'
		icon: 'objectRight'
		attributeName: 'data-align'
		attributeValue: 'right'
		modelElements: [ 'drupalMedia' ]
		- name: 'alignLeft'
		title: 'Left aligned media'
		icon: 'objectLeft'
		attributeName: 'data-align'
		attributeValue: 'left'
		modelElements: [ 'drupalMedia' ]
		- name: 'alignCenter'
		title: 'Centered media'
		icon: 'objectCenter'
		attributeName: 'data-align'
		attributeValue: 'center'
		modelElements: ['drupalMedia']
		drupalMedia:
		toolbar:
		- name: 'drupalMedia:align'
		items:
		- 'drupalElementStyle:alignLeft'
		- 'drupalElementStyle:alignCenter'
		- 'drupalElementStyle:alignRight'
		defaultItem: 'drupalElementStyle:alignCenter'
		drupal:
		label: Media align
		library: ckeditor5/drupal.ckeditor5.mediaAlign
		elements:
		- <drupal-media data-align>
		conditions:
		filter: filter_align
		plugins: [media_media]

		media_library_mediaLibrary:
		provider: media_library
		ckeditor5:

core/modules/ckeditor5/ckeditor5.libraries.yml

+7 −0

Original line number	Diff line number	Diff line
		@@ -57,6 +57,13 @@ drupal.ckeditor5.media:
		- core/ckeditor5
		- core/drupal

		drupal.ckeditor5.mediaAlign:
		css:
		theme:
		css/media-alignment.css: { }
		dependencies:
		- ckeditor5/drupal.ckeditor5.media

		ie11.user.warnings:
		js:
		js/ie11.user.warnings.js: { }

core/modules/ckeditor5/css/media-alignment.css

0 → 100644

+18 −0

Original line number	Diff line number	Diff line
		.ck-content .drupal-media-style-align-right {
		float: right;
		margin-left: 1.5rem;
		}
		.ck-content .drupal-media-style-align-left {
		float: left;
		margin-right: 1.5rem;
		}
		.ck-content .drupal-media-style-align-left,
		.ck-content .drupal-media-style-align-right {
		clear: both;
		max-width: 50%;
		}
		.ck-content .drupal-media-style-align-center {
		max-width: 50%;
		margin-right: auto;
		margin-left: auto;
		}

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.js

0 → 100644

+49 −0

Original line number	Diff line number	Diff line
		/* eslint-disable import/no-extraneous-dependencies */
		/* cspell:words drupalelementstyle drupalelementstyleui drupalelementstyleediting imagestyle drupalmediatoolbar drupalmediaediting */
		import { Plugin } from 'ckeditor5/src/core';
		import DrupalElementStyleUi from './drupalelementstyle/drupalelementstyleui';
		import DrupalElementStyleEditing from './drupalelementstyle/drupalelementstyleediting';

		/**
		* @module drupalMedia/drupalelementstyle
		*/

		/**
		* The Drupal Element Style plugin.
		*
		* This plugin is internal and it is currently only used for providing
		* `data-align` support to `<drupal-media>`. However, this plugin isn't tightly
		* coupled to `<drupal-media>` or `data-align`. The intent is to make this
		* plugin a starting point for adding `data-align` support to other elements,
		* because the `FilterAlign` filter plugin PHP code also does not limit itself
		* to a specific HTML element. This could be also used for other filters to
		* provide same authoring experience as `FilterAlign` without the need for
		* additional JavaScript code.
		*
		* To be able to change element styles in the UI, the model element needs to
		* have a toolbar where the element style buttons can be displayed.
		*
		* This plugin is inspired by the CKEditor 5 Image Style plugin.
		*
		* @see module:image/imagestyle~ImageStyle
		* @see core/modules/ckeditor5/css/media-alignment.css
		* @see module:drupalMedia/drupalmediaediting~DrupalMediaEditing
		* @see module:drupalMedia/drupalmediatoolbar~DrupalMediaToolbar
		*
		* @internal
		*/
		export default class DrupalElementStyle extends Plugin {
		/**
		* @inheritDoc
		*/
		static get requires() {
		return [DrupalElementStyleEditing, DrupalElementStyleUi];
		}

		/**
		* @inheritdoc
		*/
		static get pluginName() {
		return 'DrupalElementStyle';
		}
		}