Added feature docs for text fragment language.

package.json

@@ -52,6 +52,7 @@
     "@ckeditor/ckeditor5-html-embed": "^26.0.0",
     "@ckeditor/ckeditor5-image": "^26.0.0",
     "@ckeditor/ckeditor5-indent": "^26.0.0",
+    "@ckeditor/ckeditor5-language": "^26.0.0",
     "@ckeditor/ckeditor5-link": "^26.0.0",
     "@ckeditor/ckeditor5-list": "^26.0.0",
     "@ckeditor/ckeditor5-markdown-gfm": "^26.0.0",

packages/ckeditor5-language/docs/_snippets/features/textpartlanguage.html

@@ -0,0 +1,38 @@
+<div id="snippet-text-part-language">
+	<p>
+		<strong>Language</strong> is the <a href="http://en.wikipedia.org/wiki/Human">human</a> ability to
+		acquire and use complex systems of <a href="http://en.wikipedia.org/wiki/Communication">communication</a>,
+		and <strong>a language</strong> is any specific example of such a system. The scientific study of
+		language is called <a href="http://en.wikipedia.org/wiki/Linguistics">linguistics</a>.
+	</p>
+	<p>
+		<span dir="rtl" lang="he"><strong>שפה</strong> היא דרך <a
+				href="http://he.wikipedia.org/wiki/%D7%AA%D7%A7%D7%A9%D7%95%D7%A8%D7%AA">תקשורת</a> המבוססת
+			על <a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A2%D7%A8%D7%9B%D7%AA">מערכת</a> <a
+				href="http://he.wikipedia.org/wiki/%D7%A1%D7%9E%D7%9C">סמלים</a> מורכבת בעלת חוקיות, המאפשרת
+			לקודד <a
+				href="http://he.wikipedia.org/wiki/%D7%90%D7%A8%D7%92%D7%95%D7%9F_(%D7%A4%D7%A2%D7%95%D7%9C%D7%94)">ולארגן</a>
+			<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%99%D7%93%D7%A2">מידע</a> בעל <a
+				href="http://he.wikipedia.org/wiki/%D7%9E%D7%A9%D7%9E%D7%A2%D7%95%D7%AA">משמעויות</a> רבות
+			ומגוונות. נהוג להבדיל בין הסמל השפתי ה<a
+				href="http://he.wikipedia.org/wiki/%D7%9E%D7%A1%D7%9E%D7%9F">מסמן</a> לבין המושג או התוכן ה<a
+				href="http://he.wikipedia.org/wiki/%D7%9E%D7%A1%D7%95%D7%9E%D7%9F">מסומן</a> בו, אשר יכול
+			להיות <a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A6%D7%99%D7%90%D7%95%D7%AA">מציאותי</a> או <a
+				href="http://he.wikipedia.org/wiki/%D7%94%D7%A4%D7%A9%D7%98%D7%94">מופשט</a>.</span>
+	</p>
+	<p>
+		<span dir="ltr" lang="es">Un <strong>lenguaje</strong> (del <a
+				href="http://es.wikipedia.org/wiki/Idioma_occitano">provenzal</a> <em>lenguatge</em> y este
+			del <a href="http://es.wikipedia.org/wiki/Lat%C3%ADn">lat&iacute;n</a> <em>lingua</em>) es un
+			sistema de <a href="http://es.wikipedia.org/wiki/Comunicaci%C3%B3n">comunicaci&oacute;n</a> estructurado
+			para el
+			que existe un <a href="http://es.wikipedia.org/wiki/Significado">contexto</a> de uso y ciertos
+			principios combinatorios formales. Existen contextos tanto naturales como artificiales.</span>
+	</p>
+	<p>
+		<span dir="rtl" lang="ar"><strong>اللغة</strong> نسق من الإشارات والرموز، يشكل أداة من أدوات <a
+				href="http://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81%D8%A9">المعرفة</a>، وتعتبر اللغة
+			أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس
+			المعرفي.</span>
+	</p>
+</div>

packages/ckeditor5-language/docs/_snippets/features/textpartlanguage.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import TextPartLanguage from '@ckeditor/ckeditor5-language/src/textpartlanguage';
+
+ClassicEditor.builtinPlugins.push( TextPartLanguage );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-text-part-language' ), {
+		language: {
+			textPartLanguage: [
+				{ title: 'Arabic', languageCode: 'ar' },
+				{ title: 'French', languageCode: 'fr' },
+				{ title: 'Hebrew', languageCode: 'he' },
+				{ title: 'Spanish', languageCode: 'es' }
+			]
+		},
+		toolbar: {
+			items: [
+				'textPartLanguage',
+				'|',
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'link',
+				'|',
+				'bulletedList',
+				'numberedList',
+				'|',
+				'blockQuote',
+				'outdent',
+				'indent',
+				'|',
+				'undo',
+				'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		window.attachTourBalloon( {
+			target: window.findToolbarItem(
+				editor.ui.view.toolbar,
+				item => item.buttonView && item.buttonView.label && item.buttonView.label.startsWith( 'Choose language' )
+			),
+			text: 'Click to apply a language to text selection.',
+			editor
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-language/docs/api/language.md

@@ -8,6 +8,18 @@ category: api-reference
 
 This package implements language features support for CKEditor 5.
 
+## Demo
+
+Check out the {@link features/language#demo demo in the Language feature} guide.
+
+## Documentation
+
+See the {@link features/language Language feature} guide.
+
+You can also check out the following plugins:
+
+* {@link module:language/textpartlanguage~TextPartLanguage}
+
 ## Installation
 
 ```

packages/ckeditor5-language/docs/features/language.md

@@ -0,0 +1,82 @@
+---
+category: features
+menu-title: Language
+---
+
+# Text Part Language
+
+The {@link module:language/textpartlanguage~TextPartLanguage} feature makes working with multilingual content very convenient by providing the ability to set the text direction as well as mark the language of selected text fragments.
+
+This ensures that user agents can correctly present content written in multiple languages.
+
+The feature is especially useful when your text content includes text parts written in different text directions, e.g. when the whole content is written in English but includes some citations in Arabic.
+
+The text part language feature implements [WCAG 3.1.2 Language of Parts](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html) specification.
+
+## Demo
+
+Use the editor below to see the text part language plugin in action.
+
+{@snippet features/textpartlanguage}
+
+## Related features
+
+Here are some other CKEditor 5 features that also affects editor language:
+
+* {@link features/ui-language UI Language}  – Set the UI language.
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-langauge`](https://www.npmjs.com/package/@ckeditor/ckeditor5-langauge) package:
+
+```plaintext
+npm install --save @ckeditor/ckeditor5-langauge
+```
+
+And add it to your plugin list configuration:
+
+```js
+import TextPartLanguage from '@ckeditor/ckeditor5-langauge/src/textpartlanguage';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ TextPartLanguage, ... ],
+		toolbar: [ 'textPartLanguage', ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:langauge/textpartlanguage~TextPartLanguage} plugin registers:
+
+* the `'textPartLanguage'` UI dropdown component implemented by the {@link module:langauge/textpartlanguageui~TextPartLanguageUI text part language UI feature},
+* the `'textPartLanguage'` command implemented by the {@link module:langauge/textpartlanguageediting~TextPartLanguageEditing text part language editing feature}.
+
+The command can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Applies language to the selected text part with the given language code.
+editor.execute( 'textPartLanguage', { languageCode: 'es' } );
+
+// Optionally, you can also provide text direction information ('ltr' or 'rtl'),
+// however, note that the feature will resolve text direction by itself, so in most
+// cases this option is redundant.
+editor.execute( 'textPartLanguage', {
+	languageCode: 'ar',
+	textDirection: 'rtl' // Optional text direction.
+} );
+```
+
+<info-box>
+	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
+</info-box>
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-language.

packages/ckeditor5-restricted-editing/docs/_snippets/features/restricted-editing.js

@@ -75,7 +75,7 @@ async function reloadEditor( config ) {
 			window.editor.ui.view.toolbar,
 			item => item.label && [ 'Enable editing', 'Disable editing' ].includes( item.label )
 		),
-		text: 'Click to switch restricted editing mode.',
+		text: 'Click to add or remove editable regions.',
 		editor: window.editor
 	} );
 }

packages/ckeditor5-restricted-editing/docs/features/restricted-editing.md

@@ -21,7 +21,7 @@ By using this feature, the users of your application will be able to create temp
 
 ## Demo
 
-The demo below allows you to emulate both modes. You can start from creating a template of the document in the standard editing mode.
+The demo below allows you to emulate both modes. You can start from creating a template of the document in the standard editing mode. Use the toolbar button to turn selected area into an editable region or to remove an existing one.
 
 Then you can switch to the restricted editing mode to see how the editable and non-editable regions behave.