Browse Source

Merge branch 'master' into t/umberto/749

Piotrek Koszuliński 6 years ago
parent
commit
6a3a2f47f8

+ 1 - 1
CHANGELOG.md

@@ -5,7 +5,7 @@ Changelog
 
 We are happy to report the release of CKEditor 5 v12.1.0. This release introduces 3 new features ([mentions](https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html), [font color and background color](https://ckeditor.com/docs/ckeditor5/latest/features/font.html) and [remove format](https://ckeditor.com/docs/ckeditor5/latest/features/remove-format.html)).
 
-Blog post comming soon...
+Read more in the blog post: https://ckeditor.com/blog/CKEditor-5-v12.1.0-with-mentions-font-color-and-remove-formatting-released/
 
 ### Dependencies
 

+ 1 - 1
docs/_snippets/framework/development-tools/inspector.html

@@ -9,7 +9,7 @@
 		<li>Browse and inspect the model and view structures.</li>
 		<li>Observe the selection position.</li>
 		<li>Check the list of commands and their state.</li>
-		<li>More features comming soon!</li>
+		<li>More features coming soon!</li>
 	</ul>
 </div>
 

+ 4 - 4
docs/_snippets/framework/tutorials/block-widget.js

@@ -31,7 +31,7 @@ class SimpleBoxUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
-		// The "simpleBox" button must be registered among UI components of the editor
+		// The "simpleBox" button must be registered among the UI components of the editor
 		// to be displayed in the toolbar.
 		editor.ui.componentFactory.add( 'simpleBox', locale => {
 			// The state of the button will be bound to the widget command.
@@ -156,7 +156,7 @@ class SimpleBoxEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'simpleBoxTitle',
 			view: ( modelElement, viewWriter ) => {
-				// Note: we use a more specialized createEditableElement() method here.
+				// Note: You use a more specialized createEditableElement() method here.
 				const h1 = viewWriter.createEditableElement( 'h1', { class: 'simple-box-title' } );
 
 				return toWidgetEditable( h1, viewWriter );
@@ -181,7 +181,7 @@ class SimpleBoxEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'simpleBoxDescription',
 			view: ( modelElement, viewWriter ) => {
-				// Note: we use a more specialized createEditableElement() method here.
+				// Note: You use a more specialized createEditableElement() method here.
 				const div = viewWriter.createEditableElement( 'div', { class: 'simple-box-description' } );
 
 				return toWidgetEditable( div, viewWriter );
@@ -194,7 +194,7 @@ class InsertSimpleBoxCommand extends Command {
 	execute() {
 		this.editor.model.change( writer => {
 			// Insert <simpleBox>*</simpleBox> at the current selection position
-			// in a way which will result in creating a valid model structure.
+			// in a way that will result in creating a valid model structure.
 			this.editor.model.insertContent( createSimpleBox( writer ) );
 		} );
 	}

+ 2 - 2
docs/builds/guides/frameworks/angular.md

@@ -255,7 +255,7 @@ First, create a (S)CSS file in the parent component's directory and style the gi
 ```css
 /* src/app/app.component.css */
 
-:host ::ng-deep .ck-editor__editable {
+:host ::ng-deep .ck-editor__editable_inline {
 	min-height: 500px;
 }
 ```
@@ -278,7 +278,7 @@ To style the component using a global stylesheet, first, create it:
 ```css
 /* src/styles.css */
 
-.ck-editor__editable {
+.ck-editor__editable_inline {
 	min-height: 500px;
 }
 ```

+ 19 - 19
docs/builds/guides/frameworks/react.md

@@ -14,7 +14,7 @@ The easiest way to use CKEditor 5 in your React application is by choosing one o
 
 ## Quick start
 
-Install the [CKEditor 5 WYSIWYG editor component for React](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) and the editor build of your choice.
+Install the [CKEditor 5 WYSIWYG editor component for React](https://www.npmjs.com/package/@ckeditor/ckeditor5-react) and the {@link builds/guides/overview#available-builds editor build of your choice}.
 
 Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
 
@@ -95,7 +95,7 @@ There are two main ways to do that.
 
 ### Note: Building for production
 
-If you still work with `create-react-app@1` or use a custom configuration for you application which still uses `webpack@3`, you will need to adjust the `UglifyJsPlugin` option to make CKEditor 5 compatible with this setup. CKEditor 5 builds use ES6 so the default JavaScript minifier of `webpack@3` and `create-react-app@1` is not able to digest them.
+If you still work with `create-react-app@1` or use a custom configuration for you application that still uses `webpack@3`, you will need to adjust the `UglifyJsPlugin` option to make CKEditor 5 compatible with this setup. CKEditor 5 builds use ES6 so the default JavaScript minifier of `webpack@3` and `create-react-app@1` is not able to digest them.
 
 To do that, you need to first [eject the configuration](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) from the setup created via `create-react-app` (assuming that you use it):
 
@@ -147,31 +147,31 @@ This guide assumes that you are using [Create React App CLI](https://github.com/
 
 ### Using `create-react-app@2`
 
-The configuration needs to be ejected so you are able to customize the webpack configuration. In order to be able to build CKEditor 5 from source you need to tell webpack how to handle CKEditor 5's SVG and CSS files (by adding loaders configuration). Additionally, you need to exclude CKEditor 5's source from existing loaders.
+The configuration needs to be ejected to make it possible to customize the webpack configuration. In order to be able to build CKEditor 5 from source, you need to tell webpack how to handle CKEditor 5's SVG and CSS files (by adding loaders configuration). Additionally, you need to exclude the CKEditor 5 source from existing loaders.
 
 <info-box>
   You can see all the changes described below in this example project: https://github.com/ckeditor/ckeditor5-react-example/commits/master.
 </info-box>
 
-Let's create a sample application using `create-react-app@2` first:
+Create a sample application using `create-react-app@2` first:
 
 ```bash
 npx create-react-app ckeditor5-react-example && cd ckeditor5-react-example
 ```
 
-Now, you can eject the configuration (you can find more information about ejecting [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject)):
+Now you can eject the configuration (you can find more information about ejecting [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject)):
 
 ```bash
 yarn eject
 
-# For some strange reasons this is needed too
-# (https://github.com/facebook/create-react-app/issues/6099)
+# For some strange reasons this is needed, too
+# (https://github.com/facebook/create-react-app/issues/6099).
 yarn add @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self
 ```
 
 #### Installing missing dependencies
 
-Before we will start modifying the webpack configuration, let's first install a couple of CKEditor 5 dependencies that you will need:
+Before you start modifying the webpack configuration, first install some CKEditor 5 dependencies that you will need:
 
 ```bash
 yarn add \
@@ -187,7 +187,7 @@ yarn add \
 
 #### Modifying webpack configuration
 
-Once you ejected the configuration and installed dependencies, you can now edit the webpack config (`config/webpack.config.js`).
+Once you ejected the configuration and installed dependencies, you can now edit the webpack configuration (`config/webpack.config.js`).
 
 First, import an object that creates the configuration for PostCSS:
 
@@ -195,7 +195,7 @@ First, import an object that creates the configuration for PostCSS:
 const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 ```
 
-Then, add two new elements to the exported object under the `module.rules` array (as new items of the `oneOf` array). These are SVG and CSS loaders required to handle CKEditor 5 source:
+Then, add two new elements to the exported object under the `module.rules` array (as new items of the `oneOf` array). These are SVG and CSS loaders required to handle the CKEditor 5 source:
 
 ```js
 {
@@ -224,7 +224,7 @@ Then, add two new elements to the exported object under the `module.rules` array
 },
 ```
 
-Now, you need to exclude CSS files used by CKEditor 5 from project's CSS loader.
+Now you need to exclude CSS files used by CKEditor 5 from the project's CSS loader.
 
 First, find a loader that starts its definition with the following code: `test: cssRegex` and modify it:
 
@@ -239,7 +239,7 @@ First, find a loader that starts its definition with the following code: `test:
 }
 ```
 
-Below it, you will find another loader that handles CSS files. We need to disable it for CKEditor 5 CSS as well. Its definition starts with `test: cssModuleRegex`:
+Below it, you will find another loader that handles CSS files. You need to disable it for CKEditor 5 CSS as well. Its definition starts with `test: cssModuleRegex`:
 
 ```js
 {
@@ -251,15 +251,15 @@ Below it, you will find another loader that handles CSS files. We need to disabl
 }
 ```
 
-Finally, exclude CKEditor 5 SVG and CSS files from `file-loader` . Find the last item in the `module.rules` array which should be the `file-loader` configuration and modify it so it looks like this:
+Finally, exclude CKEditor 5 SVG and CSS files from `file-loader` . Find the last item in the `module.rules` array which should be the `file-loader` configuration, and modify it so it looks like this:
 
 ```js
 {
   loader: require.resolve('file-loader'),
-  // Exclude `js` files to keep "css" loader working as it injects
-  // its runtime that would otherwise be processed through "file" loader.
+  // Exclude `js` files to keep the "css" loader working as it injects
+  // its runtime that would otherwise be processed through the "file" loader.
   // Also exclude `html` and `json` extensions so they get processed
-  // by webpacks internal loaders.
+  // by webpack's internal loaders.
   exclude: [
     /\.(js|mjs|jsx|ts|tsx)$/,
     /\.html$/,
@@ -275,14 +275,14 @@ Finally, exclude CKEditor 5 SVG and CSS files from `file-loader` . Find the last
 
 #### Using CKEditor 5 source
 
-Once your configuration is updated, you can now use CKEditor 5 directly from source. Let's test it by editing `src/App.js`:
+Once your configuration is updated, you can now use CKEditor 5 directly from source. Test it by editing `src/App.js`:
 
 ```jsx
 import React, { Component } from 'react';
 
 import CKEditor from '@ckeditor/ckeditor5-react';
 
-// NOTE: We use editor from source (not a build)!
+// NOTE: Use the editor from source (not a build)!
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
@@ -355,7 +355,7 @@ Now you can eject the configuration:
 npm run eject
 ```
 
-The configuration needs to be ejected in order for you to be able to customize webpack configuration. To be able to build CKEditor 5 from source you must load inline SVG images and handle CKEditor 5's CSS as well as correctly minify the ES6 source.
+The configuration needs to be ejected to make it possible to customize the webpack configuration. To be able to build CKEditor 5 from source you must load inline SVG images and handle CKEditor 5's CSS as well as correctly minify the ES6 source.
 
 <info-box>
 	You can find more information about ejecting [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject).

+ 1 - 1
docs/builds/guides/frameworks/vuejs.md

@@ -21,7 +21,7 @@ Additionally, you can [integrate CKEditor 5 from source](#using-ckeditor-from-so
 
 ## Quick start
 
-Install the [CKEditor 5 WYSIWYG editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) and the {@link builds/guides/overview#available-builds build of your choice}.
+Install the [CKEditor 5 WYSIWYG editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) and the {@link builds/guides/overview#available-builds editor build of your choice}.
 
 Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
 

File diff suppressed because it is too large
+ 3 - 3
docs/builds/guides/migrate.md


+ 8 - 8
docs/framework/guides/development-tools.md

@@ -5,21 +5,21 @@ order: 40
 
 # Development tools
 
-In this guide you will learn about developer tools that will help you develop and debug editor plugins and features.
+In this guide you will learn about developer tools that will help you develop and debug CKEditor 5 plugins and features.
 
 ## CKEditor 5 inspector
 
-The official [CKEditor 5 inspector](https://github.com/ckeditor/ckeditor5-inspector) provides rich debugging tools for editor internals like {@link framework/guides/architecture/editing-engine#model model}, {@link framework/guides/architecture/editing-engine#view view}, and  {@link framework/guides/architecture/core-editor-architecture#commands commands}.
+The official [CKEditor 5 inspector](https://github.com/ckeditor/ckeditor5-inspector) provides rich debugging tools for editor internals like {@link framework/guides/architecture/editing-engine#model model}, {@link framework/guides/architecture/editing-engine#view view}, and {@link framework/guides/architecture/core-editor-architecture#commands commands}.
 
-It allows observing changes to the data structures and the selection live in the editor which is particularly helpful when developing new editor features or getting to understand the existing ones.
+It allows you to observe changes to the data structures and the selection live in the editor, which is particularly helpful when developing new rich-text editor features or getting to understand the existing ones.
 
-{@img assets/img/framework-development-tools-inspector.jpg Screenshot of a CKEditor 5 inspector attached to an editor instance.}
+{@img assets/img/framework-development-tools-inspector.jpg Screenshot of the CKEditor 5 inspector attached to a WYSIWYG editor instance.}
 
 ### Importing the inspector
 
 You can import the inspector as an [`@ckeditor/ckeditor5-inspector`](https://www.npmjs.com/package/@ckeditor/ckeditor5-inspector) package into your project:
 
-```
+```bash
 npm install --save-dev @ckeditor/ckeditor5-inspector
 ```
 
@@ -54,7 +54,7 @@ The inspector will show up at the bottom of the screen.
 
 ### Inspecting multiple editors
 
-You can inspect multiple editor instances at a time by calling `CKEditorInspector.attach()` for each one of them. Then you can switch the inspector context to inspect different editors.
+You can inspect multiple CKEditor 5 instances at a time by calling `CKEditorInspector.attach()` for each one of them. Then you can switch the inspector context to inspect different editor instances.
 
 You can specify the name of the editor when attaching to make working with multiple instances easier:
 
@@ -78,9 +78,9 @@ The source code of CKEditor 5 inspector and its issue tracker is available on Gi
 
 ## Testing helpers
 
-The `getData()` and `setData()` functions exposed by {@link module:engine/dev-utils/model model dev utils} and {@link module:engine/dev-utils/view view dev utils} are useful development helpers.
+The `getData()` and `setData()` functions exposed by {@link module:engine/dev-utils/model model developer utilities} and {@link module:engine/dev-utils/view view developer utilities} are useful development helpers.
 
-They allow "stringifying" {@link framework/guides/architecture/editing-engine#model model} and {@link framework/guides/architecture/editing-engine#view view} structures, selections, ranges, and positions as well as loading them from a string. They are often used when writing tests.
+They allow for "stringifying" the {@link framework/guides/architecture/editing-engine#model model} and {@link framework/guides/architecture/editing-engine#view view} structures, selections, ranges, and positions as well as for loading them from a string. They are often used when writing tests.
 
 <info-box>
 	Both tools are designed for prototyping, debugging, and testing purposes. Do not use them in production-grade code.

+ 72 - 70
docs/framework/guides/tutorials/implementing-a-block-widget.md

@@ -5,7 +5,9 @@ order: 10
 
 # Implementing a block widget
 
-In this tutorial, you will learn how to implement a more complex CKEditor 5 plugin. We will build a "Simple box" feature which will allow the user to insert a custom box with a title and body fields into the document. We will use the widget utils and work with the model-view conversion in order to properly set up the behavior of this feature. Later on, we will create a UI which will allow inserting new simple boxes into the document via the toolbar button.
+In this tutorial, you will learn how to implement a more complex CKEditor 5 plugin. 
+
+You will build a "Simple box" feature which will allow the user to insert a custom box with a title and body fields into the document. You will use the widget utilities and work with the model-view conversion in order to properly set up the behavior of this feature. Later on, you will create a UI which will allow for inserting new simple boxes into the document with the toolbar button.
 
 <info-box>
 	If you want to see the final product of this tutorial before you plunge in, check out the [demo](#demo).
@@ -15,9 +17,9 @@ In this tutorial, you will learn how to implement a more complex CKEditor 5 plug
 
 ## Before you start
 
-While it is not strictly necessary to read the {@link framework/guides/quick-start Quick start} guide before going through this tutorial, it may help you to get more comfortable with CKEditor 5 framework before you will dive into this tutorial.
+While it is not strictly necessary to read the {@link framework/guides/quick-start Quick start} guide before going through this tutorial, it may help you to get more comfortable with CKEditor 5 Framework before you dive into this tutorial.
 
-We will also reference various parts of the {@link framework/guides/architecture/intro CKEditor 5 architecture} section as we go. While reading them is not necessary to finish this tutorial, we recommend reading those guides at some point to get a better understanding of the mechanisms used in this tutorial.
+The tutorial will also reference various parts of the {@link framework/guides/architecture/intro CKEditor 5 architecture} section as you go. While reading them is not necessary to finish this tutorial, it is recommended to read these guides at some point to get a better understanding of the mechanisms used in this tutorial.
 
 ## Let's start
 
@@ -42,7 +44,7 @@ npm install --save \
 	@ckeditor/ckeditor5-theme-lark
 ```
 
-Create minimal webpack configuration:
+Create a minimal webpack configuration:
 
 ```js
 // webpack.config.js
@@ -145,9 +147,9 @@ And an `index.html` page:
 </html>
 ```
 
-Finally, let's build your project and see if everything worked well by opening the index page in your browser:
+Finally, build your project:
 
-```
+```bash
 p@m /workspace/creating-a-plugin> ./node_modules/.bin/webpack --mode development
 Hash: a4a7cf092b8d69199848
 Version: webpack 4.28.4
@@ -163,15 +165,15 @@ Entrypoint main [big] = bundle.js bundle.js.map
     + 904 hidden modules
 ```
 
-You should see a CKEditor 5 instance like this:
+And now see if everything worked well by opening the index page in your browser. You should see a CKEditor 5 instance like this:
 
 {@img assets/img/tutorial-implementing-a-widget-1.png Screenshot of a classic editor initialized from source.}
 
 ## Plugin structure
 
-Once the editor is up and running we can start implementing the plugin. All the code of a plugin can be kept in a single file, however, we recommend splitting its "editing" and "UI" layers and creating a master plugin which loads both. This way, we ensure better separation of concerns and allow recomposing the features (e.g. picking the editing part of an existing feature but writing your own UI for it). All official CKEditor 5 plugins follow this pattern.
+Once the editor is up and running you can start implementing the plugin. The entire plugin code can be kept in a single file, however, it is recommended to split its "editing" and "UI" layers and create a master plugin which loads both. This way, you ensure better separation of concerns and allow for recomposing the features (e.g. picking the editing part of an existing feature but writing your own UI for it). All official CKEditor 5 plugins follow this pattern.
 
-Additionally, we will split code of commands, buttons and other "self-contained" components to separate files as well. In order to not mix up these files with your project's `app.js` and `webpack.config.js` files, let's create this directory structure:
+Additionally, you will split the code of commands, buttons and other "self-contained" components to separate files, too. In order not to mix up these files with your project's `app.js` and `webpack.config.js` files, create this directory structure:
 
 ```
 ├── app.js
@@ -186,12 +188,12 @@ Additionally, we will split code of commands, buttons and other "self-contained"
 │   ├── simpleboxediting.js
 │   └── simpleboxui.js
-│   ... the rest of plugin files go here as well
+│   ... the rest of plugin files goes here as well
 └── webpack.config.js
 ```
 
-Let's now define the 3 plugins.
+Now define the 3 plugins.
 
 First, the master (glue) plugin. Its role is to simply load the "editing" and "UI" parts.
 
@@ -235,7 +237,7 @@ export default class SimpleBoxEditing extends Plugin {
 }
 ```
 
-Finally, we need to load the `SimpleBox` plugin in our `app.js` file:
+Finally, you need to load the `SimpleBox` plugin in your `app.js` file:
 
 ```js
 // app.js
@@ -269,9 +271,9 @@ ClassicEditor
 	} );
 ```
 
-Rebuild your project, refresh the browser and you should see that the `SimpleBoxEditing` and `SmpleBoxUI` plugins were loaded:
+Rebuild your project, refresh the browser and you should see that the the `SimpleBoxEditing` and `SmpleBoxUI` plugins were loaded:
 
-{@img assets/img/tutorial-implementing-a-widget-2.png Screenshot of a classic editor initialized from source with the SimpleBoxEditing#init() got called and SimpleBoxUI#init() got called messages on the console.}
+{@img assets/img/tutorial-implementing-a-widget-2.png Screenshot of a classic editor initialized from source with the "SimpleBoxEditing#init() got called" and "SimpleBoxUI#init() got called" messages on the console.}
 
 ## The model and the view layers
 
@@ -281,7 +283,7 @@ CKEditor 5 implements an MVC architecture and its custom data model, while still
 	Read more about the {@link framework/guides/architecture/editing-engine#overview editing engine architecture}.
 </info-box>
 
-Since our simple box feature is meant to be a box with a title and description fields, let's define its model representation like this:
+Since your simple box feature is meant to be a box with a title and description fields, define its model representation like this:
 
 ```html
 <simpleBox>
@@ -292,13 +294,13 @@ Since our simple box feature is meant to be a box with a title and description f
 
 ### Defining the schema
 
-We need to start with defining the model's schema. We need to define there 3 elements and their types and allowed parent/children.
+You need to start with defining the model's schema. You need to define 3 elements and their types as well as allowed parent/children.
 
 <info-box>
 	Read more about the {@link framework/guides/architecture/editing-engine#schema schema}.
 </info-box>
 
-Let's update the `SimpleBoxEditing` plugin with this definition.
+Update the `SimpleBoxEditing` plugin with this definition.
 
 ```js
 // simplebox/simpleboxediting.js
@@ -348,19 +350,19 @@ export default class SimpleBoxEditing extends Plugin {
 
 Defining the schema will not have any effect on the editor just yet. It is information which can be used by plugins and the editor engine to understand how actions like pressing the <kbd>Enter</kbd> key, clicking on an element, typing text, inserting an image, etc. should behave.
 
-For the simple box plugin to start doing anything we need to define model-view converters. Let's do that!
+For the simple box plugin to start doing anything you need to define model-view converters. Do that now!
 
 ### Defining converters
 
-Converters tell the editor how to convert the view to the model (e.g. when loading the data to the editor or handling pasted content) and how to render the model to the view (for editing purposes, or when retrieving editor data).
+Converters tell the editor how to convert the view to the model (e.g. when loading the data to the editor or handling pasted content) and how to render the model to the view (for editing purposes, or when retrieving the editor data).
 
 <info-box>
 	Read more about the {@link framework/guides/architecture/editing-engine#conversion model-view conversion}.
 </info-box>
 
-This is the moment when we need to think about how we want to render the `<simpleBox>` element and its children to the DOM (what user will see) and to the data. CKEditor 5 allows converting the model to a different structure for editing purposes and a different one to be stored as "data" or exchanged with other applications when copy-pasting the content. However, for simplicity, let's use the same representation in both pipelines for now.
+This is the moment when you need to think about how you want to render the `<simpleBox>` element and its children to the DOM (what the user will see) and to the data. CKEditor 5 allows converting the model to a different structure for editing purposes and a different one to be stored as "data" or exchanged with other applications when copy-pasting the content. However, for simplicity, use the same representation in both pipelines for now.
 
-The structure in the view that we want to achieve:
+The structure in the view that you want to achieve:
 
 ```html
 <section class="simple-box">
@@ -369,15 +371,15 @@ The structure in the view that we want to achieve:
 </section>
 ```
 
-Let's use the {@link module:engine/conversion/conversion~Conversion#elementToElement `conversion.elementToElement()`} method to define all the converters.
+Use the {@link module:engine/conversion/conversion~Conversion#elementToElement `conversion.elementToElement()`} method to define all the converters.
 
 <info-box>
-	We can use this high-level two-way converters definition because we define the same converters for the {@link framework/guides/architecture/editing-engine#data-pipeline data} and {@link framework/guides/architecture/editing-engine#editing-pipeline editing} pipelines.
+	You can use this high-level two-way converters definition because you define the same converters for the {@link framework/guides/architecture/editing-engine#data-pipeline data} and {@link framework/guides/architecture/editing-engine#editing-pipeline editing} pipelines.
 
-	Later on we will switch to more fine-grained converters to get more control over the conversion.
+	Later on you will switch to more fine-grained converters to get more control over the conversion.
 </info-box>
 
-We need to define converters for 3 model elements. Let's update the `SimpleBoxEditing` plugin with this code:
+You need to define converters for 3 model elements. Update the `SimpleBoxEditing` plugin with this code:
 
 ```js
 // simplebox/simpleboxediting.js
@@ -426,7 +428,7 @@ export default class SimpleBoxEditing extends Plugin {
 }
 ```
 
-Once we have converters, we can try to see the simple box in action. We did not define yet a way to insert a new simple box into the document, so let's load it via the editor data. In order to do that, we need to modify the `index.html` file:
+Once you have converters, you can try to see the simple box in action. You have not defined a way to insert a new simple box into the document yet, so load it via the editor data. In order to do that, you need to modify the `index.html` file:
 
 ```html
 <!DOCTYPE html>
@@ -485,13 +487,13 @@ Rebuild your project and voila &mdash; that's your first simple box instance:
 
 ### What's in the model?
 
-The HTML that you have added to the `index.html` file is your editor's data. This is what `editor.getData()` would return. Also, for now, this also the DOM structure which is rendered by CKEditor 5's engine in the editable region:
+The HTML that you added to the `index.html` file is your editor's data. This is what `editor.getData()` would return. Also, for now, this also the DOM structure which is rendered by the CKEditor 5 engine in the editable region:
 
 {@img assets/img/tutorial-implementing-a-widget-4.png Screenshot of a DOM structure of the simple box instance – it looks exactly like the data loaded into the editor.}
 
 However, what's in the model?
 
-To learn that, we recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector}. Once {@link framework/guides/development-tools#ckeditor-5-inspector#installing-the-inspector installed}, you need to load it in the `app.js` file:
+To learn that, use the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector}. Once {@link framework/guides/development-tools#ckeditor-5-inspector#installing-the-inspector installed}, you need to load it in the `app.js` file:
 
 ```js
 // app.js
@@ -546,9 +548,9 @@ You will see the following HTML-like string:
 </simpleBox>
 ```
 
-As you can see, this structure is quite different than the HTML input/output. If you look closely, you will also notice the `[]` characters in the first paragraph &mdash; that's selection position.
+As you can see, this structure is quite different than the HTML input/output. If you look closely, you will also notice the `[]` characters in the first paragraph &mdash; this is the selection position.
 
-Play a bit with editor features (bold, italic, headings, lists, selection) to see how the model structure changes.
+Play a bit with the editor features (bold, italic, headings, lists, selection) to see how the model structure changes.
 
 <info-box>
 	You can also use some {@link framework/guides/development-tools#testing-helpers useful helpers like `getData()` and `setData()`} to learn more about the state of the editor model or write assertions in tests.
@@ -556,45 +558,45 @@ Play a bit with editor features (bold, italic, headings, lists, selection) to se
 
 ### Behavior before "widgetizing" simple box
 
-It is time to check if the simple box behaves like we would like it to. You can observe the following:
+It is time to check if the simple box behaves like you would like it to. You can observe the following:
 
-* You can type text in the title, but pressing <kbd>Enter</kbd> will not split it and <kbd>Backspace</kbd> will not delete it entirely. That is because it was marked as an `isLimit` element in the schema.
-* You cannot apply a list in the title and cannot turn it into a heading (other than `<h1 class="simple-box-title">` which it is already). That is because it allows only the content that is allowed in other block elements (like paragraphs). You can, however, apply italic inside a title (because italic is allowed in other blocks).
+* You can type text in the title, but pressing <kbd>Enter</kbd> will not split it and <kbd>Backspace</kbd> will not delete it entirely. This is because it was marked as an `isLimit` element in the schema.
+* You cannot apply a list in the title and cannot turn it into a heading (other than `<h1 class="simple-box-title">` which it is already). This is because it allows only the content that is allowed in other block elements (like paragraphs). You can, however, apply italic inside the title (because italic is allowed in other blocks).
 * The description behaves like the title, but it allows more content inside &mdash; lists and other headings.
-* If you try to select the entire simple box instance and press <kbd>Delete</kbd>, it will be deleted as a whole. The same when you copy and paste it. That is because it was marked as an `isObject` element in the schema.
-* You cannot easily select the entire simple box instance by clicking on it. Also, the cursor pointer does not change when you hover it. In other words, it seems a bit "dead". That is because we have not yet defined the view behavior yet.
+* If you try to select the entire simple box instance and press <kbd>Delete</kbd>, it will be deleted as a whole. The same when you copy and paste it. This is because it was marked as an `isObject` element in the schema.
+* You cannot easily select the entire simple box instance by clicking on it. Also, the cursor pointer does not change when you hover it. In other words, it seems a bit "dead". This is because you have not defined the view behavior yet.
 
-Pretty cool so far, right? With a very little code, you were able to define a behavior of your simple box plugin which maintains the integrity of those elements. The engine ensures that the user does not break those instances.
+Pretty cool so far, right? With a very little code, you were able to define the behavior of your simple box plugin which maintains the integrity of these elements. The engine ensures that the user does not break these instances.
 
-Let's see what else we can improve.
+See what else you can improve.
 
 ### Making simple box a widget
 
 <info-box>
 	If you are familiar with the {@link @ckeditor4 guide/dev/deep_dive/widgets/README Widget System of CKEditor 4} you will notice significant differences in how widgets are implemented in CKEditor 5.
 
-	CKEditor 4's implementation exposes a declarative API which controls the entire behavior of a widget (from its schema and internal model to the styles, clicking behavior, context menu and the dialog).
+	CKEditor 4 implementation exposes a declarative API that controls the entire behavior of a widget (from its schema and internal model to the styles, clicking behavior, context menu and the dialog).
 
-	In CKEditor 5 the widget system was redesigned. Most of its responsibilities were taken over by the engine, some were extracted to a separate package ({@link api/widget `@ckeditor/ckeditor5-widget`}) and some have to be handled by other utils provided by CKEditor 5 framework.
+	In CKEditor 5 the widget system was redesigned. Most of its responsibilities were taken over by the engine, some were extracted to a separate package ({@link api/widget `@ckeditor/ckeditor5-widget`}) and some have to be handled by other utilities provided by CKEditor 5 Framework.
 
-	CKEditor 5's implementation is, therefore, open for extensions and recomposition. You can choose those behaviors that you want (just like we did so far in this tutorial by defining a schema) and skip others or implement them by yourself.
+	CKEditor 5 implementation is, therefore, open for extensions and recomposition. You can choose the behaviors that you want (just like you did so far in this tutorial by defining a schema) and skip others or implement them by yourself.
 </info-box>
 
-The converters that we defined convert the model `<simpleBox*>` elements to plain {@link module:engine/view/containerelement~ContainerElement `ContainerElement`}s in the view (and back during upcasting).
+The converters that you defined convert the model `<simpleBox*>` elements to plain {@link module:engine/view/containerelement~ContainerElement `ContainerElement`}s in the view (and back during upcasting).
 
-We want to change this behavior a bit so the structure created in the editing view is enhanced with the {@link module:widget/utils~toWidget `toWidget()`} and {@link module:widget/utils~toWidgetEditable `toWidgetEditable()`} utils. We do not want to affect the data view, though. Therefore, we will need to define converters for the editing and data downcasting separately.
+You want to change this behavior a bit so the structure created in the editing view is enhanced with the {@link module:widget/utils~toWidget `toWidget()`} and {@link module:widget/utils~toWidgetEditable `toWidgetEditable()`} utilities. You do not want to affect the data view, though. Therefore, you will need to define converters for the editing and data downcasting separately.
 
 If you find the concept of downcasting and upcasting confusing, read the {@link framework/guides/architecture/editing-engine#conversion introduction to conversion}.
 
-Before we start coding, we need to install the {@link api/widget `@ckeditor/ckeditor5-widget`} package:
+Before you start coding, you need to install the {@link api/widget `@ckeditor/ckeditor5-widget`} package:
 
-```
+```bash
 npm install --save @ckeditor/ckeditor5-widget
 ```
 
-Now, let's revisit the `_defineConverters()` method that we defined earlier. We will use {@link module:engine/conversion/upcasthelpers~UpcastHelpers#elementToElement `elementToElement()` upcast helper} and {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()` downcast helper} instead of the two-way `elementToElement()` converter helper.
+Now it is time to revisit the `_defineConverters()` method that you defined earlier. You will use the {@link module:engine/conversion/upcasthelpers~UpcastHelpers#elementToElement `elementToElement()` upcast helper} and the {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()` downcast helper} instead of the two-way `elementToElement()` converter helper.
 
-Additionally, we need to ensure that the {@link module:widget/widget~Widget `Widget`} plugin is loaded. If you omit it, the elements in the view will have all the classes (e.g. `ck-widget`) but there will be no "behaviors" loaded (e.g. clicking a widget will not select it).
+Additionally, you need to ensure that the {@link module:widget/widget~Widget `Widget`} plugin is loaded. If you omit it, the elements in the view will have all the classes (e.g. `ck-widget`) but there will be no "behaviors" loaded (e.g. clicking a widget will not select it).
 
 ```js
 // simplebox/simpleboxediting.js
@@ -666,7 +668,7 @@ export default class SimpleBoxEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'simpleBoxTitle',
 			view: ( modelElement, viewWriter ) => {
-				// Note: we use a more specialized createEditableElement() method here.
+				// Note: You use a more specialized createEditableElement() method here.
 				const h1 = viewWriter.createEditableElement( 'h1', { class: 'simple-box-title' } );
 
 				return toWidgetEditable( h1, viewWriter );
@@ -691,7 +693,7 @@ export default class SimpleBoxEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'simpleBoxDescription',
 			view: ( modelElement, viewWriter ) => {
-				// Note: we use a more specialized createEditableElement() method here.
+				// Note: You use a more specialized createEditableElement() method here.
 				const div = viewWriter.createEditableElement( 'div', { class: 'simple-box-description' } );
 
 				return toWidgetEditable( div, viewWriter );
@@ -702,37 +704,37 @@ export default class SimpleBoxEditing extends Plugin {
 ```
 
 <info-box>
-	As you can see, the code became much more verbose and far longer. This is because we used lower-level converters. We plan to provide more handy widget conversion utils in the future. Read more (and 👍) in [this ticket](https://github.com/ckeditor/ckeditor5/issues/1228).
+	As you can see, the code became much more verbose and far longer. This is because you used lower-level converters. We plan to provide more handy widget conversion utilities in the future. Read more (and 👍) in [this ticket](https://github.com/ckeditor/ckeditor5/issues/1228).
 </info-box>
 
 ### Behavior after "widgetizing" simple box
 
 You can rebuild your project now and see how your simple box plugin has changed.
 
-{@img assets/img/tutorial-implementing-a-widget-5.png Screenshot of a widget's focus outline.}
+{@img assets/img/tutorial-implementing-a-widget-5.png Screenshot of the widget's focus outline.}
 
 You should observe that:
 
-* The `<section>`, `<h1>`, and `<div>` elements have the `contentEditable` attribute on them (plus some classes). This attribute tells the browser whether an element is considered "editable". Passing element through `toWidget()` will make its content non-editable. Conversely, passing it through `toWidgetEditable()` will make its content editable again.
-* You can now click on the widget (the gray area) to select it. Once it is selected, it is easier to copy-paste it.
+* The `<section>`, `<h1>`, and `<div>` elements have the `contentEditable` attribute on them (plus some classes). This attribute tells the browser whether an element is considered "editable". Passing the element through `toWidget()` will make its content non-editable. Conversely, passing it through `toWidgetEditable()` will make its content editable again.
+* You can now click the widget (the gray area) to select it. Once it is selected, it is easier to copy-paste it.
 * The widget and its nested editable regions react to hovering, selection, and focus (outline).
 
 In other words, the simple box instance became much more responsive.
 
-Additionally, if you call `editor.getData()` you will get the same HTML as before "widgetizing" simple box. That's thanks to using `toWidget()` and `toNestedEditable()` only in the `editingDowncast` pipeline.
+Additionally, if you call `editor.getData()` you will get the same HTML as before "widgetizing" the simple box. This is thanks to using `toWidget()` and `toNestedEditable()` only in the `editingDowncast` pipeline.
 
-This is all that we need from the model and the view layers for now. In terms of "editability" and data input/output its fully functional. Let's now find a way to insert new simple boxes into the document!
+This is all that you need from the model and the view layers for now. In terms of "editability" and data input/output it is fully functional. Now find a way to insert new simple boxes into the document!
 
 ## Creating a command
 
-A {@link framework/guides/architecture/core-editor-architecture#commands command} is a combination of an action and a state. You can interact with most of the editor features by commands that they expose. This allows not only executing those features (e.g. bolding a fragment of text) but also checking if this action can be executed in the selection's current location as well as observing other state properties (such as whether the currently selected text is bolded).
+A {@link framework/guides/architecture/core-editor-architecture#commands command} is a combination of an action and a state. You can interact with most of the editor features by commands that they expose. This allows not only executing these features (e.g. bolding a fragment of text) but also checking if this action can be executed in the selection's current location as well as observing other state properties (such as whether the currently selected text is bolded).
 
 In case of the simple box the situation is simple:
 
-* we need an "insert new simple box" action,
-* and "can we insert a new simple box here (at the current selection position)".
+* you need an "insert a new simple box" action,
+* and "can you insert a new simple box here (at the current selection position)".
 
-Let's create a new file `insertsimpleboxcommand.js` in the `simplebox/` directory. We will use the {@link module:engine/model/model~Model#insertContent `model.insertContent()`} method which will be able to e.g. split a paragraph if you try to insert a simple box in the middle of it (which is not allowed by the schema.
+Create a new file `insertsimpleboxcommand.js` in the `simplebox/` directory. You will use the {@link module:engine/model/model~Model#insertContent `model.insertContent()`} method which will be able to, for example, split a paragraph if you try to insert a simple box in the middle of it (which is not allowed by the schema).
 
 ```js
 // simplebox/insertsimpleboxcommand.js
@@ -743,7 +745,7 @@ export default class InsertSimpleBoxCommand extends Command {
 	execute() {
 		this.editor.model.change( writer => {
 			// Insert <simpleBox>*</simpleBox> at the current selection position
-			// in a way which will result in creating a valid model structure.
+			// in a way that will result in creating a valid model structure.
 			this.editor.model.insertContent( createSimpleBox( writer ) );
 		} );
 	}
@@ -828,7 +830,7 @@ console.log( editor.commands.get( 'insertSimpleBox' ).isEnabled );
 
 It is always `true` except when the selection is in one place &mdash; in other simple box's title. You can also observe that executing the command when the selection is in that place takes no effect.
 
-Let's change one more thing before we will move forward &mdash; let's disallow `simpleBox` inside `simpleBoxDescription` too. This can be done by {@link module:engine/model/schema~Schema#addChildCheck defining a custom child check}:
+Change one more thing before you move forward &mdash; disallow `simpleBox` inside `simpleBoxDescription`, too. This can be done by {@link module:engine/model/schema~Schema#addChildCheck defining a custom child check}:
 
 ```js
 // simplebox/simpleboxediting.js
@@ -894,15 +896,15 @@ export default class SimpleBoxEditing extends Plugin {
 }
 ```
 
-Now, the command should be disabled also when the selection is inside the description of another simple box instance.
+Now the command should be disabled also when the selection is inside the description of another simple box instance.
 
 ## Creating a button
 
-It is time to allow editor users to insert the widget into the content. The best way to do that is through a UI button in the toolbar. You can quickly create one using the {@link module:ui/button/buttonview~ButtonView `ButtonView`} class brought by the {@link framework/guides/architecture/ui-library UI framework} of CKEditor 5.
+It is time to allow the editor users to insert the widget into the content. The best way to do that is through a UI button in the toolbar. You can quickly create one using the {@link module:ui/button/buttonview~ButtonView `ButtonView`} class brought by the {@link framework/guides/architecture/ui-library UI framework} of CKEditor 5.
 
-The button should execute the [command](#creating-a-command) when clicked and become inactive if the widget cannot be inserted in some particular position of the selection ([as defined in the schema](#defining-the-schema)).
+The button should execute the [command](#creating-a-command) when clicked and become inactive if the widget cannot be inserted into some particular position of the selection ([as defined in the schema](#defining-the-schema)).
 
-Let us see what it looks like in practice and extend the `SimpleBoxUI` plugin [created earlier](#plugin-structure):
+See what it looks like in practice and extend the `SimpleBoxUI` plugin [created earlier](#plugin-structure):
 
 ```js
 // simplebox/simpleboxui.js
@@ -917,7 +919,7 @@ export default class SimpleBoxUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
-		// The "simpleBox" button must be registered among UI components of the editor
+		// The "simpleBox" button must be registered among the UI components of the editor
 		// to be displayed in the toolbar.
 		editor.ui.componentFactory.add( 'simpleBox', locale => {
 			// The state of the button will be bound to the widget command.
@@ -952,7 +954,7 @@ The last thing you need to do is tell the editor to display the button in the to
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Essentials, Paragraph, Heading, List, Bold, Italic, SimpleBox ],
-		// Insert the "simpleBox" to the editor toolbar.
+		// Insert the "simpleBox" button into the editor toolbar.
 		toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList', 'simpleBox' ]
 	} )
 	.then( editor => {
@@ -1006,7 +1008,7 @@ class SimpleBoxUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
-		// The "simpleBox" button must be registered among UI components of the editor
+		// The "simpleBox" button must be registered among the UI components of the editor
 		// to be displayed in the toolbar.
 		editor.ui.componentFactory.add( 'simpleBox', locale => {
 			// The state of the button will be bound to the widget command.
@@ -1131,7 +1133,7 @@ class SimpleBoxEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'simpleBoxTitle',
 			view: ( modelElement, viewWriter ) => {
-				// Note: we use a more specialized createEditableElement() method here.
+				// Note: You use a more specialized createEditableElement() method here.
 				const h1 = viewWriter.createEditableElement( 'h1', { class: 'simple-box-title' } );
 
 				return toWidgetEditable( h1, viewWriter );
@@ -1156,7 +1158,7 @@ class SimpleBoxEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'simpleBoxDescription',
 			view: ( modelElement, viewWriter ) => {
-				// Note: we use a more specialized createEditableElement() method here.
+				// Note: You use a more specialized createEditableElement() method here.
 				const div = viewWriter.createEditableElement( 'div', { class: 'simple-box-description' } );
 
 				return toWidgetEditable( div, viewWriter );
@@ -1169,7 +1171,7 @@ class InsertSimpleBoxCommand extends Command {
 	execute() {
 		this.editor.model.change( writer => {
 			// Insert <simpleBox>*</simpleBox> at the current selection position
-			// in a way which will result in creating a valid model structure.
+			// in a way that will result in creating a valid model structure.
 			this.editor.model.insertContent( createSimpleBox( writer ) );
 		} );
 	}

+ 1 - 1
package.json

@@ -90,7 +90,7 @@
     "style-loader": "^0.23.0",
     "svgo": "^1.1.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
-    "umberto": "^0.22.0",
+    "umberto": "^0.23.1",
     "webpack": "^4.15.0"
   },
   "engines": {

+ 10 - 10
yarn.lock

@@ -6261,11 +6261,6 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lightgallery.js@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/lightgallery.js/-/lightgallery.js-1.1.3.tgz#05d47fa2e09546208a430b97fdf5d32f156515c5"
-  integrity sha512-eo96ApfhSyb+Gv421ntAKxkw3CvJ9UBF9/XjiUfwz0rNWYszSsauG3se+FL606+wrMpsp/wFweqSMPTzoiLbnQ==
-
 linkify-it@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.1.0.tgz#c4caf38a6cd7ac2212ef3c7d2bde30a91561f9db"
@@ -6804,6 +6799,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+medium-zoom@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.4.tgz#b1063093f81151a19989489589edf28e6090630c"
+  integrity sha512-BjE+00gQku3XQfgHDcqyYwQaBtFddzh6Lnj1RZOliqJ9HS0mh/P2IaqVJ25/j9EbnjAUf27mLeLZBRxnd00bfA==
+
 mem@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"
@@ -10341,10 +10341,10 @@ ultron@~1.1.0:
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
   integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
 
-umberto@^0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/umberto/-/umberto-0.22.0.tgz#f673cb9c67b4f25ca3125d9ccb2b8fe19f836021"
-  integrity sha512-Xi3Ml2xmhwR77z3rbK4z0e241mgBZOpvfuEMrYah+RML9XB5+D5LSNy6zKmmSr0HoR/7qb1IhBC8vBUJVI7hTQ==
+umberto@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/umberto/-/umberto-0.23.1.tgz#b61efe561e8645e3ab4774219da188e51ed3bb73"
+  integrity sha512-SbYOfTYkgk90R6UTNoDtqxUuKOgBcaOf9byBv9GDjfvyU7k1jR+Nn9fyNXUEAi7oO7wKEGvPHFCGPJceY4t6Rg==
   dependencies:
     "@babel/core" "^7.1.2"
     "@babel/polyfill" "^7.0.0"
@@ -10367,10 +10367,10 @@ umberto@^0.22.0:
     javascript-stringify "^1.6.0"
     jquery "^3.1.1"
     js-beautify "^1.8.6"
-    lightgallery.js "^1.1.3"
     lodash "^4.17.11"
     markdown-it-expand-tabs "^1.0.12"
     markdown-it-toc-and-anchor "^4.1.2"
+    medium-zoom "^1.0.4"
     mkdirp "^0.5.1"
     node-sass "^4.9.3"
     pug "^2.0.0-beta11"