Aleksander Nowodzinski 6 years ago
parent
commit
aebae89cbd

+ 1 - 0
packages/ckeditor5-utils/package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-build-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
     "@ckeditor/ckeditor5-core": "^12.1.0",
     "@ckeditor/ckeditor5-engine": "^13.1.0",
     "eslint": "^5.5.0",

+ 37 - 3
packages/ckeditor5-utils/src/locale.js

@@ -9,6 +9,8 @@
 
 import { translate } from './translation-service';
 
+const RTL_LANGUAGE_CODES = { ar: 1, fa: 1, he: 1, ku: 1, ug: 1 };
+
 /**
  * Represents the localization services.
  */
@@ -16,11 +18,16 @@ export default class Locale {
 	/**
 	 * Creates a new instance of the Locale class.
 	 *
-	 * @param {String} [language='en'] The language code in [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+	 * @param {String} [language='en'] The editor language code in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+	 * @param {String} [contentLanguage] The editor content language code in the
+	 * [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
 	 */
-	constructor( language ) {
+	constructor( language, contentLanguage ) {
 		/**
-		 * The language code in [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+		 * The editor language code in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+		 *
+		 * It controls the language of the editor UI. If the {@link #contentLanguage content language}
+		 * was not specified in the `Locale` constructor, it also defines the language of the content.
 		 *
 		 * @readonly
 		 * @member {String}
@@ -28,6 +35,33 @@ export default class Locale {
 		this.language = language || 'en';
 
 		/**
+		 * The editor content language code in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+		 *
+		 * Usually the same as {@link #language editor language}, it can be customized by passing an optional
+		 * argument to the `Locale` constructor.
+		 *
+		 * @readonly
+		 * @member {String}
+		 */
+		this.contentLanguage = contentLanguage || this.language;
+
+		/**
+		 * Text direction of the {@link #language editor language}.
+		 *
+		 * @readonly
+		 * @member {String}
+		 */
+		this.languageDirection = RTL_LANGUAGE_CODES[ this.language ] ? 'rtl' : 'ltr';
+
+		/**
+		 * Text direction of the {@link #contentLanguage editor content language}.
+		 *
+		 * @readonly
+		 * @member {String}
+		 */
+		this.contentLanguageDirection = RTL_LANGUAGE_CODES[ this.contentLanguage ] ? 'rtl' : 'ltr';
+
+		/**
 		 * Translates the given string to the {@link #language}. This method is also available in {@link module:core/editor/editor~Editor#t}
 		 * and {@link module:ui/view~View#t}.
 		 *

+ 24 - 0
packages/ckeditor5-utils/tests/manual/locale/locale.html

@@ -0,0 +1,24 @@
+<h2>config.language = 'de' (LTR)</h2>
+
+<div id="editor-language">
+	<p>This is an editor instance.</p>
+</div>
+
+<h2>config.language = 'ar' (RTL)</h2>
+
+<div id="editor-language-rtl">
+	<p>مرحبا</p>
+</div>
+
+<h2>config.language = 'en' (LTR), <br />config.contentLanguage = 'ar' (RTL)</h2>
+
+<div id="editor-language-rtl-content">
+	<p>مرحبا</p>
+</div>
+
+<h2>config.language = 'ar' (RTL), <br />config.contentLanguage = 'en' (LTR)</h2>
+
+<div id="editor-language-rtl-ui">
+	<p>This is an editor instance.</p>
+</div>
+

+ 85 - 0
packages/ckeditor5-utils/tests/manual/locale/locale.js

@@ -0,0 +1,85 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global window, console, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+// import { add as addTranslations } from '../../../src/translation-service';
+
+// import '@ckeditor/ckeditor5-build-classic/build/translations/de.js';
+// import '@ckeditor/ckeditor5-build-classic/build/translations/ar.js';
+
+// addTranslations( 'de', window.CKEDITOR_TRANSLATIONS.de );
+
+const toolbarConfig = [
+	'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'
+];
+
+ClassicEditor
+	.create( document.querySelector( '#editor-language' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: toolbarConfig,
+
+		language: 'de'
+	} )
+	.then( newEditor => {
+		window.editorLanguage = newEditor;
+
+		console.log( 'Editor created, locale:', newEditor.locale );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-language-rtl' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: toolbarConfig,
+
+		language: 'ar'
+	} )
+	.then( newEditor => {
+		window.editorLanguageRTL = newEditor;
+
+		console.log( 'Editor created, locale:', newEditor.locale );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-language-rtl-content' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: toolbarConfig,
+
+		language: 'en',
+		contentLanguage: 'ar'
+	} )
+	.then( newEditor => {
+		window.editorLanguageRTLContent = newEditor;
+
+		console.log( 'Editor created, locale:', newEditor.locale );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-language-rtl-ui' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: toolbarConfig,
+
+		language: 'ar',
+		contentLanguage: 'en'
+	} )
+	.then( newEditor => {
+		window.editorLanguageRTLUI = newEditor;
+
+		console.log( 'Editor created, locale:', newEditor.locale );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 0
packages/ckeditor5-utils/tests/manual/locale/locale.md

@@ -0,0 +1 @@
+TODO