2.0.x: rewrite of plugin to work with ckeditor5

.gitignore

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

css/step.admin.css

@@ -0,0 +1,3 @@
+.ckeditor5-toolbar-button-step {
+  background-image: url(../icons/step.svg);
+}

js/ckeditor5_plugins/step/src/index.js

@@ -0,0 +1,14 @@
+/**
+ * @file The build process always expects an index.js file. Anything exported
+ * here will be recognized by CKEditor 5 as an available plugin. Multiple
+ * plugins can be exported in this one file.
+ *
+ * I.e. this file's purpose is to make plugin(s) discoverable.
+ */
+// cSpell:ignore step
+
+import Step from './step';
+
+export default {
+  Step,
+};

js/ckeditor5_plugins/step/src/insertstepcommand.js

@@ -0,0 +1,17 @@
+/**
+ * @file defines InsertstepCommand, which is executed when the step
+ * toolbar button is pressed.
+ */
+// cSpell:ignore stepediting
+
+import { Command } from 'ckeditor5/src/core';
+
+export default class InsertStepCommand extends Command {
+  execute() {
+    const { model } = this.editor;
+
+    model.change(writer => {
+      writer.insertText('[step]Step Text[/step]', model.document.selection.getFirstPosition());
+    });
+  }
+}

js/ckeditor5_plugins/step/src/step.js

@@ -0,0 +1,24 @@
+/**
+ * @file This is what CKEditor refers to as a master (glue) plugin. Its role is
+ * just to load the “editing” and “UI” components of this Plugin. Those
+ * components could be included in this file, but
+ *
+ * I.e, this file's purpose is to integrate all the separate parts of the plugin
+ * before it's made discoverable via index.js.
+ */
+// cSpell:ignore stepediting stepui
+
+// The contents of StepUI and Step editing could be included in this
+// file, but it is recommended to separate these concerns in different files.
+import StepEditing from './stepediting';
+import StepUI from './stepui';
+import { Plugin } from 'ckeditor5/src/core';
+
+export default class Step extends Plugin {
+  // Note that StepEditing and StepUI also extend `Plugin`, but these
+  // are not seen as individual plugins by CKEditor 5. CKEditor 5 will only
+  // discover the plugins explicitly exported in index.js.
+  static get requires() {
+    return [StepEditing, StepUI];
+  }
+}

js/ckeditor5_plugins/step/src/stepediting.js

@@ -0,0 +1,31 @@
+import { Plugin } from 'ckeditor5/src/core';
+import { Widget } from 'ckeditor5/src/widget';
+import InsertStepCommand from './insertstepcommand';
+
+// cSpell:ignore step insertstepcommand
+
+/**
+ * CKEditor 5 plugins do not work directly with the DOM. They are defined as
+ * plugin-specific data models that are then converted to markup that
+ * is inserted in the DOM.
+ *
+ * CKEditor 5 inserts:
+ * <step>
+ *    Step Text
+ * </step>
+ *
+ * This file has the logic for defining the step model, and for how it is
+ * converted to standard DOM markup.
+ */
+export default class Step extends Plugin {
+  static get requires() {
+    return [Widget];
+  }
+
+  init() {
+    this.editor.commands.add(
+      'insertStep',
+      new InsertStepCommand(this.editor),
+    );
+  }
+}

js/ckeditor5_plugins/step/src/stepui.js

@@ -0,0 +1,36 @@
+/**
+ * @file registers the step toolbar button and binds functionality to it.
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+import icon from '../../../../icons/step.svg';
+
+export default class StepUI extends Plugin {
+  init() {
+    const editor = this.editor;
+
+    // This will register the  toolbar button.
+    editor.ui.componentFactory.add('step', (locale) => {
+      const command = editor.commands.get('insertStep');
+      const buttonView = new ButtonView(locale);
+
+      // Create the toolbar button.
+      buttonView.set({
+        label: editor.t('Step'),
+        icon,
+        tooltip: true,
+      });
+
+      // Bind the state of the button to the command.
+      buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
+
+      // Execute the command when the button is clicked (executed).
+      this.listenTo(buttonView, 'execute', () =>
+        editor.execute('insertStep'),
+      );
+
+      return buttonView;
+    });
+  }
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "drupal-ckeditor5",
+  "version": "1.0.0",
+  "description": "Drupal CKEditor 5 integration",
+  "author": "",
+  "license": "GPL-2.0-or-later",
+  "scripts": {
+    "watch": "webpack --mode development --watch",
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
+    "ckeditor5": "~34.1.0",
+    "raw-loader": "^4.0.2",
+    "terser-webpack-plugin": "^5.2.0",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.4.0"
+  }
+}

step.ckeditor5.yml

@@ -0,0 +1,43 @@
+# 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 step demobox
+
+step_step:
+  # Use the provider: property for this plugin to depend on another module.
+
+  # Configuration that will be sent to CKEditor 5 JavaScript plugins.
+  ckeditor5:
+    plugins:
+      - step.Step
+    # *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: Add step to tutorials
+    # The library loaded while using the editor.
+    library: step/step
+    # The library loaded when configuring the text format using this plugin.
+    admin_library: step/admin.step
+    toolbar_items:
+      # This should match the name of the corresponding plugin exported in the
+      # plugin's index.js.
+      step:
+        label: Add step to tutorials
+    # If the plugin does not provide elements, set this as
+    # `elements: false`
+    elements: false
+      # 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">`).
+    # *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.

step.info.yml

@@ -1,8 +1,7 @@
-name: CKEditor Tutorial Step
+name: Step
 type: module
-description: Adds a step button to CKeditor.
-core: 8.x
-core_version_requirement: ^8 || ^9
-package: CKEditor
+description: "CKEditor tutorial step button"
+package: CKEditor 5
+core_version_requirement: ^9 || ^10
 dependencies:
-  - ckeditor
+  - drupal:ckeditor5

step.libraries.yml

@@ -0,0 +1,15 @@
+# This adds the plugin JavaScript to the page.
+# cSpell:ignore step
+
+step:
+  js:
+    js/build/step.js: { preprocess: false, minified: true }
+  dependencies:
+    - core/ckeditor5
+
+# Loaded in the text format configuration form to provide styling for the icon
+# used in toolbar config.
+admin.step:
+  css:
+    theme:
+      css/step.admin.css: { }