瀏覽代碼

Merge branch 'master' into i/7336

Piotrek Koszuliński 5 年之前
父節點
當前提交
a083c31c0a
共有 31 個文件被更改,包括 183 次插入134 次删除
  1. 2 2
      docs/builds/guides/development/custom-builds.md
  2. 8 2
      docs/builds/guides/frameworks/vuejs.md
  3. 3 3
      docs/builds/guides/integration/advanced-setup.md
  4. 2 0
      docs/builds/guides/integration/content-styles.md
  5. 2 2
      docs/builds/guides/integration/installing-plugins.md
  6. 2 2
      docs/features/image-upload.md
  7. 1 11
      docs/features/ui-language.md
  8. 1 1
      docs/framework/guides/contributing/development-environment.md
  9. 2 2
      docs/framework/guides/quick-start.md
  10. 1 1
      packages/ckeditor5-ckfinder/docs/features/ckfinder.md
  11. 2 2
      packages/ckeditor5-image/docs/_snippets/features/image-caption.html
  12. 2 2
      packages/ckeditor5-image/docs/_snippets/features/image-link.html
  13. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons-dropdown.html
  14. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons.html
  15. 2 2
      packages/ckeditor5-image/docs/_snippets/features/image-resize-px.html
  16. 2 2
      packages/ckeditor5-image/docs/_snippets/features/image-resize.html
  17. 2 2
      packages/ckeditor5-image/docs/_snippets/features/image-style-presentational.html
  18. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-style.html
  19. 1 1
      packages/ckeditor5-image/docs/_snippets/features/image-toolbar.html
  20. 97 53
      packages/ckeditor5-image/docs/features/image.md
  21. 12 12
      packages/ckeditor5-image/src/imageresize/imageresizebuttons.js
  22. 1 1
      packages/ckeditor5-image/src/imageresize/imageresizecommand.js
  23. 1 1
      packages/ckeditor5-image/src/imageresize/imageresizeediting.js
  24. 1 1
      packages/ckeditor5-image/src/imageresize/imageresizehandles.js
  25. 1 1
      packages/ckeditor5-image/tests/imageresize/imageresizebuttons.js
  26. 1 2
      packages/ckeditor5-table/package.json
  27. 23 14
      packages/ckeditor5-table/src/tablekeyboard.js
  28. 6 6
      packages/ckeditor5-table/tests/tablekeyboard.js
  29. 0 1
      packages/ckeditor5-widget/package.json
  30. 1 1
      packages/ckeditor5-widget/src/utils.js
  31. 1 1
      scripts/docs/build-content-styles.js

+ 2 - 2
docs/builds/guides/development/custom-builds.md

@@ -29,8 +29,8 @@ Some of the reasons for creating custom builds are:
 
 In order to start developing CKEditor 5 you will require:
 
-* [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)
+* [Node.js](https://nodejs.org/en/) 12.0.0+
+* npm 5.7.1+ (**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)
 * [Git](https://git-scm.com/)
 
 ## Forking an existing build

+ 8 - 2
docs/builds/guides/frameworks/vuejs.md

@@ -216,7 +216,10 @@ module.exports = {
 			// CKEditor needs its own plugin to be built using webpack.
 			new CKEditorWebpackPlugin( {
 				// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
-				language: 'en'
+				language: 'en',
+
+				// Append translations to the file matching the `app` name.
+				translationsOutputFile: /app/
 			} )
 		]
 	},
@@ -455,7 +458,10 @@ module.exports = {
 			// CKEditor needs its own plugin to be built using webpack.
 			new CKEditorWebpackPlugin( {
 				// The UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-				language: 'de'
+				language: 'de',
+
+				// Append translations to the file matching the `app` name.
+				translationsOutputFile: /app/
 			} )
 		]
 	},

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

@@ -13,8 +13,8 @@ In this guide, we would like to show you ways to closer integrate CKEditor 5 wit
 
 In order to start developing CKEditor 5 you will require:
 
-* [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)
+* [Node.js](https://nodejs.org/en/) 12.0.0+
+* npm 5.7.1+ (**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)
 * [Git](https://git-scm.com/)
 
 ## Bundler
@@ -513,7 +513,7 @@ If you want to load two different editors on one page you need to make sure that
 
 There is no limit for how many editor classes a single build can export. By default, the official builds export a single editor class only. However, they can easily import more.
 
-You can start from forking (or copying) an existing build like in the {@link builds/guides/development/custom-builds "Creating custom builds"} guide. Let's say you forked and cloned the [`ckeditor5`](http://github.com/ckeditor /ckeditor5) repository and want to add {@link module:editor-inline/inlineeditor~InlineEditor} to the classic build:
+You can start from forking (or copying) an existing build like in the {@link builds/guides/development/custom-builds "Creating custom builds"} guide. Let's say you forked and cloned the [`ckeditor5`](http://github.com/ckeditor/ckeditor5) repository and want to add {@link module:editor-inline/inlineeditor~InlineEditor} to the classic build:
 
 ```bash
 git clone -b stable git@github.com:<your-username>/ckeditor5.git

+ 2 - 0
docs/builds/guides/integration/content-styles.md

@@ -46,6 +46,7 @@ The content in the front–end of your application should now look the same as w
 
 Below there is a full list of content styles used by the editor features. You can copy it and use straight in your project. **Make sure to add the `ck-content` class to your content container for the styles to work** ([see above](#sharing-content-styles-between-frontend-and-backend)).
 
+```css
 /*
  * CKEditor 5 (v21.0.0) content styles.
  * Generated on Wed, 29 Jul 2020 12:14:43 GMT.
@@ -373,3 +374,4 @@ Below there is a full list of content styles used by the editor features. You ca
 		display: none;
 	}
 }
+```

+ 2 - 2
docs/builds/guides/integration/installing-plugins.md

@@ -21,8 +21,8 @@ In this guide you can learn how to add plugins to your editor in the two most co
 
 In order to start developing CKEditor 5 you will require:
 
-* [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)
+* [Node.js](https://nodejs.org/en/) 12.0.0+
+* npm 5.7.1+ (**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)
 
 ## Adding a plugin to a build
 

+ 2 - 2
docs/features/image-upload.md

@@ -40,7 +40,7 @@ The demo below uses the {@link builds/guides/overview#classic-editor Classic edi
 
 CKEditor 5 introduces a new way of handling images, with a strong focus on the end–user experience. This feature is called {@link features/easy-image Easy Image} and its goal is to make the image upload as effortless and intuitive as possible.
 
-Easy Image is part of the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/) offer. It is a <abbr title="Software as a service">SaaS</abbr> product that:
+Easy Image is part of the commercial [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/) offer. It is a <abbr title="Software as a service">SaaS</abbr> product that:
 
 * securely uploads images,
 * takes care of rescaling and optimizing them as well as providing various image sizes (responsive images),
@@ -52,7 +52,7 @@ All that with virtually zero server setup.
 
 ### CKFinder
 
-The {@link features/ckfinder CKFinder feature} provides a bridge between the rich-text editor and [CKFinder](https://ckeditor.com/ckfinder/), a browser-based file uploader with its server-side connectors (PHP, Java and ASP.NET).
+The {@link features/ckfinder CKFinder feature} provides a bridge between the rich-text editor and [CKFinder](https://ckeditor.com/ckfinder/), a browser-based commercial file uploader with its server-side connectors (PHP, Java and ASP.NET).
 
 There are two ways you can integrate CKEditor 5 with the CKFinder file manager:
 

+ 1 - 11
docs/features/ui-language.md

@@ -128,17 +128,7 @@ If you build CKEditor 5 from scratch or integrate it directly into your applicat
 				// The bundle is optimized for one language when this option is omitted.
 				additionalLanguages: 'all',
 
-				// An optional directory for emitted translations. Relative to the webpack's output.
-				// Defaults to `'translations'`.
-				// outputDirectory: 'ckeditor5-translations',
-
-				// Whether the build process should fail if an error occurs.
-				// Defaults to `false`.
-				// strict: true,
-
-				// Whether to log all warnings to the console.
-				// Defaults to `false`.
-				// verbose: true
+				// For more advanced options see https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin.
 			} ),
 
 			// Other webpack plugins...

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

@@ -25,7 +25,7 @@ You can find all the official packages listed in the [CKEditor 5 repository's RE
 
 In order to start developing CKEditor 5 you will require:
 
-* [Node.js](https://nodejs.org/en/) 8.0.0+
+* [Node.js](https://nodejs.org/en/) 12.0.0+
 * [Git](https://git-scm.com/)
 
 ## Setting up the CKEditor development environment

+ 2 - 2
docs/framework/guides/quick-start.md

@@ -11,8 +11,8 @@ This guide will show you how to initialize CKEditor 5 rich-text editor from sour
 
 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)
+* [Node.js](https://nodejs.org/en/) 12.0.0+
+* npm 5.7.1+ (**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)
 
 Besides Node.js and npm you also need [webpack@4](https://webpack.js.org) with a few additional packages to use the framework. They are needed to bundle the source code. Read more about building CKEditor 5 in the {@link builds/guides/integration/advanced-setup CKEditor 5 Builds Advanced setup} guide.
 

+ 1 - 1
packages/ckeditor5-ckfinder/docs/features/ckfinder.md

@@ -8,7 +8,7 @@ order: 30
 
 # CKFinder file manager integration
 
-This feature allows you to insert images as well as links to files into the rich-text editor content. It is a bridge between the CKEditor 5 WYSIWYG editor and the [CKFinder](https://ckeditor.com/ckfinder) file manager and uploader.
+This feature allows you to insert images as well as links to files into the rich-text editor content. It is a bridge between the CKEditor 5 WYSIWYG editor and the [CKFinder](https://ckeditor.com/ckfinder) file manager and uploader. CKFinder is a commercial application that was designed with CKEditor compatibility in mind. It is currently available as version 3.x for PHP, ASP.NET and Java and version 2.x for ASP and ColdFusion.
 
 <info-box>
 	Check out the comprehensive {@link features/image-upload Image upload overview} to learn about other ways to upload images into CKEditor 5.

+ 2 - 2
packages/ckeditor5-image/docs/_snippets/features/image-caption.html

@@ -1,12 +1,12 @@
 <div id="snippet-image-caption">
-	<p>Image with caption:</p>
+	<p>Image with a caption:</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
 	</figure>
 
-	<p>Image without caption:</p>
+	<p>Image without a caption:</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">

+ 2 - 2
packages/ckeditor5-image/docs/_snippets/features/image-link.html

@@ -1,8 +1,8 @@
 <div id="snippet-image-link">
-	<h3>Linked image</h3>
+	<p>Linked image - use the contextual toolbar to edit image link properties:</p>
 
 	<figure class="image">
-		<a href="https://cksource.com">
+		<a href="https://cksource.com/">
 			<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 		</a>
 	</figure>

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons-dropdown.html

@@ -1,5 +1,5 @@
 <div id="snippet-image-resize-buttons-dropdown">
-	<h3>Resize me using the dropdown!</h3>
+	<p>Click me and resize using the contextual toolbar!</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons.html

@@ -1,5 +1,5 @@
 <div id="snippet-image-resize-buttons">
-	<h3>Resize me using image toolbar buttons!</h3>
+	<p>Click me and resize using the image toolbar buttons!</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">

+ 2 - 2
packages/ckeditor5-image/docs/_snippets/features/image-resize-px.html

@@ -1,12 +1,12 @@
 <div id="snippet-image-resize-px">
-	<h3>Resize me!</h3>
+	<p>Resize me using pixel values!</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
 	</figure>
 
-	<h3>Resized image (width: 400px):</h3>
+	<p>Resized image (width: 400px):</p>
 
 	<figure class="image image_resized" style="width:400px;">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">

+ 2 - 2
packages/ckeditor5-image/docs/_snippets/features/image-resize.html

@@ -1,12 +1,12 @@
 <div id="snippet-image-resize">
-	<h3>Resize me!</h3>
+	<p>Resize me by using handles!</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
 	</figure>
 
-	<h3>Resized image (width: 75%):</h3>
+	<p>Resized image (width: 75%):</p>
 
 	<figure class="image image_resized" style="width:75%;">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">

File diff suppressed because it is too large
+ 2 - 2
packages/ckeditor5-image/docs/_snippets/features/image-style-presentational.html


+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style.html

@@ -11,5 +11,5 @@
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
 	</figure>
 
-	<p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.</p>
+	<p>Lots of text here. Quite a lot of text, indeed. In fact, there is plenty of text beside this image and it forms a whole long paragraph. This whole lot of text is here to help you see the image's alignment in context. It serves no other purpose, though. But we still find it useful and plain like it.</p>
 </div>

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-toolbar.html

@@ -1,5 +1,5 @@
 <div id="snippet-image-toolbar">
-	<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
+	<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5 WYSIWYG editor</a>.</p>
 
 	<figure class="image">
 		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">

File diff suppressed because it is too large
+ 97 - 53
packages/ckeditor5-image/docs/features/image.md


+ 12 - 12
packages/ckeditor5-image/src/imageresize/imageresizebuttons.js

@@ -31,7 +31,7 @@ const RESIZE_ICONS = {
 };
 
 /**
- * The `ImageResizeButtons` plugin.
+ * The image resize buttons plugin.
  *
  * It adds a possibility to resize images using the toolbar dropdown or individual buttons, depending on the plugin configuration.
  *
@@ -90,7 +90,7 @@ export default class ImageResizeButtons extends Plugin {
 	 * A helper function that creates a standalone button component for the plugin.
 	 *
 	 * @private
-	 * @param {module:image/imageresize/imageresizebuttons~ImageResizeOption} resizeOption A model of resize option.
+	 * @param {module:image/imageresize/imageresizebuttons~ImageResizeOption} resizeOption A model of the resize option.
 	 */
 	_registerImageResizeButton( option ) {
 		const editor = this.editor;
@@ -116,7 +116,7 @@ export default class ImageResizeButtons extends Plugin {
 				throw new CKEditorError(
 					'imageresizebuttons-missing-icon: ' +
 					'The resize option "' + name + '" misses the "icon" property ' +
-					'or the property value doesn\'t match any of available icons.',
+					'or the property value doesn\'t match any of the available icons.',
 					editor,
 					option
 				);
@@ -143,7 +143,7 @@ export default class ImageResizeButtons extends Plugin {
 	}
 
 	/**
-	 * A helper function that creates a dropdown component for the plugin containing all resize options defined in
+	 * A helper function that creates a dropdown component for the plugin containing all the resize options defined in
 	 * the editor configuration.
 	 *
 	 * @private
@@ -200,7 +200,7 @@ export default class ImageResizeButtons extends Plugin {
 	 * @private
 	 * @param {module:image/imageresize/imageresizebuttons~ImageResizeOption} option A resize option object.
 	 * @param {Boolean} [forTooltip] An optional flag for creating a tooltip label.
-	 * @returns {String} A user-defined label, a label combined from the value and resize unit or the default label
+	 * @returns {String} A user-defined label combined from the numeric value and the resize unit or the default label
 	 * for reset options (`Original`).
 	 */
 	_getOptionLabelValue( option, forTooltip ) {
@@ -224,11 +224,11 @@ export default class ImageResizeButtons extends Plugin {
 	}
 
 	/**
-	 * A helper function that parses resize options and returns list item definitions ready for use in a dropdown.
+	 * A helper function that parses the resize options and returns list item definitions ready for use in the dropdown.
 	 *
 	 * @private
 	 * @param {Array.<module:image/imageresize/imageresizebuttons~ImageResizeOption>} options The resize options.
-	 * @param {module:image/imageresize/imageresizecommand~ImageResizeCommand} command A resize image command.
+	 * @param {module:image/imageresize/imageresizecommand~ImageResizeCommand} command The resize image command.
 	 * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} Dropdown item definitions.
 	 */
 	_getResizeDropdownListItemDefinitions( options, command ) {
@@ -268,19 +268,19 @@ function getIsOnButtonCallback( value ) {
 }
 
 /**
- * An image resize option used in the {@link module:image/image~ImageConfig#resizeOptions image resize configuration}.
+ * The image resize option used in the {@link module:image/image~ImageConfig#resizeOptions image resize configuration}.
  *
  * @typedef {Object} module:image/imageresize/imageresizebuttons~ImageResizeOption
- * @property {String} name A name of the UI component that changes the image size.
+ * @property {String} name The name of the UI component that changes the image size.
  * * If you configure the feature using individual resize buttons, you can refer to this name in the
  * {@link module:image/image~ImageConfig#toolbar image toolbar configuration}.
  * * If you configure the feature using the resize dropdown, this name will be used for a list item in the dropdown.
- * @property {String} value A value of a resize option without the unit
+ * @property {String} value The value of the resize option without the unit
  * ({@link module:image/image~ImageConfig#resizeUnit configured separately}). `null` resets an image to its original size.
  * @property {String} [resizeOptions.icon] An icon used by an individual resize button (see the `name` property to learn more).
  * Available icons are: `'small'`, `'medium'`, `'large'`, `'original'`.
- * @property {String} [label] A label of the option displayed in the dropdown or, if the feature is configured using
+ * @property {String} [label] An option label displayed in the dropdown or, if the feature is configured using
  * individual buttons, a {@link module:ui/button/buttonview~ButtonView#tooltip} and an ARIA attribute of a button.
- * If not specified, the label is generated automatically based on the option `value` and the
+ * If not specified, the label is generated automatically based on the `value` option and the
  * {@link module:image/image~ImageConfig#resizeUnit `config.image.resizeUnit`}.
  */

+ 1 - 1
packages/ckeditor5-image/src/imageresize/imageresizecommand.js

@@ -11,7 +11,7 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import { isImage } from '../image/utils';
 
 /**
- * The image resize command. Currently, it supports only the width attribute.
+ * The image resize command. Currently, it only supports the width attribute.
  *
  * @extends module:core/command~Command
  */

+ 1 - 1
packages/ckeditor5-image/src/imageresize/imageresizeediting.js

@@ -13,7 +13,7 @@ import ImageResizeCommand from './imageresizecommand';
 /**
  * The image resize editing feature.
  *
- * It adds a possibility to resize each image using handles or manually by
+ * It adds the ability to resize each image using handles or manually by
  * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
  *
  * @extends module:core/plugin~Plugin

+ 1 - 1
packages/ckeditor5-image/src/imageresize/imageresizehandles.js

@@ -13,7 +13,7 @@ import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
 /**
  * The image resize by handles feature.
  *
- * It adds a possibility to resize each image using handles or manually by
+ * It adds the ability to resize each image using handles or manually by
  * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
  *
  * @extends module:core/plugin~Plugin

+ 1 - 1
packages/ckeditor5-image/tests/imageresize/imageresizebuttons.js

@@ -294,7 +294,7 @@ describe( 'ImageResizeButtons', () => {
 				} );
 
 			const errMsg = 'The resize option "imageResize:noicon" misses the "icon" property ' +
-				'or the property value doesn\'t match any of available icons.';
+				'or the property value doesn\'t match any of the available icons.';
 
 			expectToThrowCKEditorError( () => {
 				editor.ui.componentFactory.create( 'imageResize:noicon' );

+ 1 - 2
packages/ckeditor5-table/package.json

@@ -30,8 +30,7 @@
     "@ckeditor/ckeditor5-typing": "^21.0.0",
     "@ckeditor/ckeditor5-undo": "^21.0.0",
     "@ckeditor/ckeditor5-utils": "^21.0.0",
-    "json-diff": "^0.5.4",
-    "lodash-es": "^4.17.15"
+    "json-diff": "^0.5.4"
   },
   "engines": {
     "node": ">=12.0.0",

+ 23 - 14
packages/ckeditor5-table/src/tablekeyboard.js

@@ -69,20 +69,17 @@ export default class TableKeyboard extends Plugin {
 	_handleTabOnSelectedTable( data, cancel ) {
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
+		const selectedElement = selection.getSelectedElement();
 
-		if ( !selection.isCollapsed && selection.rangeCount === 1 && selection.getFirstRange().isFlat ) {
-			const selectedElement = selection.getSelectedElement();
-
-			if ( !selectedElement || !selectedElement.is( 'element', 'table' ) ) {
-				return;
-			}
+		if ( !selectedElement || !selectedElement.is( 'element', 'table' ) ) {
+			return;
+		}
 
-			cancel();
+		cancel();
 
-			editor.model.change( writer => {
-				writer.setSelection( writer.createRangeIn( selectedElement.getChild( 0 ).getChild( 0 ) ) );
-			} );
-		}
+		editor.model.change( writer => {
+			writer.setSelection( writer.createRangeIn( selectedElement.getChild( 0 ).getChild( 0 ) ) );
+		} );
 	}
 
 	/**
@@ -97,7 +94,11 @@ export default class TableKeyboard extends Plugin {
 
 		return ( domEventData, cancel ) => {
 			const selection = editor.model.document.selection;
-			const tableCell = getTableCellsContainingSelection( selection )[ 0 ];
+			let tableCell = getTableCellsContainingSelection( selection )[ 0 ];
+
+			if ( !tableCell ) {
+				tableCell = this.editor.plugins.get( 'TableSelection' ).getFocusCell();
+			}
 
 			if ( !tableCell ) {
 				return;
@@ -114,7 +115,11 @@ export default class TableKeyboard extends Plugin {
 			const isFirstCellInRow = currentCellIndex === 0;
 
 			if ( !isForward && isFirstCellInRow && currentRowIndex === 0 ) {
-				// It's the first cell of the table - don't do anything (stay in the current position).
+				// Set the selection over the whole table if the selection was in the first table cell.
+				editor.model.change( writer => {
+					writer.setSelection( writer.createRangeOn( table ) );
+				} );
+
 				return;
 			}
 
@@ -125,8 +130,12 @@ export default class TableKeyboard extends Plugin {
 				editor.execute( 'insertTableRowBelow' );
 
 				// Check if the command actually added a row. If `insertTableRowBelow` execution didn't add a row (because it was disabled
-				// or it got overwritten) do not change the selection.
+				// or it got overwritten) set the selection over the whole table to mirror the first cell case.
 				if ( currentRowIndex === table.childCount - 1 ) {
+					editor.model.change( writer => {
+						writer.setSelection( writer.createRangeOn( table ) );
+					} );
+
 					return;
 				}
 			}

+ 6 - 6
packages/ckeditor5-table/tests/tablekeyboard.js

@@ -141,7 +141,7 @@ describe( 'TableKeyboard', () => {
 				] ) );
 			} );
 
-			it( 'should not create another row and not move the caret if the "insertTableRowBelow" command is disabled', () => {
+			it( 'should select the whole table if the "insertTableRowBelow" command is disabled', () => {
 				setModelData( model, modelTable( [
 					[ '11', '12[]' ]
 				] ) );
@@ -152,9 +152,9 @@ describe( 'TableKeyboard', () => {
 
 				editor.editing.view.document.fire( 'keydown', domEvtDataStub );
 
-				assertEqualMarkup( getModelData( model ), modelTable( [
-					[ '11', '12[]' ]
-				] ) );
+				assertEqualMarkup( getModelData( model ),
+					'[' + modelTable( [ [ '11', '12' ] ] ) + ']'
+				);
 			} );
 
 			it( 'should move to the first cell of the next row if at the end of a row', () => {
@@ -329,7 +329,7 @@ describe( 'TableKeyboard', () => {
 				] ) );
 			} );
 
-			it( 'should not move if the caret is in the first table cell', () => {
+			it( 'should select the whole table if the caret is in the first table cell', () => {
 				setModelData( model, '<paragraph>foo</paragraph>' + modelTable( [
 					[ '[]11', '12' ]
 				] ) );
@@ -337,7 +337,7 @@ describe( 'TableKeyboard', () => {
 				editor.editing.view.document.fire( 'keydown', domEvtDataStub );
 
 				assertEqualMarkup( getModelData( model ),
-					'<paragraph>foo</paragraph>' + modelTable( [ [ '[]11', '12' ] ] )
+					'<paragraph>foo</paragraph>[' + modelTable( [ [ '11', '12' ] ] ) + ']'
 				);
 			} );
 

+ 0 - 1
packages/ckeditor5-widget/package.json

@@ -31,7 +31,6 @@
     "@ckeditor/ckeditor5-media-embed": "^21.0.0",
     "@ckeditor/ckeditor5-paragraph": "^21.0.0",
     "@ckeditor/ckeditor5-table": "^21.0.0",
-    "@ckeditor/ckeditor5-typing": "^19.0.1",
     "@ckeditor/ckeditor5-undo": "^21.0.0"
   },
   "engines": {

+ 1 - 1
packages/ckeditor5-widget/src/utils.js

@@ -48,7 +48,7 @@ export function isWidget( node ) {
 /**
  * Converts the given {@link module:engine/view/element~Element} to a widget in the following way:
  *
- * * sets the `contenteditable` attribute to `"true"`,
+ * * sets the `contenteditable` attribute to `"false"`,
  * * adds the `ck-widget` CSS class,
  * * adds a custom {@link module:engine/view/element~Element#getFillerOffset `getFillerOffset()`} method returning `null`,
  * * adds a custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},

+ 1 - 1
scripts/docs/build-content-styles.js

@@ -177,7 +177,7 @@ getCkeditor5ModulePaths()
 
 		return Promise.all( promises )
 			.then( ( [ guideContent, newContentStyles ] ) => {
-				guideContent = guideContent.replace( /```css([^`]+)```/, newContentStyles );
+				guideContent = guideContent.replace( /```css([^`]+)```/, '```css\n' + newContentStyles + '\n```' );
 
 				return writeFile( CONTENT_STYLES_GUIDE_PATH, guideContent );
 			} )