Merge pull request #2071 from vrk-kpa/AV-2017_update_ckeditor_and_cus…

…tom_plugins

AV-2017:  Reimplement our custom CKEditor plugins for CKEditor5

docker/.env.nginx.local

@@ -4,6 +4,6 @@ NGINX_ROOT=/var/www/html
 NGINX_MAX_BODY_SIZE=5000M
 NGINX_EXPIRES=1h
 NGINX_CSP_DEFAULT_SRC=""
-NGINX_CSP_SCRIPT_SRC="platform.twitter.com syndication.twitter.com cdn.syndication.twimg.com https://www.google.com/recaptcha/ https://www.gstatic.com/ https://www.google.com cdn.matomo.cloud suomi.matomo.cloud browser.sentry-cdn.com"
+NGINX_CSP_SCRIPT_SRC="platform.twitter.com syndication.twitter.com cdn.syndication.twimg.com https://www.google.com/recaptcha/ https://www.gstatic.com/ https://www.google.com cdn.matomo.cloud suomi.matomo.cloud browser.sentry-cdn.com https://unpkg.com/@ckeditor/ckeditor5-inspector/build/inspector.js"
 NGINX_CSP_STYLE_SRC="https://fonts.googleapis.com https://platform.twitter.com https://ton.twimg.com https://www.google.com https://ajax.googleapis.com https://www.gstatic.com"
 NGINX_CSP_FRAME_SRC="syndication.twitter.com https://platform.twitter.com https://www.google.com/recaptcha/"

docker/README.md

@@ -23,7 +23,7 @@ This folder contains dockerized versions of the opendata services.
   * ../ckan/
     * ckan docker image
   * ../drupal
-    * drupal docker image 
+    * drupal docker image
 
 ## Build requirements
 
@@ -157,6 +157,7 @@ services:
       - ../drupal/modules/avoindata-guide/:/opt/drupal/web/modules/avoindata-guide
       - ../drupal/modules/avoindata-user/:/opt/drupal/web/modules/avoindata-user
       - ../drupal/modules/avoindata-ckeditor-plugins/:/opt/drupal/web/modules/avoindata-ckeditor-plugins
+      - ../drupal/modules/avoindata-ckeditor5-plugins/:/opt/drupal/web/modules/avoindata-ckeditor5-plugins
       - ../drupal/modules/avoindata-theme:/opt/drupal/web/themes/avoindata
       - ../opendata-assets:/opt/drupal/web/modules/opendata-assets
       - /opt/drupal/web/modules/opendata-assets/node_modules/

drupal/Dockerfile

@@ -101,6 +101,7 @@ COPY modules/avoindata-ckeditor-plugins     ${MOD_DIR}/avoindata-ckeditor-plugin
 COPY modules/avoindata-theme                ${MOD_DIR}/avoindata-theme/
 COPY modules/avoindata-appfeed              ${MOD_DIR}/avoindata-appfeed/
 COPY modules/avoindata-datasetlist          ${MOD_DIR}/avoindata-datasetlist/
+COPY modules/avoindata-ckeditor5-plugins    ${MOD_DIR}/avoindata-ckeditor5-plugins/
 
 
 #

drupal/composer.json

@@ -139,9 +139,10 @@
     },
     "require-dev": {
         "dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",
+        "drupal/ckeditor5_dev": "^1.0",
         "drupal/core-dev": "^9.2",
         "drupal/devel": "^4.1",
         "kint-php/kint": "^5.0",
         "squizlabs/php_codesniffer": "^3.6"
     }
-}
+}

drupal/modules/avoindata-ckeditor5-plugins/.gitignore

@@ -0,0 +1 @@
+node_modules

drupal/modules/avoindata-ckeditor5-plugins/README.md

@@ -0,0 +1,22 @@
+## This module is modified from the [CKEditor 5 plugin development starter template](https://git.drupalcode.org/project/ckeditor5_dev/-/tree/1.0.3/ckeditor5_plugin_starter_template)
+
+To facilitate easier development of modules that provide CKEditor 5 plugins,
+developers may copy the contents of this directory to the root of their module
+directory. This provides the basic build tools and directory structure for
+creating CKEditor 5 plugins within a contributed module, as well as a basic
+working plugin based on the [CKEditor 5 block plugin tutorial](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html)
+but with additional documentation and minor changes for better integration
+with Drupal.
+
+When Drupal updates to use newer versions of CKEditor 5, it may be necessary to
+update any files copied from here to your module.
+
+Plugin source should be added to `src/{pluginNameDirectory}` and the build tools expect this directory to include an
+`index.js` file that exports one or more CKEditor 5 plugins.
+
+In the module directory, run `npm install` to set up the necessary assets. The
+initial run of `install` may take a few minutes, but subsequent builds will be
+faster.
+
+After installing dependencies, plugins can be built with `npm build`.
+They will be built to `js/{pluginNameDirectory}.js`.

drupal/modules/avoindata-ckeditor5-plugins/avoindata_ckeditor5_plugins.ckeditor5.yml

@@ -0,0 +1,174 @@
+# Example from https://git.drupalcode.org/project/ckeditor5_dev/-/blob/1.0.3/ckeditor5_plugin_starter_template/MODULE_NAME.ckeditor5.yml
+# If using yml to configure plugins, rename this to {module_name}.ckeditor5.yml.
+# If using annotations, this file can be removed.
+# @see https://www.drupal.org/docs/drupal-apis/plugin-api/annotations-based-plugins
+#   For information on using annotations to define plugins.
+# @see the CKEditor 5 module's README.md for more details regarding plugin
+#   configuration options.
+# cSpell:ignore simplebox demobox
+
+#MODULE_NAME_demo_simplebox:
+#  # Use the provider: property for this plugin to depend on another module.
+#
+#  # Configuration that will be sent to CKEditor 5 JavaScript plugins.
+#  ckeditor5:
+#    plugins:
+#      - demoPlugin.SimpleBox
+#    # *Additional configuration properties*
+#    # config: data sent to the constructor of any CKEditor 5 plugin
+#    #   editorPluginName:
+#    #     editorPluginProperty: editorPluginValue
+#
+#  # Configuration that will be used directly by Drupal.
+#  drupal:
+#    label: Simple box demo
+#    # The library loaded while using the editor.
+#    library: MODULE_NAME/demobox
+#    # The library loaded when configuring the text format using this plugin.
+#    admin_library: MODULE_NAME/admin.demobox
+#    toolbar_items:
+#      # This should match the name of the corresponding plugin exported in the
+#      # plugin's index.js.
+#      simpleBox:
+#        label: Simple box demo
+#    # If the plugin does not provide elements, set this as
+#    # `elements: false`
+#    elements:
+#      # Note that it necessary for elements to separately provide both the tag
+#      # (f.e. `<h2>`) and the attribute being added to the tag
+#      # (f.e. `<h2 class="simple-box-title">`).
+#      - <h2>
+#      - <h2 class="simple-box-title">
+#      - <div>
+#      - <div class="simple-box-description">
+#      - <section>
+#      - <section class="simple-box">
+#    # *Additional configuration properties*
+#    # conditions: for setting additional criteria that must be met for the
+#    #   plugin to be active.
+#    # class: Optional PHP class that makes it possible for the plugin to provide
+#    #   dynamic values, or a configuration UI.
+
+avoindata_ckeditor5_plugins_avoindataexternallink:
+  ckeditor5:
+    plugins:
+      - avoindataExternalLink.AvoindataExternalLink
+    config:
+      link:
+        decorators:
+          isExternal:
+            mode: manual
+            label: Open in a new tab
+            attributes:
+              target: '_blank'
+              aria-label: 'Leads to external site'
+            classes:
+              - 'external-link'
+  drupal:
+    label: Link
+    library: avoindata_ckeditor5_plugins/avoindataExternalLink
+    elements:
+      - <a>
+      - <a target="_blank">
+      - <a class="external-link">
+      - <a aria-label="">
+      - <i>
+      - <i class="fas fa-external-link-alt">
+
+avoindata_ckeditor5_plugins_avoindataexpander:
+  ckeditor5:
+    plugins:
+      - avoindataExpander.AvoindataExpander
+  drupal:
+    label: Avoindata Expander
+    library: avoindata_ckeditor5_plugins/avoindataExpander
+    admin_library: avoindata_ckeditor5_plugins/toolbarIcons
+    toolbar_items:
+      avoindataExpander:
+        label: Avoindata Expander
+    elements:
+      - <div>
+      - <div class="avoindata-expander-header">
+      - <div class="avoindata-expander-title">
+      - <span>
+      - <span class="icon-wrapper pull-right">
+      - <i>
+      - <i class="fas fa-angle-down">
+      - <div class="avoindata-expander-content">
+
+avoindata_ckeditor5_plugins_avoindatanote:
+  ckeditor5:
+    plugins:
+      - avoindataNote.AvoindataNote
+  drupal:
+    label: Avoindata Note
+    library: avoindata_ckeditor5_plugins/avoindataNote
+    admin_library: avoindata_ckeditor5_plugins/toolbarIcons
+    toolbar_items:
+      avoindataNote:
+        label: Avoindata Note
+    elements:
+      - <div>
+      - <div class="avoindata-note">
+      - <div class="avoindata-note-header">
+      - <img>
+      - <img class="avoindata-note-icon">
+      - <div class="avoindata-note-title">
+      - <div class="avoindata-note-content">
+
+avoindata_ckeditor5_plugins_avoindatahint:
+  ckeditor5:
+    plugins:
+      - avoindataHint.AvoindataHint
+  drupal:
+    label: Avoindata Hint
+    library: avoindata_ckeditor5_plugins/avoindataHint
+    admin_library: avoindata_ckeditor5_plugins/toolbarIcons
+    toolbar_items:
+      avoindataHint:
+        label: Avoindata Hint
+    elements:
+      - <div>
+      - <div class="avoindata-hint">
+      - <div class="avoindata-hint-header">
+      - <img>
+      - <img class="avoindata-hint-icon">
+      - <div class="avoindata-hint-content">
+
+avoindata_ckeditor5_plugins_avoindataexample:
+  ckeditor5:
+    plugins:
+      - avoindataExample.AvoindataExample
+  drupal:
+    label: Avoindata Example
+    library: avoindata_ckeditor5_plugins/avoindataExample
+    admin_library: avoindata_ckeditor5_plugins/toolbarIcons
+    toolbar_items:
+      avoindataExample:
+        label: Avoindata Example
+    elements:
+      - <div>
+      - <div class="avoindata-example">
+      - <div class="avoindata-example-header">
+      - <div class="avoindata-example-title">
+      - <div class="avoindata-example-content">
+
+avoindata_ckeditor5_plugins_avoindatasection:
+  ckeditor5:
+    plugins:
+      - avoindataSection.AvoindataSection
+  drupal:
+    label: Avoindata Example
+    library: avoindata_ckeditor5_plugins/avoindataSection
+    admin_library: avoindata_ckeditor5_plugins/toolbarIcons
+    toolbar_items:
+      avoindataSection:
+        label: Avoindata Section
+    elements:
+      - <div>
+      - <div id>
+      - <div class id>
+      - <div class="avoindata-section">
+      - <div class="avoindata-section-id">
+      - <div class="avoindata-section-title">
+      - <div class="avoindata-section-content">

drupal/modules/avoindata-ckeditor5-plugins/avoindata_ckeditor5_plugins.info.yml

@@ -0,0 +1,7 @@
+name: Avoindata Drupal CKEditor5 plugins
+type: module
+description: Adds Expander, Note, Hint, Example and Section custom elements to CKEditor5.
+core_version_requirement: ^9 || ^10
+package: Custom
+dependencies:
+  - drupal:ckeditor5

drupal/modules/avoindata-ckeditor5-plugins/avoindata_ckeditor5_plugins.libraries.yml

@@ -0,0 +1,62 @@
+# This adds the plugin JavaScript to the page.
+
+avoindataExternalLink:
+  css:
+    theme:
+      css/styles.css: {}
+  js:
+    js/avoindataExternalLink.js: { preprocess: false, minified: true }
+  dependencies:
+    - core/ckeditor5
+
+avoindataExpander:
+  css:
+    theme:
+      css/styles.css: {}
+  js:
+    js/avoindataExpander.js: { preprocess: false, minified: false }
+  dependencies:
+    - core/ckeditor5
+
+avoindataNote:
+  css:
+    theme:
+      css/styles.css: {}
+  js:
+    js/avoindataNote.js: { preprocess: false, minified: false }
+  dependencies:
+    - core/ckeditor5
+
+avoindataHint:
+  css:
+    theme:
+      css/styles.css: {}
+  js:
+    js/avoindataHint.js: { preprocess: false, minified: false }
+  dependencies:
+    - core/ckeditor5
+
+avoindataExample:
+  css:
+    theme:
+      css/styles.css: {}
+  js:
+    js/avoindataExample.js: { preprocess: false, minified: false }
+  dependencies:
+    - core/ckeditor5
+
+avoindataSection:
+  css:
+    theme:
+      css/styles.css: {}
+  js:
+    js/avoindataSection.js: { preprocess: false, minified: false }
+  dependencies:
+    - core/ckeditor5
+
+# Loaded in the text format configuration form to provide styling for the icon
+# used in toolbar config.
+toolbarIcons:
+  css:
+    theme:
+      css/toolbar-icons.css: {}