diff --git a/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css b/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css
index 9826afc017..7ef64b3df3 100644
--- a/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css
+++ b/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css
@@ -20,3 +20,13 @@ drupal-media {
.cke_widget_drupalmedia.align-center {
text-align: center;
}
+
+/**
+ * Fix positioning without delete button. Overrides
+ * core/modules/media_library/css/media_library.theme.css.
+ * Can be removed with this issue:
+ * @see https://www.drupal.org/project/drupal/issues/3074859
+ */
+drupal-media .media-library-item__edit {
+ right: 10px;
+}
diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js
index 81f5561fab..682862a03f 100644
--- a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js
+++ b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js
@@ -102,7 +102,7 @@
beforeInit(editor) {
// Configure CKEditor DTD for custom drupal-media element.
// @see https://www.drupal.org/node/2448449#comment-9717735
- const dtd = CKEDITOR.dtd;
+ const { dtd } = CKEDITOR;
// Allow text within the drupal-media tag.
dtd['drupal-media'] = { '#': 1 };
// Register drupal-media element as an allowed child in each tag that can
@@ -131,7 +131,7 @@
},
upcast(element, data) {
- const attributes = element.attributes;
+ const { attributes } = element;
// This matches the behavior of the corresponding server-side text filter plugin.
if (
element.name !== 'drupal-media' ||
@@ -152,6 +152,13 @@
}
});
}
+ // @see media_field_widget_form_alter().
+ const hostEntityLangcode = document
+ .getElementById(editor.name)
+ .getAttribute('data-media-embed-host-entity-langcode');
+ if (hostEntityLangcode) {
+ data.hostEntityLangcode = hostEntityLangcode;
+ }
return element;
},
@@ -160,12 +167,35 @@
},
data(event) {
+ // Only run during changes.
+ if (this.oldData) {
+ // The server-side text filter plugin treats both an empty
+ // `data-caption` attribute and a non-existing one the same: it
+ // does not render a caption. But in the CKEditor Widget, we
+ // need to be able to show an empty caption with placeholder
+ // text using CSS even when technically there is no `data-caption`
+ // attribute value yet. That's why this CKEditor Widget has an
+ // independent `hasCaption` boolean (which is not an attribute)
+ // to know when to generate a non-empty `data-caption`
+ // attribute when the content creator has enabled caption: this
+ // makes the server-side text filter render a caption, allowing
+ // the placeholder-rendering CSS to work.
+ // @see core/modules/filter/css/filter.caption.css
+ // @see ckeditor_ckeditor_css_alter()
+ if (!this.data.hasCaption && this.oldData.hasCaption) {
+ delete this.data.attributes['data-caption'];
+ } else if (this.data.hasCaption && !this.oldData.hasCaption) {
+ this.data.attributes['data-caption'] = ' ';
+ }
+ }
+
if (this._previewNeedsServerSideUpdate()) {
editor.fire('lockSnapshot');
this._tearDownDynamicEditables();
this._loadPreview(widget => {
widget._setUpDynamicEditables();
+ widget._setUpEditButton();
editor.fire('unlockSnapshot');
});
}
@@ -179,6 +209,13 @@
this.element
.getParent()
.addClass(`align-${this.data.attributes['data-align']}`);
+ } else {
+ const classes = this.element.getParent().$.classList;
+ for (let i = 0; i < classes.length; i++) {
+ if (classes[i].indexOf('align-') === 0) {
+ this.element.getParent().removeClass(classes[i]);
+ }
+ }
}
// Track the previous state to allow checking if preview needs
@@ -224,9 +261,113 @@
childList: true,
subtree: true,
});
+ // Some browsers will add a tag to a newly created DOM
+ // element with no content. Remove this if it is the only
+ // thing in the caption. Our placeholder support requires the
+ // element be entirely empty. See filter-caption.css.
+ // @see core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js
+ if (
+ captionEditable.$.childNodes.length === 1 &&
+ captionEditable.$.childNodes.item(0).nodeName === 'BR'
+ ) {
+ captionEditable.$.removeChild(
+ captionEditable.$.childNodes.item(0),
+ );
+ }
}
},
+ /**
+ * Injects HTML for buttons into the preview that was just loaded.
+ */
+ _setUpEditButton() {
+ // No buttons for missing media.
+ if (this.element.findOne('.media-embed-error')) {
+ return;
+ }
+
+ /**
+ * Determine if a node is an element node.
+ *
+ * @param {CKEDITOR.dom.node} n
+ * A DOM node to evaluate.
+ *
+ * @return {bool}
+ * Returns true if node is an element node and not a non-element
+ * node (such as NODE_TEXT, NODE_COMMENT, NODE_DOCUMENT or
+ * NODE_DOCUMENT_FRAGMENT).
+ *
+ * @see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#property-NODE_ELEMENT
+ */
+ const isElementNode = function(n) {
+ return n.type === CKEDITOR.NODE_ELEMENT;
+ };
+
+ // Find the actual embedded media in the DOM.
+ const embeddedMediaContainer = this.data.hasCaption
+ ? this.element.findOne('figure')
+ : this.element;
+ let embeddedMedia = embeddedMediaContainer.getFirst(isElementNode);
+ // If there is a link, the top-level element is the `a tag,
+ // and the embedded media will be within the `a` tag.
+ if (this.data.link) {
+ embeddedMedia = embeddedMedia.getFirst(isElementNode);
+ }
+ // To allow the edit button to be absolutely positioned, the parent
+ // element must be positioned relative.
+ embeddedMedia.setStyle('position', 'relative');
+
+ const editButton = CKEDITOR.dom.element.createFromHtml(
+ ``,
+ );
+ embeddedMedia.getFirst().insertBeforeMe(editButton);
+
+ // Make the edit button do things.
+ const widget = this;
+ this.element
+ .findOne('.media-library-item__edit')
+ .on('click', event => {
+ const saveCallback = function(values) {
+ event.cancel();
+ editor.fire('saveSnapshot');
+ if (values.hasOwnProperty('attributes')) {
+ CKEDITOR.tools.extend(
+ values.attributes,
+ widget.data.attributes,
+ );
+ // Allow the dialog to delete attributes by setting them
+ // to `false` or `none`. For example: `alt`.
+ Object.keys(values.attributes).forEach(prop => {
+ if (
+ values.attributes[prop] === false ||
+ (prop === 'data-align' &&
+ values.attributes[prop] === 'none')
+ ) {
+ delete values.attributes[prop];
+ }
+ });
+ }
+ widget.setData({
+ attributes: values.attributes,
+ hasCaption: !!values.hasCaption,
+ });
+ editor.fire('saveSnapshot');
+ };
+
+ Drupal.ckeditor.openDialog(
+ editor,
+ Drupal.url(
+ `editor/dialog/media/${editor.config.drupal.format}`,
+ ),
+ widget.data,
+ saveCallback,
+ {},
+ );
+ });
+ },
+
_tearDownDynamicEditables() {
// If we are watching for changes to the caption, stop doing that.
if (this.captionObserver) {
@@ -237,7 +378,8 @@
/**
* Determines if the preview needs to be re-rendered by the server.
*
- * @returns {boolean}
+ * @return {boolean}
+ * Returns true if the data hashes differ.
*/
_previewNeedsServerSideUpdate() {
// When the widget is first loading, it of course needs to still get a preview!
diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.js b/core/modules/media/js/plugins/drupalmedia/plugin.js
index 76459293b4..3f3d2ebf96 100644
--- a/core/modules/media/js/plugins/drupalmedia/plugin.js
+++ b/core/modules/media/js/plugins/drupalmedia/plugin.js
@@ -120,18 +120,32 @@
}
});
}
+
+ var hostEntityLangcode = document.getElementById(editor.name).getAttribute('data-media-embed-host-entity-langcode');
+ if (hostEntityLangcode) {
+ data.hostEntityLangcode = hostEntityLangcode;
+ }
return element;
},
destroy: function destroy() {
this._tearDownDynamicEditables();
},
data: function data(event) {
+ if (this.oldData) {
+ if (!this.data.hasCaption && this.oldData.hasCaption) {
+ delete this.data.attributes['data-caption'];
+ } else if (this.data.hasCaption && !this.oldData.hasCaption) {
+ this.data.attributes['data-caption'] = ' ';
+ }
+ }
+
if (this._previewNeedsServerSideUpdate()) {
editor.fire('lockSnapshot');
this._tearDownDynamicEditables();
this._loadPreview(function (widget) {
widget._setUpDynamicEditables();
+ widget._setUpEditButton();
editor.fire('unlockSnapshot');
});
}
@@ -140,6 +154,13 @@
if (this.data.attributes.hasOwnProperty('data-align')) {
this.element.getParent().addClass('align-' + this.data.attributes['data-align']);
+ } else {
+ var classes = this.element.getParent().$.classList;
+ for (var i = 0; i < classes.length; i++) {
+ if (classes[i].indexOf('align-') === 0) {
+ this.element.getParent().removeClass(classes[i]);
+ }
+ }
}
this.oldData = CKEDITOR.tools.clone(this.data);
@@ -172,7 +193,56 @@
childList: true,
subtree: true
});
+
+ if (captionEditable.$.childNodes.length === 1 && captionEditable.$.childNodes.item(0).nodeName === 'BR') {
+ captionEditable.$.removeChild(captionEditable.$.childNodes.item(0));
+ }
+ }
+ },
+ _setUpEditButton: function _setUpEditButton() {
+ if (this.element.findOne('.media-embed-error')) {
+ return;
}
+
+ var isElementNode = function isElementNode(n) {
+ return n.type === CKEDITOR.NODE_ELEMENT;
+ };
+
+ var embeddedMediaContainer = this.data.hasCaption ? this.element.findOne('figure') : this.element;
+ var embeddedMedia = embeddedMediaContainer.getFirst(isElementNode);
+
+ if (this.data.link) {
+ embeddedMedia = embeddedMedia.getFirst(isElementNode);
+ }
+
+ embeddedMedia.setStyle('position', 'relative');
+
+ var editButton = CKEDITOR.dom.element.createFromHtml('');
+ embeddedMedia.getFirst().insertBeforeMe(editButton);
+
+ var widget = this;
+ this.element.findOne('.media-library-item__edit').on('click', function (event) {
+ var saveCallback = function saveCallback(values) {
+ event.cancel();
+ editor.fire('saveSnapshot');
+ if (values.hasOwnProperty('attributes')) {
+ CKEDITOR.tools.extend(values.attributes, widget.data.attributes);
+
+ Object.keys(values.attributes).forEach(function (prop) {
+ if (values.attributes[prop] === false || prop === 'data-align' && values.attributes[prop] === 'none') {
+ delete values.attributes[prop];
+ }
+ });
+ }
+ widget.setData({
+ attributes: values.attributes,
+ hasCaption: !!values.hasCaption
+ });
+ editor.fire('saveSnapshot');
+ };
+
+ Drupal.ckeditor.openDialog(editor, Drupal.url('editor/dialog/media/' + editor.config.drupal.format), widget.data, saveCallback, {});
+ });
},
_tearDownDynamicEditables: function _tearDownDynamicEditables() {
if (this.captionObserver) {
diff --git a/core/modules/media/media.module b/core/modules/media/media.module
index 8f67df3703..a8cb3785f9 100644
--- a/core/modules/media/media.module
+++ b/core/modules/media/media.module
@@ -17,6 +17,7 @@
use Drupal\Core\Url;
use Drupal\field\FieldConfigInterface;
use Drupal\media\Plugin\media\Source\OEmbedInterface;
+use Drupal\Core\Field\FieldItemListInterface;
/**
* Implements hook_help().
@@ -496,3 +497,17 @@ function media_filter_format_edit_form_validate($form, FormStateInterface $form_
$form_state->setErrorByName('filters', $error_message);
}
}
+
+/**
+ * Implements hook_field_widget_form_alter().
+ */
+function media_field_widget_form_alter(&$element, FormStateInterface $form_state, $context) {
+ // Add an attribute so that drupalmedia's JavaScript can pass the host
+ // entity's language to EditorMediaDialog, allowing it to present entities
+ // in the same language.
+ if (!empty($element['#type']) && $element['#type'] == 'text_format') {
+ if (!empty($context['items']) && $context['items'] instanceof FieldItemListInterface) {
+ $element['#attributes']['data-media-embed-host-entity-langcode'] = $context['items']->getLangcode();
+ }
+ }
+}
diff --git a/core/modules/media/media.routing.yml b/core/modules/media/media.routing.yml
index 19dadf9e01..918071361c 100644
--- a/core/modules/media/media.routing.yml
+++ b/core/modules/media/media.routing.yml
@@ -48,3 +48,12 @@ media.filter.preview:
requirements:
_entity_access: 'filter_format.use'
_custom_access: '\Drupal\media\Controller\MediaFilterController::formatUsesMediaEmbedFilter'
+
+editor.media_dialog:
+ path: '/editor/dialog/media/{editor}'
+ defaults:
+ _form: '\Drupal\media\Form\EditorMediaDialog'
+ _title: 'Edit media'
+ methods: [POST]
+ requirements:
+ _entity_access: 'editor.use'
diff --git a/core/modules/media/src/Form/EditorMediaDialog.php b/core/modules/media/src/Form/EditorMediaDialog.php
new file mode 100644
index 0000000000..d372bbd2a7
--- /dev/null
+++ b/core/modules/media/src/Form/EditorMediaDialog.php
@@ -0,0 +1,245 @@
+entityRepository = $entity_repository;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public static function create(ContainerInterface $container) {
+ return new static(
+ $container->get('entity.repository')
+ );
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getFormId() {
+ return 'editor_media_dialog';
+ }
+
+ /**
+ * {@inheritdoc}
+ *
+ * @param \Drupal\editor\Entity\Editor $editor
+ * The text editor to which this dialog corresponds.
+ */
+ public function buildForm(array $form, FormStateInterface $form_state, EditorInterface $editor = NULL) {
+ // This form is special, in that the default values do not come from the
+ // server side, but from the client side, from a text editor. We must cache
+ // this data in form state, because when the form is rebuilt, we will be
+ // receiving values from the form, instead of the values from the text
+ // editor. If we don't cache it, this data will be lost.
+ if (isset($form_state->getUserInput()['editor_object'])) {
+ $editor_object = $form_state->getUserInput()['editor_object'];
+ // By convention, the data that the text editor sends to any dialog is in
+ // the 'editor_object' key.
+ $media_embed_element = $editor_object['attributes'];
+ $form_state->set('media_embed_element', $media_embed_element);
+ $has_caption = $editor_object['hasCaption'];
+ $form_state->set('hasCaption', $has_caption);
+ $form_state->setCached(TRUE);
+ }
+ else {
+ // Retrieve the user input from form state.
+ $media_embed_element = $form_state->get('media_embed_element');
+ $has_caption = $form_state->get('hasCaption');
+ }
+
+ $form['#tree'] = TRUE;
+ $form['#attached']['library'][] = 'editor/drupal.editor.dialog';
+ $form['#prefix'] = '
';
+ $form['#suffix'] = '
';
+
+ $filters = $editor->getFilterFormat()->filters();
+ $filter_html = $filters->get('filter_html');
+ $filter_align = $filters->get('filter_align');
+ $filter_caption = $filters->get('filter_caption');
+
+ $allowed_attributes = [];
+ if ($filter_html->status) {
+ $restrictions = $filter_html->getHTMLRestrictions();
+ $allowed_attributes = $restrictions['allowed']['drupal-media'];
+ }
+
+ $media = $this->entityRepository->loadEntityByUuid('media', $media_embed_element['data-entity-uuid']);
+
+ if (!empty($editor_object['hostEntityLangcode']) && $media->hasTranslation($editor_object['hostEntityLangcode'])) {
+ $media = $media->getTranslation($editor_object['hostEntityLangcode']);
+ }
+ if ($image_field = $this->getMediaImageSourceField($media)) {
+ $settings = $media->{$image_field}->getItemDefinition()->getSettings();
+ $alt = isset($media_embed_element['alt']) ? $media_embed_element['alt'] : NULL;
+ $form['alt'] = [
+ '#type' => 'textfield',
+ '#title' => $this->t('Alternate text'),
+ '#default_value' => $alt,
+ '#description' => $this->t('Short description of the image used by screen readers and displayed when the image is not loaded. This is important for accessibility.'),
+ '#required_error' => $this->t('Alternative text is required. (Only in rare cases should this be left empty. To create empty alternative text, enter "" — two double quotes without any content).'),
+ '#maxlength' => 2048,
+ '#placeholder' => $media->{$image_field}->alt,
+ '#parents' => ['attributes', 'alt'],
+ '#access' => !empty($settings['alt_field']) && ($filter_html->status === FALSE || !empty($allowed_attributes['alt'])),
+ ];
+ }
+
+ // When Drupal core's filter_align is being used, the text editor offers the
+ // ability to change the alignment.
+ $form['align'] = [
+ '#title' => $this->t('Align'),
+ '#type' => 'radios',
+ '#options' => [
+ 'none' => $this->t('None'),
+ 'left' => $this->t('Left'),
+ 'center' => $this->t('Center'),
+ 'right' => $this->t('Right'),
+ ],
+ '#default_value' => empty($media_embed_element['data-align']) ? 'none' : $media_embed_element['data-align'],
+ '#attributes' => ['class' => ['container-inline']],
+ '#parents' => ['attributes', 'data-align'],
+ '#access' => $filter_align->status && ($filter_html->status === FALSE || !empty($allowed_attributes['data-align'])),
+ ];
+
+ // When Drupal core's filter_caption is being used, the text editor offers
+ // the ability to in-place edit the media's caption: show a toggle.
+ $form['caption'] = [
+ '#title' => $this->t('Caption'),
+ '#type' => 'checkbox',
+ '#default_value' => $has_caption === 'true',
+ '#parents' => ['hasCaption'],
+ '#access' => $filter_caption->status && ($filter_html->status === FALSE || !empty($allowed_attributes['data-caption'])),
+ ];
+
+ if ((empty($form['alt']) || $form['alt']['#access'] === FALSE) && $form['align']['#access'] === FALSE && $form['caption']['#access'] === FALSE) {
+ $format = $editor->getFilterFormat();
+ $warning = $this->t('There is nothing to configure for this media.');
+ $form['no_access_notice'] = ['#markup' => $warning];
+ if ($format->access('update')) {
+ $edit_url = $format->toUrl('edit-form')->toString();
+ $tparams = [
+ '%warning' => $warning,
+ '@edit_url' => $edit_url,
+ '%format' => $format->label(),
+ ];
+ $form['no_access_notice']['#markup'] = $this->t('%warning Edit the text format %format to modify the attributes that can be overridden.', $tparams);
+ }
+ }
+
+ $form['actions'] = [
+ '#type' => 'actions',
+ ];
+ $form['actions']['save_modal'] = [
+ '#type' => 'submit',
+ '#value' => $this->t('Save'),
+ // No regular submit-handler. This form only works via JavaScript.
+ '#submit' => [],
+ '#ajax' => [
+ 'callback' => '::submitForm',
+ 'event' => 'click',
+ ],
+ ];
+
+ return $form;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function submitForm(array &$form, FormStateInterface $form_state) {
+ $response = new AjaxResponse();
+
+ // When the `alt` attribute is set to two double quotes, transform it to the
+ // empty string: two double quotes signify "empty alt attribute". See above.
+ if (trim($form_state->getValue(['attributes', 'alt'], '')) === '""') {
+ $form_state->setValue(['attributes', 'alt'], '""');
+ }
+
+ // The `alt` attribute is optional: if it isn't set, the default value
+ // simply will not be overridden. It's important to set it to FALSE
+ // instead of unsetting the value. This way we explicitly inform
+ // the client side about the new value.
+ if ($form_state->hasValue(['attributes', 'alt']) && trim($form_state->getValue(['attributes', 'alt'])) === '') {
+ $form_state->setValue(['attributes', 'alt'], FALSE);
+ }
+
+ if ($form_state->getErrors()) {
+ unset($form['#prefix'], $form['#suffix']);
+ $form['status_messages'] = [
+ '#type' => 'status_messages',
+ '#weight' => -10,
+ ];
+ $response->addCommand(new HtmlCommand('#editor-media-dialog-form', $form));
+ }
+ else {
+ // Only send back the relevant values.
+ $values = [
+ 'hasCaption' => $form_state->getValue('hasCaption'),
+ 'attributes' => $form_state->getValue('attributes'),
+ ];
+ $response->addCommand(new EditorDialogSave($values));
+ $response->addCommand(new CloseModalDialogCommand());
+ }
+
+ return $response;
+ }
+
+ /**
+ * Get image field from source config.
+ *
+ * @param \Drupal\media\MediaInterface $media
+ * Embedded media.
+ *
+ * @return string|null
+ * "The name of the image source field configured for the media item, or
+ * NULL if the source field is not an image field.
+ */
+ protected function getMediaImageSourceField(MediaInterface $media) {
+ $field_definition = $media->getSource()
+ ->getSourceFieldDefinition($media->bundle->entity);
+ $item_class = $field_definition->getItemDefinition()->getClass();
+ if (is_a($item_class, ImageItem::class, TRUE)) {
+ return $field_definition->getName();
+ }
+ return NULL;
+ }
+
+}
diff --git a/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php b/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php
index 35717d5a76..120a848ef8 100644
--- a/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php
+++ b/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php
@@ -124,6 +124,8 @@ public function getCssFiles(Editor $editor) {
$this->moduleExtensionList->getPath('media') . '/css/filter.media_embed.css',
$this->moduleExtensionList->getPath('media') . '/css/plugins/drupalmedia/ckeditor.drupalmedia.css',
$this->moduleExtensionList->getPath('system') . '/css/components/hidden.module.css',
+ // Add media_library.theme.css for edit button styling.
+ $this->moduleExtensionList->getPath('media_library') . '/css/media_library.theme.css',
];
}
diff --git a/core/modules/media/src/Plugin/Filter/MediaEmbed.php b/core/modules/media/src/Plugin/Filter/MediaEmbed.php
index 3145258cba..55683d4787 100644
--- a/core/modules/media/src/Plugin/Filter/MediaEmbed.php
+++ b/core/modules/media/src/Plugin/Filter/MediaEmbed.php
@@ -26,7 +26,7 @@
* @Filter(
* id = "media_embed",
* title = @Translation("Embed media"),
- * description = @Translation("Embeds media items using a custom HTML tag. If used in conjunction with the 'Align/Caption' filters, make sure this filter is configured to run after them."),
+ * description = @Translation("Embeds media items using a custom tag, <drupal-media>. If used in conjunction with the 'Align/Caption' filters, make sure this filter is configured to run after them. If you are using the HTML filter, be sure the data-align and/or data-caption attributes are allowed on the <drupal-media> tag. If you would like users to be able to override the alt text on image media, add the alt attribute to the <drupal-media> tag as well."),
* type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE,
* settings = {
* "default_view_mode" = "full",
@@ -414,6 +414,13 @@ protected function applyPerEmbedMediaOverrides(\DOMElement $node, MediaInterface
$settings = $media->{$image_field}->getItemDefinition()->getSettings();
if (!empty($settings['alt_field']) && $node->hasAttribute('alt')) {
+ // Allow the display of the image without an alt tag in special cases.
+ // Since setting the value in the EditorMediaDialog to an empty string
+ // restores the default value, this allows special cases where the
+ // alt should not be set to the default value but should be empty.
+ if ($node->getAttribute('alt') === '""') {
+ $node->setAttribute('alt', NULL);
+ }
$media->{$image_field}->alt = $node->getAttribute('alt');
// All media entities have a thumbnail. In the case of image media, it
// is conceivable that a particular view mode chooses to display the
diff --git a/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php b/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
index d0e7588697..24d2365fc0 100644
--- a/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
+++ b/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
@@ -5,13 +5,18 @@
use Drupal\Component\Utility\Html;
use Drupal\Core\Url;
use Drupal\editor\Entity\Editor;
+use Drupal\field\Entity\FieldConfig;
use Drupal\file\Entity\File;
use Drupal\filter\Entity\FilterFormat;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\language\Entity\ConfigurableLanguage;
+use Drupal\language\Entity\ContentLanguageSettings;
use Drupal\media\Entity\Media;
use Drupal\Tests\ckeditor\Traits\CKEditorTestTrait;
use Drupal\Tests\media\Traits\MediaTypeCreationTrait;
use Drupal\Tests\TestFileCreationTrait;
+use Drupal\user\Entity\Role;
+use Drupal\user\RoleInterface;
/**
* @coversDefaultClass \Drupal\media\Plugin\CKEditorPlugin\DrupalMedia
@@ -244,13 +249,42 @@ public function testPreviewUsesDefaultThemeAndIsClientCacheable() {
* Tests caption editing in the CKEditor widget.
*/
public function testEditableCaption() {
+ $page = $this->getSession()->getPage();
+ $assert_session = $this->assertSession();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ // Assert that figcaption element exists within the drupal-media element.
+ $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', 'figcaption'));
+ $this->assertSame('baz', $figcaption->getHtml());
+
+ // Test that disabling the caption in the metadata dialog removes it
+ // from the drupal-media element.
+ $page->pressButton('Edit media');
+ $this->waitforMetadataDialog();
+ $page->uncheckField('hasCaption');
+ $this->submitDialog();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $this->assertNotEmpty($drupal_media = $assert_session->waitForElementVisible('css', 'drupal-media', 2000));
- // Type in the widget's editable for the caption.
+ // Wait for element to update without figcaption.
+ $result = $page->waitFor(10, function () use ($drupal_media) {
+ return empty($drupal_media->find('css', 'figcaption'));
+ });
+ // Will be true if no figcaption exists within the drupal-media element.
+ $this->assertTrue($result);
+
+ // Test that enabling the caption in the metadata dialog adds an editable
+ // caption to the embedded media.
+ $page->pressButton('Edit media');
+ $this->waitforMetadataDialog();
+ $page->checkField('hasCaption');
+ $this->submitDialog();
$this->getSession()->switchToIFrame('ckeditor');
- $assert_session = $this->assertSession();
+ $this->assertNotEmpty($drupal_media = $assert_session->waitForElementVisible('css', 'drupal-media figcaption', 2000));
+
+ // Type in the widget's CKEDITOR.editable element for the caption.
$this->assertNotEmpty($assert_session->waitForElement('css', 'figcaption'));
$this->setCaption('Caught in a landslide! No escape from reality!');
$this->getSession()->switchToIFrame('ckeditor');
@@ -363,6 +397,382 @@ public function testEditableCaption() {
}
/**
+ * Test the EditorMediaDialog's form elements' #access logic.
+ */
+ public function testDialogAccess() {
+ $page = $this->getSession()->getPage();
+ $assert_session = $this->assertSession();
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+
+ // Enable `filter_html` without "alt", "data-align" or "data-caption"
+ // attributes added to the drupal-media tag.
+ $allowed_html = "