FEATURE: support text-direction

Set the `dir` attribute when setting a language.
RTL languages are configured in the settings

Author: PRGfx

Configuration/Settings.yaml

@@ -7,6 +7,24 @@ Neos:
             resource: resource://Prgfx.Neos.TextPartLanguage/Public/JavaScript/TextPartLanguage/Plugin.js
       frontendConfiguration:
         'Prgfx.Neos.TextPartLanguage:languages': ${Configuration.setting('Neos.Neos.userInterface.availableLanguages')}
+        'Prgfx.Neos.TextPartLanguage:languageDirections':
+          # ckeditor5 RTL_LANGUAGE_CODES
+          # Arabic
+          ar: rtl
+          ara: rtl
+          # Persian
+          fa: rtl
+          per: rtl
+          fas: rtl
+          # Hebrew
+          he: rtl
+          heb: rtl
+          # Kurdish
+          ku: rtl
+          kur: rtl
+          # Uighur, Uyghur
+          ug: rtl
+          uig: rtl
     userInterface:
       translation:
         autoInclude:

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

@@ -7,6 +7,7 @@ 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';
+import { parseLanguageAttribute } from './util';
 
 export const sanitizeOptions = (options) =>
     Object.entries(options || {}).filter(tpl => !!tpl[1]);
@@ -43,7 +44,12 @@ export default class LanguageSelect extends PureComponent {
         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;
+        const currentAttributeValue = this.props.formattingUnderCursor.textPartLanguage || null;
+        let currentValue = null;
+        if (currentAttributeValue) {
+            currentValue = parseLanguageAttribute(currentAttributeValue).languageCode;
+        }
+
         return (
             <SelectBox
                 options={options}

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

@@ -1,5 +1,10 @@
 import { Plugin } from 'ckeditor5-exports';
 import TextPartLanguageCommand, { commandName } from './command';
+import {
+    getLanguageDirection,
+    parseLanguageAttribute,
+    stringifyLanguageAttribute,
+} from './util';
 
 export const attributeName = 'language';
 
@@ -10,9 +15,8 @@ export default class TextPartLanguageEditing extends Plugin {
 
     constructor(editor) {
         super(editor);
-        editor.config.define('language', {
-            textPartLanguage: []
-        });
+        this.languageDirectionLookup = getLanguageDirection(editor.config.get('textPartLanguage').languageDirections);
+        this.stringifyLanguageAttribute = stringifyLanguageAttribute(this.languageDirectionLookup);
     }
 
     init() {
@@ -32,7 +36,11 @@ export default class TextPartLanguageEditing extends Plugin {
         conversion.for('upcast').elementToAttribute({
             model: {
                 key: attributeName,
-                value: viewElement => viewElement.getAttribute('lang')
+                value: viewElement => {
+                    const languageCode = viewElement.getAttribute('lang');
+                    const textDirection = viewElement.getAttribute('dir');
+                    return this.stringifyLanguageAttribute(languageCode, textDirection);
+                }
             },
             view: {
                 name: 'span',
@@ -47,8 +55,11 @@ export default class TextPartLanguageEditing extends Plugin {
                     return;
                 }
 
+                const { languageCode, textDirection } = parseLanguageAttribute(attributeValue);
+
                 return writer.createAttributeElement('span', {
-                    lang: attributeValue,
+                    lang: languageCode,
+                    dir: textDirection || this.languageDirectionLookup(languageCode),
                 });
             }
         });

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

@@ -10,10 +10,14 @@ manifest('Prgfx.Neos.TextPartLanguage', {}, (globalRegistry, { frontendConfigura
     const config = ckEditorRegistry.get('config');
 
     const defaultLanguages = frontendConfiguration['Prgfx.Neos.TextPartLanguage:languages'] || {};
+    const languageDirections = frontendConfiguration['Prgfx.Neos.TextPartLanguage:languageDirections'] || {};
 
     config.set('textPartLanguage', ckeEditorConfiguration => {
         ckeEditorConfiguration.plugins = ckeEditorConfiguration.plugins || [];
         ckeEditorConfiguration.plugins.push(TextPartLanguage);
+        ckeEditorConfiguration.textPartLanguage = {
+            languageDirections,
+        };
         return ckeEditorConfiguration;
     });
 

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

@@ -0,0 +1,39 @@
+/**
+ * @param {Record<string, 'rtl'|null>} lookupTable
+ * @returns {function(string): string}
+ */
+export const getLanguageDirection = (lookupTable) =>
+    /**
+     * @param {string} languageCode
+     * @returns {'rtl'|'ltr'}
+     */
+    (languageCode) => lookupTable[languageCode] || 'ltr';
+
+/**
+ * Stringify language-code and text-direction to a ckeditor model attribute value
+ * @param {ReturnType<getLanguageDirection>} languageDirectionLookup
+ * @returns {(function(string, string?): string)}
+ */
+export const stringifyLanguageAttribute = (languageDirectionLookup) =>
+    /**
+     * @param {string} languageCode
+     * @param {string} textDirection
+     * @returns {string}
+     */
+    (languageCode, textDirection) => {
+        if (!textDirection) {
+            const isoCode = languageCode.split(/[-_]/)[0];
+            textDirection = languageDirectionLookup(isoCode);
+        }
+        return `${languageCode}:${textDirection}`;
+    };
+
+/**
+ * Retrieves language properties from the attribute as stringified by {@link stringifyLanguageAttribute}.
+ * @param {string} attributeString
+ * @returns {{textDirection: string, languageCode: string}}
+ */
+export const parseLanguageAttribute = (attributeString) => {
+    const [ languageCode, textDirection ] = attributeString.split(':');
+    return { languageCode, textDirection };
+};