Merge branch 'master' into interim-merge

.gitignore

@@ -8,6 +8,7 @@ build/
 !packages/ckeditor5-build-*/build
 docs/api/output.json
 yarn.lock
+package-lock.json
 coverage/
 
 # Files associated with external repositories.
@@ -18,3 +19,12 @@ mrgit.json
 .DS_Store
 .idea
 .vscode
+
+# Ignore yalc
+.yalc
+yalc.lock
+
+
+# Ignore compiled TypeScript files.
+packages/ckeditor5-utils/src/**/*.js
+packages/*/src/**/*.d.ts

LICENSE.md

@@ -13,10 +13,10 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
-* Lo-Dash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
-* marked - Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
-* turndown - turndown is copyright © 2017+ Dom Christie and released under the MIT license.
-* turndown-plugin-gfm - turndown-plugin-gfm is copyright © 2017+ Dom Christie and released under the MIT license.
+* lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+* marked - Copyright (c) Christopher Jeffrey. (MIT License)
+* turndown - turndown is copyright © Dom Christie and released under the MIT license.
+* turndown-plugin-gfm - turndown-plugin-gfm is copyright © Dom Christie and released under the MIT license.
 
 Trademarks
 ----------

docs/_snippets/examples/multi-root-editor.js

@@ -334,6 +334,8 @@ class MultirootEditorUIView extends EditorUIView {
 	constructor( locale, editingView, editableElements ) {
 		super( locale );
 
+		const t = locale.t;
+
 		/**
 		 * The main toolbar of the decoupled editor UI.
 		 *
@@ -352,7 +354,11 @@ class MultirootEditorUIView extends EditorUIView {
 
 		// Create InlineEditableUIView instance for each editable.
 		for ( const editableName of Object.keys( editableElements ) ) {
-			const editable = new InlineEditableUIView( locale, editingView, editableElements[ editableName ] );
+			const editable = new InlineEditableUIView( locale, editingView, editableElements[ editableName ], {
+				label: editableView => {
+					return t( 'Rich Text Editor. Editing area: %0', editableView.name );
+				}
+			} );
 
 			editable.name = editableName;
 			this.editables.push( editable );

docs/_snippets/framework/abbreviation-level-1.html

@@ -0,0 +1,11 @@
+<div id="snippet-abbreviation-plugin">
+    <h2>Abbreviation plugin</h2>
+    <p>CKEditor5 is a modern, feature-rich, world-class <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor.</p>
+</div>
+
+<style>
+	.formatted abbr:hover::before,
+	.formatted abbr:hover::after {
+		display: none;
+	}
+</style>

docs/_snippets/framework/abbreviation-level-1.js

@@ -0,0 +1,116 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import List from '@ckeditor/ckeditor5-list/src/list';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+class AbbreviationUI extends Plugin {
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add( 'abbreviation', () => {
+			const button = new ButtonView();
+
+			button.label = 'Abbreviation';
+			button.tooltip = true;
+			button.withText = true;
+
+			this.listenTo( button, 'execute', () => {
+				const title = 'What You See Is What You Get';
+				const abbr = 'WYSIWYG';
+
+				editor.model.change( writer => {
+					editor.model.insertContent( writer.createText( abbr, { abbreviation: title } ) );
+				} );
+			} );
+
+			return button;
+		} );
+	}
+}
+
+class AbbreviationEditing extends Plugin {
+	init() {
+		this._defineSchema();
+		this._defineConverters();
+	}
+	_defineSchema() {
+		const schema = this.editor.model.schema;
+		schema.extend( '$text', {
+			allowAttributes: [ 'abbreviation' ]
+		} );
+	}
+	_defineConverters() {
+		const conversion = this.editor.conversion;
+
+		conversion.for( 'downcast' ).attributeToElement( {
+			model: 'abbreviation',
+			view: ( modelAttributeValue, conversionApi ) => {
+				const { writer } = conversionApi;
+				return writer.createAttributeElement( 'abbr', {
+					title: modelAttributeValue
+				} );
+			}
+		} );
+
+		conversion.for( 'upcast' ).elementToAttribute( {
+			view: {
+				name: 'abbr',
+				attributes: [ 'title' ]
+			},
+			model: {
+				key: 'abbreviation',
+				value: viewElement => {
+					const title = viewElement.getAttribute( 'title' );
+					return title;
+				}
+			}
+		} );
+	}
+}
+
+class Abbreviation extends Plugin {
+	static get requires() {
+		return [ AbbreviationEditing, AbbreviationUI ];
+	}
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-abbreviation-plugin' ), {
+		cloudServices: CS_CONFIG,
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
+		},
+		plugins: [ Essentials, Bold, Italic, Heading, List, Paragraph, Abbreviation ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'numberedList', 'bulletedList', '|', 'abbreviation' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		window.attachTourBalloon( {
+			target: window.findToolbarItem( editor.ui.view.toolbar,
+				item => item.label && item.label === 'Abbreviation' ),
+			text: 'Click here to insert the "WYSIWYG" abbreviation',
+			editor
+		} );
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
+

docs/_snippets/framework/abbreviation-level-2.html

@@ -0,0 +1,36 @@
+<div id="snippet-abbreviation-plugin">
+    <h2>Abbreviation plugin</h2>
+    <p>CKEditor5 is a modern, feature-rich, world-class <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor.</p>
+</div>
+
+<style>
+	.formatted abbr:hover::before,
+	.formatted abbr:hover::after {
+		display: none;
+	}
+
+	.ck.ck-abbr-form {
+		padding: var(--ck-spacing-large);
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: repeat(3, 1fr);
+		grid-column-gap: 0px;
+		grid-row-gap: var(--ck-spacing-standard);
+	}
+
+	.ck.ck-abbr-form .ck.ck-labeled-field-view:nth-of-type(1) {
+		grid-area: 1 / 1 / 2 / 3;
+	}
+
+	.ck.ck-abbr-form .ck.ck-labeled-field-view:nth-of-type(2) {
+		grid-area: 2 / 1 / 3 / 3;
+	}
+
+	.ck.ck-abbr-form .ck-button:nth-of-type(1) {
+		grid-area: 3 / 1 / 4 / 2;
+	}
+
+	.ck.ck-abbr-form .ck-button:nth-of-type(2) {
+		grid-area: 3 / 2 / 4 / 3;
+	}
+</style>