diff --git a/frontend/src/app/modules/common/ckeditor/ckeditor-setup.service.ts b/frontend/src/app/modules/common/ckeditor/ckeditor-setup.service.ts index 2ba81d0869..fcd8b96f9d 100644 --- a/frontend/src/app/modules/common/ckeditor/ckeditor-setup.service.ts +++ b/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 diff --git a/frontend/src/app/modules/fields/display/field-types/formattable-display-field.module.ts b/frontend/src/app/modules/fields/display/field-types/formattable-display-field.module.ts index e602231ab1..d189383be5 100644 --- a/frontend/src/app/modules/fields/display/field-types/formattable-display-field.module.ts +++ b/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 = ''; diff --git a/frontend/src/app/modules/fields/edit/field-types/formattable-edit-field.component.ts b/frontend/src/app/modules/fields/edit/field-types/formattable-edit-field.component.ts index ccc9dbac67..ac7f942d6b 100644 --- a/frontend/src/app/modules/fields/edit/field-types/formattable-edit-field.component.ts +++ b/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 } }; } diff --git a/frontend/src/app/modules/fields/edit/field-types/multi-select-edit-field.component.ts b/frontend/src/app/modules/fields/edit/field-types/multi-select-edit-field.component.ts index fcb55c94b2..e1761f23fc 100644 --- a/frontend/src/app/modules/fields/edit/field-types/multi-select-edit-field.component.ts +++ b/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)) })) ); } diff --git a/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts b/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts index 4fa19648f9..54d27824b7 100644 --- a/frontend/src/app/modules/fields/edit/field-types/select-edit-field.component.ts +++ b/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); } } diff --git a/frontend/src/app/modules/fields/field.base.ts b/frontend/src/app/modules/fields/field.base.ts index cb5e7b1743..a2b796ea54 100644 --- a/frontend/src/app/modules/fields/field.base.ts +++ b/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; }