Show content of CKEditor from right to left when the fields schema says so

frontend/src/app/modules/common/ckeditor/ckeditor-setup.service.ts

@@ -28,6 +28,10 @@ export interface ICKEditorContext {
   removePlugins?:string[];
   // Set of enabled macro plugins or false to disable all
   macros?:'none'|'wp'|'full'|boolean|string[];
+  // Additional options like the text orientation of the editors content
+  options?:{
+    rtl?:boolean;
+  };
   // context link to append on preview requests
   previewContext?:string;
 }
@@ -61,10 +65,15 @@ export class CKEditorSetupService {
     const toolbarWrapper = wrapper.querySelector('.document-editor__toolbar') as HTMLElement;
     const contentWrapper = wrapper.querySelector('.document-editor__editable') as HTMLElement;
 
+    var contentLanguage = context.options && context.options.rtl ? 'ar' : 'en';
+
     return editor
       .createCustomized(contentWrapper, {
         openProject: this.createConfig(context),
-        initialData: initialData
+        initialData: initialData,
+        language: {
+          content: contentLanguage
+        }
       })
       .then((editor) => {
         // Add decoupled toolbar

frontend/src/app/modules/fields/display/field-types/formattable-display-field.module.ts

@@ -37,8 +37,12 @@ export class FormattableDisplayField extends DisplayField {
 
   public render(element:HTMLElement, displayText:string, options:any = {}):void {
     let div = document.createElement('div');
+
     div.classList.add('read-value--html', 'wiki', 'highlight', '-multiline');
-    if (options.rtl) { div.classList.add('-rtl'); }
+    if (options.rtl) {
+      div.classList.add('-rtl');
+    }
+
     div.innerHTML = displayText;
 
     element.innerHTML = '';

frontend/src/app/modules/fields/edit/field-types/formattable-edit-field.component.ts

@@ -116,7 +116,8 @@ export class FormattableEditFieldComponent extends EditFieldComponent implements
     return {
       resource: this.resource,
       macros: 'none' as 'none',
-      previewContext: this.previewContext
+      previewContext: this.previewContext,
+      options: { rtl: this.schema.options.rtl }
     };
   }
 

frontend/src/app/modules/fields/edit/field-types/multi-select-edit-field.component.ts

@@ -42,7 +42,7 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
   @ViewChild(NgSelectComponent, { static: true }) public ngSelectComponent:NgSelectComponent;
 
   readonly I18n:I18nService = this.injector.get(I18nService);
-  public options:any[] = [];
+  public availableOptions:any[] = [];
   public valueOptions:ValueOption[];
   public text = {
     requiredPlaceholder: this.I18n.t('js.placeholders.selection'),
@@ -70,7 +70,7 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
         untilComponentDestroyed(this),
       )
       .subscribe(() => {
-        this.requestFocus = this.options.length === 0;
+        this.requestFocus = this.availableOptions.length === 0;
 
         // If we already have all values loaded, open now.
         if (!this.requestFocus) {
@@ -108,7 +108,7 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
   public set selectedOption(val:ValueOption[]) {
     this._selectedOption = val;
     let mapper = (val:ValueOption) => {
-      let option = _.find(this.options, o => o.$href === val.$href) || this.nullOption;
+      let option = _.find(this.availableOptions, o => o.$href === val.$href) || this.nullOption;
 
       // Special case 'null' value, which angular
       // only understands in ng-options as an empty string.
@@ -166,14 +166,14 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
       });
     }
 
-    this.options = availableValues || [];
-    this.valueOptions = this.options.map(el => {
+    this.availableOptions = availableValues || [];
+    this.valueOptions = this.availableOptions.map(el => {
       return { name: el.name, $href: el.$href };
     });
     this._selectedOption = this.buildSelectedOption();
     this.checkCurrentValueValidity();
 
-    if (this.options.length > 0 && this.requestFocus) {
+    if (this.availableOptions.length > 0 && this.requestFocus) {
       this.openAutocompleteSelectField();
       this.requestFocus = false;
     }
@@ -209,7 +209,7 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
         // (If value AND)
         // MultiSelect AND there is no value which href is not in the options hrefs
         (!_.some(this.value, (value:HalResource) => {
-          return _.some(this.options, (option) => (option.$href === value.$href))
+          return _.some(this.availableOptions, (option) => (option.$href === value.$href))
         }))
       );
     }

frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts

@@ -48,7 +48,7 @@ export interface ValueOption {
 export class SelectEditFieldComponent extends EditFieldComponent implements OnInit {
   public selectAutocompleterRegister = this.injector.get(SelectAutocompleterRegisterService);
 
-  public options:any[];
+  public availableOptions:any[];
   public valueOptions:ValueOption[];
   public text:{ requiredPlaceholder:string, placeholder:string };
 
@@ -104,7 +104,7 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
   }
 
   public set selectedOption(val:ValueOption) {
-    let option = _.find(this.options, o => o.$href === val.$href);
+    let option = _.find(this.availableOptions, o => o.$href === val.$href);
 
     // Special case 'null' value, which angular
     // only understands in ng-options as an empty string.
@@ -116,9 +116,9 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
   }
 
   private setValues(availableValues:HalResource[]) {
-    this.options = this.halSorting.sort(availableValues);
+    this.availableOptions = this.halSorting.sort(availableValues);
     this.addEmptyOption();
-    this.valueOptions = this.options.map(el => {
+    this.valueOptions = this.availableOptions.map(el => {
       return {name: el.name, $href: el.$href};
     });
   }
@@ -138,13 +138,13 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
   }
 
   private addValue(val:HalResource) {
-    this.options.push(val);
+    this.availableOptions.push(val);
     this.valueOptions.push({name: val.name, $href: val.$href});
   }
 
   public get currentValueInvalid():boolean {
     return !!(
-      (this.value && !_.some(this.options, (option:HalResource) => (option.$href === this.value.$href)))
+      (this.value && !_.some(this.availableOptions, (option:HalResource) => (option.$href === this.value.$href)))
       ||
       (!this.value && this.schema.required)
     );
@@ -191,7 +191,7 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
     // the option if one is returned / exists already.
     const emptyOption = this.getEmptyOption();
     if (emptyOption === undefined) {
-      this.options.unshift({
+      this.availableOptions.unshift({
         name: this.text.placeholder,
         $href: ''
       });
@@ -199,6 +199,6 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
   }
 
   private getEmptyOption():ValueOption|undefined {
-    return _.find(this.options, el => el.name === this.text.placeholder);
+    return _.find(this.availableOptions, el => el.name === this.text.placeholder);
   }
 }

frontend/src/app/modules/fields/field.base.ts

@@ -36,6 +36,7 @@ export interface IFieldSchema {
   required?:boolean;
   hasDefault:boolean;
   name?:string;
+  options?:any;
 }
 
 export class Field {
@@ -69,6 +70,10 @@ export class Field {
     return this.schema.hasDefault;
   }
 
+  public get options():boolean {
+    return this.schema.options;
+  }
+
   public isEmpty():boolean {
     return !this.value;
   }