Merge pull request #1 from PRGfx/fix-plugin

Author: PRGfx

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+tab_width = 4
+trim_trailing_whitespace = true

Resources/Private/build.js

@@ -0,0 +1,19 @@
+const build = require('esbuild');
+const extensibilityMap = require("@neos-project/neos-ui-extensibility/extensibilityMap.json");
+const isWatch = process.argv.includes('--watch');
+
+/** @type {import("esbuild").BuildOptions} */
+const options = {
+  logLevel: "info",
+  bundle: true,
+  target: "es2020",
+  entryPoints: { "Plugin": "src/index.js" },
+  outdir: "../Public/JavaScript",
+  alias: extensibilityMap
+}
+
+if (isWatch) {
+  build.context(options).then((ctx) => ctx.watch())
+} else {
+  build.build(options)
+}

Resources/Private/package.json

@@ -3,13 +3,11 @@
     "license": "GNU GPLv3",
     "private": true,
     "scripts": {
-        "build": "neos-react-scripts build",
-        "watch": "neos-react-scripts watch"
+      "build": "node build.js",
+      "watch": "node build.js --watch"
     },
     "devDependencies": {
-        "@neos-project/neos-ui-extensibility": "*"
-    },
-    "neos": {
-        "buildTargetDirectory": "../Public/JavaScript"
+        "@neos-project/neos-ui-extensibility": "~8.3",
+        "esbuild": "^0.25.5"
     }
 }

Resources/Private/src/manifest.js

@@ -1,6 +1,13 @@
 import manifest from '@neos-project/neos-ui-extensibility';
 import { selectors } from '@neos-project/neos-ui-redux-store';
 
+/**
+ * from @neos-project/utils-helpers
+ * @param {string} value
+ * @return {string}
+ */
+const stripTags = (value) => value.replace(/<\/?[^>]+(>|$)/g, '');
+
 /**
  * Evaluates a ClientEval: expression with node and editorOptions in scope
  * @param {string} input The ClientEval expression
@@ -9,63 +16,51 @@ import { selectors } from '@neos-project/neos-ui-redux-store';
  * @returns {any}
  */
 const clientEval = (input, node, editorOptions) => {
-    return eval(input);
+    const evaluateFn = new Function('node,editorOptions', 'return ' + input);
+    return evaluateFn(node, editorOptions);
 }
 
-/**
- * Augments the NeosPlaceholder plugin
- * @param {Function} plugin The original plugin
- * @param {(contextPath: string) => object} findNode A helper to find the node data for evaluation
- * @param {object} editorOptions The inline editorOptions
- * @returns {Function} A decorated version of the plugin
- */
-const decoratePlaceholderPlugin = (plugin, findNode, editorOptions) => {
-    const originalGetPlaceholder = plugin.prototype.getPlaceholder;
-    plugin.prototype.getPlaceholder = function () {
-        const originalPlaceholder = originalGetPlaceholder.apply(this);
-        if (originalPlaceholder.startsWith('ClientEval:')) {
-            if (this.editor && this.editor.neos && this.editor.neos.contextPath) {
+manifest('Prgfx.Neos.DynamicPlaceholder', {}, (globalRegistry, {store}) => {
+    const ckeRegistry = globalRegistry.get('ckEditor5');
+    const ckeConfig = ckeRegistry.get('config');
+    const existingConfig = ckeConfig.get('baseConfiguration');
+    if (!existingConfig) return;
+
+    const getNodeByContextPath = path => selectors.CR.Nodes.makeGetNodeByContextPathSelector(path)(store.getState());
+
+    const decoratedConfig = (ckEditorConfiguration, options) => {
+        const {editorOptions, propertyDomNode} = options;
+        const baseConfig = existingConfig(ckEditorConfiguration, options);
+        const contextPath = propertyDomNode?.getAttribute('data-__neos-editable-node-contextpath')
+            ?? propertyDomNode?.getAttribute('data-__neos-node-contextpath');
+        const originalPlaceholder = baseConfig.placeholder ?? editorOptions.placeholder;
+
+        if (originalPlaceholder && originalPlaceholder.startsWith('ClientEval:')) {
+            if (contextPath) {
+                const i18nRegistry = globalRegistry.get('i18n');
                 try {
-                    const node = findNode(this.editor.neos.contextPath);
+                    const node = getNodeByContextPath(contextPath);
                     if (node) {
-                        return clientEval(originalPlaceholder.substring(11), node, editorOptions).toString();
+                        let evaluatedPlaceholder = clientEval(originalPlaceholder.substring(11), node, editorOptions).toString();
+                        evaluatedPlaceholder = stripTags(i18nRegistry.translate(evaluatedPlaceholder));
+
+                        if (evaluatedPlaceholder) {
+                            return {
+                                ...baseConfig,
+                                placeholder: evaluatedPlaceholder,
+                            };
+                        }
                     }
                 } catch (e) {
+                    console.warn('[Prgfx.Neos.DynamicPlaceholder] Could not evaluate ClientEval placeholder', originalPlaceholder, e);
                 }
+            } else {
+                console.warn('[Prgfx.Neos.DynamicPlaceholder] Could not find contextPath for ClientEval placeholder', originalPlaceholder);
             }
         }
-        return originalPlaceholder;
-    };
 
-    // for some reason editor.neos is not yet available when initializing the plugin
-    const originalInit = plugin.prototype.init;
-    plugin.prototype.init = function() {
-        const init = originalInit.bind(this);
-        if (!this.editor || !this.editor.neos) {
-            setTimeout(() => init(), 100);
-        } else {
-            init();
-        }
+        return baseConfig;
     };
 
-    return plugin;
-}
-
-manifest('Prgfx.Neos.DynamicPlaceholder', {}, (globalRegistry, { store }) => {
-    const ckeRegistry = globalRegistry.get('ckEditor5');
-    const ckeConfig = ckeRegistry.get('config');
-    const addExistingPlugin = ckeConfig.get('neosPlaceholder');
-    if (!addExistingPlugin) return;
-
-    const getNodeByContextPath = path => selectors.CR.Nodes.makeGetNodeByContextPathSelector(path)(store.getState());
-
-    const decorateAddedPlugin = (ckEditorConfiguration, options) => {
-        const r = addExistingPlugin(ckEditorConfiguration, options);
-        const index = r.plugins.findIndex(p => p.pluginName === 'NeosPlaceholder');
-        if (index >= 0) {
-            r.plugins[index] = decoratePlaceholderPlugin(r.plugins[index], getNodeByContextPath, options.editorOptions);
-        }
-        return r;
-    };
-    ckeConfig.set('neosPlaceholder', decorateAddedPlugin);
+    ckeConfig.set('baseConfiguration', decoratedConfig);
 });