Merge branch 'release' into stable

.travis.yml

@@ -8,7 +8,7 @@ branches:
   - stable
   - release
   - /^v\d+\.\d+\.\d+$/
-  - /^(ck|cf|ci)\/epic\/\d+/
+  - /^(ck|cf|ci|cc)\/epic\/\d+/
 services:
 - xvfb
 node_js:

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)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
 [![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
-![Dependency Status](https://img.shields.io/librariesio/release/npm/ckeditor5)
 ![TypeScript Support](https://badgen.net/badge/Built%20With/TypeScript/blue)
 
 [![Join newsletter](https://img.shields.io/badge/join-newsletter-00cc99.svg)](http://eepurl.com/c3zRPr)
@@ -68,7 +67,7 @@ In your HTML page, add an element that CKEditor should replace:
 Load the classic editor build (you can choose between the [CDN](https://cdn.ckeditor.com/#ckeditor5), [npm](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#npm), and [zip downloads](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#zip-download)):
 
 ```html
-<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/classic/ckeditor.js"></script>
+<script src="https://cdn.ckeditor.com/ckeditor5/39.0.0/classic/ckeditor.js"></script>
 ```
 
 Call the [`ClassicEditor.create()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-classic_classiceditor-ClassicEditor.html#static-function-create) method:

docs/_snippets/examples/bottom-toolbar-editor.js

@@ -12,7 +12,7 @@ import { List } from '@ckeditor/ckeditor5-list';
 import { Alignment } from '@ckeditor/ckeditor5-alignment';
 import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
 import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
-import { DropdownView, DropdownButtonView, DropdownPanelView, ToolbarView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui';
+import { DropdownView, ToolbarView, createDropdown } from '@ckeditor/ckeditor5-ui';
 import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
 import { Essentials } from '@ckeditor/ckeditor5-essentials';
 import { Heading } from '@ckeditor/ckeditor5-heading';
@@ -46,9 +46,7 @@ class FormattingOptions extends Plugin {
 
 		editor.ui.componentFactory.add( 'formattingOptions', locale => {
 			const t = locale.t;
-			const buttonView = new DropdownButtonView( locale );
-			const panelView = new DropdownPanelView( locale );
-			const dropdownView = new DropdownView( locale, buttonView, panelView );
+			const dropdownView = createDropdown( locale );
 			const toolbarView = this.toolbarView = dropdownView.toolbarView = new ToolbarView( locale );
 
 			// Accessibility: Give the toolbar a human-readable ARIA label.
@@ -88,26 +86,15 @@ class FormattingOptions extends Plugin {
 			// * the dropdown or it contents,
 			// * any editing root,
 			// * any floating UI in the "body" collection
-			// It should close, for instance, when another (main) toolbar button was pressed, though.
-			dropdownView.on( 'render', () => {
-				clickOutsideHandler( {
-					emitter: dropdownView,
-					activator: () => dropdownView.isOpen,
-					callback: () => { dropdownView.isOpen = false; },
-					contextElements: [
-						dropdownView.element,
-						...[ ...editor.ui.getEditableElementsNames() ].map( name => editor.ui.getEditableElement( name ) ),
-						document.querySelector( '.ck-body-wrapper' )
-					]
-				} );
-			} );
+			const focusableElements = [
+				...[ ...editor.ui.getEditableElementsNames() ].map( name => editor.ui.getEditableElement( name ) ),
+				document.querySelector( '.ck-body-wrapper' )
+			];
 
-			// The main button of the dropdown should be bound to the state of the dropdown.
-			buttonView.bind( 'isOn' ).to( dropdownView, 'isOpen' );
-			buttonView.bind( 'isEnabled' ).to( dropdownView );
+			focusableElements.forEach( el => dropdownView.focusTracker.add( el ) );
 
 			// Using the font color icon to visually represent the formatting.
-			buttonView.set( {
+			dropdownView.buttonView.set( {
 				tooltip: t( 'Formatting options' ),
 				icon: fontColorIcon
 			} );

docs/_snippets/features/update-placeholder.html

@@ -0,0 +1,4 @@
+<div id="snippet-update-placeholder">
+    <p></p>
+</div>
+<button id="update-placeholder-button">Update placeholder</button>

docs/_snippets/features/update-placeholder.js

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document, ClassicEditor */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-update-placeholder' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: [
+			'undo', 'redo', '|', 'heading',
+			'|', 'bold', 'italic',
+			'|', 'link', 'uploadImage', 'insertTable', 'mediaEmbed',
+			'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
+		],
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
+		},
+		placeholder: 'Type some content here!'
+	} )
+	.then( editor => {
+		const button = document.getElementById( 'update-placeholder-button' );
+		window.editor = editor;
+
+		button.addEventListener( 'click', () => {
+			editor.editing.view.document.getRoot( 'main' ).placeholder = 'New placeholder';
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/installation/plugins-mapping/plugins-mapping.html

@@ -572,7 +572,7 @@
                <p style="margin-left:0px;"><a href="https://ckeditor.com/cke4/addon/pastefromword">pastefromword</a></p>
             </td>
             <td>
-               <p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-word.html">Paste from Word</a></p>
+               <p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-office.html">Paste from Office</a></p>
             </td>
          </tr>
          <tr>

docs/_snippets/updating/plugins-mapping/plugins-mapping.html

@@ -646,7 +646,7 @@
                 <p style="margin-left:0px;"><a href="https://ckeditor.com/cke4/addon/pastefromword">pastefromword</a></p>
              </td>
              <td>
-                <p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-word.html">Paste from Word</a></p>
+                <p style="margin-left:0px;"><a href="https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-office.html">Paste from Office</a></p>
              </td>
           </tr>
           <tr>

docs/assets/snippet.js

@@ -50,7 +50,7 @@ function createClipboardInputNotification() {
 	<p>We detected that you tried to paste content from <strong>Microsoft Word</strong> or <strong>Google Docs</strong>.</p>
 	<p>Please bear in mind that the editor demo to which you try to paste does not have all the features enabled.
 		Due to that, unsupported formatting is being stripped.</p>
-	<p>Check out the <a href="/docs/ckeditor5/latest/features/pasting/paste-from-word.html">Paste from Word</a> or
+	<p>Check out the <a href="/docs/ckeditor5/latest/features/pasting/paste-from-office.html">Paste from Office</a> or
 	<a href="/docs/ckeditor5/latest/features/pasting/paste-from-google-docs.html">Paste from Google Docs</a>
 	demos for the best experience.</p>`;
 
@@ -122,3 +122,33 @@ window.getViewportTopOffsetConfig = function() {
 
 	return parseInt( window.getComputedStyle( documentElement ).getPropertyValue( '--ck-snippet-viewport-top-offset' ) );
 };
+
+/**
+ * Activates tabs in the given container.
+ *
+ * **Note**: The tabs container requires a proper markup to work correctly.
+ *
+ * @param {HTMLElement} tabsContainer
+ */
+window.createTabs = function( tabsContainer ) {
+	const tabTextElements = Array.from( tabsContainer.querySelectorAll( '.tabs__list__tab-text' ) );
+	const tabPanels = Array.from( tabsContainer.querySelectorAll( '.tabs__panel' ) );
+
+	tabTextElements.forEach( tabTextElement => {
+		tabTextElement.addEventListener( 'click', evt => {
+			const clickedIndex = tabTextElements.indexOf( tabTextElement );
+
+			tabTextElements.forEach( element => {
+				element.parentElement.classList.toggle( 'tabs__list__tab_selected', tabTextElement === element );
+				element.setAttribute( 'aria-selected', tabTextElement === element );
+			} );
+
+			tabPanels.forEach( panel => {
+				panel.classList.toggle( 'tabs__panel_selected', tabPanels.indexOf( panel ) === clickedIndex );
+			} );
+
+			evt.preventDefault();
+		} );
+	} );
+};
+

docs/assets/styles.css

@@ -66,3 +66,58 @@ https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
 .main .main__content-inner .features-html-output th {
 	background-color: hsl(0, 0%, 96%);
 }
+
+/* Tabs navigation component */
+
+.tabs {
+	margin: 1.5em 0;
+
+	--tabs-active-background: hsl(0, 0%, 96%);
+	--tabs-active-border: hsl(0, 0%, 80%);
+}
+
+.tabs ul.tabs__list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+}
+
+.tabs ul.tabs__list li {
+	margin: 0;
+	display: inline-block;
+	flex-grow: 1;
+	text-align: center;
+	border-top: 3px solid transparent;
+}
+
+.tabs ul.tabs__list li a.tabs__list__tab-text {
+	text-decoration: none;
+	color: initial;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 8px;
+}
+
+.tabs ul.tabs__list li.tabs__list__tab_selected {
+	background: var(--tabs-active-background);
+	border-top: 3px solid var(--tabs-active-border);
+}
+
+.tabs ul.tabs__list li.tabs__list__tab_selected a.tabs__list__tab-text {
+	font-weight: bold;
+}
+
+.tabs .tabs__panel {
+	padding: 1.333em;
+	display: none;
+	background: var(--tabs-active-background);
+}
+
+.tabs .tabs__panel.tabs__panel_selected {
+	display: block;
+}
+

docs/features/editor-placeholder.md

@@ -108,6 +108,16 @@ The editor placeholder text is displayed using a CSS pseudo–element (`::before
 
 **Note**: The `.ck-placeholder` class is also used to display placeholders in other places, for instance, {@link features/images-captions image captions}. Make sure your custom styles apply to the right subset of placeholders.
 
+## Changing the placeholder
+
+The editor placeholder could be updated at runtime by changing the `placeholder` property in editing root.
+
+```js
+editor.editing.view.document.getRoot( 'main' ).placeholder = 'new placeholder';
+```
+
+{@snippet features/update-placeholder}
+
 ## Contribute
 
 The source code of the feature is available on GitHub at [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-core](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-core).

docs/features/index.md

@@ -94,7 +94,7 @@ Work as you like it - choose user interface approach from {@link installation/ge
 
 ### Cross-platform interoperability
 
-Do not get stopped by technology differences - CKEditor 5 offers cross-platform interoperability. Being a {@link framework/index web-based JavaScript framework} it works in any and all environments. What is more, you can easily use documents from other editors: easily paste content {@link features/paste-from-word from MS Word}, paste from {@link features/paste-from-google-docs from Google Docs} and we even have extended support for {@link features/paste-plain-text pasting plain text} to inherit formatting for convenience.
+Do not get stopped by technology differences - CKEditor 5 offers cross-platform interoperability. Being a {@link framework/index web-based JavaScript framework} it works in any and all environments. What is more, you can easily use documents from other editors: easily paste content {@link features/paste-from-office from MS Office}, paste from {@link features/paste-from-google-docs from Google Docs} and we even have extended support for {@link features/paste-plain-text pasting plain text} to inherit formatting for convenience.
 
 {@img assets/img/features-paste.png 800 CKEditor 5 paste features.}
 

docs/features/productivity-pack.md

@@ -36,6 +36,10 @@ These are only available to holders of a [CKEditor 5 commercial license](https:/
 
 	The {@link features/template templates feature} {@icon @ckeditor/ckeditor5-template/theme/icons/template.svg} allows you to insert predefined content structures into the document. Templates can provide both smaller portions of content (e.g. a formatted table) and base structures for entire documents (e.g. a formal letter template).
 
+* Paste from Office Enhanced
+
+	The {@link features/paste-from-office Paste from Office Enhanced feature} lets you paste content from Microsoft Word and Microsoft Excel and preserve its original structure and formatting. It will retain the basic text styling, heading levels, links, lists, tables, and images.
+
 ## Free trial
 
 Before committing, you may try out the productivity pack, just like all CKEditor 5 premium features. To do it, simply start your non-commitment [30-day free trial](https://orders.ckeditor.com/trial/premium-features).

docs/installation/advanced/csp.md

@@ -36,10 +36,10 @@ Some CSP directives have an impact on certain rich-text editor features. Here is
 * `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 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.
+		* Pasting {@link features/image-upload images from the clipboard} and {@link features/paste-from-office from MS Office} 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-office 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 the {@link framework/theme-customization#styles-processing-and-bundling editor UI styles}.
 
@@ -67,4 +67,4 @@ This comes with some trade–offs, though. For example, it requires you to:
 * 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}.
+* Give up pasting images from the clipboard or {@link features/paste-from-office from Word}.

docs/installation/getting-started/predefined-builds.md

@@ -1205,7 +1205,7 @@ The table below presents the list of all plugins included in various builds. <!-
 				<td style="text-align:center; width:70px">✅</td>
 			</tr>
 			<tr>
-				<td><a href="https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-word.html">PasteFromOffice</a></td>
+				<td><a href="https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-office.html">PasteFromOffice</a></td>
 				<td style="text-align:center; width:70px">✅</td>
 				<td style="text-align:center; width:70px">✅</td>
 				<td style="text-align:center; width:70px">✅</td>

docs/installation/getting-started/quick-start-other.md

@@ -273,7 +273,7 @@ npm run build
 ```
 
 <info-box hint>
-	If you don't have the build script, learn more about {@link installation/plugins/installing-plugins#building-a-project building a project}.
+	If you don't have the build script, learn more about {@link installation/plugins/installing-plugins#building-an-editor building an editor}.
 </info-box>
 
 ### Running the editor

docs/installation/plugins/installing-plugins.md

@@ -20,14 +20,14 @@ To enrich the CKEditor 5 by installing plugins, you will require:
 * [npm](https://www.npmjs.com/) 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)
 
 <info-box warning>
-	When installing CKEditor 5 Framework packages, you need to make sure their versions match the version of the base editor package. For example: if you would like to install the `@ckeditor/ckeditor5-alignment` package and your other packages are outdated, e.g. at version `18.0.0`, you should consider updating your editor and other packages to the latest version or install the alignment package at version `18.0.0`. Otherwise, this will result in [`ckeditor-duplicated-modules error`](https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules).
+	When installing CKEditor 5 Framework packages, you need to make sure their versions match the version of the base editor package. For example: if you would like to install the `@ckeditor/ckeditor5-alignment` package and your other packages are outdated, e.g. at version `38.0.0`, you should consider updating your editor and all other packages to the latest `{@var ckeditor5-version}` version. You might also install the alignment package at version `38.0.0` (which is not advised, actually). Otherwise, if package versions are different, this will result in an [`ckeditor-duplicated-modules error`](https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules).
 
-	The simplest way to avoid such situations is to always use the latest versions of the official packages. If you already stumbled upon this error, you can use [`npm-check-updates`](https://www.npmjs.com/package/npm-check-updates), which is a handy tool for keeping your packages up to date.
+	The simplest way to avoid such situations is to always use the latest `{@var ckeditor5-version}` versions of the official packages. If you already stumbled upon this error, you can use [`npm-check-updates`](https://www.npmjs.com/package/npm-check-updates), which is a handy tool for keeping your packages up to date.
 
-	**NOTE:** The above rule rule does not apply to packages named `@ckeditor/ckeditor5-dev-*`.
+	**NOTE:** The above rule does not apply to packages named `@ckeditor/ckeditor5-dev-*`.
 </info-box>
 
-If you're here looking for a way to install plugins, there is a chance you have the CKEditor already installed. But if you do not, you have two options: create a custom build with an {@link installation/getting-started/quick-start-other online builder} or {@link installation/advanced/integrating-from-source-webpack integrate the editor from the source}.
+If you are here looking for a way to install plugins, there is a chance you have the CKEditor already installed. But if you do not, you have two options: create a custom build with an {@link installation/getting-started/quick-start-other online builder} or {@link installation/advanced/integrating-from-source-webpack integrate the editor from the source}.
 
 ## Adding a plugin to an editor
 

docs/support/license-key-and-activation.md

@@ -16,6 +16,7 @@ This article explains how to activate a commercial license of CKEditor 5 and the
 * The Productivity Pack that includes:
 	* {@link features/document-outline Document outline}
 	* {@link features/format-painter Format painter}
+	* {@link features/paste-from-office#paste-from-office-enhanced Paste from Office enhanced}
 	* {@link features/slash-commands Slash commands}
 	* {@link features/table-of-contents Table of contents}
 	* {@link features/template Templates}