Initial commit

Author: pmaas

.gitignore

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

Configuration/Settings.yaml

@@ -0,0 +1,22 @@
+Neos:
+  Neos:
+    Ui:
+      resources:
+        javascript:
+          'Pmaas.Neos.TableStyles':
+            resource: resource://Pmaas.Neos.TableStyles/Public/JavaScript/TableStyles/Plugin.js
+      frontendConfiguration:
+        'Pmaas.Neos:TableStyles': '${Configuration.setting(''Pmaas.Neos.TableStyles'')}'
+
+Pmaas:
+  Neos:
+    TableStyles:
+      presets:
+        label: 'Table style'
+#        options:
+#          primary:
+#            label: 'Primary style'
+#            cssClass: 'table--primary'
+#          secondary:
+#            label: 'Secondary style'
+#            cssClass: 'table--secondary'

Documentation/Screencast.gif

@@ -0,0 +1,19 @@
+Copyright (c) 2020 Philipp Maas
+
+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.

LICENCE.txt

@@ -0,0 +1,47 @@
+# Table styles plugin for Neos CMS    
+
+> This package provides a drop down to add custom CSS classes to CKEditor tables in Neos CMS.
+
+![Table style drop down](Documentation/Screencast.gif)  
+
+
+## Installation
+
+To install the plugin run this in your site package folder:
+
+    composer require --no-update pmaas/neos-tablestyles
+    
+Then run `composer update` in your project directory.
+
+
+## Usage
+
+Add your custom css classes to your `settings.yaml`:
+
+    Pmaas:
+      Neos:
+        TableStyles:
+          presets:
+            label: 'Table style'
+            options:
+              primary:
+                label: 'Primary style'
+                cssClass: 'table--primary'
+              secondary:
+                label: 'Secondary style'
+                cssClass: 'table--secondary'
+
+Then add `tableStyles: true` to your NodeType, to activate the drop down:
+
+    'Vendor.Package:Type.Name':
+      properties:
+        text:
+          ui:
+            inline:
+              editorOptions:
+                tableStyles: true
+
+
+## Contributions
+
+Contributions are always welcome!

README.md

@@ -0,0 +1,12 @@
+{
+    "extends": "@neos-project/eslint-config-neos",
+    "parser": "babel-eslint",
+    "globals": {
+        "expect": true,
+        "sinon": false
+    },
+    "env": {
+        "node": true,
+        "mocha": true
+    }
+}

Resources/Private/JavaScript/TableStyles/.eslintrc

@@ -0,0 +1 @@
+^8.11.0

Resources/Private/JavaScript/TableStyles/.nvmrc

@@ -0,0 +1,23 @@
+{
+    "description": "CKEditor table styles plugin for for Neos CMS",
+    "license": "proprietary",
+    "private": true,
+    "scripts": {
+        "build": "NODE_ENV=production neos-react-scripts build && terser --compress --mangle -o ../../../Public/JavaScript/TableStyles/Plugin.js -- ../../../Public/JavaScript/TableStyles/Plugin.js",
+        "watch": "neos-react-scripts watch"
+    },
+    "dependencies": {
+        "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
+        "@neos-project/react-ui-components": "^5.2.0"
+    },
+    "devDependencies": {
+        "@ckeditor/ckeditor5-table": "^13.0.0",
+        "@neos-project/eslint-config-neos": "^2.3.0",
+        "@neos-project/neos-ui-extensibility": "^5.2.0",
+        "babel-eslint": "^10.1.0",
+        "terser": "^4.8.0"
+    },
+    "neos": {
+        "buildTargetDirectory": "../../../Public/JavaScript/TableStyles"
+    }
+}

Resources/Private/JavaScript/TableStyles/package.json

@@ -0,0 +1,27 @@
+import {Command} from 'ckeditor5-exports';
+import {findAncestor} from '@ckeditor/ckeditor5-table/src/commands/utils';
+
+export default class TableStylesCommand extends Command {
+    refresh() {
+        const table = this.getTable();
+
+        this.isEnabled = Boolean(table);
+
+        if (table) {
+            this.value = (table.getAttribute('class') === 'table') ? undefined : table.getAttribute('class');
+        }
+    }
+
+    execute(options = {}) {
+        const cssClass = (options.value) ? options.value : 'table';
+
+        this.editor.model.change(writer => {
+            writer.setAttribute('class', cssClass, this.getTable());
+        });
+    }
+
+    getTable() {
+        const position = this.editor.model.document.selection.getFirstPosition();
+        return findAncestor('table', position);
+    }
+}

Resources/Private/JavaScript/TableStyles/src/commands/tableStyles.js

@@ -0,0 +1,58 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {SelectBox} from '@neos-project/react-ui-components';
+import {connect} from 'react-redux';
+import {$transform} from 'plow-js';
+import {selectors} from '@neos-project/neos-ui-redux-store';
+import * as CkEditorApi from '@neos-project/neos-ui-ckeditor5-bindings';
+
+@connect($transform({
+    formattingUnderCursor: selectors.UI.ContentCanvas.formattingUnderCursor
+}))
+
+export default class TableStylesSelectBox extends PureComponent {
+    static propTypes = {
+        presetConfiguration: PropTypes.shape({
+            label: PropTypes.string.isRequired,
+
+            options: PropTypes.objectOf(PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                cssClass: PropTypes.string.isRequired
+            }))
+        }),
+        formattingUnderCursor: PropTypes.object
+    };
+
+    constructor(...args) {
+        super(...args);
+        this.handleOnSelect = this.handleOnSelect.bind(this);
+    }
+
+    render() {
+        const selectOptions = Object.entries(this.props.presetConfiguration.options)
+            .map(([optionIdentifier, optionConfiguration]) => ({
+                value: optionIdentifier,
+                label: optionConfiguration.label
+            }));
+
+        if (selectOptions.length === 0) {
+            return null;
+        }
+
+        const currentValue = this.props.formattingUnderCursor.tableStyles;
+
+        return (
+            <SelectBox
+                options={selectOptions}
+                value={currentValue}
+                allowEmpty={true}
+                placeholder={this.props.presetConfiguration.label}
+                onValueChange={this.handleOnSelect}
+            />
+        );
+    }
+
+    handleOnSelect(option) {
+        CkEditorApi.executeCommand('tableStyles', {value: option});
+    }
+}