Fixed injection of CKEditor stylesheet

web/profiles/custom/os2loop/modules/os2loop_documents/ckeditor/os2loop_documents_table.css

@@ -1,27 +1,29 @@
-/* Cherry pick some styling from os2loop_theme/assets/documents.scss. */
-table {
+/* Cherry pick some styling from os2loop_theme/assets/documents.scss and prefix
+ * with .ck-editor to only target content in CKEditor
+ */
+.ck-content table {
   width: 100%;
 }
 
-th {
+.ck-content th {
   background: #ccc;
   text-align: center;
 }
 
-th,
-td {
+.ck-content th,
+.ck-content td {
   vertical-align: top;
 }
 
-.number,
-.right {
+.ck-content .number,
+.ck-content .right {
   text-align: right;
 }
 
-.left {
+.ck-content .left {
   text-align: left;
 }
 
-.center {
+.ck-content .center {
   text-align: center;
 }

web/profiles/custom/os2loop/modules/os2loop_documents/os2loop_documents.libraries.yml

@@ -0,0 +1,6 @@
+# @see https://www.drupal.org/docs/contributed-themes/gin-admin-theme/custom-theming#s-module-recommended-way.
+ckeditor:
+  version: 1.x
+  css:
+    theme:
+      ckeditor/os2loop_documents_table.css: {}

web/profiles/custom/os2loop/modules/os2loop_documents/os2loop_documents.module

@@ -8,7 +8,6 @@
 use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\editor\Entity\Editor;
 use Drupal\os2loop_documents\Helper\FormHelper;
 use Drupal\os2loop_documents\Helper\Helper;
 use Drupal\os2loop_documents\Helper\NodeHelper;
@@ -68,10 +67,10 @@ function os2loop_documents_theme($existing, $type, $theme, $path) {
 }
 
 /**
- * Implements hook_ckeditor_css_alter().
+ * Implements hook_page_attachments().
  *
- * @see \Drupal\os2loop_documents\Helper\Helper::alterCkeditorCss()
+ * @see \Drupal\os2loop_documents\Helper\Helper::pageAttachments()
  */
-function os2loop_documents_ckeditor_css_alter(array &$css, Editor $editor) {
-  \Drupal::service(Helper::class)->alterCkeditorCss($css, $editor);
+function os2loop_documents_page_attachments(array &$attachments) {
+  \Drupal::service(Helper::class)->pageAttachments($attachments);
 }

web/profiles/custom/os2loop/modules/os2loop_documents/os2loop_documents.services.yml

@@ -1,7 +1,7 @@
 services:
   Drupal\os2loop_documents\Helper\Helper:
     arguments:
-      - '@module_handler'
+      - '@current_route_match'
 
   Drupal\os2loop_documents\Helper\CollectionHelper:
     arguments:

web/profiles/custom/os2loop/modules/os2loop_documents/src/Helper/Helper.php

@@ -2,37 +2,34 @@
 
 namespace Drupal\os2loop_documents\Helper;
 
-use Drupal\Core\Extension\ModuleHandlerInterface;
-use Drupal\editor\Entity\Editor;
+use Drupal\Core\Routing\RouteMatchInterface;
 
 /**
  * A helper.
  */
 class Helper {
-  /**
-   * The module handler.
-   *
-   * @var \Drupal\Core\Extension\ModuleHandlerInterface
-   */
-  private $moduleHandler;
 
   /**
    * Constructor.
    */
-  public function __construct(ModuleHandlerInterface $moduleHandler) {
-    $this->moduleHandler = $moduleHandler;
+  public function __construct(
+    private readonly RouteMatchInterface $routeMatch
+  ) {
   }
 
   /**
-   * Implements hook_ckeditor_css_alter().
+   * Implements hook_page_attachments().
    *
-   * Injects custom css into CKEditor instances based on text format.
+   * Injects custom CSS into CKEditor5 the Gin way (cf.
+   * https://www.drupal.org/docs/contributed-themes/gin-admin-theme/custom-theming#s-module-recommended-way).
    */
-  public function alterCkeditorCss(array &$css, Editor $editor) {
-    $format = $editor->getFilterFormat()->id();
-    $cssPath = $this->moduleHandler->getModule('os2loop_documents')->getPath() . '/ckeditor/' . $format . '.css';
-    if (file_exists($cssPath)) {
-      $css[] = $cssPath;
+  public function pageAttachments(array &$attachments) {
+    if (in_array($this->routeMatch->getRouteName(), [
+      'node.add',
+      'entity.node.edit_form',
+      'paragraphs_edit.edit_form',
+    ], TRUE)) {
+      $attachments['#attached']['library'][] = 'os2loop_documents/ckeditor';
     }
   }