FEATURE: Add configurable dropdowns for selecting styles

Author: Sebobo

Configuration/Settings.yaml

@@ -4,4 +4,7 @@ Neos:
       resources:
         javascript:
           'Breadlesscode.SimpleEditorExtend:UiPlugin':
-            resource: resource://Breadlesscode.SimpleEditorExtend/Public/UiPlugin/Plugin.js
+            resource: resource://Breadlesscode.SimpleEditorExtend/Public/UiPlugin/Plugin.js
+        stylesheets:
+          'Breadlesscode.SimpleEditorExtend:UiPlugin':
+            resource: resource://Breadlesscode.SimpleEditorExtend/Public/UiPlugin/Plugin.css

Resources/Private/UiPlugin/package.json

@@ -6,12 +6,14 @@
     "watch": "neos-react-scripts watch"
   },
   "devDependencies": {
-    "@neos-project/neos-ui-extensibility": "*"
+    "@neos-project/neos-ui-extensibility": "*",
+    "lodash.merge": "^4.6.2",
+    "lodash.omit": "^4.5.0"
   },
   "neos": {
     "buildTargetDirectory": "../../Public/UiPlugin"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.0"
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.1"
   }
 }

Resources/Private/UiPlugin/src/CkeditorPluginUtils.js

@@ -1,7 +1,6 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
+import {Plugin} from 'ckeditor5-exports';
+// import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
 import {$add, $get} from 'plow-js';
-import ButtonComponent from './ButtonComponent';
 
 const getCkeditorPlugin = function(extensionName, commandName, formatting) {
     const attributeName = extensionName + 'Attribute';
@@ -25,7 +24,7 @@ const getCkeditorPlugin = function(extensionName, commandName, formatting) {
             this.editor.commands.add(commandName, new AttributeCommand(this.editor, attributeName));
         }
     }
-}
+};
 
 const getCkeditorPluginConfig = function(formattingName, ckeditorPlugin) {
     return (ckEditorConfiguration, options) => {
@@ -41,15 +40,15 @@ const getCkeditorPluginConfig = function(formattingName, ckeditorPlugin) {
     }
 };
 
-const getRichtextToolbarConfig = function(commandName, formattingName, icon, tooltip) {
+const getRichtextToolbarConfig = function(commandName, formattingName, icon, tooltip, component, componentConfiguration) {
     return {
         commandName: commandName,
         isActive: $get(commandName),
         isVisible: $get(['formatting', formattingName]),
-        component: ButtonComponent(commandName),
+        component: component(commandName, componentConfiguration),
         icon: icon,
         tooltip: tooltip,
     };
-}
+};
 
-export { getCkeditorPlugin, getCkeditorPluginConfig, getRichtextToolbarConfig};
+export {getCkeditorPlugin, getCkeditorPluginConfig, getRichtextToolbarConfig};

Resources/Private/UiPlugin/src/Commands/SelectFormatCommand.js

@@ -0,0 +1,85 @@
+import {Command} from 'ckeditor5-exports';
+
+export default class SelectFormatCommand extends Command {
+    attributePrefix = 'textFormat-';
+    
+    constructor(editor, attributeKeys) {
+        super(editor);
+        this.attributeKeys = attributeKeys;
+    }
+
+    execute(options = {}) {
+        const editor = this.editor;
+        const model = editor.model;
+        const document = model.document;
+        const selection = document.selection;
+
+        editor.model.change((writer) => {
+            for (const attributeSuffix of Object.keys(options)) {
+                const attributeName = this.attributePrefix + attributeSuffix;
+                const selectedClass = options[attributeSuffix];
+                const ranges = model.schema.getValidRanges(selection.getRanges(), attributeName);
+                
+                if (selection.isCollapsed) {
+                    const position = selection.getFirstPosition();
+
+                    // When selection is inside text with `highlight` attribute.
+                    if (selection.hasAttribute(attributeName)) {
+                        // Find the full highlighted range.
+                        const isSameHighlight = value => {
+                            return value.item.hasAttribute(attributeName) && value.item.getAttribute(attributeName) === this.value;
+                        };
+
+                        const highlightStart = position.getLastMatchingPosition(isSameHighlight, {direction: 'backward'});
+                        const highlightEnd = position.getLastMatchingPosition(isSameHighlight);
+                        const highlightRange = writer.createRange(highlightStart, highlightEnd);
+
+                        // Then depending on current value...
+                        if (!selectedClass || this.value === selectedClass) {
+                            // ...remove attribute when passing highlighter different then current or executing "eraser".
+                            writer.removeAttribute(attributeName, highlightRange);
+                            writer.removeSelectionAttribute(attributeName);
+                        } else {
+                            // ...update `highlight` value.
+                            writer.setAttribute(attributeName, selectedClass, highlightRange);
+                            writer.setSelectionAttribute(attributeName, selectedClass);
+                        }
+                    } else if (selectedClass) {
+                        writer.setSelectionAttribute(attributeName, selectedClass);
+                    }
+                } else {
+                    for (const range of ranges) {
+                        if (selectedClass) {
+                            writer.setAttribute(attributeName, selectedClass, range);
+                        } else {
+                            writer.removeAttribute(attributeName, range);
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    refresh() {
+        const {model} = this.editor;
+        const {selection} = model.document;
+
+        this.value = {};
+        const attributes = selection.getAttributes();
+        
+        for (let attribute of attributes) {
+            if (attribute[0].indexOf(this.attributePrefix) === 0) {
+                const suffix = attribute[0].substr(this.attributePrefix.length);
+                this.value[suffix] = attribute[1];
+            }
+        }
+
+        this.isEnabled = true;
+        for (let attributeName of this.attributeKeys) {
+            if (this.isEnabled) {
+                return;
+            }
+            this.isEnabled = this.isEnabled || model.schema.checkAttributeInSelection(selection, this.attributePrefix + attributeName);
+        }
+    }
+}

Resources/Private/UiPlugin/src/ButtonComponent.js renamed to Resources/Private/UiPlugin/src/Components/ButtonComponent.js

@@ -0,0 +1,12 @@
+.selectFormatButton__flyout {
+    --dialog-width: 460px;
+
+    background-color: var(--colors-ContrastDarker);
+    position: fixed;
+    z-index: var(--zIndex-SecondaryToolbar-LinkIconButtonFlyout);
+    width: var(--dialog-width);
+    left: 50%;
+    margin-left: calc(var(--dialog-width) * -.5);
+    border: var(--spacing-Half) solid var(--colors-ContrastDarker);
+}
+                                                                       

Resources/Private/UiPlugin/src/Components/SelectFormatButton.css

@@ -0,0 +1,118 @@
+import React, {PureComponent} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {$get, $transform} from 'plow-js';
+import {selectors} from '@neos-project/neos-ui-redux-store';
+import {IconButton, SelectBox} from '@neos-project/react-ui-components';
+import {neos} from '@neos-project/neos-ui-decorators';
+import {executeCommand} from '@neos-project/neos-ui-ckeditor5-bindings';
+import style from './SelectFormatButton.css';
+
+export default (commandName, configuration) => {
+    @connect($transform({
+        formattingUnderCursor: selectors.UI.ContentCanvas.formattingUnderCursor
+    }))
+    @neos(globalRegistry => ({
+        i18nRegistry: globalRegistry.get('i18n')
+    }))
+    class SelectFormatButtonComponent extends PureComponent {
+        static propTypes = {
+            i18nRegistry: PropTypes.object,
+            tooltip: PropTypes.string,
+            formatOptions: PropTypes.object,
+            formattingUnderCursor: PropTypes.objectOf(PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.bool,
+                PropTypes.string,
+                PropTypes.object
+            ])),
+        };
+
+        constructor(props) {
+            super(props);
+            this.state = {
+                isOpen: false,
+                attributes: props.formattingUnderCursor[commandName],
+            };
+        }
+
+        componentWillReceiveProps = (nextProps) => {
+            // If the new selection doesn't have any formatting close the dialog
+            if (!$get(commandName, nextProps.formattingUnderCursor)) {
+                this.setState({isOpen: false});
+            } else {
+                this.setState({
+                    isOpen: this.state.isOpen,
+                    attributes: nextProps.formattingUnderCursor[commandName],
+                });
+            }
+        };
+
+        handleClick = () => {
+            this.setState({isOpen: !this.state.isOpen});
+        };
+
+        handleRemoveFormatClick = () => {
+            this.setState({
+                attributes: Object.keys(configuration.formatting.attributes).reduce((map, attribute) => {
+                    map[attribute] = '';
+                    return map;
+                }, {})
+            }, this.handleSelectionChange);
+        };
+
+        handleSelectionChange = () => {
+            executeCommand(commandName, this.state.attributes);
+        };
+
+        handleAttributeChange = (attributeName, value) => {
+            this.setState({
+                attributes: {
+                    ...this.state.attributes,
+                    [attributeName]: value,
+                }
+            }, this.handleSelectionChange);
+        };
+
+        render() {
+            const {icon, id, tooltip, i18nRegistry} = this.props;
+            const {isOpen} = this.state;
+            const {attributes} = configuration.formatting;
+            
+            return (                            
+                <div>
+                    <IconButton
+                        icon={icon}
+                        id={id}
+                        isActive={isOpen}
+                        onClick={this.handleClick}
+                        title={i18nRegistry.translate(tooltip)}
+                    />
+                    {isOpen ? (
+                        <div className={style.selectFormatButton__flyout}>
+                            {Object.keys(attributes).map((attributeName) => {
+                                const attribute = attributes[attributeName];
+                                return (
+                                    <div key={attributeName}>
+                                        <label htmlFor={"selectFormat-" + attributeName}>{i18nRegistry.translate(attribute.label)}</label>
+                                        <SelectBox id={"selectFormat-" + attributeName}
+                                                   placeholder={i18nRegistry.translate(attribute.placeholder)}
+                                                   placeholderIcon={i18nRegistry.translate(attribute.placeholderIcon)}
+                                                   options={attribute.options}
+                                                   value={this.state.attributes[attributeName]}
+                                                   onValueChange={(value) => this.handleAttributeChange(attributeName, value)}
+                                                   optionValueField="model"/>
+                                    </div>
+                                );
+                            })}
+                            <IconButton icon="eraser" hoverStyle="brand"
+                                        onClick={this.handleRemoveFormatClick}/>
+                        </div>
+                    ) : null}
+                </div>
+            )
+        }
+    }
+
+    return SelectFormatButtonComponent;
+}

Resources/Private/UiPlugin/src/Components/SelectFormatButtonComponent.js

@@ -0,0 +1,51 @@
+import {Plugin} from 'ckeditor5-exports';
+import SelectFormatCommand from '../Commands/SelectFormatCommand';
+
+export default class SelectFormatPlugin extends Plugin {
+    static get pluginName() {
+        return 'Breadlesscode.SimpleEditorExtend:Dropdowns';
+    }
+
+    static get pluginPrefix() {
+        return 'selectFormat';
+    }
+
+    init() {
+        const {editor} = this;
+        const {schema} = editor.model;
+        const {conversion} = editor;
+               
+        // Extend the schema for each attribute type found in the merged options
+        const options = editor.config.get(SelectFormatPlugin.pluginPrefix + '.options');
+        if (options) {
+            for (const attributeName of Object.keys(options)) {
+                schema.extend('$text', {allowAttributes: SelectFormatPlugin.pluginPrefix + '-' + attributeName});
+                conversion.attributeToElement(_buildDefinition(attributeName, options[attributeName]['options']));
+            }
+            editor.commands.add(SelectFormatPlugin.pluginPrefix + 'Command', new SelectFormatCommand(editor, Object.keys(options)));
+        }
+    }
+}
+
+function _buildDefinition(name, options) {
+    const definition = {
+        model: {
+            key: SelectFormatPlugin.pluginPrefix + '-' + name,
+            values: []
+        },
+        view: {}
+    };
+
+    for (const option of options) {
+        const modelName = option.model;
+        definition.model.values.push(modelName);
+        definition.view[modelName] = {
+            name: 'span',
+            classes: option.class,
+            // A fixed priority for all definitions is needed, so they get merged
+            priority: 10
+        };
+    }
+
+    return definition;
+}

Resources/Private/UiPlugin/src/Plugins/SelectFormatPlugin.js

@@ -0,0 +1,29 @@
+import manifest from '@neos-project/neos-ui-extensibility';
+import {getCkeditorPlugin, getCkeditorPluginConfig, getRichtextToolbarConfig} from './CkeditorPluginUtils';
+import ButtonComponent from './Components/ButtonComponent';
+
+manifest('Breadlesscode.SimpleEditorExtend:UiPlugin.Buttons', {}, (globalRegistry, { frontendConfiguration }) => {
+    const richtextToolbar = globalRegistry.get('ckEditor5').get('richtextToolbar');
+    const ckEditorConfig = globalRegistry.get('ckEditor5').get('config');
+    const buttonConfig = frontendConfiguration['Breadlesscode.SimpleEditorExtend:Buttons'];
+
+    // Configure individual single format buttons
+    Object.keys(buttonConfig).forEach((formattingName) => {
+        const options = buttonConfig[formattingName];
+        const commandName = options.extensionName + 'Command';
+
+        richtextToolbar.set(
+            options.extensionName,
+            getRichtextToolbarConfig(commandName, formattingName, options.icon, options.tooltip, ButtonComponent),
+            options.position
+        );
+
+        ckEditorConfig.set(
+            options.extensionName,
+            getCkeditorPluginConfig(
+                formattingName,
+                getCkeditorPlugin(options.extensionName, commandName, options.formatting)
+            )
+        );
+    });
+});