Issue #3271094 by Wim Leers, lauriii, xjm, catch: Move Media CKEditor 4 integration into CKEditor

core/.stylelintrc.json

@@ -477,7 +477,7 @@
   "ignoreFiles": [
     "assets/vendor/**/*.css",
     "tests/Drupal/Tests/Core/Asset/css_test_files/**/*.css",
-    "modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css",
+    "modules/ckeditor/css/plugins/drupalmedia/ckeditor.drupalmedia.css",
     "themes/stable/css/core/assets/vendor/**/*.css",
     "themes/stable9/css/core/assets/vendor/**/*.css",
     "themes/stable9/css/media/plugins/drupalmedia/ckeditor.drupalmedia.css"

core/modules/ckeditor/ckeditor.libraries.yml

@@ -90,3 +90,10 @@ drupal.ckeditor.language.admin:
     - core/jquery
     - core/drupal
     - core/drupal.vertical-tabs
+
+drupal.ckeditor.plugins.drupalmedia:
+  version: VERSION
+  js:
+    js/ckeditor.drupalmedia.theme.js: {}
+  dependencies:
+    - core/drupal

core/modules/ckeditor/js/ckeditor.drupalmedia.theme.es6.js

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Theme elements for the Media Embed CKEditor plugin.
+ */
+
+((Drupal) => {
+  /**
+   * Themes the edit button for a media embed.
+   *
+   * @return {string}
+   *   An HTML string to insert in the CKEditor.
+   */
+  Drupal.theme.mediaEmbedEditButton = () =>
+    `<button class="media-library-item__edit">${Drupal.t(
+      'Edit media',
+    )}</button>`;
+})(Drupal);

core/modules/ckeditor/js/ckeditor.drupalmedia.theme.js

@@ -0,0 +1,10 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(Drupal => {
+  Drupal.theme.mediaEmbedEditButton = () => `<button class="media-library-item__edit">${Drupal.t('Edit media')}</button>`;
+})(Drupal);

core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalMedia.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\media\Plugin\CKEditorPlugin;
+namespace Drupal\ckeditor\Plugin\CKEditorPlugin;
 
 use Drupal\ckeditor\CKEditorPluginContextualInterface;
 use Drupal\ckeditor\CKEditorPluginCssInterface;
@@ -16,6 +16,7 @@ use Drupal\editor\Entity\Editor;
  * @CKEditorPlugin(
  *   id = "drupalmedia",
  *   label = @Translation("Media Embed"),
+ *   provider = "media",
  * )
  *
  * @internal
@@ -83,7 +84,10 @@ class DrupalMedia extends PluginBase implements ContainerFactoryPluginInterface,
       'core/jquery',
       'core/drupal',
       'core/drupal.ajax',
+      // @see Drupal.theme.mediaEmbedPreviewError()
       'media/media_embed_ckeditor_theme',
+      // @see Drupal.theme.mediaEmbedEditButton()
+      'ckeditor/drupal.ckeditor.plugins.drupalmedia',
     ];
   }
 
@@ -91,7 +95,7 @@ class DrupalMedia extends PluginBase implements ContainerFactoryPluginInterface,
    * {@inheritdoc}
    */
   public function getFile() {
-    return $this->moduleExtensionList->getPath('media') . '/js/plugins/drupalmedia/plugin.js';
+    return $this->moduleExtensionList->getPath('ckeditor') . '/js/plugins/drupalmedia/plugin.js';
   }
 
   /**
@@ -124,7 +128,7 @@ class DrupalMedia extends PluginBase implements ContainerFactoryPluginInterface,
    */
   public function getCssFiles(Editor $editor) {
     return [
-      $this->moduleExtensionList->getPath('media') . '/css/plugins/drupalmedia/ckeditor.drupalmedia.css',
+      $this->moduleExtensionList->getPath('ckeditor') . '/css/plugins/drupalmedia/ckeditor.drupalmedia.css',
       $this->moduleExtensionList->getPath('system') . '/css/components/hidden.module.css',
     ];
   }

core/modules/ckeditor/tests/src/FunctionalJavascript/MediaTest.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\Tests\media\FunctionalJavascript;
+namespace Drupal\Tests\ckeditor\FunctionalJavascript;
 
 use Drupal\Component\Utility\Html;
 use Drupal\Core\Database\Database;
@@ -21,10 +21,10 @@ use Drupal\user\RoleInterface;
 use Drupal\Core\Entity\Entity\EntityViewMode;
 
 /**
- * @coversDefaultClass \Drupal\media\Plugin\CKEditorPlugin\DrupalMedia
+ * @coversDefaultClass \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalMedia
- * @group media
+ * @group ckeditor
  */
-class CKEditorIntegrationTest extends WebDriverTestBase {
+class MediaTest extends WebDriverTestBase {
 
   use CKEditorTestTrait;
   use MediaTypeCreationTrait;

core/modules/ckeditor5/ckeditor5.libraries.yml

@@ -63,7 +63,6 @@ drupal.ckeditor5.emphasis:
 
 drupal.ckeditor5.media:
   js:
-    js/media_embed_ckeditor5.theme.js: {}
     js/build/drupalMedia.js: { minified: true }
   css:
     theme:
@@ -71,6 +70,7 @@ drupal.ckeditor5.media:
   dependencies:
     - core/ckeditor5
     - core/drupal
+    - media/media_embed_ckeditor_theme
 
 drupal.ckeditor5.mediaAlign:
   css:

core/modules/ckeditor5/ckeditor5.libraries.yml.orig

@@ -0,0 +1,188 @@
+# cspell:ignore imageupload
+
+ckeditor5.language:
+  css:
+    component:
+      css/language.css: {}
+  dependencies:
+    - core/ckeditor5.language
+
+drupal.ckeditor5.internal:
+  js:
+    js/build/drupalHtmlEngine.js: { minified: true }
+  dependencies:
+    - core/ckeditor5
+    - core/ckeditor5.internal
+
+drupal.ckeditor5:
+  js:
+    js/ckeditor5.js: {}
+  dependencies:
+    - core/jquery
+    - core/once
+    - core/drupal
+    - core/drupal.debounce
+    - core/ckeditor5.editorClassic
+    - core/ckeditor5.editorDecoupled
+    - core/ckeditor5
+    - editor/drupal.editor
+    - ckeditor5/drupal.ckeditor5.stylesheets
+    - core/drupalSettings
+    - core/drupal.message
+
+# Library used for dynamically loading CKEditor 5 stylesheets from the default
+# front end theme.
+# @see ckeditor5_library_info_alter()
+drupal.ckeditor5.stylesheets:
+  version: VERSION
+  css: []
+
+drupal.ckeditor5.codeBlock:
+  dependencies:
+    - core/ckeditor5.codeBlock
+    - core/ckeditor5.htmlSupport
+
+drupal.ckeditor5.image:
+  js:
+    js/build/drupalImage.js: { minified: true }
+  css:
+    theme:
+      css/image.css: { }
+  dependencies:
+    - core/drupal
+    - core/ckeditor5
+    - core/ckeditor5.image
+
+drupal.ckeditor5.emphasis:
+  version: VERSION
+  js:
+    js/build/drupalEmphasis.js: { minified: true }
+  dependencies:
+    - core/ckeditor5
+    - core/ckeditor5.basic
+
+drupal.ckeditor5.media:
+  js:
+    js/media_embed_ckeditor5.theme.js: {}
+    js/build/drupalMedia.js: { minified: true }
+  css:
+    theme:
+      css/drupalmedia.css: { }
+  dependencies:
+    - core/ckeditor5
+    - core/drupal
+
+drupal.ckeditor5.mediaAlign:
+  css:
+    theme:
+      css/media-alignment.css: { }
+  dependencies:
+    - ckeditor5/drupal.ckeditor5.media
+
+drupal.ckeditor5.filter.admin:
+  js:
+    js/ckeditor5.filter.admin.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
+    - core/drupal.ajax
+    - core/drupalSettings
+
+admin:
+  js:
+    js/ckeditor5.admin.js: { }
+  css:
+    theme:
+      css/toolbar.admin.css: { }
+  dependencies:
+    - core/sortable
+    - filter/drupal.filter.admin
+    - core/jquery
+    - core/once
+
+admin.specialCharacters:
+  css:
+    theme:
+      css/special-characters.css: { }
+
+admin.removeFormat:
+  css:
+    theme:
+      css/remove-format.css: { }
+
+admin.internal:
+  css:
+    theme:
+      css/internal.admin.css: { }
+
+admin.basic:
+  css:
+    theme:
+      css/basic.admin.css: { }
+
+admin.blockquote:
+  css:
+    theme:
+      css/blockquote.admin.css: { }
+
+admin.link:
+  css:
+    theme:
+      css/link.admin.css: { }
+
+admin.list:
+  css:
+    theme:
+      css/list.admin.css: { }
+
+admin.heading:
+  css:
+    theme:
+      css/heading.admin.css: { }
+  dependencies:
+    - core/ckeditor5.internal
+
+admin.horizontalLine:
+  css:
+    theme:
+      css/horizontal-line.admin.css: { }
+
+admin.alignment:
+  css:
+    theme:
+      css/alignment.admin.css: { }
+
+admin.imageupload:
+  css:
+    theme:
+      css/imageupload.admin.css: { }
+
+admin.indent:
+  css:
+    theme:
+      css/indent.admin.css: { }
+
+admin.language:
+  css:
+    theme:
+      css/language.admin.css: { }
+
+admin.drupalmedia:
+  css:
+    theme:
+      css/drupalmedia.admin.css: { }
+
+admin.sourceEditing:
+  css:
+    theme:
+      css/source-editing.admin.css: { }
+
+admin.table:
+  css:
+    theme:
+      css/table.admin.css: { }
+
+admin.codeBlock:
+  css:
+    theme:
+      css/code-block.admin.css: { }

core/modules/ckeditor5/js/media_embed_ckeditor5.theme.es6.js

@@ -1,19 +0,0 @@
-/**
- * @file
- * Theme elements for the Media Embed CKEditor5 plugin.
- */
-
-((Drupal) => {
-  /**
-   * Themes the error displayed when the media embed preview fails.
-   *
-   * @return {string}
-   *   A string representing a DOM fragment.
-   *
-   * @see media-embed-error.html.twig
-   */
-  Drupal.theme.mediaEmbedPreviewError = () =>
-    `<div>${Drupal.t(
-      'An error occurred while trying to preview the media. Please save your work and reload this page.',
-    )}</div>`;
-})(Drupal);

core/modules/ckeditor5/js/media_embed_ckeditor5.theme.js

@@ -1,10 +0,0 @@
-/**
-* DO NOT EDIT THIS FILE.
-* See the following change record for more information,
-* https://www.drupal.org/node/2815083
-* @preserve
-**/
-
-(Drupal => {
-  Drupal.theme.mediaEmbedPreviewError = () => `<div>${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
-})(Drupal);

core/modules/media/js/media_embed_ckeditor.theme.es6.js

@@ -1,6 +1,6 @@
 /**
  * @file
- * Theme elements for the Media Embed CKEditor plugin.
+ * Theme elements for the Media Embed text editor plugins.
  */
 
 ((Drupal) => {
@@ -16,15 +16,4 @@
     `<div>${Drupal.t(
       'An error occurred while trying to preview the media. Please save your work and reload this page.',
     )}</div>`;
-
-  /**
-   * Themes the edit button for a media embed.
-   *
-   * @return {string}
-   *   An HTML string to insert in the CKEditor.
-   */
-  Drupal.theme.mediaEmbedEditButton = () =>
-    `<button class="media-library-item__edit">${Drupal.t(
-      'Edit media',
-    )}</button>`;
 })(Drupal);

core/modules/media/js/media_embed_ckeditor.theme.js

@@ -7,6 +7,4 @@
 
 (Drupal => {
   Drupal.theme.mediaEmbedPreviewError = () => `<div>${Drupal.t('An error occurred while trying to preview the media. Please save your work and reload this page.')}</div>`;
-
-  Drupal.theme.mediaEmbedEditButton = () => `<button class="media-library-item__edit">${Drupal.t('Edit media')}</button>`;
 })(Drupal);

core/modules/media/media.libraries.yml

@@ -32,6 +32,8 @@ filter.caption:
   dependencies:
     - filter/caption
 
+# Despite the name, this is actually not specific to CKEditor 4, and can be
+# used by all text editor plugins.
 media_embed_ckeditor_theme:
   version: VERSION
   js:

core/modules/media/media.module

@@ -510,9 +510,9 @@ function media_filter_format_edit_form_validate($form, FormStateInterface $form_
  * Implements hook_field_widget_single_element_form_alter().
  */
 function media_field_widget_single_element_form_alter(&$element, FormStateInterface $form_state, $context) {
-  // Add an attribute so that "drupalmedia" CKEditor plugin can pass the host
+  // Add an attribute so that text editors plugins can pass the host entity's
-  // entity's language to EditorMediaDialog, allowing it to present entities
+  // language to EditorMediaDialog, allowing it to present entities in the same
-  // in the same language.
+  // language.
   if (!empty($element['#type']) && $element['#type'] == 'text_format') {
     $element['#attributes']['data-media-embed-host-entity-langcode'] = $context['items']->getLangcode();
   }

core/modules/media/src/Form/EditorMediaDialog.php

@@ -96,7 +96,6 @@ class EditorMediaDialog extends FormBase {
       $editor_object = $form_state->getUserInput()['editor_object'];
       // The data that the text editor sends to any dialog is in
       // the 'editor_object' key.
-      // @see core/modules/ckeditor/js/ckeditor.es6.js
       $media_embed_element = $editor_object['attributes'];
       $form_state->set('media_embed_element', $media_embed_element);
       $has_caption = $editor_object['hasCaption'];

core/modules/media/tests/modules/media_test_embed/media_test_embed.info.yml

@@ -1,5 +1,5 @@
-name: Media Embed plugin test
+name: Media Embed text editor plugin test
-description: 'Provides functionality to test embedding media items in CKEditor.'
+description: 'Provides functionality to test embedding media items in text editors.'
 type: module
 package: Testing
 version: VERSION

core/modules/media/tests/modules/media_test_embed/media_test_embed.module

@@ -2,7 +2,7 @@
 
 /**
  * @file
- * Helper module for the Media Embed CKEditor plugin tests.
+ * Helper module for the Media Embed text editor plugin tests.
  */
 
 use Drupal\Core\Access\AccessResult;
@@ -14,7 +14,6 @@ use Drupal\Core\Session\AccountInterface;
  * Implements hook_entity_view_alter().
  */
 function media_test_embed_entity_view_alter(&$build, EntityInterface $entity, EntityViewDisplayInterface $display) {
-  // @see \Drupal\Tests\media\FunctionalJavascript\CKEditorIntegrationTest::testPreviewUsesDefaultThemeAndIsClientCacheable()
   $build['#attributes']['data-media-embed-test-active-theme'] = \Drupal::theme()->getActiveTheme()->getName();
   $build['#attributes']['data-media-embed-test-view-mode'] = $display->getMode();
 }

core/modules/media/tests/modules/media_test_embed/src/Controller/TestMediaFilterController.php

@@ -8,7 +8,7 @@ use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 /**
- * Controller to allow testing of error handling in drupalmedia plugin.js.
+ * Controller to allow testing of error handling of Media Embed in text editors.
  */
 class TestMediaFilterController extends MediaFilterController {
 

core/modules/media/tests/src/Kernel/MediaEmbedFilterTest.php

@@ -356,8 +356,6 @@ class MediaEmbedFilterTest extends MediaEmbedFilterTestBase {
 
   /**
    * Tests that only <drupal-media> tags are processed.
-   *
-   * @see \Drupal\Tests\media\FunctionalJavascript\CKEditorIntegrationTest::testOnlyDrupalMediaTagProcessed()
    */
   public function testOnlyDrupalMediaTagProcessed() {
     $content = $this->createEmbedCode([