initial commit 🎆

breadlesscode · breadlesscode · commit 3249de2fa453 · 2019-05-21T18:47:34.000+02:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[*.{php,yaml}]
+insert_final_newline = true
+
+[*.yaml]
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/Classes/Controller/CkeditorConfigurationController.php b/Classes/Controller/CkeditorConfigurationController.php
@@ -0,0 +1,22 @@
+<?php
+namespace Breadlesscode\SimpleEditorExtend\Controller;
+
+use Neos\Flow\Annotations as Flow;
+use Neos\Flow\Mvc\Controller\ActionController;
+
+/**
+ * @Flow\Scope("singleton")
+ */
+class CkeditorConfigurationController extends ActionController
+{
+    /**
+   * @Flow\InjectConfiguration(path="buttons")
+   * @var array
+     */
+    protected $ckeditorConfig;
+
+    public function configAction()
+    {
+        return \json_encode($this->ckeditorConfig);
+    }
+}
diff --git a/Configuration/Policy.yaml b/Configuration/Policy.yaml
@@ -0,0 +1,10 @@
+privilegeTargets:
+  'Neos\Flow\Security\Authorization\Privilege\Method\MethodPrivilege':
+    'Breadlesscode.SimpleEditorExtend:EditorConfig.AjaxEndpoint':
+      matcher: 'method(Breadlesscode\SimpleEditorExtend\Controller\CkeditorConfigurationController->configAction())'
+roles:
+  'Neos.Flow:Everybody': ## Neos.Neos:AbstractEditor
+    privileges:
+      -
+        privilegeTarget: 'Breadlesscode.SimpleEditorExtend:EditorConfig.AjaxEndpoint'
+        permission: GRANT
diff --git a/Configuration/Routes.yaml b/Configuration/Routes.yaml
@@ -0,0 +1,7 @@
+-
+  name: 'Ajax endpoint for simple editor config'
+  uriPattern: 'breadlesscode/editor-config'
+  defaults:
+    '@package': 'Breadlesscode.SimpleEditorExtend'
+    '@controller': 'CkeditorConfiguration'
+    '@action': 'config'
diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml
@@ -0,0 +1,11 @@
+Neos:
+  Neos:
+    Ui:
+      resources:
+        javascript:
+          'Breadlesscode.SimpleEditorExtend:UiPlugin':
+            resource: resource://Breadlesscode.SimpleEditorExtend/Public/UiPlugin/Plugin.js
+  Flow:
+    mvc:
+      routes:
+        'Breadlesscode.SimpleEditorExtend': TRUE
diff --git a/Documentation/preview.gif b/Documentation/preview.gif
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+  
+MIT License
+
+Copyright (c) 2018 Marvin Kuhn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,61 @@
+# Neos simple editor extend
+
+This is a small plugin to simply add some buttons to the Neos CMS CKEditor, without writing any JavaScript code. You only need to compose a YAML-File. 
+
+## Installation
+Most of the time you have to make small adjustments to a package (e.g., the configuration in Settings.yaml). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site package located under Packages/Sites/. To install it correctly go to your theme package (e.g.Packages/Sites/Foo.Bar) and run following command:
+
+```bash
+composer require breadlesscode/simple-editor-extend --no-update
+```
+
+The --no-update command prevent the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the root of the Neos installation and run composer update. Your desired package is now installed correctly.
+
+## Demo
+
+![result demo image](Documentation/preview.gif "Example for the configuration below")
+
+## Example configuration
+
+```yaml
+Breadlesscode:
+    SimpleEditorExtend:
+      buttons:
+        'Test.Test:MyCustomSpan':
+          extensionName: 'exampleExtension'
+          icon: 'plus-square'
+          tooltip: 'Mark the text in color green'
+          position: 'before strong'
+          formatting:
+            tag: 'span'
+            classes: 'test-class'
+            styles:
+              background-color: 'green'
+        'Test.Test:MyCustomSpan2':
+          extensionName: 'exampleExtension2'
+          icon: 'rocket'
+          tooltip: 'Mark the text in color lime'
+          position: 'before exampleExtension'
+          formatting:
+            tag: 'span'
+            classes: 'test-class-2'
+            styles:
+              background-color: 'lime'
+```
+
+Now you can use your new formattings like this:
+
+```yaml
+'Neos.NodeTypes.BaseMixins:TextMixin':
+  properties:
+    text:
+      ui:
+        inline:
+          editorOptions:
+            formatting:
+              'Test.Test:MyCustomSpan': true
+              'Test.Test:MyCustomSpan2': true
+```
+
+## License
+The MIT License (MIT). Please see [License File](LICENSE) for more information.
diff --git a/Resources/Private/UiPlugin/.nvmrc b/Resources/Private/UiPlugin/.nvmrc
@@ -0,0 +1 @@
+10.15.3
diff --git a/Resources/Private/UiPlugin/package.json b/Resources/Private/UiPlugin/package.json
@@ -0,0 +1,17 @@
+{
+  "description": "Simple Neos editor extend plugin",
+  "license": "MIT",
+  "scripts": {
+    "build": "neos-react-scripts build",
+    "watch": "neos-react-scripts watch"
+  },
+  "devDependencies": {
+    "@neos-project/neos-ui-extensibility": "*"
+  },
+  "neos": {
+    "buildTargetDirectory": "../../Public/UiPlugin"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^10.0.0"
+  }
+}
diff --git a/Resources/Private/UiPlugin/src/ButtonComponent.js b/Resources/Private/UiPlugin/src/ButtonComponent.js
@@ -0,0 +1,33 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {IconButton} from '@neos-project/react-ui-components';
+import {neos} from '@neos-project/neos-ui-decorators';
+import {executeCommand} from '@neos-project/neos-ui-ckeditor5-bindings';
+
+export default function (commandName) {
+    @neos(globalRegistry => ({
+        i18nRegistry: globalRegistry.get('i18n')
+    }))
+    class FormattingButton extends PureComponent {
+        static propTypes = {
+            i18nRegistry: PropTypes.object,
+            tooltip: PropTypes.string,
+            isActive: PropTypes.boolean,
+        };
+        handleClick = () => {
+            // this command name must match the identifier of the command from examplePlugin.js, this.editor.commands.add(...)
+            executeCommand(commandName);
+        };
+        render() {
+            const props = {
+                onClick: this.handleClick,
+                isActive: Boolean(this.props.isActive),
+                title: this.props.i18nRegistry.translate(this.props.tooltip),
+                icon: this.props.icon,
+            };
+            return <IconButton {...props} />;
+        }
+    }
+
+    return FormattingButton;
+}
diff --git a/Resources/Private/UiPlugin/src/CkeditorPluginUtils.js b/Resources/Private/UiPlugin/src/CkeditorPluginUtils.js
@@ -0,0 +1,43 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
+import {$add, $get} from 'plow-js';
+
+const getCkeditorPlugin = function(extensionName, commandName, formatting) {
+    const attributeName = extensionName + 'Attribute';
+
+    return class extends Plugin {
+        static get pluginName() {
+            return extensionName;
+        }
+        init() {
+            const config = {
+                model: attributeName,
+                view: {
+                    name: formatting.tag,
+                    classes: formatting.classes,
+                    styles: formatting.styles
+                }
+            };
+
+            this.editor.model.schema.extend('$text', {allowAttributes: attributeName});
+            this.editor.conversion.attributeToElement(config);
+            this.editor.commands.add(commandName, new AttributeCommand(this.editor, attributeName));
+        }
+    }
+}
+
+const getCkeditorPluginConfig = function(formattingName, ckeditorPlugin) {
+    return (ckEditorConfiguration, options) => {
+        if ($get(['formatting', formattingName], options.editorOptions)) {
+            ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
+            return $add(
+                'plugins',
+                ckeditorPlugin,
+                ckEditorConfiguration
+            );
+        }
+        return ckEditorConfiguration;
+    }
+};
+
+export { getCkeditorPlugin, getCkeditorPluginConfig};
diff --git a/Resources/Private/UiPlugin/src/index.js b/Resources/Private/UiPlugin/src/index.js
@@ -0,0 +1 @@
+require('./manifest');
diff --git a/Resources/Private/UiPlugin/src/manifest.js b/Resources/Private/UiPlugin/src/manifest.js
@@ -0,0 +1,32 @@
+import manifest from '@neos-project/neos-ui-extensibility';
+import {$get} from 'plow-js';
+import ButtonComponent from './ButtonComponent';
+import {getCkeditorPlugin, getCkeditorPluginConfig} from './CkeditorPluginUtils';
+import backend from '@neos-project/neos-ui-backend-connector';
+
+manifest('Breadlesscode.SimpleEditorExtend:UiPlugin', {}, globalRegistry => {
+    const richtextToolbar = globalRegistry.get('ckEditor5').get('richtextToolbar');
+    const config = globalRegistry.get('ckEditor5').get('config');
+    const { getJsonResource } = backend.get().endpoints;
+    const configUri = '/breadlesscode/editor-config';
+
+    getJsonResource(configUri).then((buttonConfig) => {
+        Object.keys(buttonConfig).forEach((formattingName) => {
+            const options = buttonConfig[formattingName];
+            const commandName = options.extensionName + 'Command';
+
+            richtextToolbar.set(options.extensionName, {
+                commandName: commandName,
+                isActive: $get(commandName),
+                isVisible: $get(['formatting', formattingName]),
+                component: ButtonComponent(commandName),
+                icon: options.icon,
+                tooltip: options.tooltip,
+            }, options.position);
+            config.set(options.extensionName, getCkeditorPluginConfig(
+                formattingName,
+                getCkeditorPlugin(options.extensionName, commandName, options.formatting)
+            ));
+        });
+    });
+});
diff --git a/Resources/Private/UiPlugin/yarn.lock b/Resources/Private/UiPlugin/yarn.lock
diff --git a/Resources/Public/UiPlugin/Plugin.js b/Resources/Public/UiPlugin/Plugin.js
diff --git a/Resources/Public/UiPlugin/Plugin.js.map b/Resources/Public/UiPlugin/Plugin.js.map
diff --git a/composer.json b/composer.json
