Merge branch 'stable' into ck/2751

LICENSE.md

@@ -13,10 +13,13 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
+* color-convert - Copyright (c) 2011-2016 Heather Arthur <[email protected]>, copyright (c) 2016-2021 Josh Junon <[email protected]> (MIT license).
+* color-parse - Copyright (c) 2015 Dmitry Ivanov (MIT license).
 * lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
 * marked - Copyright (c) Christopher Jeffrey. (MIT License)
 * turndown - turndown is copyright © Dom Christie and released under the MIT license.
 * turndown-plugin-gfm - turndown-plugin-gfm is copyright © Dom Christie and released under the MIT license.
+* vanilla-colorful - Copyright (c) 2020 Serhii Kulykov <[email protected]> (MIT license).
 
 Trademarks
 ----------

README.md

@@ -66,7 +66,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/37.1.0/classic/ckeditor.js"></script>
+<script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/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/build-classic.js

@@ -66,23 +66,11 @@ ClassicEditor.builtinPlugins = [
 ClassicEditor.defaultConfig = {
 	toolbar: {
 		items: [
-			'heading',
-			'|',
-			'bold',
-			'italic',
-			'link',
-			'bulletedList',
-			'numberedList',
-			'|',
-			'outdent',
-			'indent',
-			'|',
-			'uploadImage',
-			'blockQuote',
-			'insertTable',
-			'mediaEmbed',
-			'undo',
-			'redo'
+			'undo', 'redo',
+			'|', 'heading',
+			'|', 'bold', 'italic',
+			'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
+			'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 		]
 	},
 	image: {

docs/_snippets/build-decoupled-document.js

@@ -78,34 +78,13 @@ DecoupledEditor.builtinPlugins = [
 DecoupledEditor.defaultConfig = {
 	toolbar: {
 		items: [
-			'heading',
-			'|',
-			'fontfamily',
-			'fontsize',
-			'fontColor',
-			'fontBackgroundColor',
-			'|',
-			'bold',
-			'italic',
-			'underline',
-			'strikethrough',
-			'|',
-			'alignment',
-			'|',
-			'numberedList',
-			'bulletedList',
-			'|',
-			'outdent',
-			'indent',
-			'|',
-			'link',
-			'blockquote',
-			'uploadImage',
-			'insertTable',
-			'mediaEmbed',
-			'|',
-			'undo',
-			'redo'
+			'undo', 'redo',
+			'|', 'heading',
+			'|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
+			'|', 'bold', 'italic', 'underline', 'strikethrough',
+			'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
+			'|', 'alignment',
+			'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
 		]
 	},
 	image: {

docs/assets/snippet-styles.css

@@ -295,3 +295,8 @@ https://github.com/ckeditor/ckeditor5/issues/1545 */
 	width: 100%;
 	overflow: auto;
 }
+
+/* https://github.com/cksource/ckeditor5-internal/issues/3223 */
+.ck-body-wrapper .ck.ck-powered-by-balloon.ck-balloon-panel.ck-balloon-panel_visible {
+	display: none;
+}

docs/framework/deep-dive/localization.md

@@ -126,10 +126,10 @@ editor.ui.componentFactory.add( 'smilingFaceEmoji', locale => {
 class FileRepository {
 	// More methods.
 	// ...
-	
+
 	updatePendingAction() {
 		const pendingActions = this.editor.plugins.get( PendingActions );
-		
+
 		const t = this.editor.t;
 		const getMessage = value => t( 'Upload in progress (%0%).', value ); // Upload in progress (12%).
 
@@ -242,6 +242,31 @@ msgstr "Alinear a la izquierda"
 
 To build and configure a localized editor, follow the steps from the {@link features/ui-language Setting the UI language guide}.
 
+## Re-using translations from other packages
+
+If you want to re-use a *message* that already exists in another package, you should use the method `t()` on a `Locale` instance with a changed name instead of [using `t()` as a function](#writing-a-localizable-ui). This is because using `t()` as a method on the `Locale` is not processed by a static code analyzer. Therefore, it allows to use *messages* already translated in other packages.
+
+We use this approach already in the {@link features/collaboration collaboration features} and the {@link features/slash-commands slash commands feature}. You can find an example from the {@link module:slash-command/slashcommandconfig~SlashCommandConfig#getDefaultCommands list of default commands} that we used in the slash commands feature below. Please note the difference between using `t()` and `translateVariableKey()`. `translateVariableKey( 'Block quote' )` will re-use a translation from another package whilst `t( 'Create a block quote' )` will be processed by a static code analyzer. As a result we make sure that the translation for the `title` is taken from the {@link features/block-quote block quote} feature where the *message* "Block quote" is already translated. But for the `description` we create a new translation.
+
+```ts
+public getDefaultCommands() {
+	const t = this.editor.t;
+	const translateVariableKey = this.editor.locale.t;
+
+	return [
+		{
+			id: 'blockQuote',
+			commandName: 'blockQuote',
+			icon: icons.quote,
+			title: translateVariableKey( 'Block quote' ),
+			description: t( 'Create a block quote' )
+		},
+		// More command definitions
+		// ...
+	]
+}
+```
+
 ## Known limitations
 
 - Currently it is impossible to change the chosen editor's language at runtime without destroying the editor.

docs/support/index.md

@@ -19,4 +19,3 @@ For more information, check the [CKEditor 5 Pricing page](https://ckeditor.com/c
 [Stack Overflow](https://stackoverflow.com) is the best place for developers to share their problems and solutions.
 
 Make sure to tag your questions with ["ckeditor"](https://stackoverflow.com/questions/tagged/ckeditor) and ["ckeditor5"](https://stackoverflow.com/questions/tagged/ckeditor5) to reach the widest audience.
-

docs/support/license-and-legal.md

@@ -8,17 +8,20 @@ order: 10
 
 # License and legal
 
-The following legal notices apply to CKEditor 5 builds and all software from CKEditor 5 Ecosystem included with it.
+The following legal notices apply to CKEditor 5 and all software from CKEditor 5 Ecosystem included with it.
 
 Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/old-licenses/gpl-2.0.html).
 
+## Free for Open Source
+
+If you are running an Open Source project under an OSS license incompatible with GPL, please [contact us](https://ckeditor.com/contact/). We will be happy to [support your project with a free CKEditor 5 license](https://ckeditor.com/wysiwyg-editor-open-source/).
+
 ## Sources of intellectual property included in CKEditor
 
-Where not otherwise indicated, all CKEditor 5 builds content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+Where not otherwise indicated, all CKEditor 5 content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
 
 ## Trademarks
 
-CKEditor is a trademark of [CKSource Holding sp. z o.o.](http://cksource.com/) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
-
+CKEditor is a trademark of [CKSource Holding sp. z o.o.](http://cksource.com/) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

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

@@ -0,0 +1,93 @@
+---
+category: licensing
+order: 20
+menu-title: License key and activation
+---
+
+# License key and activation
+
+This article explains how to activate a commercial license of CKEditor 5 and the following CKEditor premium features:
+
+* Non-real-time collaboration features, including:
+	* {@link features/track-changes Track changes}
+	* {@link features/comments Comments}
+	* {@link features/revision-history Revision history}
+* {@link features/pagination Pagination}
+* The Productivity Pack that includes:
+	* {@link features/template Content templates}
+	* {@link features/document-outline Document outline}
+	* {@link features/format-painter Format painter}
+	* {@link features/slash-commands Slash commands}
+	* {@link features/table-of-contents Table of contents}
+
+Other premium features such as {@link features/real-time-collaboration real-time collaboration}, {@link features/export-word export to Word}, {@link features/export-pdf export to PDF}, or {@link features/import-word import from Word} are authenticated on the server side. Please refer to respective feature guides for installation details.
+
+<info-box>
+	CKEditor 5 can be used without activation as {@link support/license-and-legal open source software under the GPL license}. It will then {@link support/managing-ckeditor-logo display a small logo in the editor area}.
+</info-box>
+
+## Obtaining a license
+
+To activate CKEditor 5 and the premium features listed above, you will need either an active commercial license or a trial license.
+
+### Purchasing a commercial license
+
+If you wish to purchase a commercial CKEditor 5 license or a license to one of the premium features, [contact us](https://ckeditor.com/contact/?sales=true#contact-form) to receive an offer tailored to your needs.
+
+### Subscribing to the CKEditor Premium Features free trial
+
+If you wish to test our offer, you can create an account by [signing up for CKEditor Premium Features 30-day free trial](https://orders.ckeditor.com/trial/premium-features). After signing up, you will receive access to the customer dashboard (CKEditor Ecosystem dashboard).
+
+The trial is commitment-free, and there is no need to provide credit card details to start it. The Premium Features free trial allows you to test all paid CKEditor Ecosystem products at no cost.
+
+If you are using the trial, refer to the [CKEditor 5 Premium Features free trial documentation](https://ckeditor.com/docs/trial/latest/guides/overview.html) to learn how to access the relevant license key and activate the premium features.
+
+## Obtaining a license key
+
+Follow this guide to get the license key necessary to activate your purchased premium features or to white-label CKEditor 5.
+
+### Log in to the CKEditor Ecosystem dashboard
+
+Log in to the [CKEditor Ecosystem dashboard](https://dashboard.ckeditor.com). If this is the very first time you do it, you will receive a confirmation email and will be asked to create a password for your account. Keep it safe.
+
+### Access the account dashboard
+
+After logging in, click "CKEditor" under the "Your products" header on the left. You will see the overview of the subscription parameters together with the management area below.
+
+{@img assets/img/ckeditor-dashboard.png 920 Your CKEditor subscriptions in the customer dashboard.}
+
+### Copy the license key
+
+After clicking "Manage", you can access the license key needed to run the editor and the premium features. Note that the same license key will be valid for both the Productivity Pack and other standalone features, as well as CKEditor 5 itself.
+
+{@img assets/img/ckeditor-key.png 822 Premium features license key in the management console.}
+
+There are two license keys available:
+1. The old key for versions older than 38.0.0.
+2. The new key for versions 38.0.0 and later.
+
+The new key available is the new format license key that is **only** valid for versions 38.0.0 or later. The old key will work with all CKEditor 5 versions up to the version to be released in May 2024 (when we consider removing support for these keys) as long as the key is not expired.
+
+## Activating the product
+
+You need to add the license key to your CKEditor 5 configuration. It is enough to add the license key once for the standalone features listed in this guide, no matter which and how many premium features you intend to use.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		// Load the plugin.
+		plugins: [ /* ... */ ],
+
+		// Provide the activation key.
+		licenseKey: 'your-license-key',
+
+		// Display the feature UI element in the toolbar.
+		toolbar: [ /* ... */ ],
+	} )
+	.then( /* ... */ )
+	.catch( /* ... */ );
+```
+
+To use premium features, you need to add the relevant plugins to your {@link installation/getting-started/quick-start-other custom CKEditor 5 build}. You can use the [online builder](https://ckeditor.com/ckeditor-5/online-builder/) to generate a CKEditor 5 build with the plugin enabled.
+
+Alternatively, refer to the installation sections in the plugin documentation to do it on your own. You can read more about {@link installation/plugins/installing-plugins installing plugins} and {@link features/toolbar toolbar configuration} in dedicated guides.

docs/support/managing-ckeditor-logo.md

@@ -0,0 +1,119 @@
+---
+category: licensing
+order: 30
+meta-description: Managing the "Powered by CKEditor" logo
+---
+
+# Managing the "Powered by CKEditor" logo
+
+## Why the "Powered by CKEditor" logo?
+
+Starting from version v38.0.0 onwards, all **open source** installations of CKEditor 5 display a small “Powered by CKEditor” logo in the bottom-right corner of the editing area. The label links directly to the [CKEditor website](https://ckeditor.com/). The new branding approach is designed to make sure the entire community knows who is powering and modernizing their rich text editor. You can [read more about it](https://github.com/ckeditor/ckeditor5/issues/14082) on GitHub.
+
+{@img assets/img/powered-by-ckeditor.png Placement of the "Powered by CKEditor" logo within the editor}
+
+This logo is only visible when the editor is focused and only in the editable. The editor needs to have a minimum size of 350px x 50px to display the logo. It will be shown in all editor types.
+
+The logo **will not be displayed for customers with commercial licenses**, but please read on as certain actions need to be taken to white-label your CKEditor 5 installation. You can [reach out to our Technical Support team](https://ckeditor.com/contact/) if you have any questions.
+
+## How to remove the "Powered by CKEditor" logo?
+
+To remove the logo, you need to obtain a commercial license and then configure the {@link module:core/editor/editorconfig~EditorConfig#licenseKey `config.licenseKey`} setting.
+
+Refer to the {@link support/license-key-and-activation License key and activation} guide for details on where to find the license key and how to use it in your configuration.
+
+## How to configure the layout of the "Powered by CKEditor" logo?
+
+For open source, free users, the "Powered by CKEditor" logo will always be displayed. There is, however, some degree of control over it.
+
+Complete configuration reference is available in the {@link module:core/editor/editorconfig~EditorConfig#ui API documentation}. In short, you can configure the following properties:
+
+* The **position** relative to the editor’s bottom edge. The default is over the edge. The logo can also be displayed inside the container.
+* The logo **offset** toward the configured editable's corner.
+* The **alignment**: left or right side of the editable area.
+
+To change the default position and display the logo inside the container, use this configuration option:
+
+```js
+config.ui.poweredBy.position: 'inside'
+```
+
+To customize the logo offset, use the following settings:
+
+```js
+config.ui.poweredBy.verticalOffset: 10,
+config.ui.poweredBy.horizontalOffset: 10
+```
+
+The value of the offset is set in pixels.
+
+To change the alignment:
+
+```js
+config.ui.poweredBy.side: 'left'
+```
+
+The default option is `right`.
+
+You can also customize the text displayed on the logo's label:
+
+```js
+config.ui.poweredBy.label: 'Created with'
+```
+
+All the above changes should be done in the {@link module:core/editor/editorconfig~EditorConfig editor configuration} file.
+
+A set of ready-made CSS variables is available. You can use it to customize the style of the "Powered by CKEditor" logo.
+
+```css
+/*
+ * Default values.
+ */
+:root {
+	--ck-powered-by-line-height: 10px;
+	--ck-powered-by-padding-vertical: 2px;
+	--ck-powered-by-padding-horizontal: 4px;
+	--ck-powered-by-text-color: hsl(0, 0%, 31%);
+	--ck-powered-by-border-radius: 100px;
+	--ck-powered-by-background: hsl(0, 0%, 100%);
+	--ck-powered-by-border-color: var(--ck-color-focus-border);
+}
+```
+
+### Customization example
+
+Below you will find an example of how the "Powered by CKEditor" logo can be customized in CSS:
+
+```css
+/*
+ * Customized values.
+ */
+:root {
+	--ck-powered-by-line-height: 10px;
+	--ck-powered-by-padding-vertical: 8px;
+	--ck-powered-by-padding-horizontal: 12px;
+	--ck-powered-by-text-color: hsl(133, 100%, 31%);
+	--ck-powered-by-border-radius: 20px 0 0 0;
+	--ck-powered-by-background: linear-gradient(57deg, hsla(181, 70%, 45%, 0) 0%, hsl(41, 98%, 58%) 100%);
+	--ck-powered-by-border-color: hsl(0, 0%, 45%) transparent transparent hsl(0, 0%, 45%) ;
+}
+```
+
+Here is an example of the editor's configuration:
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		/* ... */
+		ui: {
+			poweredBy: {
+				position: 'inside'
+			}
+		}
+	} )
+	.then( /* ... */ )
+	.catch( /* ... */ );
+```
+
+The final effect:
+{@img assets/img/powered-by-ckeditor-customized.png Placement of the customized "Powered by CKEditor" logo within the editor}