Update imports in abbreviation tutorial docs.

docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-1.md

@@ -426,6 +426,12 @@ import { ClassicEditor, Essentials, Bold, Italic, Paragraph } from 'ckeditor5';
 const { ClassicEditor, Essentials, Bold, Italic, Paragraph } = CKEDITOR;
 ```
 
+<info-box type="warning">
+	**Using the editor from CDN requires a commercial license**
+
+	The CDN build is not licensed under the GPL. Therefore, you need to use a commercial license key. Otherwise, you will get a `license-key-invalid-distribution-channel` error.
+</info-box>
+
 After following these steps and running the `npm run dev` command, you should be able to open the editor in browser.
 
 <info-box>

docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2.md

@@ -101,7 +101,7 @@ export default class FormView extends View {
 
 Now, we add the <kbd>Submit</kbd> and <kbd>Cancel</kbd> buttons to our form. You can start by importing `ButtonView` from our UI library together with the icons, which we will use for labels.
 
-We will use the `check` and `cancel` icons from the core package's [icons library](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-core/theme/icons). After importing the icons, we will use them for creating the buttons.
+We will use the `check` and `cancel` icons from the core package's [icons library](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-icons). After importing the icons, we will use them for creating the buttons.
 
 Let's write a `_createButton` function, which will take three arguments &ndash; `label`, `icon` and `className`. We then set the button attributes, using the properties we passed into the function before, and adding a tooltip option.
 
@@ -271,8 +271,8 @@ import {
 	LabeledFieldView,
 	createLabeledInputText,
 	ButtonView,
-	icons,
-	submitHandler	// ADDED
+	IconCheck,
+	submitHandler,	// ADDED
 } from 'ckeditor5';
 
 export default class FormView extends View {

docs/tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-3.md

@@ -50,7 +50,7 @@ import {
 	createLabeledInputText,
 	ButtonView,
 	submitHandler,
-	icons,
+	IconCheck,
 	FocusTracker,		// ADDED
 	KeystrokeHandler,	// ADDED
 } from 'ckeditor5';

tests/manual/abbreviation-level-2.md

@@ -62,26 +62,26 @@ We will use {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView `Lab
 // abbreviation/abbreviationview.js
 
 import {
-    View,
-    LabeledFieldView,               // ADDED
-    createLabeledInputText          // ADDED
-    } from '@ckeditor/ckeditor5-ui';
+	View,
+	LabeledFieldView,               // ADDED
+	createLabeledInputText          // ADDED
+} from '@ckeditor/ckeditor5-ui';
 
 export default class FormView extends View {
 	constructor( locale ) {
-        // ...
+		// ...
 
-        this.abbrInputView = this._createInput( t( 'Add abbreviation' ) );
+		this.abbrInputView = this._createInput( t( 'Add abbreviation' ) );
 		this.titleInputView = this._createInput( t( 'Add title' ) );
 	}
 
-    _createInput( label ) {
-        const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
+	_createInput( label ) {
+		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
 
-        labeledInput.label = label;
+		labeledInput.label = label;
 
-        return labeledInput;
-    }
+		return labeledInput;
+	}
 }
 ```
 
@@ -99,41 +99,39 @@ Last thing is to delegate `cancelButtonView#execute` to the FormView, so pressin
 // abbreviation/abbreviationview.js
 
 import {
-    View,
-    LabeledFieldView,
-    createLabeledInputText,
-    ButtonView                                      // ADDED
-} from '@ckeditor/ckeditor5-ui';
-import {
-    IconCheck,
-		IconCancel
-} from '@ckeditor/ckeditor5-icons';					 // ADDED
+	IconCheck,
+	IconCancel,
+	View,
+	LabeledFieldView,
+	createLabeledInputText,
+	ButtonView // ADDED
+} from 'ckeditor5';
 
 export default class FormView extends View {
 	constructor( locale ) {
-        // ...
+		// ...
 
-        // Create the save and cancel buttons.
-        this.saveButtonView = this._createButton(
-            t( 'Save' ), IconCheck, 'ck-button-save'
-        );
+		// Create the save and cancel buttons.
+		this.saveButtonView = this._createButton(
+			t( 'Save' ), IconCheck, 'ck-button-save'
+		);
 		// Set the type to 'submit', which will trigger
 		// the submit event on entire form when clicked.
 		this.saveButtonView.type = 'submit';
 
 		this.cancelButtonView = this._createButton(
-            t( 'Cancel' ), IconCancel, 'ck-button-cancel'
-        );
+			t( 'Cancel' ), IconCancel, 'ck-button-cancel'
+		);
 		// Delegate ButtonView#execute to FormView#cancel.
 		this.cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
 
 	}
 
-    _createInput( label ) {
-        // ...
-    }
+	_createInput( label ) {
+		// ...
+	}
 
-    _createButton( label, icon, className ) {
+	_createButton( label, icon, className ) {
 		const button = new ButtonView( this.locale );
 
 		button.set( {
@@ -211,20 +209,19 @@ We also need a `focus()` method, which will focus on the first child, so our `ab
 // abbreviation/abbreviationview.js
 
 import {
-    View,
-    LabeledFieldView,
-    createLabeledInputText,
-    ButtonView,
-    submitHandler                                   // ADDED
-    } from '@ckeditor/ckeditor5-ui';
-import { icons } from '@ckeditor/ckeditor5-core';
+	View,
+	LabeledFieldView,
+	createLabeledInputText,
+	ButtonView,
+	submitHandler                                   // ADDED
+} from 'ckeditor5';
 
 export default class FormView extends View {
 	constructor( locale ) {
 
-        // ...
+		// ...
 
-        this.childViews = this.createCollection( [
+		this.childViews = this.createCollection( [
 			this.abbrInputView,
 			this.titleInputView,
 			this.saveButtonView,
@@ -234,33 +231,33 @@ export default class FormView extends View {
 		this.setTemplate( {
 			tag: 'form',
 			attributes: {
-                // ...
+				// ...
 			},
 			children: this.childViews               // ADDED
 		} );
 	}
 
-    render() {
-        super.render();
+	render() {
+		super.render();
 
 		// Submit the form when the user clicked the save button
 		// or pressed enter in the input.
-        submitHandler( {
-            view: this
-        } );
-    }
-
-    focus() {
-        this.childViews.first.focus();
-    }
-
-    _createInput( label ) {
-        // ...
-    }
-
-    _createButton( label, icon, className ) {
-        // ...
-    }
+		submitHandler( {
+			view: this
+		} );
+	}
+
+	focus() {
+		this.childViews.first.focus();
+	}
+
+	_createInput( label ) {
+		// ...
+	}
+
+	_createButton( label, icon, className ) {
+		// ...
+	}
 }
 ```
 
@@ -275,8 +272,7 @@ This is where we ended up with our UI in the first part of the tutorial.
 ```js
 // abbreviation/abbreviationui.js
 
-import { Plugin } from 'ckeditor5';
-import { ButtonView } from '@ckeditor/ckeditor5-ui';
+import { Plugin, ButtonView } from 'ckeditor5';
 
 class AbbreviationUI extends Plugin {
 	init() {
@@ -319,25 +315,29 @@ Finally, let's add our balloon and form view to the `init()` method.
 ```js
 // abbreviation/abbreviationui.js
 
-import { Plugin } from 'ckeditor5';
-import { ButtonView, ContextualBalloon } from '@ckeditor/ckeditor5-ui'; // ADDED
-import FormView from './abbreviationview';                          	// ADDED
+import {
+	Plugin,
+	ButtonView,			// ADDED
+	ContextualBalloon	// ADDED
+} from 'ckeditor5';
+
+import FormView from './abbreviationview';	// ADDED
 
 class AbbreviationUI extends Plugin {
 	static get requires() {
 		return [ ContextualBalloon ];
 	}
 
 	init() {
-        const editor = this.editor;
+		const editor = this.editor;
 		const { t } = editor.locale;
 
-        // Create the balloon and the form view.
+		// Create the balloon and the form view.
 		this._balloon = this.editor.plugins.get( ContextualBalloon );
 		this.formView = this._createFormView();
 
 		editor.ui.componentFactory.add( 'abbreviation', locale => {
-            // ...
+			// ...
 		} );
 	}
 
@@ -353,7 +353,7 @@ class AbbreviationUI extends Plugin {
 		const viewDocument = view.document;
 		let target = null;
 
-        // Set a target position by converting view selection range to DOM
+		// Set a target position by converting view selection range to DOM
 		target = () => view.domConverter.viewRangeToDom(
 			viewDocument.selection.getFirstRange()
 		);
@@ -419,7 +419,7 @@ class AbbreviationUI extends Plugin {
 	}
 
 	init() {
-        // ...
+		// ...
 	}
 
 	_createFormView() {
@@ -442,7 +442,7 @@ class AbbreviationUI extends Plugin {
 	}
 
 	_getBalloonPositionData() {
-        // ...
+		// ...
 	}
 
 	_showUI() {
@@ -467,25 +467,25 @@ Additionally, we will import {@link module:ui/bindings/clickoutsidehandler~click
 // abbreviation/abbreviationui.js
 
 // ...
-import { ContextualBalloon, clickOutsideHandler } from '@ckeditor/ckeditor5-ui'; // ADDED
+import { ContextualBalloon, clickOutsideHandler } from 'ckeditor5'; // ADDED
 
 class AbbreviationUI extends Plugin {
 	static get requires() {
 		return [ ContextualBalloon ];
 	}
 
 	init() {
-        // ...
+		// ...
 	}
 
 	_createFormView() {
 		const editor = this.editor;
 		const formView = new FormView( editor.locale );
 
-        this.listenTo( formView, 'submit', () => {
-            // ...
+		this.listenTo( formView, 'submit', () => {
+			// ...
 
-            // Hide the form view after submit.
+			// Hide the form view after submit.
 			this._hideUI();
 		} );
 
@@ -494,7 +494,7 @@ class AbbreviationUI extends Plugin {
 			this._hideUI();
 		} );
 
-        // Hide the form view when clicking outside the balloon.
+		// Hide the form view when clicking outside the balloon.
 		clickOutsideHandler( {
 			emitter: formView,
 			activator: () => this._balloon.visibleView === formView,
@@ -517,7 +517,7 @@ class AbbreviationUI extends Plugin {
 	}
 
 	_getBalloonPositionData() {
-        // ...
+		// ...
 	}
 
 	_showUI() {