Initial project

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

.nvmrc

@@ -0,0 +1 @@
+10.15.3

Configuration/NodeTypes.Override.BaseMixins.yaml

@@ -0,0 +1,10 @@
+#'Neos.NodeTypes.BaseMixins:TextMixin':
+#  abstract: true
+#  properties:
+#    text:
+#      ui:
+#        inline:
+#          editorOptions:
+#            inlineStyling:
+#              fontColor: true
+#              fontSize: true

Configuration/Settings.yaml

@@ -0,0 +1,40 @@
+# An example configuration:
+#TechDivision:
+#  CkStyles:
+#    InlineStyles:
+#      presets:
+#        'fontColor':
+#          label: 'Font color'
+#          options:
+#            'primary':
+#              label: 'Red'
+#              cssClass: 'my-class-red'
+#            'secondary':
+#              label: 'Green'
+#              cssClass: 'my-class-green'
+#            '':
+#              label: 'unset color'
+#              cssClass: null
+#        'fontSize':
+#          label: 'Font size'
+#          options:
+#            'small':
+#              label: 'Small'
+#              cssClass: 'my-class-size-small'
+#            'big':
+#              label: 'Large'
+#              cssClass: 'my-class-size-large'
+#            '':
+#              label: 'unset color'
+#              cssClass: null
+
+Neos:
+  Neos:
+    Ui:
+      resources:
+        javascript:
+          'TechDivision.CkStyles:Styles':
+            resource: resource://TechDivision.CkStyles/Public/JavaScript/CkStyles/Plugin.js
+      frontendConfiguration:
+        'TechDivision.CkStyles:InlineStyles': '${Configuration.setting(''TechDivision.CkStyles.InlineStyles'')}'
+        'TechDivision.CkStyles:BlockStyles': '${Configuration.setting(''TechDivision.CkStyles.BlockStyles'')}'

Documentation/Readme.md

@@ -0,0 +1,9 @@
+# TechDivision.CkStyles
+
+This package allows to add different styles with the CKEditor. The specific styles depend on
+your implementation.
+
+
+Demo inline style:
+
+![Applying inline style](assets/InlineStyleDemo.gif "Inline style")

README.md

@@ -1,2 +1,123 @@
-# ckstyles
-Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration
+# TechDivision.CkStyles
+
+This package allows to add different styles(with your own classes) for the CkEditor in Neos. The styles and classes
+depend on your implementation.
+
+
+**Demo:**
+![Applying inline style](Documentation/assets/InlineStyleDemo.gif "Inline style")
+
+
+**Example output:**
+
+![Example output](Documentation/assets/ExampleOutput.png "Example output")
+
+```html
+<p>
+  This is an 
+  <span class="my-class-size-large">awesome</span> 
+  inline editable 
+  <span class="my-class-red">text with some custom</span> 
+  styling :)
+</p>
+```
+
+But why? Often customers want to highlight some text for example with font size but don't use a headline for SEO reasons
+or want to add an icon, adjust the font color ... 
+
+## Getting started
+
+Default composer installation
+```
+composer require techdivision/ckstyles
+```
+
+Define some global presets for usage in different NodeTypes:
+```
+TechDivision:
+  CkStyles:
+    InlineStyles:
+      presets:
+        'fontColor':
+          label: 'Font color'
+          options:
+            'primary':
+              label: 'Red'
+              cssClass: 'my-class-red'
+            'secondary':
+              label: 'Green'
+              cssClass: 'my-class-green'
+            '':
+              label: 'unset color'
+              cssClass: null
+        'fontSize':
+          label: 'Font size'
+          options:
+            'small':
+              label: 'Small'
+              cssClass: 'my-class-size-small'
+            'big':
+              label: 'Large'
+              cssClass: 'my-class-size-large'
+            '':
+              label: 'unset color'
+              cssClass: null
+```
+Example: [Configuration/Settings.yaml](Configuration/Settings.yaml)
+
+Activate the preset for your inline editable NodeType property:
+```
+'Neos.NodeTypes.BaseMixins:TextMixin':
+  abstract: true
+  properties:
+    text:
+      ui:
+        inline:
+          editorOptions:
+            inlineStyling:
+              fontColor: true
+              fontSize: true
+```
+Example: [Configuration/NodeTypes.Override.BaseMixins.yaml](Configuration/NodeTypes.Override.BaseMixins.yaml)
+
+Add the styling for your presets in your scss, less or css:
+```
+.my-class-red {
+  color: red;
+}
+.my-class-green {
+  color: green;
+}
+.my-class-size-small {
+  font-size: 10px;
+}
+.my-class-size-large {
+  font-size: 25px;
+}
+```
+
+## Development 
+This project works with yarn. The build process given by the neos developers is not very
+configurable, only the target dir for the buildprocess is adjustable by 
+package.json.
+
+```
+nvm install
+```
+
+If you don't have [yarn](https://yarnpkg.com/lang/en/docs/install/) already installed: 
+```
+brew install yarn
+```
+
+Build the app:
+```
+./build.sh
+```
+
+## Contribute
+
+You are very welcome to contribute by merge requests, adding issues etc.
+
+**Thank you** 🤝 [Sebastian Kurfürst](https://twitter.com/skurfuerst) for the great workshop which helped us 
+implementing this.

Resources/Private/JavaScript/CkStyles/.nvmrc

@@ -0,0 +1 @@
+10.15.3

Resources/Private/JavaScript/CkStyles/package.json

@@ -0,0 +1,18 @@
+{
+  "description": "",
+  "license": "GNU GPLv3",
+  "private": true,
+  "scripts": {
+    "build": "neos-react-scripts build",
+    "watch": "neos-react-scripts watch"
+  },
+  "devDependencies": {
+    "@neos-project/neos-ui-extensibility": "*"
+  },
+  "neos": {
+    "buildTargetDirectory": "../../../Public/JavaScript/CkStyles"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^10.0.0"
+  }
+}

Resources/Private/JavaScript/CkStyles/src/BlockStyleCommand.js

@@ -0,0 +1,35 @@
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+/**
+ * Sets a class a given attribute on the top most blocks.
+ */
+export default class BlockStyleCommand extends Command {
+
+    /**
+     * @inheritDoc
+     */
+    execute(options = {}) {
+
+        const model = this.editor.model;
+
+        const blocksToChange = getBlocksToChange( model );
+
+        model.change( writer => {
+            for ( const block of blocksToChange ) {
+                writer.setAttribute( options.key, options.value, block );
+            }
+        } );
+    }
+}
+
+/**
+ * Returns the top most blocks of the given model
+ *
+ * @param model
+ * @returns {*}
+ */
+function getBlocksToChange( model ) {
+    const selection = model.document.selection;
+    const schema = model.schema;
+    return Array.from( selection.getTopMostBlocks() );
+}

Resources/Private/JavaScript/CkStyles/src/BlockStyleEditing.js

@@ -0,0 +1,46 @@
+import {Plugin, Paragraph} from 'ckeditor5-exports';
+import BlockStyleCommand from "./BlockStyleCommand";
+
+/**
+ * FACTORY FUNCTION for the plugin
+ * needs the current preset configuration as parameter.
+ */
+export default (presetIdentifier, presetConfiguration) =>
+    class BlockStyleEditing extends Plugin {
+
+        init() {
+            this.editor.model.schema.extend('$block', {allowAttributes: presetIdentifier});
+
+            const editor = this.editor;
+
+            // Model configuration
+            var model = {
+                key: presetIdentifier,
+                values: []
+            };
+
+            // View configuration
+            var view = {};
+            Object.keys(presetConfiguration.options).forEach(optionIdentifier => {
+                model.values.push(optionIdentifier);
+                view[optionIdentifier] = {
+                    key: 'class',
+                    value: presetConfiguration.options[optionIdentifier].cssClass
+                };
+            });
+
+            editor.model.schema.register(presetIdentifier, {
+                inheritAllFrom: '$block',
+                isBlock: true,
+                allowIn: '$root'
+            });
+
+            // Convert the model to view correctly
+            editor.conversion.attributeToAttribute({
+                model: model,
+                view: view
+            });
+
+            editor.commands.add(`blockStyles:${presetIdentifier}`, new BlockStyleCommand(editor));
+        }
+    }