ckeditor 40.1.0

.circleci/template.yml

@@ -24,7 +24,7 @@ commands:
               echo "Running full flow due to nightly build, despite detecting '[short flow]'."
               exit 0
             fi
-            
+
             if [[ "$COMMIT_MESSAGE" == *"[short flow]" ]]; then
               echo "Skipping, because the commit message contains '[short flow]'."
               circleci step halt
@@ -105,6 +105,10 @@ jobs:
           when: always
           name: Validate icons specified in "ckeditor5-metadata.json" files
           command: node scripts/ci/validate-metadata-icons.js
+      - run:
+          when: always
+          name: Check if all SVG files are optimized
+          command: yarn run clean-up-svg-icons --verify-only
       - run:
           when: always
           name: Validate manual test directories

.vale.ini

@@ -0,0 +1,24 @@
+StylesPath = "scripts/vale/styles"
+
+MinAlertLevel = error
+
+Vocab = Docs
+
+Packages = Microsoft, proselint, write-good, Readability
+
+# For now, check Markdown files only.
+[*.md]
+BasedOnStyles = CKEditor, Vale, Microsoft, proselint, write-good, Readability
+Microsoft.Avoid = NO
+Microsoft.Contractions = NO
+Microsoft.Dashes = NO
+# The Passive rule appears in write-good too, with a better description.
+Microsoft.Passive = NO
+proselint.Typography = NO
+write-good.E-Prime = NO
+write-good.ThereIs = suggestion
+# Ignore HTML links.
+IgnoredScopes = a
+# Ignore internal documentation links ({@link} and URLs typed verbatim or in Markdown notation.
+# Ignore internal snippet links.
+TokenIgnores = {@link [^{}]+}, https?://[^\s]+, {@snippet [^{}]+}

LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor&nbsp;5** – https://github.com/ckeditor/ckeditor5 <br>
-Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+Copyright (c) 2003–2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 
@@ -13,13 +13,14 @@ 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).
+* BlurHash - Copyright (c) 2018 Wolt Enterprises (MIT license).
+* color-convert - Copyright (c) 2011–2016 Heather Arthur <[email protected]>, copyright (c) 2016–2021 Josh Junon <[email protected]>.
+* color-parse - Copyright (c) 2015 Dmitry Ivanov.
+* 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) 2018+, MarkedJS (https://github.com/markedjs/), copyright (c) 2011–2018, Christopher Jeffrey (https://github.com/chjj/).
+* Turndown - Copyright (c) 2017+ Dom Christie.
+* turndown-plugin-gfm - Copyright (c) 2017+ Dom Christie.
+* vanilla-colorful - Copyright (c) 2020 Serhii Kulykov <[email protected]>.
 
 Trademarks
 ----------

README.md

@@ -67,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/40.0.0/classic/ckeditor.js"></script>
+<script src="https://cdn.ckeditor.com/ckeditor5/40.1.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/framework/ui/ui-balloon.js

@@ -10,9 +10,13 @@ import {
 	ButtonView,
 	IconView,
 	LabeledFieldView,
+	ListView,
 	Model,
+	SearchTextView,
+	SpinnerView,
 	SplitButtonView,
 	SwitchButtonView,
+	TextareaView,
 	ToolbarSeparatorView,
 	ToolbarLineBreakView,
 	ToolbarView,
@@ -33,31 +37,37 @@ import { icons as coreIcons } from 'ckeditor5/src/core';
 import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Essentials } from '@ckeditor/ckeditor5-essentials';
 
-window.Locale = Locale;
-window.ButtonView = ButtonView;
 window.BalloonPanelView = BalloonPanelView;
+window.ButtonView = ButtonView;
+window.IconView = IconView;
+window.LabeledFieldView = LabeledFieldView;
+window.ListView = ListView;
+window.Model = Model;
+window.SearchTextView = SearchTextView;
+window.SpinnerView = SpinnerView;
+window.SplitButtonView = SplitButtonView;
+window.SwitchButtonView = SwitchButtonView;
+window.TextareaView = TextareaView;
+window.ToolbarSeparatorView = ToolbarSeparatorView;
+window.ToolbarLineBreakView = ToolbarLineBreakView;
+window.ToolbarView = ToolbarView;
+window.TooltipManager = TooltipManager;
+window.View = View;
+window.addListToDropdown = addListToDropdown;
+window.addToolbarToDropdown = addToolbarToDropdown;
+window.createDropdown = createDropdown;
+window.createLabeledInputNumber = createLabeledInputNumber;
+window.createLabeledInputText = createLabeledInputText;
+window.Collection = Collection;
+window.Locale = Locale;
+
 window.checkIcon = coreIcons.check;
 window.coreIcons = coreIcons;
 window.cancelIcon = coreIcons.cancel;
 window.boldIcon = boldIcon;
 window.italicIcon = italicIcon;
-window.SwitchButtonView = SwitchButtonView;
-window.SplitButtonView = SplitButtonView;
-window.createDropdown = createDropdown;
-window.addToolbarToDropdown = addToolbarToDropdown;
-window.addListToDropdown = addListToDropdown;
-window.Collection = Collection;
-window.Model = Model;
-window.LabeledFieldView = LabeledFieldView;
-window.createLabeledInputText = createLabeledInputText;
-window.createLabeledInputNumber = createLabeledInputNumber;
-window.ToolbarView = ToolbarView;
-window.ToolbarSeparatorView = ToolbarSeparatorView;
-window.ToolbarLineBreakView = ToolbarLineBreakView;
-window.View = View;
-window.IconView = IconView;
+
 window.ClassicEditor = ClassicEditor;
-window.TooltipManager = TooltipManager;
 window.Essentials = Essentials;
 
 const balloonButton = new ButtonView();
@@ -68,7 +78,7 @@ const balloon = new BalloonPanelView();
 balloon.render();
 balloon.content.add( balloonButton );
 
-document.querySelector( '.ui-balloon' ).append( balloon.element );
+document.body.append( balloon.element );
 
 const positions = BalloonPanelView.defaultPositions;
 balloon.pin( {

docs/_snippets/framework/ui/ui-button-states.html

@@ -1 +1 @@
-<div class="ui-snippet ui-button-states"></div>
+<div class="ui-snippet ui-button-states"></div>

docs/_snippets/framework/ui/ui-button.html

@@ -1,2 +1,2 @@
 <div class="ui-snippet ui-button"></div>
-<div class="ui-snippet ui-editor"></div>
+<div class="ui-snippet ui-editor"></div>

docs/_snippets/framework/ui/ui-dropdown-states.html

@@ -1 +1 @@
-<div class="ui-snippet ui-dropdown-states"></div>
+<div class="ui-snippet ui-dropdown-states"></div>

docs/_snippets/framework/ui/ui-dropdown.html

@@ -1 +1 @@
-<div class="ui-snippet ui-dropdown"></div>
+<div class="ui-snippet ui-dropdown"></div>

docs/_snippets/framework/ui/ui-icons.html

@@ -1 +1 @@
-<div class="ui-snippet ui-icons"></div>
+<div class="ui-snippet ui-icons"></div>

docs/_snippets/framework/ui/ui-input-states.html

@@ -1 +1 @@
-<div class="ui-snippet ui-input-states"></div>
+<div class="ui-snippet ui-input-states"></div>

docs/_snippets/framework/ui/ui-input.html

@@ -1 +1 @@
-<div class="ui-snippet ui-input"></div>
+<div class="ui-snippet ui-input"></div>

docs/_snippets/framework/ui/ui-search.html

@@ -0,0 +1 @@
+<div class="ui-snippet ui-search"></div>

docs/_snippets/framework/ui/ui-search.js

@@ -0,0 +1,27 @@
+/**
+ * @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 document, ListView, Locale, SearchTextView */
+
+const locale = new Locale();
+
+const filteredView = new ListView();
+filteredView.filter = () => {
+	return {
+		resultsCount: 1,
+		totalItemsCount: 5
+	};
+};
+
+const searchView = new SearchTextView( locale, {
+	filteredView,
+	queryView: {
+		label: 'Label'
+	}
+} );
+
+searchView.render();
+
+document.querySelector( '.ui-search' ).append( searchView.element );

docs/_snippets/framework/ui/ui-spinner.html

@@ -0,0 +1 @@
+<div class="ui-snippet ui-spinner"></div>

docs/_snippets/framework/ui/ui-spinner.js

@@ -0,0 +1,13 @@
+/**
+ * @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 document, SpinnerView */
+
+const spinner = new SpinnerView();
+
+spinner.set( { isVisible: true } );
+spinner.render();
+
+document.querySelector( '.ui-spinner' ).append( spinner.element );

docs/_snippets/framework/ui/ui-switch.html

@@ -1 +1 @@
-<div class="ui-snippet ui-switch"></div>
+<div class="ui-snippet ui-switch"></div>

docs/_snippets/framework/ui/ui-textarea.html

@@ -0,0 +1 @@
+<div class="ui-snippet ui-textarea"></div>

docs/_snippets/framework/ui/ui-textarea.js

@@ -0,0 +1,17 @@
+/**
+ * @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 document, TextareaView */
+
+const textarea = new TextareaView();
+
+textarea.set( {
+	minRows: 4,
+	maxRows: 10,
+	resize: 'horizontal'
+} );
+textarea.render();
+
+document.querySelector( '.ui-textarea' ).append( textarea.element );

docs/_snippets/framework/ui/ui-toolbar-button.html

@@ -1 +1 @@
-<div class="ui-snippet ui-toolbar-button"></div>
+<div class="ui-snippet ui-toolbar-button"></div>

docs/_snippets/framework/ui/ui-toolbar-compact.html

@@ -1 +1 @@
-<div class="ui-snippet ui-toolbar-compact"></div>
+<div class="ui-snippet ui-toolbar-compact"></div>

docs/_snippets/framework/ui/ui-toolbar-multirow.html

@@ -1 +1 @@
-<div class="ui-snippet ui-toolbar-multirow"></div>
+<div class="ui-snippet ui-toolbar-multirow"></div>

docs/_snippets/framework/ui/ui-toolbar-separator.html

@@ -1 +1 @@
-<div class="ui-snippet ui-toolbar-separator"></div>
+<div class="ui-snippet ui-toolbar-separator"></div>

docs/_snippets/framework/ui/ui-toolbar-text.html

@@ -1 +1 @@
-<div class="ui-snippet ui-toolbar-text"></div>
+<div class="ui-snippet ui-toolbar-text"></div>

docs/_snippets/framework/ui/ui-toolbar-wrap.html

@@ -1 +1 @@
-<div class="ui-snippet ui-toolbar-wrap"></div>
+<div class="ui-snippet ui-toolbar-wrap"></div>

docs/_snippets/installation/advanced/dll-builds.js

@@ -0,0 +1,21 @@
+/**
+ * @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
+ */
+
+/* global document */
+
+// External source exclusion.
+const metaElement = document.createElement( 'meta' );
+
+metaElement.name = 'x-cke-crawler-ignore-patterns';
+metaElement.content = JSON.stringify( {
+	'response-failure': [ 'jsfiddle.net' ],
+	'request-failure': [ 'jsfiddle.net' ],
+	'console-error': [
+		'The Cross-Origin-Opener-Policy header has been ignored',
+		'jsfiddle.net'
+	]
+} );
+
+document.head.appendChild( metaElement );

docs/_snippets/installation/getting-and-setting-data/manualsave.html

@@ -3,11 +3,11 @@
 </div>
 
 <div class="ck ck-content" id="snippet-manualsave-header">
-	<div class="ck ck-content" id="snippet-manualsave-server">
-		<div class="ck ck-content" id="snippet-manualsave-server_label">HTTP server lag (ms):</div>
+	<div id="snippet-manualsave-server">
+		<div id="snippet-manualsave-server_label">HTTP server lag (ms):</div>
 		<input id="snippet-manualsave-lag" type="number" value="500" step="100" min="0" max="9000">
 	</div>
-	<div class="ck ck-content" id="snippet-manualsave-container">
+	<div id="snippet-manualsave-container">
 		<span id="snippet-manualsave-spinner"></span>
 		<input id="snippet-manualsave-save" type="submit" value="Save">
 	</div>

docs/examples/experiments/mermaid.md

@@ -12,7 +12,7 @@ modified_at: 2023-06-14
 
 You can create flowcharts and diagrams in CKEditor 5 thanks to the experimental integration with the [Mermaid](https://mermaid.js.org/) library. Mermaid uses a Markdown-inspired syntax to create and dynamically modify flowcharts, Gantt diagrams, pie or quadrant charts, graphs, mindmaps, and more.
 
-The example below lets you test creating diagrams and flowcharts right during the content creation — no more screenshots that need to be re-created and re-uploaded each time something needs a change! You can also check out a live implementation in [GitHub Writer](https://ckeditor.com/blog/github-writer-now-available-with-mermaid-support/).
+The example below lets you test creating diagrams and flowcharts right during the content creation – no more screenshots that need to be re-created and re-uploaded each time something needs a change! You can also check out a live implementation in [GitHub Writer](https://ckeditor.com/blog/github-writer-now-available-with-mermaid-support/).
 
 {@snippet examples/mermaid}
 

docs/examples/how-tos.md

@@ -168,7 +168,7 @@ const modelFragment = editor.data.toModel( viewFragment );
 editor.model.insertContent( modelFragment );
 ```
 
-Remember, if some element or attribute does not have declared converters (whether by the dedicated feature or {@link features/html/general-html-support General HTML support) plugin then those won't get inserted.
+Remember, if some element or attribute does not have declared converters (whether by the dedicated feature or {@link features/general-html-support General HTML support}) plugin then those will not get inserted.
 
 ### How to focus the editor?
 
@@ -254,7 +254,46 @@ for ( const value of range.getWalker() ) {
 }
 ```
 
-### How to listen on a double click (e.g. link elements)?
+### How to find words in a document, and get their ranges?
+
+If you need to search a text fragment and remap it to its model position, use the following example. It will find all words available in the document root, create a model range based on these and feed them into the console.
+
+```js
+const model = editor.model;
+const rootElement = model.document.getRoot();
+const rootRange = model.createRangeIn( rootElement );
+const wordRanges = [];
+
+for ( const item of rootRange.getItems() ) {
+	// Find `$block` elements (those accept text).
+	if ( item.is( 'element' ) && model.schema.checkChild( item, '$text' ) ) {
+		// Get the whole text from block.
+		// Inline elements (like softBreak or imageInline) are replaced
+		// with a single whitespace to keep the position offset correct.
+		const blockText = Array.from( item.getChildren() )
+			.reduce( ( rangeText, item ) => rangeText + ( item.is( '$text' ) ? item.data : ' ' ), '' );
+
+		// Find all words.
+		for ( const match of blockText.matchAll( /\b\S+\b/g ) ) {
+			// The position in a text node is always parented by the block element.
+			const startPosition = model.createPositionAt( item, match.index );
+			const endPosition = model.createPositionAt( item, match.index + match[ 0 ].length );
+
+			wordRanges.push( model.createRange( startPosition, endPosition ) );
+		}
+	}
+}
+
+// Example usage of the collected words:
+for ( const range of wordRanges ) {
+	const fragment = model.getSelectedContent( model.createSelection( range ) );
+	const html = editor.data.stringify( fragment );
+
+	console.log( `[${ range.start.path }] - [${ range.end.path }]`, html );
+}
+```
+
+### How to listen on a double-click (e.g. link elements)?
 
 ```js
 // Add observer for double click and extend a generic DomEventObserver class by a native DOM dblclick event:

docs/examples/index.md

@@ -34,7 +34,7 @@ If you need even more, try our experimental plugins, like the integration of the
 
 ## How-tos
 
-There come times when you don't need deep-dive guides, elaborate solutions, and complicated examples. Sometimes, you just need to know how to set the height of CKEditor 5. Or, maybe you want to learn how to focus the editor? This is what the {@link examples/how-tos How-to} section is for!
+There come times when you do not need deep-dive guides, elaborate solutions, and complicated examples. Sometimes, you just need to know how to set the height of CKEditor 5. Or, maybe you want to learn how to focus the editor? This is what the {@link examples/how-tos How-to} section is for!
 
 
 **Related links**