tags are processed.
+ *
+ * @see \Drupal\Tests\media\Kernel\MediaEmbedFilterTest::testOnlyDrupalMediaTagProcessed()
+ */
+ public function testOnlyDrupalMediaTagProcessed() {
+ $original_value = $this->host->body->value;
+ $this->host->body->value = str_replace('drupal-media', 'p', $original_value);
+ $this->host->save();
+
+ // Assert that `` is not upcast into a CKEditor Widget.
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session = $this->assertSession();
+ $this->assertEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]', 1000));
+ $assert_session->elementNotExists('css', 'figure');
+
+ $this->host->body->value = $original_value;
+ $this->host->save();
+
+ // Assert that `` is upcast into a CKEditor Widget.
+ $this->getSession()->reload();
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]'));
+ $assert_session->elementExists('css', 'figure');
+ }
+
+ /**
+ * The CKEditor Widget must load a preview generated using the default theme.
+ */
+ public function testPreviewUsesDefaultThemeAndIsClientCacheable() {
+ // Make the node edit form use the admin theme, like on most Drupal sites.
+ $this->config('node.settings')
+ ->set('use_admin_theme', TRUE)
+ ->save();
+ $this->container->get('router.builder')->rebuild();
+
+ // Allow the test user to view the admin theme.
+ $this->adminUser->addRole($this->drupalCreateRole(['view the administration theme']));
+ $this->adminUser->save();
+
+ // Configure a different default and admin theme, like on most Drupal sites.
+ $this->config('system.theme')
+ ->set('default', 'stable')
+ ->set('admin', 'classy')
+ ->save();
+
+ // Assert that when looking at an embedded entity in the CKEditor Widget,
+ // the preview is generated using the default theme, not the admin theme.
+ // @see media_test_ckeditor_entity_view_alter()
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session = $this->assertSession();
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]'));
+ $element = $assert_session->elementExists('css', '[data-media-embed-test-active-theme]');
+ $this->assertSame('stable', $element->getAttribute('data-media-embed-test-active-theme'));
+
+ // Assert that the first preview request transferred >500 B over the wire.
+ // Then toggle source mode on and off. This causes the CKEditor widget to be
+ // destroyed and then reconstructed. Assert that during this reconstruction,
+ // a second request is sent. This second request should have transferred 0
+ // bytes: the browser should have cached the response, thus resulting in a
+ // much better user experience.
+ $this->assertGreaterThan(500, $this->getLastPreviewRequestTransferSize());
+ $this->pressEditorButton('source');
+ $this->assertNotEmpty($assert_session->waitForElement('css', 'textarea.cke_source'));
+ $this->pressEditorButton('source');
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]'));
+ $this->assertSame(0, $this->getLastPreviewRequestTransferSize());
+ }
+
+ /**
+ * Tests caption editing in the CKEditor widget.
+ */
+ public function testEditableCaption() {
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+
+ // Type in the widget's editable for the caption.
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session = $this->assertSession();
+ $this->assertNotEmpty($assert_session->waitForElement('css', 'figcaption'));
+ $this->setCaption('Caught in a landslide! No escape from reality!');
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session->elementExists('css', 'figcaption > em');
+ $assert_session->elementExists('css', 'figcaption > strong')->click();
+
+ // Select the element and unbold it.
+ $this->clickPathLinkByTitleAttribute("strong element");
+ $this->pressEditorButton('bold');
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session->elementExists('css', 'figcaption > em');
+ $assert_session->elementNotExists('css', 'figcaption > strong');
+
+ // Select the element and unitalicize it.
+ $assert_session->elementExists('css', 'figcaption > em')->click();
+ $this->clickPathLinkByTitleAttribute("em element");
+ $this->pressEditorButton('italic');
+
+ // The "source" button should reveal the HTML source in a state matching
+ // what is shown in the CKEditor widget.
+ $this->pressEditorButton('source');
+ $source = $assert_session->elementExists('css', 'textarea.cke_source');
+ $value = $source->getValue();
+ $dom = Html::load($value);
+ $xpath = new \DOMXPath($dom);
+ $drupal_media = $xpath->query('//drupal-media')[0];
+ $this->assertEquals('Caught in a landslide! No escape from reality!', $drupal_media->getAttribute('data-caption'));
+
+ // Change the caption by modifying the HTML source directly. When exiting
+ // "source" mode, this should be respected.
+ $poor_boy_text = "I'm just a poor boy, I need no sympathy!";
+ $drupal_media->setAttribute("data-caption", $poor_boy_text);
+ $source->setValue(Html::serialize($dom));
+ $this->pressEditorButton('source');
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $figcaption = $assert_session->waitForElement('css', 'figcaption');
+ $this->assertNotEmpty($figcaption);
+ $this->assertEquals($poor_boy_text, $figcaption->getHtml());
+
+ // Select the element that we just set in "source" mode. This
+ // proves that it was indeed rendered by the CKEditor widget.
+ $figcaption->find('css', 'strong')->click();
+ $this->pressEditorButton('bold');
+
+ // Insert a link into the caption.
+ $this->clickPathLinkByTitleAttribute("Caption element");
+ $this->pressEditorButton('drupallink');
+ $assert_session->waitForId('drupal-modal');
+ $form = $assert_session->waitForElementVisible('css', '#editor-link-dialog-form');
+ $this->assertNotEmpty($form);
+ $form->findField('attributes[href]')
+ ->setValue('https://www.drupal.org');
+ $assert_session->elementExists('css', 'button.form-submit')->press();
+ $assert_session->assertWaitOnAjaxRequest();
+
+ // Wait for the live preview in the CKEditor widget to finish loading, then
+ // edit the link; no `data-cke-saved-href` attribute should exist on it.
+ $this->getSession()->switchToIFrame('ckeditor');
+ $figcaption = $assert_session->waitForElement('css', 'figcaption');
+ $this->assertNotEmpty($figcaption);
+ $figcaption->find('css', 'a')->click();
+ $this->clickPathLinkByTitleAttribute("a element");
+ $this->pressEditorButton('drupallink');
+ $assert_session->waitForId('drupal-modal');
+ $form = $assert_session->waitForElementVisible('css', '#editor-link-dialog-form');
+ $this->assertNotEmpty($form);
+ $form
+ ->findField('attributes[href]')
+ ->setValue('https://www.drupal.org/project/drupal');
+ $assert_session->elementExists('css', 'button.form-submit')->press();
+ $assert_session->assertWaitOnAjaxRequest();
+ $this->pressEditorButton('source');
+ $source = $assert_session->elementExists('css', "textarea.cke_source");
+ $value = $source->getValue();
+ $this->assertContains('https://www.drupal.org/project/drupal', $value);
+ $this->assertNotContains('data-cke-saved-href', $value);
+
+ // Save the entity.
+ $assert_session->buttonExists('Save')->press();
+
+ // Verify the saved entity when viewed also contains the captioned media.
+ $link = $assert_session->elementExists('css', 'figcaption > a');
+ $this->assertEquals('https://www.drupal.org/project/drupal', $link->getAttribute('href'));
+ $this->assertEquals("I'm just a poor boy, I need no sympathy!", $link->getText());
+
+ // Edit it again, type a different caption in the widget.
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'figcaption'));
+ $this->setCaption('Scaramouch, Scaramouch, will you do the Fandango?');
+
+ // Erase the caption in the CKEditor Widget, verify the still
+ // exists and contains placeholder text, then type something else.
+ $this->setCaption('');
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session->elementContains('css', 'figcaption', '');
+ $assert_session->elementAttributeContains('css', 'figcaption', 'data-placeholder', 'Enter caption here');
+ $this->setCaption('Fin.');
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session->elementContains('css', 'figcaption', 'Fin.');
+ }
+
+ /**
+ * Tests linkability of the CKEditor widget.
+ */
+ public function testLinkability() {
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+
+ $assert_session = $this->assertSession();
+ // Select the CKEditor Widget and click the "link" button.
+ $drupalmedia = $assert_session->waitForElementVisible('css', 'drupal-media');
+ $this->assertNotEmpty($drupalmedia);
+ $drupalmedia->click();
+ $this->pressEditorButton('drupallink');
+ $assert_session->waitForId('drupal-modal');
+
+ // Enter a link in the link dialog and save.
+ $form = $assert_session->waitForElementVisible('css', '#editor-link-dialog-form');
+ $this->assertNotEmpty($form);
+ $form->findField('attributes[href]')
+ ->setValue('https://www.drupal.org');
+ $assert_session->elementExists('css', 'button.form-submit')->press();
+ $assert_session->assertWaitOnAjaxRequest();
+
+ // Save the entity.
+ $assert_session->buttonExists('Save')->press();
+
+ // Verify the saved entity when viewed also contains the linked media.
+ $assert_session->elementExists('css', 'figure > a[href="https://www.drupal.org"] > .media--type-image > .field--type-image > img[src*="image-test.png"]');
+
+ // Test that `drupallink` also still works independently: inserting a link
+ // is possible.
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->pressEditorButton('drupallink');
+ $assert_session->waitForId('drupal-modal');
+ $form = $assert_session->waitForElementVisible('css', '#editor-link-dialog-form');
+ $this->assertNotEmpty($form);
+ $form->findField('attributes[href]')
+ ->setValue('https://wikipedia.org');
+ $assert_session->elementExists('css', 'button.form-submit')->press();
+ $assert_session->assertWaitOnAjaxRequest();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $assert_session->elementExists('css', 'body > a[href="https://wikipedia.org"]');
+ $assert_session->elementExists('css', 'body > .cke_widget_drupalmedia > drupal-media > figure > a[href="https://www.drupal.org"]');
+ }
+
+ /**
+ * Tests linkability when `drupalimage` is disabled.
+ */
+ public function testLinkabilityWhenDrupalImageIsAbsent() {
+ // Remove the `drupalimage` plugin's `DrupalImage` button.
+ $editor = Editor::load('test_format');
+ $settings = $editor->getSettings();
+ $rows = $settings['toolbar']['rows'];
+ foreach ($rows as $row_key => $row) {
+ foreach ($row as $group_key => $group) {
+ foreach ($group['items'] as $item_key => $item) {
+ if ($item === 'DrupalImage') {
+ unset($settings['toolbar']['rows'][$row_key][$group_key]['items'][$item_key]);
+ }
+ }
+ }
+ }
+ $editor->setSettings($settings);
+ $editor->save();
+
+ $this->testLinkability();
+ }
+
+ /**
+ * Tests preview route access.
+ *
+ * @param bool $media_embed_enabled
+ * Whether to test with media_embed filter enabled on the text format.
+ * @param bool $can_use_format
+ * Whether the logged in user is allowed to use the text format.
+ *
+ * @dataProvider previewAccessProvider
+ */
+ public function testEmbedPreviewAccess($media_embed_enabled, $can_use_format) {
+ $format = FilterFormat::create([
+ 'format' => $this->randomMachineName(),
+ 'name' => $this->randomString(),
+ 'filters' => [
+ 'filter_align' => ['status' => TRUE],
+ 'filter_caption' => ['status' => TRUE],
+ 'media_embed' => ['status' => $media_embed_enabled],
+ ],
+ ]);
+ $format->save();
+
+ if ($can_use_format) {
+ $user = $this->drupalCreateUser([
+ 'bypass node access',
+ $format->getPermissionName(),
+ ]);
+ }
+ else {
+ $user = $this->drupalCreateUser([
+ 'bypass node access',
+ ]);
+ }
+ $this->drupalLogin($user);
+
+ $text = '';
+ $route_parameters = ['filter_format' => $format->id()];
+ $options = ['query' => ['text' => $text]];
+ $this->drupalGet(Url::fromRoute('media.filter.preview', $route_parameters, $options));
+
+ $assert_session = $this->assertSession();
+ if ($media_embed_enabled && $can_use_format) {
+ $assert_session->elementExists('css', 'img');
+ $assert_session->responseContains('baz');
+ }
+ else {
+ $assert_session->responseContains('You are not authorized to access this page.');
+ }
+ }
+
+ /**
+ * Data Provider for ::testEmbedPreviewAccess().
+ */
+ public function previewAccessProvider() {
+ return [
+ 'media_embed enabled on format' => [
+ TRUE,
+ TRUE,
+ ],
+ 'media_embed disabled on format' => [
+ FALSE,
+ TRUE,
+ ],
+ 'media_embed enabled, user lacks access to format' => [
+ TRUE,
+ FALSE,
+ ],
+ ];
+ }
+
+ /**
+ * Tests that alignment classes are added to element.
+ */
+ public function testAlignmentClasses() {
+ $alignments = [
+ 'right',
+ 'left',
+ 'center',
+ ];
+ $assert_session = $this->assertSession();
+ foreach ($alignments as $alignment) {
+ $this->host->body->value = '';
+ $this->host->save();
+
+ // Assert that drupal-media tag has the appropriate class.
+ $this->drupalGet($this->host->toUrl('edit-form'));
+ $this->waitForEditor();
+ $this->assignNameToCkeditorIframe();
+ $this->getSession()->switchToIFrame('ckeditor');
+ $wrapper = $assert_session->waitForElementVisible('css', '.drupal-media-wrapper', 1000);
+ $this->assertNotEmpty($wrapper);
+ $this->assertTrue($wrapper->hasClass('drupal-media--align-' . $alignment));
+ }
+ }
+
+ /**
+ * Gets the transfer size of the last preview request.
+ *
+ * @return int
+ */
+ protected function getLastPreviewRequestTransferSize() {
+ $this->getSession()->switchToIFrame();
+ $javascript = <<getSession()->evaluateScript($javascript);
+ }
+
+ /**
+ * Assigns a name to the CKEditor iframe, to allow use of ::switchToIFrame().
+ *
+ * @see \Behat\Mink\Session::switchToIFrame()
+ */
+ protected function assignNameToCkeditorIframe() {
+ $javascript = <<getSession()->evaluateScript($javascript);
+ }
+
+ /**
+ * Clicks a CKEditor button.
+ *
+ * @param string $name
+ * The name of the button, such as drupalink, source, etc.
+ */
+ protected function pressEditorButton($name) {
+ $this->getSession()->switchToIFrame();
+ $button = $this->assertSession()->waitForElementVisible('css', 'a.cke_button__' . $name);
+ $this->assertNotEmpty($button);
+ $button->click();
+ }
+
+ /**
+ * Waits for CKEditor to initialize.
+ *
+ * @param string $instance_id
+ * The CKEditor instance ID.
+ * @param int $timeout
+ * (optional) Timeout in milliseconds, defaults to 10000.
+ */
+ protected function waitForEditor($instance_id = 'edit-body-0-value', $timeout = 10000) {
+ $condition = <<getSession()->wait($timeout, $condition);
+ }
+
+ /**
+ * Set the text of the editable caption to the given text.
+ *
+ * @param string $text
+ * The text to set in the caption.
+ */
+ protected function setCaption($text) {
+ $this->getSession()->switchToIFrame();
+ $select_and_edit_caption = "var editor = CKEDITOR.instances['edit-body-0-value'];
+ var figcaption = editor.widgets.getByElement(editor.editable().findOne('figcaption'));
+ figcaption.editables.caption.setData('" . $text . "')";
+ $this->getSession()->executeScript($select_and_edit_caption);
+ }
+
+ /**
+ * Clicks a link in the editor's path links with the given title text.
+ *
+ * @param string $text
+ * The title attribute of the link to click.
+ *
+ * @throws \Behat\Mink\Exception\ElementNotFoundException
+ */
+ protected function clickPathLinkByTitleAttribute($text) {
+ $this->getSession()->switchToIFrame();
+ $selector = '//span[@id="cke_1_path"]//a[@title="' . $text . '"]';
+ $this->assertSession()->elementExists('xpath', $selector)->click();
+ }
+
+}
diff --git a/core/modules/media/tests/src/Kernel/MediaAccessControlHandlerTest.php b/core/modules/media/tests/src/Kernel/MediaAccessControlHandlerTest.php
index 43eb335d82..fd7bb341f5 100644
--- a/core/modules/media/tests/src/Kernel/MediaAccessControlHandlerTest.php
+++ b/core/modules/media/tests/src/Kernel/MediaAccessControlHandlerTest.php
@@ -87,7 +87,7 @@ public function testCreateAccess(array $permissions, AccessResultInterface $expe
* @param string[] $expected_cache_contexts
* Expected contexts.
* @param string[] $expected_cache_tags
- * Expected cache tags
+ * Expected cache tags.
* @param \Drupal\Core\Access\AccessResultInterface $actual
* The actual access result.
*/
diff --git a/core/modules/media/tests/src/Kernel/MediaEmbedFilterTest.php b/core/modules/media/tests/src/Kernel/MediaEmbedFilterTest.php
index f39a233531..def0d74a36 100644
--- a/core/modules/media/tests/src/Kernel/MediaEmbedFilterTest.php
+++ b/core/modules/media/tests/src/Kernel/MediaEmbedFilterTest.php
@@ -37,7 +37,11 @@ public function testBasics(array $embed_attributes, $expected_view_mode, array $
$this->assertSame($expected_cacheability->getCacheContexts(), $result->getCacheContexts());
$this->assertSame($expected_cacheability->getCacheMaxAge(), $result->getCacheMaxAge());
$this->assertSame(['library'], array_keys($result->getAttachments()));
- $this->assertSame(['media/filter.caption'], $result->getAttachments()['library']);
+ $expected_libraries = [
+ 'media/filter.media_embed',
+ 'media/filter.caption',
+ ];
+ $this->assertSame($expected_libraries, $result->getAttachments()['library']);
}
/**
@@ -163,7 +167,7 @@ public function providerAccessUnpublished() {
])
->setCacheContexts(['user.permissions'])
->setCacheMaxAge(Cache::PERMANENT),
- [],
+ 'attachments' => [],
],
'user can access embedded media' => [
TRUE,
@@ -180,7 +184,12 @@ public function providerAccessUnpublished() {
])
->setCacheContexts(['timezone', 'user', 'user.permissions'])
->setCacheMaxAge(Cache::PERMANENT),
- ['library' => ['media/filter.caption']],
+ 'attachments' => [
+ 'library' => [
+ 'media/filter.media_embed',
+ 'media/filter.caption',
+ ],
+ ],
],
];
}
@@ -300,6 +309,8 @@ public function providerMissingEntityIndicator() {
/**
* Tests that only tags are processed.
+ *
+ * @see \Drupal\Tests\media\FunctionalJavascript\CKEditorIntegrationTest::testOnlyDrupalMediaTagProcessed()
*/
public function testOnlyDrupalMediaTagProcessed() {
$content = $this->createEmbedCode([
@@ -369,7 +380,15 @@ public function testFilterIntegration(array $filter_ids, array $additional_attri
* Data provider for testFilterIntegration().
*/
public function providerFilterIntegration() {
- $default_asset_libraries = ['media/filter.caption'];
+ $default_asset_libraries = [
+ 'media/filter.media_embed',
+ 'media/filter.caption',
+ ];
+ $asset_libraries_with_filter_caption = [
+ 'filter/caption',
+ 'media/filter.media_embed',
+ 'media/filter.caption',
+ ];
$caption_additional_attributes = ['data-caption' => 'Yo.'];
$caption_verification_selector = 'figure > figcaption';
@@ -386,14 +405,14 @@ public function providerFilterIntegration() {
$caption_additional_attributes,
$caption_verification_selector,
TRUE,
- ['filter/caption', 'media/filter.caption'],
+ $asset_libraries_with_filter_caption,
],
'`` + `data-caption`; `filter_caption` + `media_embed` ⇒ caption present, link preserved' => [
['filter_caption', 'media_embed'],
$caption_additional_attributes,
'figure > a[href="https://www.drupal.org"] + figcaption',
TRUE,
- ['filter/caption', 'media/filter.caption'],
+ $asset_libraries_with_filter_caption,
'',
'',
],
@@ -433,14 +452,14 @@ public function providerFilterIntegration() {
$align_additional_attributes + $caption_additional_attributes,
'figure.align-center > figcaption',
TRUE,
- ['filter/caption', 'media/filter.caption'],
+ $asset_libraries_with_filter_caption,
],
'`` + `data-caption` + `data-align`; `filter_align` + `filter_caption` + `media_embed` ⇒ aligned caption present, link preserved' => [
['filter_align', 'filter_caption', 'media_embed'],
$align_additional_attributes + $caption_additional_attributes,
'figure.align-center > a[href="https://www.drupal.org"] + figcaption',
TRUE,
- ['filter/caption', 'media/filter.caption'],
+ $asset_libraries_with_filter_caption,
'',
'',
],
diff --git a/core/themes/bartik/css/components/captions.css b/core/themes/bartik/css/components/captions.css
index 03ad4799e9..9dda3d2915 100644
--- a/core/themes/bartik/css/components/captions.css
+++ b/core/themes/bartik/css/components/captions.css
@@ -2,6 +2,7 @@
.caption {
margin-bottom: 1.2em;
}
+
.caption > * {
padding: 0.5ex;
border: 1px solid #ccc;
diff --git a/core/themes/stable/css/media/filter.caption.css b/core/themes/stable/css/media/filter.caption.css
index a92505c308..776d00b8ec 100644
--- a/core/themes/stable/css/media/filter.caption.css
+++ b/core/themes/stable/css/media/filter.caption.css
@@ -8,3 +8,4 @@
float: none;
margin: unset;
}
+
diff --git a/core/themes/stable/css/media/filter.media_embed.css b/core/themes/stable/css/media/filter.media_embed.css
new file mode 100644
index 0000000000..b5a1c2303b
--- /dev/null
+++ b/core/themes/stable/css/media/filter.media_embed.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Media Embed filter: default styling for displaying Media Embeds.
+ */
+
+/* Use display table so width is only as wide as the contents. */
+.missing-media {
+ display: table;
+}
+
+.missing-media__message {
+ text-align: center;
+}
diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml
index 91deed83a2..04a94d6d9e 100644
--- a/core/themes/stable/stable.info.yml
+++ b/core/themes/stable/stable.info.yml
@@ -148,7 +148,10 @@ libraries-override:
css:
component:
css/filter.caption.css: css/media/filter.caption.css
-
+ media/filter.media_embed:
+ css:
+ component:
+ css/filter.media_embed.css: css/media/filter.media_embed.css
media/oembed.formatter:
css:
component: