FEATURE: CKE5 placeholder insert plugin

Configuration/NodeTypes.Finishers.Confirmation.yaml

@@ -17,4 +17,11 @@
           group: 'finisher'
           editor: 'Neos.Neos/Inspector/Editors/CodeEditor'
           editorOptions:
-            buttonLabel: i18n
+            buttonLabel: i18n
+          # Alternatively enable a rich text editor:
+          # editor: 'Neos.Neos/Inspector/Editors/RichTextEditor'
+          # editorOptions:
+          #   formatting:
+          #     placeholderInsert: true
+          #     strong: true
+          #     em: true

Configuration/NodeTypes.Finishers.Email.yaml

@@ -32,6 +32,13 @@
           editor: 'Neos.Neos/Inspector/Editors/CodeEditor'
           editorOptions:
             buttonLabel: i18n
+          # Alternatively enable a rich text editor:
+          # editor: 'Neos.Neos/Inspector/Editors/RichTextEditor'
+          # editorOptions:
+          #   formatting:
+          #     placeholderInsert: true
+          #     strong: true
+          #     em: true
     'recipientAddress':
       type: string
       ui:
@@ -102,4 +109,4 @@
       ui:
         label: i18n
         inspector:
-          group: 'finisher-attachments'
+          group: 'finisher-attachments'

Configuration/Settings.yaml

@@ -38,3 +38,9 @@ Neos:
         'form.selectOptions':
           label: 'Select options'
           collapsed: false
+
+    Ui:
+      resources:
+        javascript:
+          "Neos.Form.Builder:PlaceholderInsert":
+            resource: '${"resource://Neos.Form.Builder/Public/JavaScript/PlaceholderInsert/Plugin.js"}'

Resources/Private/PlaceholderInsert/.gitignore

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

Resources/Private/PlaceholderInsert/package.json

@@ -0,0 +1,15 @@
+{
+    "description": "PlaceholderInsert",
+    "license": "MIT",
+    "private": true,
+    "scripts": {
+        "build": "neos-react-scripts build",
+        "watch": "neos-react-scripts watch"
+    },
+    "devDependencies": {
+        "@neos-project/neos-ui-extensibility": "^1.3"
+    },
+    "neos": {
+        "buildTargetDirectory": "../../Public/JavaScript/PlaceholderInsert"
+    }
+}

Resources/Private/PlaceholderInsert/src/PlaceholderInsertDropdown.js

@@ -0,0 +1,77 @@
+import { connect } from "react-redux";
+import { SelectBox } from "@neos-project/react-ui-components";
+import React, { PureComponent } from "react";
+import { neos } from "@neos-project/neos-ui-decorators";
+import { $transform } from "plow-js";
+import { selectors } from "@neos-project/neos-ui-redux-store";
+
+export const parentNodeContextPath = contextPath => {
+  if (typeof contextPath !== "string") {
+    console.error("`contextPath` must be a string!"); // tslint:disable-line
+    return null;
+  }
+  const [path, context] = contextPath.split("@");
+
+  if (path.length === 0) {
+    // We are at top level; so there is no parent anymore!
+    return null;
+  }
+
+  return `${path.substr(0, path.lastIndexOf("/"))}@${context}`;
+};
+
+@connect(
+  $transform({
+    nodesByContextPath: selectors.CR.Nodes.nodesByContextPathSelector,
+    focusedNode: selectors.CR.Nodes.focusedSelector
+  })
+)
+@neos(globalRegistry => ({
+  i18nRegistry: globalRegistry.get("i18n"),
+  nodeTypeRegistry: globalRegistry.get(
+    "@neos-project/neos-ui-contentrepository"
+  )
+}))
+export default class PlaceholderInsertDropdown extends PureComponent {
+  handleOnSelect = value => {
+    this.props.executeCommand("placeholderInsert", value);
+  };
+
+  render() {
+    const [formPath, workspace] = parentNodeContextPath(
+      parentNodeContextPath(this.props.focusedNode.contextPath)
+    ).split("@");
+
+    const elementsPath = `${formPath}/elements@${workspace}`;
+
+    const elementsNode = this.props.nodesByContextPath[elementsPath];
+    if (!elementsNode) {
+      return null;
+    }
+    const options = elementsNode.children
+      .map(node => this.props.nodesByContextPath[node.contextPath])
+      .map(node => ({
+        value: node.properties.identifier || node.identifier,
+        label:
+          node.properties.label || node.properties.identifier || node.identifier
+      }));
+
+    if (options.length === 0) {
+      return null;
+    }
+
+    const placeholderLabel = this.props.i18nRegistry.translate(
+      "Neos.Form.Builder:Main:placeholder",
+      "Insert placeholder"
+    );
+
+    return (
+      <SelectBox
+        placeholder={placeholderLabel}
+        options={options}
+        onValueChange={this.handleOnSelect}
+        value={null}
+      />
+    );
+  }
+}

Resources/Private/PlaceholderInsert/src/index.js

@@ -0,0 +1 @@
+require("./manifest");

Resources/Private/PlaceholderInsert/src/manifest.js

@@ -0,0 +1,28 @@
+import manifest from "@neos-project/neos-ui-extensibility";
+import PlaceholderInsertDropdown from "./PlaceholderInsertDropdown";
+import placeholderInsertPlugin from "./placeholderInsertPlugin";
+import { $add, $get } from "plow-js";
+
+const addPlugin = (Plugin, isEnabled) => (ckEditorConfiguration, options) => {
+  if (!isEnabled || isEnabled(options.editorOptions, options)) {
+    ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
+    return $add("plugins", Plugin, ckEditorConfiguration);
+  }
+  return ckEditorConfiguration;
+};
+
+manifest("Neos.Form.Builder:PlaceholderInsert", {}, globalRegistry => {
+  const richtextToolbar = globalRegistry
+    .get("ckEditor5")
+    .get("richtextToolbar");
+  richtextToolbar.set("placeholderInsertt", {
+    component: PlaceholderInsertDropdown,
+    isVisible: $get("formatting.placeholderInsert")
+  });
+
+  const config = globalRegistry.get("ckEditor5").get("config");
+  config.set(
+    "placeholderInsert",
+    addPlugin(placeholderInsertPlugin, $get("formatting.placeholderInsert"))
+  );
+});

Resources/Private/PlaceholderInsert/src/placeholderInsertPlugin.js

@@ -0,0 +1,25 @@
+import { ModelText, Command, Plugin } from "ckeditor5-exports";
+
+class PlaceholderInsertCommand extends Command {
+  execute(value) {
+    const model = this.editor.model;
+    const doc = model.document;
+    const selection = doc.selection;
+    const placeholder = new ModelText("{" + value + "}");
+    model.insertContent(placeholder, selection);
+  }
+}
+
+export default class PlaceholderInsertPlugin extends Plugin {
+  static get pluginName() {
+    return "PlaceholderInsert";
+  }
+  init() {
+    const editor = this.editor;
+
+    editor.commands.add(
+      "placeholderInsert",
+      new PlaceholderInsertCommand(this.editor)
+    );
+  }
+}