Feature/79 ckeditor5v12 inspector (#81)

* Fixes #79 - provide ckeditor5v12+ inspector for better development/debugging

* Adjust readme

* Fixes typo in readme

README.md

@@ -15,3 +15,14 @@ structured information is exposed to typed data.
 2. Do any changes.
 3. Run `yarn build`.
 4. Commit the build result.
+
+### CKEditor5 inspector
+
+From V12 onwards CKEditor comes with a nifty [inspector](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html#ckeditor-5-inspector).
+To enable it follow these steps:
+
+1. Add a line to the `parameters` section of `development.services.yml`: `ckeditor5_sections.enable_inspector: true`
+2. Make sure to run `yarn install` in the `editor/`-subfolder to install it.
+3. Rebuild caches `drush cr`.
+
+Subsequently it will be attached automatically to all CKEditor5 instances.

ckeditor5_sections.editor.js

@@ -17,6 +17,10 @@
           $(element).val(editor.getData());
           $(element).attr('data-editor-value-is-changed', 'true');
         });
+        // Attach CKEditorInspector if available.
+        if (typeof CKEditorInspector !== 'undefined') {
+          CKEditorInspector.attach( editor );
+        }
       }).catch(error => {
         console.error(error.stack);
       });

ckeditor5_sections.module

@@ -10,6 +10,31 @@ use Drupal\ckeditor5_sections\Field\TextLongWithSectionsItem;
 use Drupal\ckeditor5_sections\Field\TextWithSummaryAndSectionsItem;
 use Drupal\ckeditor5_sections\Form\SectionsMediaLibraryUploadForm;
 
+/**
+ * Implements hook_ibrary_info_alter().
+ */
+function ckeditor5_sections_library_info_alter(&$libraries, $extension) {
+  if ($extension === 'ckeditor5_sections') {
+    // Add CKEditor5 inspector if enabled in e.g. development.settings.yml.
+    if (\Drupal::getContainer()->getParameter('ckeditor5_sections.enable_inspector')) {
+      /** @var \Drupal\Core\Extension\ModuleHandler $module_handler */
+      $module_handler = \Drupal::service('module_handler');
+      $module_path = $module_handler->getModule('ckeditor5_sections')->getPath();
+      $path_to_inspector_js = 'editor/node_modules/@ckeditor/ckeditor5-inspector/build/inspector.js';
+      // Ensure yarn has been run and the inspector dependency has retrieved.
+      if (file_exists(DRUPAL_ROOT . '/' . $module_path . '/' . $path_to_inspector_js)) {
+        $libraries['editor_build']['js']['editor/node_modules/@ckeditor/ckeditor5-inspector/build/inspector.js'] = ['preprocess' => FALSE];
+      }
+      else {
+        \Drupal::messenger()->addWarning(
+          t('CKEditor5 inspector is enabled but the javascript file (%path_to_inspector_js) could not be loaded, Make sure to run `yarn install` in the editor/ subfolder of the ckeditor5_sections-module and run `drush cr` again.', [
+            '%path_to_inspector_js' => $module_path . '/' . $path_to_inspector_js,
+          ]));
+      }
+    }
+  }
+}
+
 /**
  * Implements hook_views_data_alter().
  */

editor/package.json

@@ -28,6 +28,7 @@
     "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
+    "@ckeditor/ckeditor5-inspector": "^1.3.0",
     "patch-package": "^6.1.2",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",

editor/yarn.lock

@@ -134,6 +134,11 @@
     "@ckeditor/ckeditor5-ui" "^13.0.2"
     "@ckeditor/ckeditor5-utils" "^13.0.1"
 
+"@ckeditor/ckeditor5-inspector@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-inspector/-/ckeditor5-inspector-1.3.0.tgz#edd3162b8065d94a6683ce4b11b8bcff76e99177"
+  integrity sha512-P5b3/Uy5QHL4awSfhaYBfwo//umGnk2q7KjC6vBGoYm07HDMULNgfzUIAYckvncACY16yXesnqV2TniC1IplYw==
+
 "@ckeditor/ckeditor5-link@^11.1.1":
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-link/-/ckeditor5-link-11.1.1.tgz#c4b660235187aec631e22c815a061ff74cce2b7e"