setup plugin

Author: PRGfx

.gitignore

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

Configuration/Settings.yaml

@@ -0,0 +1,17 @@
+Neos:
+  Neos:
+    Ui:
+      resources:
+        javascript:
+          'Prgfx.Neos.TextPartLanguage':
+            resource: resource://Prgfx.Neos.TextPartLanguage/Public/JavaScript/TextPartLanguage/Plugin.js
+      frontendConfiguration:
+        'Prgfx.Neos.TextPartLanguage:languages': ${Configuration.setting('Neos.Neos.userInterface.availableLanguages')}
+    userInterface:
+      translation:
+        autoInclude:
+          'Prgfx.Neos.TextPartLanguage':
+            - 'Editor'
+    fusion:
+      autoInclude:
+        'Prgfx.Neos.TextPartLanguage': true

LICENSE

@@ -0,0 +1,45 @@
+# Prgfx.Neos.TextPartLanguage
+
+This package allows editors to tag selected text with a language, helping assistive technology with pronunciation.
+
+```
+composer require prgfx/neos-textpartlanguage
+```
+
+This plugin is based on [@ckeditor/ckeditor5-language](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-language), making the necessary adaptations to use it with the Neos backend.
+
+![Screenshot of the plugin in the Neos backend](./Documentation/assets/preview.png)
+
+## Usage
+Enable it for a node property:
+```yaml
+'Neos.Demo:Content.Text':
+  properties:
+    text:
+      ui:
+        inline:
+          editorOptions:
+            textLanguages: true
+```
+Or set specific properties:
+```yaml
+'Neos.Demo:Content.Text':
+  properties:
+    text:
+      ui:
+        inline:
+          editorOptions:
+            textLanguages:
+              languages:
+                de: German
+                en: My.Package:Main:textLanguages.languages.en
+                fr: French
+                gr: ~
+              placeholder: My.Package:Main:textLanguages.placeholder
+```
+
+## Configuration
+By default, this plugin provides the system-languages configured in `Neos.Neos.userInterface.availableLanguages`, but different default values can be set at `Neos.Neos.Ui.frontendConfiguration.'Prgfx.Neos.TextPartLanguage:languages'`.
+
+## Appearance
+In the backend this plugin underlines all marked text-elements through a stylesheet included in `prototype(Neos.Neos:Page).head.stylesheets.textPartLanguage` which you might disable, if you don't require it or want to apply custom styling.

README.md

@@ -0,0 +1,16 @@
+prototype(Neos.Neos:Page) {
+    head {
+        stylesheets {
+            textPartLanguage = Neos.Fusion:Tag {
+                tagName = 'link'
+                attributes {
+                    rel = 'stylesheet'
+                    href = Neos.Fusion:ResourceUri {
+                        path = 'resource://Prgfx.Neos.TextPartLanguage/Public/Css/TextPartLanguage/Styles.css'
+                    }
+                }
+                @if.inBackend = ${documentNode.context.inBackend}
+            }
+        }
+    }
+}

Resources/Private/Fusion/Root.fusion

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true
+    }
+}

Resources/Private/JavaScript/TextPartLanguage/jsconfig.json

@@ -0,0 +1,21 @@
+{
+  "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/TextPartLanguage"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-language": "27.1.0",
+    "@ckeditor/ckeditor5-utils": "^27.1.0",
+    "null-loader": "^4.0.1",
+    "raw-loader": "^4.0.2"
+  }
+}

Resources/Private/JavaScript/TextPartLanguage/package.json

@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { neos } from '@neos-project/neos-ui-decorators';
+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';
+import { commandName } from './command';
+
+export const sanitizeOptions = (options) =>
+    Object.entries(options || {}).filter(tpl => !!tpl[1]);
+
+@neos(globalRegistry => ({
+    i18nRegistry: globalRegistry.get('i18n'),
+}))
+@connect($transform({
+    formattingUnderCursor: selectors.UI.ContentCanvas.formattingUnderCursor,
+}))
+export default class LanguageSelect extends PureComponent {
+    static propTypes = {
+        formattingUnderCursor: PropTypes.object.isRequired,
+        inlineEditorOptions: PropTypes.object.isRequired,
+        i18nRegistry: PropTypes.object.isRequired,
+        defaultLanguages: PropTypes.object,
+    }
+
+    constructor(props) {
+        super(props);
+        this.handleOnSelect = this.handleOnSelect.bind(this);
+    }
+
+    render() {
+        const options = sanitizeOptions(
+            this.props.inlineEditorOptions.textLanguages.languages
+            || this.props.defaultLanguages
+            || {}
+        )
+            .map(([value, label]) => ({
+                label: this.props.i18nRegistry.translate(label),
+                value,
+            }));
+        const placeholderKey = this.props.inlineEditorOptions.textLanguages.placeholder
+            || 'Prgfx.Neos.TextPartLanguage:Editor:placeholder';
+        const placeholder = this.props.i18nRegistry.translate(placeholderKey);
+        const currentValue = this.props.formattingUnderCursor.textPartLanguage || null;
+        return (
+            <SelectBox
+                options={options}
+                value={currentValue}
+                placeholder={placeholder}
+                allowEmpty
+                onValueChange={this.handleOnSelect}
+            />
+        );
+    }
+
+    handleOnSelect(languageCode) {
+        CkEditorApi.executeCommand(commandName, {
+            languageCode,
+        });
+    }
+}

Resources/Private/JavaScript/TextPartLanguage/src/LanguageSelect.js

@@ -0,0 +1,67 @@
+import { Command } from 'ckeditor5-exports';
+import { attributeName } from './editing';
+
+export const commandName = 'textPartLanguage';
+
+export default class TextPartLanguageCommand extends Command {
+    refresh() {
+        const model = this.editor.model;
+        const doc = model.document;
+
+        this.value = this._getValueFromFirstAllowedNode();
+        this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, attributeName);
+    }
+
+    execute({ languageCode } = {}) {
+        const model = this.editor.model;
+        const doc = model.document;
+        const selection = doc.selection;
+
+        const value = languageCode || false;
+
+        model.change(writer => {
+            if (selection.isCollapsed) {
+                // from the original plugin:
+                // this seems to apply to an "empty" selection and would just
+                // insert span at the current cursor, which is not what we want,
+                // because it is difficult to find and un-set
+                // if (value) {
+                //     writer.setSelectionAttribute(attributeName, value);
+                // } else {
+                //     writer.removeSelectionAttribute(attributeName);
+                // }
+            } else {
+                const ranges = model.schema.getValidRanges(selection.getRanges(), attributeName);
+
+                for (const range of ranges) {
+                    if (value) {
+                        writer.setAttribute(attributeName, value, range);
+                    } else {
+                        writer.removeAttribute(attributeName, range);
+                    }
+                }
+            }
+        });
+    }
+
+    _getValueFromFirstAllowedNode() {
+        const model = this.editor.model;
+        const schema = model.schema;
+        const selection = model.document.selection;
+
+        if (selection.isCollapsed) {
+            return selection.getAttribute(attributeName) || false;
+        }
+
+        for (const range of selection.getRanges()) {
+            for (const item of range.getItems()) {
+                if (schema.checkAttribute(item, attributeName)) {
+                    return item.getAttribute(attributeName) || false;
+                }
+            }
+        }
+
+        return false;
+    }
+
+}

Resources/Private/JavaScript/TextPartLanguage/src/command.js

@@ -0,0 +1,56 @@
+import { Plugin } from 'ckeditor5-exports';
+import TextPartLanguageCommand, { commandName } from './command';
+
+export const attributeName = 'language';
+
+export default class TextPartLanguageEditing extends Plugin {
+    static get pluginName() {
+        return 'TextPartLanguageEditing';
+    }
+
+    constructor(editor) {
+        super(editor);
+        editor.config.define('language', {
+            textPartLanguage: []
+        });
+    }
+
+    init() {
+        const editor = this.editor;
+
+        editor.model.schema.extend('$text', { allowAttributes: attributeName });
+        editor.model.schema.setAttributeProperties(attributeName, {
+            copyOnEnter: true
+        });
+        this._defineConverters();
+        editor.commands.add(commandName, new TextPartLanguageCommand(editor));
+    }
+
+    _defineConverters() {
+        const conversion = this.editor.conversion;
+
+        conversion.for('upcast').elementToAttribute({
+            model: {
+                key: attributeName,
+                value: viewElement => viewElement.getAttribute('lang')
+            },
+            view: {
+                name: 'span',
+                attributes: { lang: /[\s\S]+/ }
+            }
+        });
+
+        conversion.for('downcast').attributeToElement({
+            model: attributeName,
+            view: (attributeValue, writer) => {
+                if (!attributeValue) {
+                    return;
+                }
+
+                return writer.createAttributeElement('span', {
+                    lang: attributeValue,
+                });
+            }
+        });
+    }
+}