Issue #2645100 by thpoul, Wim Leers: CKEditorPluginCssInterface: Allow...

Issue #2645100 by thpoul, Wim Leers: CKEditorPluginCssInterface: Allow CKEditor plugins to add CSS to iframe CKEditor instances

core/modules/ckeditor/ckeditor.module

@@ -64,13 +64,6 @@ function ckeditor_ckeditor_css_alter(array &$css, Editor $editor) {
   if ($editor->getFilterFormat()->filters('filter_caption')->status) {
     $css[] = drupal_get_path('module', 'filter') . '/css/filter.caption.css';
   }
-
-  // Add the filter caption CSS if the text format associated with this text
-  // editor uses the filter_align filter. This is used by the included
-  // CKEditor DrupalImageCaption plugin.
-  if ($editor->getFilterFormat()->filters('filter_align')->status) {
-    $css[] = drupal_get_path('module', 'ckeditor') . '/css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css';
-  }
 }
 
 /**

core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php

@@ -23,6 +23,7 @@
  * @see \Drupal\ckeditor\CKEditorPluginInterface
  * @see \Drupal\ckeditor\CKEditorPluginContextualInterface
  * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
+ * @see \Drupal\ckeditor\CKEditorPluginCssInterface
  * @see \Drupal\ckeditor\CKEditorPluginBase
  * @see \Drupal\ckeditor\CKEditorPluginManager
  * @see \Drupal\ckeditor\Annotation\CKEditorPlugin

core/modules/ckeditor/src/CKEditorPluginConfigurableInterface.php

@@ -20,6 +20,7 @@
  * @see \Drupal\ckeditor\CKEditorPluginInterface
  * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
  * @see \Drupal\ckeditor\CKEditorPluginContextualInterface
+ * @see \Drupal\ckeditor\CKEditorPluginCssInterface
  * @see \Drupal\ckeditor\CKEditorPluginBase
  * @see \Drupal\ckeditor\CKEditorPluginManager
  * @see \Drupal\ckeditor\Annotation\CKEditorPlugin

core/modules/ckeditor/src/CKEditorPluginContextualInterface.php

@@ -24,6 +24,7 @@
  * @see \Drupal\ckeditor\CKEditorPluginInterface
  * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
  * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
+ * @see \Drupal\ckeditor\CKEditorPluginCssInterface
  * @see \Drupal\ckeditor\CKEditorPluginBase
  * @see \Drupal\ckeditor\CKEditorPluginManager
  * @see \Drupal\ckeditor\Annotation\CKEditorPlugin

core/modules/ckeditor/src/CKEditorPluginCssInterface.php

+<?php
+
+/**
+ * @file
+ * Contains \Drupal\ckeditor\CKEditorPluginCssInterface.
+ */
+
+namespace Drupal\ckeditor;
+
+use Drupal\editor\Entity\Editor;
+
+/**
+ * Defines an interface for CKEditor plugins with associated CSS.
+ *
+ * This allows a CKEditor plugin to add additional CSS in iframe CKEditor
+ * instances without needing to implement hook_ckeditor_css_alter().
+ *
+ * @see \Drupal\ckeditor\CKEditorPluginInterface
+ * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
+ * @see \Drupal\ckeditor\CKEditorPluginContextualInterface
+ * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
+ * @see \Drupal\ckeditor\CKEditorPluginBase
+ * @see \Drupal\ckeditor\CKEditorPluginManager
+ * @see \Drupal\ckeditor\Annotation\CKEditorPlugin
+ * @see plugin_api
+ */
+interface CKEditorPluginCssInterface extends CKEditorPluginInterface {
+
+  /**
+   * Retrieves enabled plugins' iframe instance CSS files.
+   *
+   * Note: this does not use a Drupal asset library because this CSS will be
+   * loaded by CKEditor, not by Drupal.
+   *
+   * @param \Drupal\editor\Entity\Editor $editor
+   *   A configured text editor object.
+   *
+   * @return string[]
+   *   An array of CSS files. This is a flat list of file paths relative to
+   *   the Drupal root.
+   */
+  public function getCssFiles(Editor $editor);
+
+}

core/modules/ckeditor/src/CKEditorPluginInterface.php

@@ -28,6 +28,7 @@
  * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
  * @see \Drupal\ckeditor\CKEditorPluginContextualInterface
  * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
+ * @see \Drupal\ckeditor\CKEditorPluginCssInterface
  * @see \Drupal\ckeditor\CKEditorPluginBase
  * @see \Drupal\ckeditor\CKEditorPluginManager
  * @see \Drupal\ckeditor\Annotation\CKEditorPlugin

core/modules/ckeditor/src/CKEditorPluginManager.php

@@ -21,6 +21,7 @@
  * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
  * @see \Drupal\ckeditor\CKEditorPluginContextualInterface
  * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
+ * @see \Drupal\ckeditor\CKEditorPluginCssInterface
  * @see \Drupal\ckeditor\CKEditorPluginBase
  * @see \Drupal\ckeditor\Annotation\CKEditorPlugin
  * @see plugin_api
@@ -127,7 +128,7 @@ public function getEnabledPluginFiles(Editor $editor, $include_internal_plugins
    *   All available CKEditor buttons, with plugin IDs as keys and button
    *   metadata (as implemented by getButtons()) as values.
    *
-   * @see CKEditorPluginButtonsInterface::getButtons()
+   * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface::getButtons()
    */
   public function getButtons() {
     $plugins = array_keys($this->getDefinitions());
@@ -182,4 +183,32 @@ public function injectPluginSettingsForm(array &$form, FormStateInterface $form_
       }
     }
   }
+
+  /**
+   * Retrieves enabled plugins' iframe instance CSS files, keyed by plugin ID.
+   *
+   * @param \Drupal\editor\Entity\Editor $editor
+   *   A configured text editor object.
+   *
+   * @return string[]
+   *   Enabled plugins CKEditor CSS files, with plugin IDs as keys and CSS file
+   *   paths relative to the Drupal root (as implemented by getCssFiles()) as
+   *   values.
+   *
+   * @see \Drupal\ckeditor\CKEditorPluginCssInterface::getCssFiles()
+   */
+  public function getCssFiles(Editor $editor) {
+    $enabled_plugins = array_keys($this->getEnabledPluginFiles($editor, TRUE));
+    $css_files = array();
+
+    foreach ($enabled_plugins as $plugin_id) {
+      $plugin = $this->createInstance($plugin_id);
+      if ($plugin instanceof CKEditorPluginCssInterface) {
+        $css_files[$plugin_id] = $plugin->getCssFiles($editor);
+      }
+    }
+
+    return $css_files;
+  }
+
 }

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

@@ -11,6 +11,7 @@
 use Drupal\editor\Entity\Editor;
 use Drupal\ckeditor\CKEditorPluginInterface;
 use Drupal\ckeditor\CKEditorPluginContextualInterface;
+use Drupal\ckeditor\CKEditorPluginCssInterface;
 
 /**
  * Defines the "drupalimagecaption" plugin.
@@ -21,7 +22,7 @@
  *   module = "ckeditor"
  * )
  */
-class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface {
+class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface, CKEditorPluginCssInterface {
 
   /**
    * {@inheritdoc}
@@ -69,6 +70,15 @@ public function getConfig(Editor $editor) {
     );
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function getCssFiles(Editor $editor) {
+    return array(
+      drupal_get_path('module', 'ckeditor') . '/css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css'
+    );
+  }
+
   /**
    * {@inheritdoc}
    */

core/modules/ckeditor/src/Plugin/Editor/CKEditor.php

@@ -422,6 +422,11 @@ public function buildContentsCssJSSetting(Editor $editor) {
       drupal_get_path('module', 'system') . '/css/components/align.module.css',
     );
     $this->moduleHandler->alter('ckeditor_css', $css, $editor);
+    // Get a list of all enabled plugins' iframe instance CSS files.
+    $plugins_css = array_reduce($this->ckeditorPluginManager->getCssFiles($editor), function($result, $item) {
+      return array_merge($result, array_values($item));
+    }, array());
+    $css = array_merge($css, $plugins_css);
     $css = array_merge($css, _ckeditor_theme_css());
     $css = array_map('file_create_url', $css);
     $css = array_map('file_url_transform_relative', $css);

core/modules/ckeditor/src/Tests/CKEditorPluginManagerTest.php

@@ -57,20 +57,20 @@ protected function setUp() {
    */
   function testEnabledPlugins() {
     $this->manager = $this->container->get('plugin.manager.ckeditor.plugin');
-    $editor = entity_load('editor', 'filtered_html');
+    $editor = Editor::load('filtered_html');
 
     // Case 1: no CKEditor plugins.
     $definitions = array_keys($this->manager->getDefinitions());
     sort($definitions);
     $this->assertIdentical(array('drupalimage', 'drupalimagecaption', 'drupallink', 'internal', 'stylescombo'), $definitions, 'No CKEditor plugins found besides the built-in ones.');
     $enabled_plugins = array(
-      'drupalimage' => 'core/modules/ckeditor/js/plugins/drupalimage/plugin.js',
-      'drupallink' => 'core/modules/ckeditor/js/plugins/drupallink/plugin.js',
+      'drupalimage' => drupal_get_path('module', 'ckeditor') . '/js/plugins/drupalimage/plugin.js',
+      'drupallink' => drupal_get_path('module', 'ckeditor') . '/js/plugins/drupallink/plugin.js',
     );
     $this->assertIdentical($enabled_plugins, $this->manager->getEnabledPluginFiles($editor), 'Only built-in plugins are enabled.');
     $this->assertIdentical(array('internal' => NULL) + $enabled_plugins, $this->manager->getEnabledPluginFiles($editor, TRUE), 'Only the "internal" plugin is enabled.');
 
-    // Enable the CKEditor Test module, which has the Llama plugin (plus three
+    // Enable the CKEditor Test module, which has the Llama plugin (plus four
     // variations of it, to cover all possible ways a plugin can be enabled) and
     // clear the editor manager's cache so it is picked up.
     $this->enableModules(array('ckeditor_test'));
@@ -80,7 +80,7 @@ function testEnabledPlugins() {
     // Case 2: CKEditor plugins are available.
     $plugin_ids = array_keys($this->manager->getDefinitions());
     sort($plugin_ids);
-    $this->assertIdentical(array('drupalimage', 'drupalimagecaption', 'drupallink', 'internal', 'llama', 'llama_button', 'llama_contextual', 'llama_contextual_and_button', 'stylescombo'), $plugin_ids, 'Additional CKEditor plugins found.');
+    $this->assertIdentical(array('drupalimage', 'drupalimagecaption', 'drupallink', 'internal', 'llama', 'llama_button', 'llama_contextual', 'llama_contextual_and_button', 'llama_css', 'stylescombo'), $plugin_ids, 'Additional CKEditor plugins found.');
     $this->assertIdentical($enabled_plugins, $this->manager->getEnabledPluginFiles($editor), 'Only the internal plugins are enabled.');
     $this->assertIdentical(array('internal' => NULL) + $enabled_plugins, $this->manager->getEnabledPluginFiles($editor, TRUE), 'Only the "internal" plugin is enabled.');
 
@@ -91,21 +91,25 @@ function testEnabledPlugins() {
     //    part of another plugin!
     // c. LlamaButton: automatically enabled by adding its 'Llama' button.
     // d. LlamaContextualAndButton: enabled by either b or c.
+    // e. LlamaCSS: automatically enabled by add its 'LlamaCSS' button.
     // Below, we will first enable the "Llama" button, which will cause the
     // LlamaButton and LlamaContextualAndButton plugins to be enabled. Then we
     // will remove the "Llama" button and add the "Strike" button, which will
     // cause the LlamaContextual and LlamaContextualAndButton plugins to be
-    // enabled. Finally, we will add the "Strike" button back again, which would
-    // cause all three plugins to be enabled.
+    // enabled. Then we will add the "Strike" button back again, which would
+    // cause LlamaButton, LlamaContextual and LlamaContextualAndButton to be
+    // enabled. Finally, we will add the "LlamaCSS" button which would cause
+    // all four plugins to be enabled.
     $settings = $editor->getSettings();
     $original_toolbar = $settings['toolbar'];
     $settings['toolbar']['rows'][0][0]['items'][] = 'Llama';
     $editor->setSettings($settings);
     $editor->save();
     $file = array();
-    $file['b'] = 'core/modules/ckeditor/tests/modules/js/llama_button.js';
-    $file['c'] = 'core/modules/ckeditor/tests/modules/js/llama_contextual.js';
-    $file['cb'] = 'core/modules/ckeditor/tests/modules/js/llama_contextual_and_button.js';
+    $file['b'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_button.js';
+    $file['c'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_contextual.js';
+    $file['cb'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_contextual_and_button.js';
+    $file['css'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_css.js';
     $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual_and_button' => $file['cb']);
     $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton and LlamaContextualAndButton plugins are enabled.');
     $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LlamaButton and LlamaContextualAndButton plugins are enabled.');
@@ -122,6 +126,39 @@ function testEnabledPlugins() {
     $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual' => $file['c'], 'llama_contextual_and_button' => $file['cb']);
     $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton, LlamaContextual and LlamaContextualAndButton plugins are enabled.');
     $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LLamaButton, LlamaContextual and LlamaContextualAndButton plugins are enabled.');
+    $settings['toolbar']['rows'][0][0]['items'][] = 'LlamaCSS';
+    $editor->setSettings($settings);
+    $editor->save();
+    $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual' => $file['c'], 'llama_contextual_and_button' => $file['cb'], 'llama_css' => $file['css']);
+    $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton, LlamaContextual, LlamaContextualAndButton and LlamaCSS plugins are enabled.');
+    $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LLamaButton, LlamaContextual, LlamaContextualAndButton and LlamaCSS plugins are enabled.');
+  }
+
+  /**
+   * Tests the iframe instance CSS files of plugins.
+   */
+  function testCssFiles() {
+    $this->manager = $this->container->get('plugin.manager.ckeditor.plugin');
+    $editor = Editor::load('filtered_html');
+
+    // Case 1: no CKEditor iframe instance CSS file.
+    $this->assertIdentical(array(), $this->manager->getCssFiles($editor), 'No iframe instance CSS file found.');
+
+    // Enable the CKEditor Test module, which has the LlamaCss plugin and
+    // clear the editor manager's cache so it is picked up.
+    $this->enableModules(array('ckeditor_test'));
+    $this->manager = $this->container->get('plugin.manager.ckeditor.plugin');
+    $settings = $editor->getSettings();
+    // LlamaCss: automatically enabled by adding its 'LlamaCSS' button.
+    $settings['toolbar']['rows'][0][0]['items'][] = 'LlamaCSS';
+    $editor->setSettings($settings);
+    $editor->save();
+
+    // Case 2: CKEditor iframe instance CSS file.
+    $expected = array(
+      'llama_css' => array(drupal_get_path('module', 'ckeditor_test') . '/css/llama.css')
+    );
+    $this->assertIdentical($expected, $this->manager->getCssFiles($editor), 'Iframe instance CSS file found.');
   }
 
 }

core/modules/ckeditor/src/Tests/CKEditorTest.php

@@ -261,9 +261,21 @@ function testBuildContentsCssJSSetting() {
 
     // Enable the editor_test module, which implements hook_ckeditor_css_alter().
     $this->enableModules(array('ckeditor_test'));
-    $expected[] = file_url_transform_relative(file_create_url('core/modules/ckeditor/tests/modules/ckeditor_test.css'));
+    $expected[] = file_url_transform_relative(file_create_url(drupal_get_path('module', 'ckeditor_test') . '/ckeditor_test.css'));
     $this->assertIdentical($expected, $this->ckeditor->buildContentsCssJSSetting($editor), '"contentsCss" configuration part of JS settings built correctly while a hook_ckeditor_css_alter() implementation exists.');
 
+    // Enable LlamaCss plugin, which adds an additional CKEditor stylesheet.
+    $this->container->get('plugin.manager.editor')->clearCachedDefinitions();
+    $this->ckeditor = $this->container->get('plugin.manager.editor')->createInstance('ckeditor');
+    $this->container->get('plugin.manager.ckeditor.plugin')->clearCachedDefinitions();
+    $settings = $editor->getSettings();
+    // LlamaCss: automatically enabled by adding its 'LlamaCSS' button.
+    $settings['toolbar']['rows'][0][0]['items'][] = 'LlamaCSS';
+    $editor->setSettings($settings);
+    $editor->save();
+    $expected[] = file_url_transform_relative(file_create_url(drupal_get_path('module', 'ckeditor_test') . '/css/llama.css'));
+    $this->assertIdentical($expected, $this->ckeditor->buildContentsCssJSSetting($editor), '"contentsCss" configuration part of JS settings built correctly while a CKEditorPluginInterface implementation exists.');
+
     // Enable the Bartik theme, which specifies a CKEditor stylesheet.
     \Drupal::service('theme_handler')->install(['bartik']);
     \Drupal::service('theme_handler')->setDefault('bartik');

core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/Llama.php

@@ -19,9 +19,10 @@
  * CKEditorPluginButtonsInterface interface, there is no way of actually loading
  * this plugin.
  *
- * @see MetaContextual
- * @see MetaButton
- * @see MetaContextualAndButton
+ * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextual
+ * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaButton
+ * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextualAndButton
+ * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaCss
  *
  * @CKEditorPlugin(
  *   id = "llama",

core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/LlamaCss.php

+<?php
+
+/**
+ * @file
+ * Contains \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaCss.
+ */
+
+namespace Drupal\ckeditor_test\Plugin\CKEditorPlugin;
+
+use Drupal\ckeditor\CKEditorPluginButtonsInterface;
+use Drupal\ckeditor\CKEditorPluginCssInterface;
+use Drupal\editor\Entity\Editor;
+
+/**
+ * Defines a "LlamaCss" plugin, with an associated "llama" CSS.
+ *
+ * @CKEditorPlugin(
+ *   id = "llama_css",
+ *   label = @Translation("Llama CSS")
+ * )
+ */
+class LlamaCss extends Llama implements CKEditorPluginButtonsInterface, CKEditorPluginCssInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  function getButtons() {
+    return array(
+      'LlamaCSS' => array(
+        'label' => t('Insert Llama CSS'),
+      ),
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  function getCssFiles(Editor $editor) {
+    return array(
+      drupal_get_path('module', 'ckeditor_test') . '/css/llama.css'
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  function getFile() {
+    return drupal_get_path('module', 'ckeditor_test') . '/js/llama_css.js';
+  }
+
+}