瀏覽代碼

Merge branch 'master' into t/ckeditor5-react/58

Aleksander Nowodzinski 6 年之前
父節點
當前提交
be7509f8de

文件差異過大導致無法顯示
+ 184 - 0
CHANGELOG.md


+ 38 - 3
README.md

@@ -4,7 +4,6 @@ CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?styl
 [![npm version](https://badge.fury.io/js/ckeditor5.svg)](https://www.npmjs.com/package/ckeditor5)
 
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5)
-[![BrowserStack Status](https://automate.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://automate.browserstack.com/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
 [![Dependency Status](https://img.shields.io/david/ckeditor/ckeditor5.svg)](https://david-dm.org/ckeditor/ckeditor5)
 [![devDependency Status](https://img.shields.io/david/dev/ckeditor/ckeditor5.svg)](https://david-dm.org/ckeditor/ckeditor5?type=dev)
 
@@ -18,7 +17,7 @@ A set of ready-to-use rich text editors created with a powerful framework. Made
 
 ## ⚠ This package does not contain any source code
 
-CKEditor 5 is distributed as [four ready-to-use rich text editor builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#available-builds) which you can [install from npm](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html#npm).
+CKEditor 5 is distributed as [several ready-to-use rich text editor builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#available-builds) which you can [install from npm](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html#npm).
 
 You can also [customize the existing builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html) or build your own editors and features by using the [CKEditor 5 Framework](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html).
 
@@ -223,6 +222,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 
 <tr>
 	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-watchdog"><code>@ckeditor/ckeditor5-watchdog</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-watchdog"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-watchdog.svg" alt="@ckeditor/ckeditor5-watchdog npm package badge"></a>
+	</td>
+	<td>
+		The watchdog feature, which keeps CKEditor 5 editors running.
+	</td>
+</tr>
+
+<tr>
+	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-cloud-services"><code>@ckeditor/ckeditor5-cloud-services</code></a>
 	</td>
 	<td>
@@ -493,6 +504,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 
 <tr>
 	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-indent"><code>@ckeditor/ckeditor5-indent</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-indent"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-indent.svg" alt="@ckeditor/ckeditor5-indent npm package badge"></a>
+	</td>
+	<td>
+		The indentation (of lists and blocks) feature.
+	</td>
+</tr>
+
+<tr>
+	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-link"><code>@ckeditor/ckeditor5-link</code></a>
 	</td>
 	<td>
@@ -623,6 +646,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 	</td>
 </tr>
 
+<tr>
+	<td>
+		<a href="https://github.com/ckeditor/ckeditor5-word-count"><code>@ckeditor/ckeditor5-word-count</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-word-count"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-word-count.svg" alt="@ckeditor/ckeditor5-word-count npm package badge"></a>
+	</td>
+	<td>
+		The word count feature.
+	</td>
+</tr>
+
 </tbody>
 </table>
 
@@ -718,4 +753,4 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 
 ## License
 
-Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the LICENSE.md file.
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

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

@@ -211,7 +211,7 @@ class MultirootEditorUI extends EditorUI {
 
 			// Register the editable UI view in the editor. A single editor instance can aggregate multiple
 			// editable areas (roots) but the decoupled editor has only one.
-			this._editableElements.set( editable.name, editableElement );
+			this.setEditableElement( editable.name, editableElement );
 
 			// Let the global focus tracker know that the editable UI element is focusable and
 			// belongs to the editor. From now on, the focus tracker will sustain the editor focus

+ 7 - 7
docs/_snippets/framework/tutorials/inline-widget.js

@@ -26,13 +26,13 @@ class PlaceholderCommand extends Command {
 		const editor = this.editor;
 
 		editor.model.change( writer => {
-			// Create <placeholder> elment with name attribute...
+			// Create a <placeholder> elment with the "name" attribute...
 			const placeholder = writer.createElement( 'placeholder', { name: value } );
 
 			// ... and insert it into the document.
 			editor.model.insertContent( placeholder );
 
-			// Put the selection on inserted element.
+			// Put the selection on the inserted element.
 			writer.setSelection( placeholder, 'on' );
 		} );
 	}
@@ -59,7 +59,7 @@ class PlaceholderUI extends Plugin {
 		const t = editor.t;
 		const placeholderNames = editor.config.get( 'placeholderConfig.types' );
 
-		// The "placeholder" dropdown must be registered among UI components of the editor
+		// The "placeholder" dropdown must be registered among the UI components of the editor
 		// to be displayed in the toolbar.
 		editor.ui.componentFactory.add( 'placeholder', locale => {
 			const dropdownView = createDropdown( locale );
@@ -75,7 +75,7 @@ class PlaceholderUI extends Plugin {
 				withText: true
 			} );
 
-			// Execute the command when the dropdown items is clicked (executed).
+			// Execute the command when the dropdown item is clicked (executed).
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( 'placeholder', { value: evt.source.commandParam } );
 				editor.editing.view.focus();
@@ -135,10 +135,10 @@ class PlaceholderEditing extends Plugin {
 			// Allow wherever text is allowed:
 			allowWhere: '$text',
 
-			// The placeholder will acts as an inline node:
+			// The placeholder will act as an inline node:
 			isInline: true,
 
-			// The inline-widget is self-contained so cannot be split by the caret and can be selected:
+			// The inline widget is self-contained so it cannot be split by the caret and it can be selected:
 			isObject: true,
 
 			// The placeholder can have many types, like date, name, surname, etc:
@@ -167,7 +167,7 @@ class PlaceholderEditing extends Plugin {
 			view: ( modelItem, viewWriter ) => {
 				const widgetElement = createPlaceholderView( modelItem, viewWriter );
 
-				// Enable widget handling on placeholder element inside editing view.
+				// Enable widget handling on a placeholder element inside the editing view.
 				return toWidget( widgetElement, viewWriter );
 			}
 		} );

二進制
docs/assets/img/fields.jpg


+ 48 - 0
docs/builds/guides/faq.md

@@ -111,3 +111,51 @@ plugins: [
 You can also use the relative path which is resolved relative to the resource that imports `bold.svg` (the {@link module:basic-styles/bold/boldui~BoldUI `BoldUI`} class file in this scenario).
 
 Learn more about {@link builds/guides/integration/advanced-setup#webpack-configuration building CKEditor 5 using webpack}.
+
+## How to get the editor instance object from the DOM element?
+
+If you have a reference to the editor editable's DOM element (that's the one with the `.ck-editor__editable` class and the `contenteditable` attribute), you can access the editor instance this editable element belongs to using the `ckeditorInstance` property:
+
+```html
+<!-- The editable element in the editor's DOM structure. -->
+<div class="... ck-editor__editable ..." contenteditable="true">
+	<!-- Editable content. -->
+</div>
+```
+
+```js
+// A reference to the editor editable element in DOM.
+const domEditableElement = document.querySelector( '.ck-editor__editable' );
+
+// Get the editor instance from the editable element.
+const editorInstance = domEditableElement.ckeditorInstance;
+
+// Use the editor instance API.
+editorInstance.setData( '<p>Hello world!<p>' );
+```
+
+## How to add an attribute to the editor editable in DOM?
+
+If you have a reference to the editor instance, simply use the {@link framework/guides/architecture/editing-engine#changing-the-view `change()`} method of the view and set the new attribute via the {@link module:engine/view/downcastwriter~DowncastWriter view downcast writer}:
+
+```js
+editor.editing.view.change( writer => {
+	const viewEditableRoot = editor.editing.view.document.getRoot();
+
+	writer.setAttribute( 'myAttribute', 'value', viewEditableRoot );
+} );
+```
+
+If you do not have the reference to the editor instance but you have access to the editable element in DOM, you can [access it using the `ckeditorInstance` property](#how-to-get-the-editor-instance-object-from-the-dom-element) and then use the same API to set the attribute:
+
+```js
+const domEditableElement = document.querySelector( '.ck-editor__editable' );
+const editorInstance = domEditableElement.ckeditorInstance;
+
+editorInstance.editing.view.change( writer => {
+	// Map the editable element in DOM to the editable element in editor's view.
+	const viewEditableRoot = editorInstance.editing.view.domConverter.mapDomToView( domEditableElement );
+
+	writer.setAttribute( 'myAttribute', 'value', viewEditableRoot );
+} );
+```

+ 19 - 18
docs/builds/guides/frameworks/angular.md

@@ -1,10 +1,10 @@
 ---
-menu-title: Angular 2+ component
+menu-title: Angular component
 category: builds-integration-frameworks
 order: 20
 ---
 
-# Rich text editor component for Angular 2+
+# Rich text editor component for Angular
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-angular.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular)
 
@@ -18,7 +18,7 @@ Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5
 
 ## Quick start
 
-In your existing Angular project, install the [CKEditor 5 WYSIWYG editor component for Angular 2+](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
+In your existing Angular project, install the [CKEditor 5 WYSIWYG editor component for Angular](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
 
 ```bash
 npm install --save @ckeditor/ckeditor5-angular
@@ -70,7 +70,7 @@ Rebuild your application and CKEditor 5 should greet you with "Hello, world!".
 
 ### Note: Using the Document editor build
 
-If you want to use the {@link framework/guides/document-editor Document editor build}, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create add the toolbar to the DOM manually}.
+If you want to use the {@link framework/guides/document-editor document editor build}, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create add the toolbar to the DOM manually}.
 
 ```ts
 import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
@@ -121,7 +121,7 @@ The component implements the [`ControlValueAccessor`](https://angular.io/api/for
 
 ## Supported `@Input` properties
 
-The following `@Input` properties are supported by the CKEditor 5 component for Angular 2+:
+The following `@Input` properties are supported by the CKEditor 5 rich text editor component for Angular:
 
 ### `editor` (required)
 
@@ -165,7 +165,7 @@ export class MyComponent {
 
 ### `tagName`
 
-Specifies the tag name of the HTML element on which the editor will be created.
+The tag name of the HTML element on which the rich text editor will be created.
 
 The default tag is `<div>`.
 
@@ -200,16 +200,17 @@ export class MyComponent {
 
 ## Supported `@Output` properties
 
-The following `@Output` properties are supported by the CKEditor 5 component for Angular 2+:
+The following `@Output` properties are supported by the CKEditor 5 rich text editor component for Angular:
 
 ### `ready`
 
-Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event. Fired with the editor instance.
+Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event.
+It is fired with the editor instance.
 
 ### `change`
 
 Fired when the content of the editor has changed. It corresponds with the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
-Fired with an object containing the editor and the CKEditor 5 `change:data` event object.
+It is fired with an object containing the editor and the CKEditor 5 `change:data` event object.
 
 ```html
 <ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>
@@ -237,20 +238,20 @@ export class MyComponent {
 ### `blur`
 
 Fired when the editing view of the editor is blurred. It corresponds with the {@link module:engine/view/document~Document#event:blur `editor.editing.view.document#blur`} event.
-Fired with an object containing the editor and the CKEditor 5 `blur` event data.
+It is fired with an object containing the editor and the CKEditor 5 `blur` event data.
 
 ### `focus`
 
 Fired when the editing view of the editor is focused. It corresponds with the {@link module:engine/view/document~Document#event:focus `editor.editing.view.document#focus`} event.
-Fired with an object containing the editor and the CKEditor 5 `focus` event data.
+It is fired with an object containing the editor and the CKEditor 5 `focus` event data.
 
 ## Styling
 
-The CKEditor 5 component for Angular can be styled using the component stylesheet or using a global stylesheet. Let's see how to set the CKEditor 5 component's height using these two approaches.
+The CKEditor 5 rich text editor component for Angular can be styled using the component stylesheet or using a global stylesheet. See how to set the CKEditor 5 component's height using these two approaches.
 
 ### Setting the height via the component stylesheet
 
-First, create a (S)CSS file in the parent component's directory and style the given editor's part preceded by the `:host` and `::ng-deep` pseudo selectors.
+First, create a (S)CSS file in the parent component's directory and style the given editor's part preceded by the `:host` and `::ng-deep` pseudo selectors:
 
 ```css
 /* src/app/app.component.css */
@@ -260,7 +261,7 @@ First, create a (S)CSS file in the parent component's directory and style the gi
 }
 ```
 
-Then in the parent component add the relative path to the above stylesheet.
+Then in the parent component add the relative path to the above stylesheet:
 
 ```ts
 /* src/app/app.component.ts */
@@ -283,7 +284,7 @@ To style the component using a global stylesheet, first, create it:
 }
 ```
 
-Then, add it in the `angular.json` configuration file.
+Then, add it in the `angular.json` configuration file:
 
 ```json
 "architect": {
@@ -299,7 +300,7 @@ Then, add it in the `angular.json` configuration file.
 
 ### Setting the placeholder
 
-To display {@link features/editor-placeholder the placeholder} in the main editable element simply set the `placeholder` field in the CKEditor 5 component configuration:
+To display {@link features/editor-placeholder the placeholder} in the main editable element, set the `placeholder` field in the CKEditor 5 rich text editor component configuration:
 
 ```ts
 @Component( {
@@ -314,7 +315,7 @@ export class MyComponent {
 
 ## Localization
 
-The CKEditor 5 component can be localized in two steps.
+The CKEditor 5 rich text editor component can be localized in two steps.
 
 ### 1. Loading translation files
 
@@ -360,4 +361,4 @@ For advanced usage see the {@link features/ui-language Setting UI language} guid
 
 ## Contributing and reporting issues
 
-The source code of the rich text editor component for Angular 2+ is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.
+The source code of the CKEditor 5 rich text editor component for Angular is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.

+ 22 - 2
docs/builds/guides/frameworks/css.md

@@ -15,6 +15,8 @@ In this guide, you will learn how to address these integration issues and use th
 
 ## Compatibility with Bootstrap
 
+### Bootstrap modals
+
 We noticed that [Bootstrap](https://getbootstrap.com) modals cover the UI of the rich-text editor and break the input fields. Knowing that, you will need to take the following steps to get CKEditor 5 working in the Bootstrap environment:
 
 * Configure the `z-index` of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay.
@@ -45,11 +47,11 @@ $( '#modal-container' ).modal( {
 
 ### Bootstrap table styles
 
-There is also a known [issue](https://github.com/ckeditor/ckeditor5-table/issues/154) concerning table styles brought by Bootstrap breaking the table (widget) layout during editing. If you do not want additional space around edited tables when using Bootstrap, add the following styles to your application:
+There is also a known [issue](https://github.com/ckeditor/ckeditor5-table/issues/154) concerning table styles brought by Bootstrap breaking the table (widget) layout during editing. If you do not want any additional space around edited tables when using Bootstrap, add the following styles to your application:
 
 ```css
 /*
- * Override the width of table set by Bootstrap content styles.
+ * Override the width of the table set by Bootstrap content styles.
  * See: https://github.com/ckeditor/ckeditor5-table/issues/154.
  */
 .ck-content .table {
@@ -80,6 +82,7 @@ If you want to use CKEditor 5 with [Materialize.css](https://materializecss.com/
 
 * Configure the base `z-index` of the floating editor UI so it is displayed over the Materialize modals.
 * Bring back the default `.ck-input` class appearance (because Materialize overrides it with a higher specificity).
+* Bring back the default `<ul>` and `<li>` appearance (because Materialize overrides it).
 * Configure modals so they stop "stealing" the focus from the rich-text editor input fields.
 
 Use the following CSS to address the issues with the `z-index` and selector specificity:
@@ -121,6 +124,23 @@ Use the following CSS to address the issues with the `z-index` and selector spec
 }
 ```
 
+```css
+/*
+ * Bring back the default <ul> and <li> appearance.
+ *
+ * See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_global.scss#L28-L37
+ */
+.ck.ck-content ul,
+.ck.ck-content ul li {
+  list-style-type: inherit;
+}
+
+.ck.ck-content ul {
+  /* Default user agent stylesheet, you can change it to your needs. */
+  padding-left: 40px;
+}
+```
+
 To change the behavior of the modals and prevent them from "stealing" the focus, use the [`dismissible: false`](https://materializecss.com/modals.html#options) option.
 
 ```js

+ 24 - 20
docs/builds/guides/frameworks/vuejs.md

@@ -199,6 +199,7 @@ npm install --save \
 Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`):
 
 ```js
+const path = require( 'path' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 
@@ -220,24 +221,11 @@ module.exports = {
 		]
 	},
 
-	css: {
-		loaderOptions: {
-			// Various modules in the CKEditor source code import .css files.
-			// These files must be transpiled using PostCSS in order to load properly.
-			postcss: styles.getPostCssConfig( {
-				themeImporter: {
-					themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
-				},
-				minify: true
-			} )
-		}
-	},
-
+	// Vue CLI would normally use its own loader to load .svg and .css files, however:
+	//	1. The icons used by CKEditor must be loaded using raw-loader,
+	//	2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
 	chainWebpack: config => {
-		// Vue CLI would normally use its own loader to load .svg files. The icons used by
-		// CKEditor should be loaded using raw-loader instead.
-
-		// Get the default rule for *.svg files.
+		// (1.) To handle editor icons, get the default rule for *.svg files first:
 		const svgRule = config.module.rule( 'svg' );
 
 		// Then you can either:
@@ -247,7 +235,7 @@ module.exports = {
 		//		svgRule.uses.clear();
 		//
 		// * or exclude ckeditor directory from node_modules:
-		svgRule.exclude.add( __dirname + '/node_modules/@ckeditor' );
+		svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );
 
 		// Add an entry for *.svg files belonging to CKEditor. You can either:
 		//
@@ -261,6 +249,22 @@ module.exports = {
 			.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
 			.use( 'raw-loader' )
 			.loader( 'raw-loader' );
+
+		// (2.) Transpile the .css files imported by the editor using PostCSS.
+		// Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
+		config.module
+			.rule( 'cke-css' )
+			.test( /ckeditor5-[^/\\]+[/\\].+\.css$/ )
+			.use( 'postcss-loader' )
+			.loader( 'postcss-loader' )
+			.tap( () => {
+				return styles.getPostCssConfig( {
+					themeImporter: {
+						themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
+					},
+					minify: true
+				} );
+			} );
 	}
 };
 ```
@@ -278,9 +282,9 @@ npm install --save \
 	@ckeditor/ckeditor5-editor-classic \
 	@ckeditor/ckeditor5-essentials \
 	@ckeditor/ckeditor5-basic-styles \
-	@ckeditor/ckeditor5-basic-styles \
 	@ckeditor/ckeditor5-link \
-	@ckeditor/ckeditor5-paragraph
+	@ckeditor/ckeditor5-paragraph \
+	@ckeditor/ckeditor5-theme-lark
 ```
 
 You can use more packages, depending on which features are needed in your application.

+ 1 - 1
docs/builds/guides/integration/advanced-setup.md

@@ -133,7 +133,7 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				// Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
+				// Or /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/ if you want to limit this loader
 				// to CKEditor 5 icons only.
 				test: /\.svg$/,
 

+ 2 - 0
docs/builds/guides/integration/basic-api.md

@@ -170,9 +170,11 @@ Once destroyed, resources used by the editor instance are released and the origi
 
 {@link module:engine/model/document~Document#change:data `Document#change:data`}.
 
+```js
 editor.model.document.on( 'change:data', () => {
     console.log( 'The data has changed!' );
 } );
+```
 
 This event is fired when the document changes in such a way which is "visible" in the editor data. There is also a group of changes, like selection position changes, marker changes which do not affect the result of `editor.getData()`. To listen to all these changes, you can use a wider {@link module:engine/model/document~Document#change `Document#change`} event.
 

+ 20 - 20
docs/builds/guides/integration/csp.md

@@ -10,11 +10,11 @@ order: 70
 
 # Content Security Policy
 
-CKEditor 5 is compatible with applications that use [<abbr title="Content Security Policy">CSP</abbr> rules](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) and helps developers build secure web.
+CKEditor 5 is compatible with applications that use [<abbr title="Content Security Policy">CSP</abbr> rules](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) and helps developers build a secure web.
 
 ## Recommended CSP configuration
 
-The recommended CSP configuration that allows the rich text editor to run out–of–the–box with all standard features using the content like images or media from external hosts looks as follows:
+The recommended CSP configuration that allows the rich-text editor to run out–of–the–box with all standard features using the content like images or media from external hosts looks as follows:
 
 ```
 default-src 'none'; connect-src 'self'; script-src 'self'; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *
@@ -22,30 +22,30 @@ default-src 'none'; connect-src 'self'; script-src 'self'; img-src * data:; styl
 
 ## Impact of CSP on editor features
 
-Some CSP directives have an impact on certain rich text editor features. Here is the round-up of directives and their specific roles in the editor:
+Some CSP directives have an impact on certain rich-text editor features. Here is the round-up of directives and their specific roles in the editor:
 
-* `default-src 'none'`: resets the policy and blocks everything. All successive directives work as a whitelist. By itself, as long as followed by other directives, it has no impact on the editor.
+* `default-src 'none'`: Resets the policy and blocks everything. All successive directives work as a whitelist. By itself, as long as it is followed by other directives, it has no impact on the editor.
 * `connect-src 'self'`
-	* Allows the {@link features/image-upload editor upload features} to use [`XMLHttpReqests`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) (AJAX) to upload files to the server, for instance, when an image is pasted or dropped into the editor content. The `'self`' value ensures the requests remain within the same host.
+	* Allows the {@link features/image-upload editor upload features} to use [`XMLHttpReqests`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) (Ajax) to upload files to the server, for instance, when an image is pasted or dropped into the editor content. The `'self`' value ensures the requests remain within the same host.
 	* Allows {@link builds/guides/integration/saving-data#autosave-feature auto–saving editor data} using `XMLHttpRequest`.
 
-	**Note**: To use [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/), include the `http://*.cke-cs.com` domain in the `connect-src` directive, for instance, `connect-src 'self' http://*.cke-cs.com`.
-* `script-src 'self'`: allows the execution of JavaScript from the current host only and can be applied only if the CKEditor 5 script file (`<script src="[ckeditor-build-path]/ckeditor.js"></script>`) is also served from that host.
+	**Note**: To use [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/), include the `http://*.cke-cs.com` domain in the `connect-src` directive, for instance: `connect-src 'self' http://*.cke-cs.com`.
+* `script-src 'self'`: Allows the execution of JavaScript from the current host only and can be applied only if the CKEditor 5 script file (`<script src="[ckeditor-build-path]/ckeditor.js"></script>`) is also served from that host.
 
-	**Note**: If CKEditor 5 is served from another host, for instance, the {@link builds/guides/integration/installation#cdn official CDN}, make sure the value of `script-src` includes that host (`script-src 'self' https://cdn.ckeditor.com`).
+	**Note**: If CKEditor 5 is served from another host, for example the {@link builds/guides/integration/installation#cdn official CDN}, make sure the value of `script-src` includes that host (`script-src 'self' https://cdn.ckeditor.com`).
 * `img-src * data:`
 	* The `*` directive value allows images in the editor content to come from any hosts.
 	* The `data:` value allows:
-		* pasting {@link features/image-upload images from the clipboard} and {@link features/paste-from-word from Word} into editor content. Pasted images are usually represented as Base64–encoded strings (`<img src="data:..." />`) and without `data:` they cannot be displayed and uploaded.
-		* displaying the {@link features/media-embed Media embed} feature placeholders for the inserted media.
+		* Pasting {@link features/image-upload images from the clipboard} and {@link features/paste-from-word from Microsoft Word} into the editor content. Pasted images are usually represented as Base64–encoded strings (`<img src="data:..." />`) and without `data:` they cannot be displayed and uploaded.
+		* Displaying the {@link features/media-embed media embed} feature placeholders for the inserted media.
 
-	**Note**: Use the more strict `img-src 'self'` if all images in the editor content are hosted from the same domain and you do **not** want to enable the {@link features/media-embed Media embed} and {@link features/paste-from-word Paste from Word} features.
+	**Note**: Use the more strict `img-src 'self'` if all images in the editor content are hosted from the same domain and you do **not** want to enable the {@link features/media-embed media embed} and {@link features/paste-from-word paste from Word} features.
 * `style-src 'self' 'unsafe-inline'`: `'unsafe-inline'` is necessary for:
-	* webpack's [style-loader](https://github.com/webpack-contrib/style-loader) to load {@link framework/guides/theme-customization#styles-processing-and-bundling editor UI styles}.
+	* webpack's [style-loader](https://github.com/webpack-contrib/style-loader) to load the {@link framework/guides/theme-customization#styles-processing-and-bundling editor UI styles}.
 
 	**Note**: You can {@link builds/guides/integration/advanced-setup#option-extracting-css extract styles to a separate `.css` file} during the editor building process and remove this directive.
-	* certain editor content styles to work properly. For instance, you are going to need it if you want to enable editor features like {@link features/font Font} or {@link features/text-alignment Text alignment} or any other feature that uses inline `style="..."` attributes in the content.
-* `frame-src *`: Necessary for the {@link features/media-embed Media embed} feature to load media with previews (containing `<iframe>`).
+	* Certain editor content styles to work properly. For instance, you are going to need it if you want to enable such editor features as {@link features/font font} or {@link features/text-alignment text alignment} or any other feature that uses inline `style="..."` attributes in the content.
+* `frame-src *`: Necessary for the {@link features/media-embed media embed} feature to load media with previews (containing `<iframe>`).
 
 	**Note**: Use the more strict `frame-src 'self'` if all the media in the edited content come from the same domain as your application.
 
@@ -61,10 +61,10 @@ Knowing the role of each directive, the strictest set of rules that allows CKEdi
 default-src 'none'; connect-src 'self'; script-src 'self'; img-src 'self'; style-src 'self'; frame-src 'self'
 ```
 
-but it comes with some trade–offs, for instance, it requires you to:
+This comes with some trade–offs, though. For example, it requires you to:
 
-* use an editor build with the {@link builds/guides/integration/advanced-setup#option-extracting-css styles extracted to a separate `.css` file} (no style-loader),
-* load images in the content from the same host,
-* load previewable media in the content from the same host,
-* give up certain features that use inline styles like {@link features/font Font} or {@link features/text-alignment Text alignment},
-* give up pasting images from the clipboard or {@link features/paste-from-word from Word},
+* Use an editor build with the {@link builds/guides/integration/advanced-setup#option-extracting-css styles extracted to a separate `.css` file} (no style-loader).
+* Load images in the content from the same host.
+* Load previewable media in the content from the same host.
+* Give up certain features that use inline styles like {@link features/font font} or {@link features/text-alignment text alignment}.
+* Give up pasting images from the clipboard or {@link features/paste-from-word from Word}.

+ 14 - 0
docs/builds/guides/integration/saving-data.md

@@ -154,6 +154,20 @@ It also listens to the native [`window#beforeunload`](https://developer.mozilla.
 
 This automatically secures you from the user leaving the page before the content is saved or some ongoing actions like image upload did not finish.
 
+The minimum time period between two save actions can be configured using the {@link module:autosave/autosave~AutosaveConfig#waitingTime `config.waitingTime`} property to not overload the backend. 1 second is the default waiting time before the next save action if nothing has changed in the meantime after the editor data has changed.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		autosave: {
+			waitingTime: 5000, // in ms
+			save( editor ) {}
+		},
+
+		// ... other configuration options
+	} );
+```
+
 ### Demo
 
 This demo shows a simple integration of the editor with a fake HTTP server (which needs 1000ms to save the content).

文件差異過大導致無法顯示
+ 12 - 0
docs/builds/guides/migrate.md


+ 1 - 0
docs/builds/guides/overview.md

@@ -20,6 +20,7 @@ The following CKEditor 5 Builds are currently available:
  * [Classic editor](#classic-editor)
  * [Inline editor](#inline-editor)
  * [Balloon editor](#balloon-editor)
+ * [Balloon block editor](#balloon-block-editor)
  * [Document editor](#document-editor)
 
 ### Classic editor

+ 1 - 1
docs/builds/guides/support/browser-compatibility.md

@@ -42,4 +42,4 @@ CKEditor 5 is currently supported in the following mobile environments:
 
 To ensure the highest quality, we maintain a complete test suite with a stable 100% of code coverage for each of the packages. As of October 2018, this means over 9600 tests and the number is growing.
 
-Such an extensive test suite requires a proper continuous integration service. We use [Travis CI](https://travis-ci.com/) as a build platform and [BrowserStack](https://www.browserstack.com/) to be able to run tests on all browsers. These services ensure seamless and fast developer experience and allow us to focus on the job.
+Such an extensive test suite requires a proper continuous integration service. We use [Travis CI](https://travis-ci.com/) as a build platform. This service ensures seamless and fast developer experience and allow us to focus on the job.

+ 12 - 0
docs/features/image-upload.md

@@ -68,6 +68,18 @@ There are two ways you can integrate CKEditor 5 with the CKFinder file manager:
 
 {@link features/ckfinder **Learn how to integrate CKEditor 5 with CKFinder in your project**}.
 
+### Simple adapter
+
+The {@link features/simple-upload-adapter Simple upload adapter} allows uploading images to your server using the [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) API with a minimal editor configuration.
+
+{@link features/simple-upload-adapter **Learn how to use the Simple upload adapter in CKEditor 5**}.
+
+### Base64 adapter
+
+The {@link features/base64-upload-adapter Base64 upload feature} converts images inserted into the editor into [Base64 strings](https://en.wikipedia.org/wiki/Base64) in the {@link builds/guides/integration/saving-data editor output}.
+
+{@link features/base64-upload-adapter **Learn how to use Base64–encoded images in CKEditor 5**}.
+
 ## Implementing your own upload adapter
 
 CKEditor 5 provides an open API that allows you to develop your own upload adapters. Tailored to your project, a custom adapter will allow you to take the **full control** over the process of sending the files to the server as well as passing the response from the server (e.g. the URL to the saved file) back to the WYSIWYG editor.

+ 4 - 4
docs/framework/guides/architecture/ui-library.md

@@ -16,7 +16,7 @@ Views use [templates](#templates) to build the UI. They also provide observable
 A simple input view class can be defined as follows:
 
 ```js
-class SampleInputView extends View {
+class SimpleInputView extends View {
 	constructor( locale ) {
 		super( locale );
 
@@ -66,8 +66,8 @@ class ParentView extends View {
 	constructor( locale ) {
 		super( locale );
 
-		const childA = new SampleInputView( locale );
-		const childB = new SampleInputView( locale );
+		const childA = new SimpleInputView( locale );
+		const childB = new SimpleInputView( locale );
 
 		this.setTemplate( {
 			tag: 'div',
@@ -90,7 +90,7 @@ document.body.appendChild( parent.element );
 It is also possible to create standalone views that do not belong to any collection. They must be {@link module:ui/view~View#render rendered} before injection into the DOM:
 
 ```js
-const view = new SampleInputView( locale );
+const view = new SimpleInputView( locale );
 
 view.render();
 

+ 1 - 1
docs/framework/guides/contributing/testing-environment.md

@@ -125,7 +125,7 @@ ClassicEditor
 
 To ensure the highest quality, we maintain a complete test suite with a stable 100% of code coverage for each of the packages. As of May 2018, this means over 8000 tests and the number is growing. Since every package is tested separately, we implement lower-level tests for libraries and higher-level tests for end-user features.
 
-Such an extensive test suite requires a proper continuous integration service. We use [Travis CI](https://travis-ci.com/) as a build platform and [BrowserStack](https://www.browserstack.com/) to be able to run tests on all browsers. These services ensure seamless and fast developer experience and allow us to focus on the job.
+Such an extensive test suite requires a proper continuous integration service. We use [Travis CI](https://travis-ci.com/) as a build platform. This service ensures seamless and fast developer experience and allow us to focus on the job.
 
 Besides automated tests, we also maintain a smaller set of manual tests. They help us verify whether something unexpected happens that might have been missed by the automated tests.
 

+ 10 - 10
docs/framework/guides/creating-simple-plugin.md

@@ -5,13 +5,13 @@ order: 30
 
 # Creating a simple plugin
 
-This guide will show you how to create a simple editor plugin.
+This guide will show you how to create a simple rich-text editor plugin for CKEditor 5.
 
 <info-box>
-	Before you get to work, you should check out the {@link framework/guides/quick-start "Quick start"} guide first and set up the framework and building tools.
+	Before you get to work, you should check out the {@link framework/guides/quick-start Quick start} guide first to set up the framework and building tools.
 </info-box>
 
-CKEditor plugins need to implement the {@link module:core/plugin~PluginInterface}. The easiest way to do that is to inherit from the {@link module:core/plugin~Plugin base `Plugin` class}, however, you can also write simple constructor functions. This guide uses the former method.
+CKEditor plugins need to implement the {@link module:core/plugin~PluginInterface}. The easiest way to do that is to inherit from the {@link module:core/plugin~Plugin base `Plugin` class}. However, you can also write simple constructor functions. This guide uses the former method.
 
 The plugin that you will write will use a part of the {@link features/image image feature} and will add a simple UI to it &mdash; an "Insert image" button that will open a prompt window asking for the image URL when clicked. Submitting the URL will result in inserting the image into the content and selecting it.
 
@@ -21,7 +21,7 @@ The plugin that you will write will use a part of the {@link features/image imag
 
 ## Step 1. Installing dependencies
 
-Start from installing necessary dependencies:
+Start from installing the necessary dependencies:
 
 * The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package that contains the image feature (on which the plugin will rely).
 * The [`@ckeditor/ckeditor5-core`](https://www.npmjs.com/package/@ckeditor/ckeditor5-core) package which contains the {@link module:core/plugin~Plugin} and {@link module:core/command~Command} classes.
@@ -39,7 +39,7 @@ npm install --save @ckeditor/ckeditor5-image \
 
 Now, open the `app.js` file and start adding code there. Usually, when implementing more complex features you will want to split the code into multiple files (modules). However, to make this guide simpler the entire code will be kept in `app.js`.
 
-First thing to do will be to load the core of the image feature:
+The first thing to do will be to load the core of the image feature:
 
 ```js
 import Image from '@ckeditor/ckeditor5-image/src/image';
@@ -147,7 +147,7 @@ Rebuild the application and refresh the page. You should see a new button in the
 
 ## Step 4. Inserting a new image
 
-Now, expand the button's `#execute` event listener, so it will actually insert a new image into the content:
+Now, expand the button's `#execute` event listener, so it will actually insert the new image into the content:
 
 ```js
 class InsertImage extends Plugin {
@@ -187,7 +187,7 @@ If you refresh the page, you should now be able to insert new images into the co
 
 {@img assets/img/framework-quick-start-classic-editor-insert-image.gif 640 Screencast of inserting a new image.}
 
-The image is fully functional, you can undo inserting by pressing <kbd>Ctrl</kbd>+<kbd>Z</kbd> and the image is always inserted as a block element (the paragraph that contains the selection is automatically split). This is all handled by the CKEditor 5 engine.
+The image is fully functional. You can undo inserting by pressing <kbd>Ctrl</kbd>+<kbd>Z</kbd> and the image is always inserted as a block element (the paragraph that contains the selection is automatically split). This is all handled by the CKEditor 5 engine.
 
 <info-box>
 	As you can see, by clicking the button you are inserting an `<image src="...">` element into the model. The image feature is represented in the model as `<image>`, while in the view (i.e. the virtual DOM) and in the real DOM it is rendered as `<figure class="image"><img src="..."></figure>`.
@@ -199,7 +199,7 @@ Congratulations! You have just created your first CKEditor 5 plugin!
 
 ## Bonus. Enabling image captions
 
-Thanks to the fact that all plugins operate on the model and on the view and know as little about themselves as possible, you can easily enable image captions by simply loading the {@link module:image/imagecaption~ImageCaption} plugin:
+Thanks to the fact that all plugins operate on the model and on the view, and know as little about themselves as possible, you can easily enable image captions by simply loading the {@link module:image/imagecaption~ImageCaption} plugin:
 
 ```js
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
@@ -286,9 +286,9 @@ ClassicEditor
 
 ## What's next?
 
-If you would like to read more tutorials check out the following one:
+If you would like to read more tutorials, check out the following one:
 
 * {@link framework/guides/tutorials/implementing-a-block-widget Implementing a block widget}
 * {@link framework/guides/tutorials/implementing-an-inline-widget Implementing an inline widget}
 
-If you are more into reading about CKEditor 5's architecture, check out the {@link framework/guides/architecture/intro Introduction to CKEditor 5 architecture}.
+If you are more into reading about the CKEditor 5 architecture, check out the {@link framework/guides/architecture/intro Introduction to CKEditor 5 architecture}.

+ 1 - 1
docs/framework/guides/custom-editor-creator.md

@@ -203,7 +203,7 @@ class MultirootEditorUI extends EditorUI {
 
 			// Register the editable UI view in the editor. A single editor instance can aggregate multiple
 			// editable areas (roots) but the decoupled editor has only one.
-			this._editableElements.set( editable.name, editableElement );
+			this.setEditableElement( editable.name, editableElement );
 
 			// Let the global focus tracker know that the editable UI element is focusable and
 			// belongs to the editor. From now on, the focus tracker will sustain the editor focus

+ 25 - 27
docs/framework/guides/quick-start.md

@@ -5,11 +5,11 @@ order: 20
 
 # Quick start
 
-This guide will show you how to initialize the editor from source.
+This guide will show you how to initialize CKEditor 5 rich-text editor from source.
 
 ## How to install the framework?
 
-The framework is made of several [npm packages](https://npmjs.com). To install it you need:
+The CKEditor 5 Framework is made of several [npm packages](https://npmjs.com). To install it you need:
 
 * [Node.js](https://nodejs.org/en/) 6.9.0+
 * npm 4+ (**note:** some npm 5+ versions were known to cause [problems](https://github.com/npm/npm/issues/16991), especially with deduplicating packages; upgrade npm when in doubt)
@@ -22,7 +22,7 @@ Besides Node.js and npm you also need [webpack@4](https://webpack.js.org) with a
 
 This guide assumes that you are familiar with npm and your project uses npm already. If not, see the [npm documentation](https://docs.npmjs.com/getting-started/what-is-npm) or call `npm init` in an empty directory and keep your fingers crossed.
 
-First, install packages needed to build CKEditor 5.
+First, install packages needed to build CKEditor 5:
 
 ```bash
 npm install --save \
@@ -56,14 +56,14 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				// Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
+				// Or /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/ if you want to limit this loader
 				// to CKEditor 5 icons only.
 				test: /\.svg$/,
 
 				use: [ 'raw-loader' ]
 			},
 			{
-				// Or /ckeditor5-[^/]+\/theme\/[^/]+\.css$/ if you want to limit this loader
+				// Or /ckeditor5-[^/]+\/theme\/.+\.css$/ if you want to limit this loader
 				// to CKEditor 5 theme only.
 				test: /\.css$/,
 
@@ -98,7 +98,7 @@ module.exports = {
 
 ## Creating an editor
 
-You can now install some of the CKEditor 5 Framework packages which will allow you to initialize a simple editor. You can start with the {@link examples/builds/classic-editor classic editor} with a small set of features.
+You can now install some of the CKEditor 5 Framework packages which will allow you to initialize a simple rich-text editor. You can start with the {@link examples/builds/classic-editor classic editor} with a small set of features.
 
 ```bash
 npm install --save \
@@ -119,7 +119,7 @@ Based on these packages you can create a simple application.
 <info-box warning>
 	Note that in this guide the editor class is used directly (i.e. we use `@ckeditor/ckeditor5-editor-classic` instead of `@ckeditor/ckeditor5-build-classic`).
 
-	We do not use any of the {@link builds/guides/overview builds} because adding new plugins to them requires rebuilding them anyway. This can be done by {@link builds/guides/integration/installing-plugins customizing a build} or by including CKEditor 5 source into your application (like in this guide).
+	No {@link builds/guides/overview editor builds} are used because adding new plugins to them requires rebuilding them anyway. This can be done by {@link builds/guides/integration/installing-plugins customizing a build} or by including CKEditor 5 source into your application (like in this guide).
 </info-box>
 
 ```js
@@ -150,30 +150,28 @@ You can now run webpack to build the application. To do that, call the `webpack`
 ./node_modules/.bin/webpack --mode development
 ```
 
-<info-box>
-	You can also install `webpack-cli` globally (using `npm install -g`) and run it via a globally available `webpack`.
+You can also install `webpack-cli` globally (using `npm install -g`) and run it via a globally available `webpack`.
 
-	Alternatively, you can add it as an [npm script](https://docs.npmjs.com/misc/scripts):
+Alternatively, you can add it as an [npm script](https://docs.npmjs.com/misc/scripts):
 
-	```js
-	"scripts": {
-		"build": "webpack --mode development"
-	}
-	```
+```js
+"scripts": {
+	"build": "webpack --mode development"
+}
+```
 
-	And use it via:
+And use it with:
 
-	```bash
-	yarn run build
-	```
+```bash
+yarn run build
+```
 
-	npm adds `./node_modules/.bin/` to the `PATH` automatically, so in this case you do not need to install `webpack-cli` globally.
-</info-box>
+npm adds `./node_modules/.bin/` to the `PATH` automatically, so in this case you do not need to install `webpack-cli` globally.
 
 <info-box>
-	Use `webpack --mode production` if you want to build a minified and optimized application. See more at https://webpack.js.org/concepts/mode/.
+	Use `webpack --mode production` if you want to build a minified and optimized application. See more in the [webpack documentation](https://webpack.js.org/concepts/mode/).
 
-	**Note:** Prior to version 1.2.7 `uglifyjs-webpack-plugin` (the default minifier used by webpack) had a bug which caused webpack to crash with the following error: `TypeError: Assignment to constant variable.`. If you experienced this error, make sure that your `node_modules` contains an up to date version of this package (and that webpack uses this version).
+	**Note:** Prior to version 1.2.7, `uglifyjs-webpack-plugin` (the default minifier used by webpack) had a bug which caused webpack to crash with the following error: `TypeError: Assignment to constant variable.`. If you experienced this error, make sure that your `node_modules` contains an up-to-date version of this package (and that webpack uses this version).
 </info-box>
 
 If everything worked correctly, you should see:
@@ -214,9 +212,9 @@ Finally, it is time to create an HTML page:
 </html>
 ```
 
-Open this page in your browser and you should see the editor up and running. Make sure to check the browser console in case anything seems wrong.
+Open this page in your browser and you should see the simple WYSIWYG editor up and running. Make sure to check the browser console in case anything seems wrong.
 
-{@img assets/img/framework-quick-start-classic-editor.png 976 Screenshot of a classic editor with bold and italic features.}
+{@img assets/img/framework-quick-start-classic-editor.png 976 Screenshot of CKEditor 5 classic editor with bold and italic features.}
 
 <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.
@@ -224,6 +222,6 @@ Open this page in your browser and you should see the editor up and running. Mak
 
 ## What's next?
 
-If you finished this guide, you should definitely check out the {@link framework/guides/creating-simple-plugin "Creating a simple plugin"} guide that will teach you some basics of developing features in the CKEditor 5 ecosystem.
+If you finished this guide, you should definitely check out the {@link framework/guides/creating-simple-plugin Creating a simple plugin} guide that will teach you some basics of developing features in the CKEditor 5 ecosystem.
 
-If you are more into reading about CKEditor 5's architecture, check out the {@link framework/guides/architecture/intro Introduction to CKEditor 5 architecture}.
+If you are more into reading about the CKEditor 5 architecture, check out the {@link framework/guides/architecture/intro Introduction to CKEditor 5 architecture}.

+ 47 - 45
docs/framework/guides/tutorials/implementing-an-inline-widget.md

@@ -5,7 +5,9 @@ order: 10
 
 # Implementing an inline widget
 
-In this tutorial, you will learn how to implement an inline widget. We will build a "Placeholder" feature which allow the user to insert predefined placeholders, like a date or a surname, into the document. We will use widget utils and conversion in order to define the behavior of this feature. Later on, we will use dropdown utils to create a dropdown which will allow inserting new placeholders. We will also learn how to use the editor configuration to define allowed placeholder names.
+In this tutorial, you will learn how to implement an inline widget.
+
+You will build a "placeholder" feature that allows the users to insert predefined placeholders, like a date or a surname, into the document. You will use widget utilities and conversion in order to define the behavior of this feature. Later on, you will use dropdown utilities to create a dropdown that will allow for inserting new placeholders. You will also learn how to use the editor configuration to define allowed placeholder names.
 
 <info-box>
 	If you want to see the final product of this tutorial before you plunge in, check out the [demo](#demo).
@@ -13,11 +15,11 @@ In this tutorial, you will learn how to implement an inline widget. We will buil
 
 ## Before you start ⚠️
 
-This guide assumes that you are familiar with widgets concept introduced in the {@link framework/guides/tutorials/implementing-a-block-widget Implementing a block widget} tutorial. We will also reference various concepts from {@link framework/guides/architecture/intro CKEditor 5 architecture}.
+This guide assumes that you are familiar with the widgets concept introduced in the {@link framework/guides/tutorials/implementing-a-block-widget Implementing a block widget} tutorial. The tutorial will also reference various concepts from the {@link framework/guides/architecture/intro CKEditor 5 architecture}.
 
 ## Bootstrapping the project
 
-The overall project structure will be similar to this described in {@link framework/guides/tutorials/implementing-a-block-widget#lets-start Let's start} and {@link framework/guides/tutorials/implementing-a-block-widget#plugin-structure Plugin structure} sections.
+The overall project structure will be similar to one described in {@link framework/guides/tutorials/implementing-a-block-widget#lets-start Let's start} and {@link framework/guides/tutorials/implementing-a-block-widget#plugin-structure Plugin structure} sections of the "Implementing a block widget" tutorial.
 
 First, install required dependencies:
 
@@ -152,7 +154,7 @@ ClassicEditor
 	} );
 ```
 
-Before building the project we still need to define `Placeholder` plugin. The project will have a structure as below:
+Before building the project you still need to define the `Placeholder` plugin. The project will have a structure as below:
 
 ```
 ├── app.js
@@ -170,12 +172,12 @@ Before building the project we still need to define `Placeholder` plugin. The pr
 │   └── theme
 │       └── placeholder.css
-│   ... the rest of plugin files go here as well
+│   ... the rest of the plugin files go here as well.
 └── webpack.config.js
 ```
 
-You can see that the placeholder feature has an established plugin structure: the master (glue) plugin (`placeholder/placeholder.js`), the "editing" (`placeholder/placeholderediting.js`) and the "ui" (`placeholder/placeholderui.js`) parts.
+You can see that the placeholder feature has an established plugin structure: the master (glue) plugin (`placeholder/placeholder.js`), the "editing" (`placeholder/placeholderediting.js`) and the "UI" (`placeholder/placeholderui.js`) parts.
 
 The master (glue) plugin:
 
@@ -222,11 +224,11 @@ export default class PlaceholderEditing extends Plugin {
 }
 ```
 
-At this stage we can build the project and open it in the browser to verify if it is building correctly.
+At this stage you can build the project and open it in the browser to verify if it is building correctly.
 
 ## The model and the view layers
 
-The placeholder feature will be {@link module:engine/model/schema~SchemaItemDefinition defined as  an inline} (text-like) element so it will be inserted in other editor blocks, like `<paragraph>`, that allow text. The placeholder will have a `name` attribute. This means that the model containing some text and a placeholder will look like this:
+The placeholder feature will be {@link module:engine/model/schema~SchemaItemDefinition defined as an inline} (text-like) element so it will be inserted into other editor blocks, like `<paragraph>`, that allow text. The placeholder will have a `name` attribute. This means that the model containing some text and a placeholder will look like this:
 
 ```html
 <paragraph>
@@ -236,9 +238,9 @@ The placeholder feature will be {@link module:engine/model/schema~SchemaItemDefi
 
 ### Defining the schema
 
-The `<placeholder>` element should be treated as `$text` so it must be defined with `isInline: true`. We want to allow it wherever the `$text` is allowed so we add `allowWhere: '$text'`. Finally, we will also need the `name` attribute.
+The `<placeholder>` element should be treated as `$text` so it must be defined with `isInline: true`. You want to allow it wherever the `$text` is allowed so you add `allowWhere: '$text'`. Finally, you will also need the `name` attribute.
 
-We will also use this occasion to import the theme file (`theme/placeholder.css`).
+You will also use this opportunity to import the theme file (`theme/placeholder.css`).
 
 ```js
 // placeholder/placeholderediting.js
@@ -261,10 +263,10 @@ export default class PlaceholderEditing extends Plugin {
 			// Allow wherever text is allowed:
 			allowWhere: '$text',
 
-			// The placeholder will acts as an inline node:
+			// The placeholder will act as an inline node:
 			isInline: true,
 
-			// The inline-widget is self-contained so cannot be split by the caret and can be selected:
+			// The inline widget is self-contained so it cannot be split by the caret and can be selected:
 			isObject: true,
 
 			// The placeholder can have many types, like date, name, surname, etc:
@@ -274,18 +276,18 @@ export default class PlaceholderEditing extends Plugin {
 }
 ```
 
-The schema is defined so now we can define the model-view converters.
+The schema is defined so now you can define the model-view converters.
 
 ### Defining converters
 
-The HTML structure (data output) of the converter will be a `<span>` with a `placeholder` class. The text inside the `<span>` will the placeholder's name.
+The HTML structure (data output) of the converter will be a `<span>` with a `placeholder` class. The text inside the `<span>` will be the placeholder's name.
 
 ```html
 <span class="placeholder">{name}</span>
 ```
 
-* **Upcast conversion**. This view-to-model converter will look for `<span>`s with class `placeholder`, read the `<span>`'s text and create a model `<placeholder>` elements with the `name` attribute set accordingly.
-* **Downcast conversion**. The model-to-view conversion will be slightly different for "editing" and "data" pipelines as the "editing downcast" pipeline will use widget utilities to enable widget specific behavior in the editing view. In both pipelines, the element will be rendered using the same structure.
+* **Upcast conversion**. This view-to-model converter will look for `<span>`s with the `placeholder` class, read the `<span>`'s text and create model `<placeholder>` elements with the `name` attribute set accordingly.
+* **Downcast conversion**. The model-to-view conversion will be slightly different for "editing" and "data" pipelines as the "editing downcast" pipeline will use widget utilities to enable widget-specific behavior in the editing view. In both pipelines, the element will be rendered using the same structure.
 
 ```js
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
@@ -333,7 +335,7 @@ export default class PlaceholderEditing extends Plugin {
 			view: ( modelItem, viewWriter ) => {
 				const widgetElement = createPlaceholderView( modelItem, viewWriter );
 
-				// Enable widget handling on placeholder element inside editing view.
+				// Enable widget handling on a placeholder element inside the editing view.
 				return toWidget( widgetElement, viewWriter );
 			}
 		} );
@@ -363,7 +365,7 @@ export default class PlaceholderEditing extends Plugin {
 
 ### Feature styles
 
-As you could notice the editing part imports the `./theme/placeholder.css` CSS file which describes how the placeholder is displayed in th editing view:
+As you could notice, the editing part imports the `./theme/placeholder.css` CSS file which describes how the placeholder is displayed in th editing view:
 
 ```css
 /* placeholder/theme/placeholder.css */
@@ -383,7 +385,7 @@ As you could notice the editing part imports the `./theme/placeholder.css` CSS f
 
 ### Command
 
-A {@link framework/guides/architecture/core-editor-architecture#commands command} for placeholder feature will insert a `<placeholder>` element (if allowed by the schema) at the selection. The command will accept `options.value` parameter (other CKEditor 5's commands also uses this pattern) to set the placeholder's name.
+The {@link framework/guides/architecture/core-editor-architecture#commands command} for the placeholder feature will insert a `<placeholder>` element (if allowed by the schema) at the selection. The command will accept the `options.value` parameter (other CKEditor 5 commands also use this pattern) to set the placeholder name.
 
 ```js
 // placeholder/placeholdercommand.js
@@ -395,13 +397,13 @@ export default class PlaceholderCommand extends Command {
 		const editor = this.editor;
 
 		editor.model.change( writer => {
-			// Create <placeholder> elment with name attribute...
+			// Create a <placeholder> elment with the "name" attribute...
 			const placeholder = writer.createElement( 'placeholder', { name: value } );
 
 			// ... and insert it into the document.
 			editor.model.insertContent( placeholder );
 
-			// Put the selection on inserted element.
+			// Put the selection on the inserted element.
 			writer.setSelection( placeholder, 'on' );
 		} );
 	}
@@ -417,7 +419,7 @@ export default class PlaceholderCommand extends Command {
 }
 ```
 
-Import the created command and add it to editor's commands:
+Import the created command and add it to the editor commands:
 
 ```js
 // placeholder/placeholderediting.js
@@ -457,7 +459,7 @@ export default class PlaceholderEditing extends Plugin {
 
 ### Let's see it!
 
-You can rebuild the project now and you should be able to execute the `placeholder` command to insert a new placeholder:
+You can rebuild the project now. You should be able to execute the `placeholder` command to insert a new placeholder:
 
 ```js
 editor.execute( 'placeholder', { value: 'time' } );
@@ -465,11 +467,11 @@ editor.execute( 'placeholder', { value: 'time' } );
 
 This should result in:
 
-{@img assets/img/tutorial-implementing-an-inline-widget-1.png Screenshot of a placeholder widget in action.}
+{@img assets/img/tutorial-implementing-an-inline-widget-1.png Screenshot of a placeholder widget in action in CKEditor 5 WYSIWYG editor.}
 
 ### Fixing position mapping
 
-If you play now more with the widget (e.g. try to select it by dragging the mouse from its right to the left edge) you will see the following error logged on the console:
+If you play more with the widget (e.g. try to select it by dragging the mouse from its right to the left edge) you will see the following error logged to the console:
 
 ```
 Uncaught CKEditorError: model-nodelist-offset-out-of-bounds: Given offset cannot be found in the node list.
@@ -487,9 +489,9 @@ view:
 foo<span class="placeholder">{name}</span>bar
 ```
 
-You can say that in the view there is "more" text than in the model. This means that some positions in the view cannot automatically map to positions in the model. Namely &mdash; those are positions inside the `<span>` element.
+You could say that in the view there is "more" text than in the model. This means that some positions in the view cannot automatically map to positions in the model. Namely &mdash; those are positions inside the `<span>` element.
 
-Fortunately, CKEditor 5 {@link module:engine/conversion/mapper~Mapper#viewToModelPosition allows customizing the mapping logic}. Also, since mapping to an empty model element is a pretty common scenario, there is a ready-to-use util {@link module:widget/utils~viewToModelPositionOutsideModelElement `viewToModelPositionOutsideModelElement()`} which we can use here like that:
+Fortunately, CKEditor 5 {@link module:engine/conversion/mapper~Mapper#viewToModelPosition allows customizing the mapping logic}. Also, since mapping to an empty model element is a pretty common scenario, there is a ready-to-use utility {@link module:widget/utils~viewToModelPositionOutsideModelElement `viewToModelPositionOutsideModelElement()`} that you can use here like that:
 
 ```js
 // placeholder/placeholderediting.js
@@ -537,15 +539,15 @@ export default class PlaceholderEditing extends Plugin {
 }
 ```
 
-After adding the custom mapping, the mapping will work perfectly. Every position inside the view `<span>` element will be mapped to a position outside `<placeholder>` in the model.
+After adding the custom mapping, the mapping will work perfectly. Every position inside the view `<span>` element will be mapped to a position outside the `<placeholder>` in the model.
 
 ## Creating the UI
 
 The UI part will provide a dropdown button from which the user can select a placeholder to insert into the editor.
 
-The CKEditor 5 framework features helpers to create different {@link framework/guides/architecture/ui-library#dropdowns dropdowns} like toolbar or list dropdowns.
+CKEditor 5 Framework includes helpers to create different {@link framework/guides/architecture/ui-library#dropdowns dropdowns} like toolbar or list dropdowns.
 
-In this tutorial, we will create a dropdown with a list of available placeholders.
+In this tutorial, you will create a dropdown with a list of available placeholders.
 
 ```js
 // placeholder/placeholderui.js
@@ -563,7 +565,7 @@ export default class PlaceholderUI extends Plugin {
 		const t = editor.t;
 		const placeholderNames = [ 'date', 'first name', 'surname' ];
 
-		// The "placeholder" dropdown must be registered among UI components of the editor
+		// The "placeholder" dropdown must be registered among the UI components of the editor
 		// to be displayed in the toolbar.
 		editor.ui.componentFactory.add( 'placeholder', locale => {
 			const dropdownView = createDropdown( locale );
@@ -579,7 +581,7 @@ export default class PlaceholderUI extends Plugin {
 				withText: true
 			} );
 
-			// Execute the command when the dropdown items is clicked (executed).
+			// Execute the command when the dropdown item is clicked (executed).
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( 'placeholder', { value: evt.source.commandParam } );
 				editor.editing.view.focus();
@@ -632,7 +634,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ Essentials, Paragraph, Heading, List, Bold, Italic, Placeholder ],
 
-		// Insert the "placeholder" dropdown to the editor toolbar.
+		// Insert the "placeholder" dropdown into the editor toolbar.
 		toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList', '|', 'placeholder' ]
 	} )
 	.then( editor => {
@@ -643,7 +645,7 @@ ClassicEditor
 	} );
 ```
 
-To make this plugin extensible, the types of placeholders will be read from editor configuration.
+To make this plugin extensible, placeholder types will be read from the editor configuration.
 
 The first step is to define the placeholder configuration in the editing plugin:
 
@@ -683,7 +685,7 @@ export default class PlaceholderEditing extends Plugin {
 }
 ```
 
-Now let's modify the UI plugin so it will read placeholder types from the configuration:
+Now modify the UI plugin so it will read placeholder types from the configuration:
 
 ```js
 // placeholder/placeholderui.js
@@ -701,7 +703,7 @@ export default class PlaceholderUI extends Plugin {
 }
 ```
 
-Now the plugins is ready to accept configuration. Let's check how this works by adding `placeholderConfig` configuration in editor's create method:
+The plugin is now ready to accept the configuration. Check how this works by adding the `placeholderConfig` configuration in the editor's `create()` method:
 
 ```js
 // ... imports
@@ -717,9 +719,9 @@ ClassicEditor
 	// ...
 ```
 
-Now if you open the dropdown in the toolbar you'll see the new list of placeholders to insert.
+If you open the dropdown in the toolbar, you will see a new list of placeholders to insert.
 
-{@img assets/img/tutorial-implementing-an-inline-widget-2.png Screenshot of the placeholder widgets being inserted using the dropdown.}
+{@img assets/img/tutorial-implementing-an-inline-widget-2.png Screenshot of the placeholder widgets being inserted using the dropdown in CKEditor 5 WYSIWYG editor.}
 
 ## Demo
 
@@ -760,13 +762,13 @@ class PlaceholderCommand extends Command {
 		const editor = this.editor;
 
 		editor.model.change( writer => {
-			// Create <placeholder> elment with name attribute...
+			// Create a <placeholder> elment with the "name" attribute...
 			const placeholder = writer.createElement( 'placeholder', { name: value } );
 
 			// ... and insert it into the document.
 			editor.model.insertContent( placeholder );
 
-			// Put the selection on inserted element.
+			// Put the selection on the inserted element.
 			writer.setSelection( placeholder, 'on' );
 		} );
 	}
@@ -787,7 +789,7 @@ class PlaceholderUI extends Plugin {
 		const t = editor.t;
 		const placeholderNames = editor.config.get( 'placeholderConfig.types' );
 
-		// The "placeholder" dropdown must be registered among UI components of the editor
+		// The "placeholder" dropdown must be registered among the UI components of the editor
 		// to be displayed in the toolbar.
 		editor.ui.componentFactory.add( 'placeholder', locale => {
 			const dropdownView = createDropdown( locale );
@@ -803,7 +805,7 @@ class PlaceholderUI extends Plugin {
 				withText: true
 			} );
 
-			// Execute the command when the dropdown items is clicked (executed).
+			// Execute the command when the dropdown item is clicked (executed).
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( 'placeholder', { value: evt.source.commandParam } );
 				editor.editing.view.focus();
@@ -863,10 +865,10 @@ class PlaceholderEditing extends Plugin {
 			// Allow wherever text is allowed:
 			allowWhere: '$text',
 
-			// The placeholder will acts as an inline node:
+			// The placeholder will act as an inline node:
 			isInline: true,
 
-			// The inline-widget is self-contained so cannot be split by the caret and can be selected:
+			// The inline widget is self-contained so it cannot be split by the caret and it can be selected:
 			isObject: true,
 
 			// The placeholder can have many types, like date, name, surname, etc:
@@ -895,7 +897,7 @@ class PlaceholderEditing extends Plugin {
 			view: ( modelItem, viewWriter ) => {
 				const widgetElement = createPlaceholderView( modelItem, viewWriter );
 
-				// Enable widget handling on placeholder element inside editing view.
+				// Enable widget handling on a placeholder element inside the editing view.
 				return toWidget( widgetElement, viewWriter );
 			}
 		} );

+ 4 - 2
docs/umberto.json

@@ -15,10 +15,12 @@
 		"framework/guides/ui/external-ui.html": "framework/guides/deep-dive/ui/external-ui.html",
 		"framework/guides/ui/document-editor.html": "framework/guides/deep-dive/ui/document-editor.html",
 		"features/collaboration/overview.html": "features/collaboration/real-time-collaboration/real-time-collaboration.html",
-		"features/collaboration/collaborative-editing.html": "features/collaboration/real-time-collaboration/real-time-collaborative-editing.html",
-		"features/collaboration/collaborative-comments.html": "features/collaboration/real-time-collaboration/real-time-collaborative-comments.html",
+		"features/collaboration/collaborative-editing.html": "features/collaboration/real-time-collaboration/real-time-collaboration-integration.html",
+		"features/collaboration/collaborative-comments.html": "features/collaboration/real-time-collaboration/real-time-collaboration-integration.html",
 		"features/collaboration/presence-list.html": "features/collaboration/real-time-collaboration/users-in-real-time-collaboration.html",
 		"features/collaboration/comment-only-mode.html": "features/collaboration/comments/comment-only-mode.html",
+		"features/collaboration/real-time-collaboration/real-time-collaborative-comments.html": "features/collaboration/real-time-collaboration/real-time-collaboration-integration.html",
+		"features/collaboration/real-time-collaboration/real-time-collaborative-editing.html": "features/collaboration/real-time-collaboration/real-time-collaboration-integration.html",
 		"features/image-upload.html": "features/image-upload/image-upload.html",
 		"features/ckfinder.html": "features/image-upload/ckfinder.html",
 		"features/easy-image.html": "features/image-upload/easy-image.html",

+ 4 - 1
mgit.json

@@ -29,6 +29,7 @@
     "@ckeditor/ckeditor5-heading": "ckeditor/ckeditor5-heading",
     "@ckeditor/ckeditor5-highlight": "ckeditor/ckeditor5-highlight",
     "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image",
+    "@ckeditor/ckeditor5-indent": "ckeditor/ckeditor5-indent",
     "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link",
     "@ckeditor/ckeditor5-list": "ckeditor/ckeditor5-list",
     "@ckeditor/ckeditor5-markdown-gfm": "ckeditor/ckeditor5-markdown-gfm",
@@ -44,6 +45,8 @@
     "@ckeditor/ckeditor5-undo": "ckeditor/ckeditor5-undo",
     "@ckeditor/ckeditor5-upload": "ckeditor/ckeditor5-upload",
     "@ckeditor/ckeditor5-utils": "ckeditor/ckeditor5-utils",
-    "@ckeditor/ckeditor5-widget": "ckeditor/ckeditor5-widget"
+    "@ckeditor/ckeditor5-widget": "ckeditor/ckeditor5-widget",
+    "@ckeditor/ckeditor5-watchdog": "ckeditor/ckeditor5-watchdog",
+    "@ckeditor/ckeditor5-word-count": "ckeditor/ckeditor5-word-count"
   }
 }

+ 53 - 50
package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5",
-  "version": "12.1.0",
+  "version": "12.3.1",
   "description": "The development environment of CKEditor 5 – the best browser-based rich text editor.",
   "private": true,
   "keywords": [
@@ -21,63 +21,66 @@
     "framework"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.1",
-    "@ckeditor/ckeditor5-alignment": "^11.1.0",
-    "@ckeditor/ckeditor5-autoformat": "^11.0.1",
-    "@ckeditor/ckeditor5-autosave": "^11.0.1",
-    "@ckeditor/ckeditor5-basic-styles": "^11.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^11.0.1",
-    "@ckeditor/ckeditor5-build-balloon": "^12.1.0",
-    "@ckeditor/ckeditor5-build-balloon-block": "^12.1.0",
-    "@ckeditor/ckeditor5-build-classic": "^12.1.0",
-    "@ckeditor/ckeditor5-build-decoupled-document": "^12.1.0",
-    "@ckeditor/ckeditor5-build-inline": "^12.1.0",
-    "@ckeditor/ckeditor5-ckfinder": "^11.0.1",
-    "@ckeditor/ckeditor5-clipboard": "^11.0.1",
-    "@ckeditor/ckeditor5-cloud-services": "^11.0.1",
-    "@ckeditor/ckeditor5-core": "^12.1.0",
-    "@ckeditor/ckeditor5-easy-image": "^11.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^12.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "^12.1.0",
-    "@ckeditor/ckeditor5-editor-inline": "^12.1.0",
-    "@ckeditor/ckeditor5-engine": "^13.1.0",
-    "@ckeditor/ckeditor5-enter": "^11.0.1",
-    "@ckeditor/ckeditor5-essentials": "^11.0.1",
-    "@ckeditor/ckeditor5-font": "^11.1.0",
-    "@ckeditor/ckeditor5-heading": "^11.0.1",
-    "@ckeditor/ckeditor5-highlight": "^11.0.1",
-    "@ckeditor/ckeditor5-image": "^13.0.1",
-    "@ckeditor/ckeditor5-link": "^11.0.1",
-    "@ckeditor/ckeditor5-list": "^12.0.1",
-    "@ckeditor/ckeditor5-markdown-gfm": "^11.0.1",
-    "@ckeditor/ckeditor5-media-embed": "^11.1.0",
-    "@ckeditor/ckeditor5-mention": "^10.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.1",
-    "@ckeditor/ckeditor5-paste-from-office": "^11.0.1",
-    "@ckeditor/ckeditor5-remove-format": "^10.0.0",
-    "@ckeditor/ckeditor5-table": "^12.0.1",
-    "@ckeditor/ckeditor5-theme-lark": "^13.0.1",
-    "@ckeditor/ckeditor5-typing": "^12.0.1",
-    "@ckeditor/ckeditor5-ui": "^12.1.0",
-    "@ckeditor/ckeditor5-undo": "^11.0.1",
-    "@ckeditor/ckeditor5-upload": "^11.0.1",
-    "@ckeditor/ckeditor5-utils": "^12.1.0",
-    "@ckeditor/ckeditor5-widget": "^11.0.1"
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.4",
+    "@ckeditor/ckeditor5-alignment": "^11.1.3",
+    "@ckeditor/ckeditor5-autoformat": "^11.0.4",
+    "@ckeditor/ckeditor5-autosave": "^11.0.4",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
+    "@ckeditor/ckeditor5-block-quote": "^11.1.2",
+    "@ckeditor/ckeditor5-build-balloon": "^12.3.1",
+    "@ckeditor/ckeditor5-build-balloon-block": "^12.3.1",
+    "@ckeditor/ckeditor5-build-classic": "^12.3.1",
+    "@ckeditor/ckeditor5-build-decoupled-document": "^12.3.1",
+    "@ckeditor/ckeditor5-build-inline": "^12.3.1",
+    "@ckeditor/ckeditor5-ckfinder": "^11.0.4",
+    "@ckeditor/ckeditor5-clipboard": "^12.0.1",
+    "@ckeditor/ckeditor5-cloud-services": "^11.0.4",
+    "@ckeditor/ckeditor5-core": "^12.2.1",
+    "@ckeditor/ckeditor5-easy-image": "^11.0.4",
+    "@ckeditor/ckeditor5-editor-balloon": "^12.2.1",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
+    "@ckeditor/ckeditor5-editor-decoupled": "^12.2.1",
+    "@ckeditor/ckeditor5-editor-inline": "^12.2.1",
+    "@ckeditor/ckeditor5-engine": "^13.2.1",
+    "@ckeditor/ckeditor5-enter": "^11.0.4",
+    "@ckeditor/ckeditor5-essentials": "^11.0.4",
+    "@ckeditor/ckeditor5-font": "^11.2.1",
+    "@ckeditor/ckeditor5-heading": "^11.0.4",
+    "@ckeditor/ckeditor5-highlight": "^11.0.4",
+    "@ckeditor/ckeditor5-image": "^13.1.2",
+    "@ckeditor/ckeditor5-indent": "^10.0.1",
+    "@ckeditor/ckeditor5-link": "^11.1.1",
+    "@ckeditor/ckeditor5-list": "^12.0.4",
+    "@ckeditor/ckeditor5-markdown-gfm": "^11.0.4",
+    "@ckeditor/ckeditor5-media-embed": "^11.1.3",
+    "@ckeditor/ckeditor5-mention": "^12.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
+    "@ckeditor/ckeditor5-paste-from-office": "^11.0.4",
+    "@ckeditor/ckeditor5-remove-format": "^10.0.3",
+    "@ckeditor/ckeditor5-table": "^13.0.2",
+    "@ckeditor/ckeditor5-theme-lark": "^14.1.1",
+    "@ckeditor/ckeditor5-typing": "^12.1.1",
+    "@ckeditor/ckeditor5-ui": "^13.0.2",
+    "@ckeditor/ckeditor5-undo": "^11.0.4",
+    "@ckeditor/ckeditor5-upload": "^11.1.1",
+    "@ckeditor/ckeditor5-utils": "^13.0.1",
+    "@ckeditor/ckeditor5-watchdog": "^10.0.1",
+    "@ckeditor/ckeditor5-widget": "^11.0.4",
+    "@ckeditor/ckeditor5-word-count": "^10.0.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-comments": "^3.0.0",
-    "@ckeditor/ckeditor5-dev-docs": "^11.0.1",
+    "@ckeditor/ckeditor5-comments": "^3.2.0",
+    "@ckeditor/ckeditor5-dev-docs": "^11.0.2",
     "@ckeditor/ckeditor5-dev-env": "^14.1.1",
-    "@ckeditor/ckeditor5-dev-tests": "^16.3.0",
+    "@ckeditor/ckeditor5-dev-tests": "^16.4.0",
     "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
     "@ckeditor/ckeditor5-inspector": "^1.2.0",
-    "@ckeditor/ckeditor5-real-time-collaboration": "^12.2.0",
-    "@ckeditor/ckeditor5-track-changes": "^0.2.0",
+    "@ckeditor/ckeditor5-real-time-collaboration": "^12.3.0",
+    "@ckeditor/ckeditor5-track-changes": "^1.0.0",
     "css-loader": "^1.0.0",
     "eslint": "^5.5.0",
-    "eslint-config-ckeditor5": "^1.0.11",
+    "eslint-config-ckeditor5": "^2.0.0",
     "glob": "^7.1.2",
     "husky": "^1.3.1",
     "lint-staged": "^7.0.0",

+ 4 - 2
scripts/docs/snippetadapter.js

@@ -163,8 +163,10 @@ module.exports = function snippetAdapter( snippets, options, umbertoHelpers ) {
 
 					let snippetHTML = fs.readFileSync( snippetData.snippetSources.html ).toString();
 
-					snippetHTML = snippetHTML.replace( /%BASE_PATH%/g, snippetData.basePath );
-					snippetHTML = `<div class="live-snippet">${ snippetHTML }</div>`;
+					if ( snippetHTML.trim() ) {
+						snippetHTML = snippetHTML.replace( /%BASE_PATH%/g, snippetData.basePath );
+						snippetHTML = `<div class="live-snippet">${ snippetHTML }</div>`;
+					}
 
 					content = content.replace( getSnippetPlaceholder( snippetData.snippetName ), snippetHTML );
 

文件差異過大導致無法顯示
+ 1998 - 1534
yarn.lock