Merge pull request #6149 from ckeditor/i/5880-rich-editor

Tests: Added a test with an editor with lots of plugins to make testing interaction between plugins easier for the team (see #5880).

tests/manual/performance/richeditor.html

@@ -0,0 +1,92 @@
+<div id="word-count-wrapper" style="display:none">
+	Words: <span id="word-count"></span> Characters: <span id="character-count"></span>
+</div>
+
+<div id="editor">
+	<h1>Rich editor (h1)</h1>
+
+	<p>
+		This editor features exceptionally high number of plugins.
+	</p>
+
+	<p>
+		It
+		<strong>features</strong>
+		<em>some basic</em>
+		<s>font</s>
+		<sub>styling &mdash;</sub>
+		<sup>nothing</sup>
+		<u>too crazy</u>.
+		<a href="https://ckeditor.com">Links</a> are also here.
+	</p>
+
+	<p>
+		Font can have customized
+		<span style="background-color:#e6e64c">background</span>,
+		<span style="color:#ff0000">foreground</span>,
+		<span style="font-family:'Trebuchet MS', Helvetica, sans-serif">font face</span>,
+		<span class="text-big">height</span>.
+		You can also <mark class="marker-yellow">mark</mark> it or use <code>code</code> if you want to.
+	</p>
+
+	<p style="text-align:right">
+		Text alignment can be customized.
+	</p>
+
+	<ol>
+		<li>Ordered list
+			<ol>
+				<li>Ordered list</li>
+			</ol>
+		</li>
+	</ol>
+
+	<ul>
+		<li>Unordered list
+			<ul>
+				<li>Unordered list</li>
+			</ul>
+		</li>
+	</ul>
+
+	<ul>
+		<li><input type="checkbox">To-do list item 1</li>
+		<li><input type="checkbox" checked="checked">To-do list item 2</li>
+		<li><input type="checkbox">To-do list item 3</li>
+	</ul>
+
+	<p style="margin-left:40px">Indenting a paragraph is fine too.</p>
+
+	<blockquote>
+		An example blockquote text.
+	</blockquote>
+
+	<table>
+		<tbody>
+			<tr>
+				<td>cell</td>
+				<td>cell</td>
+			</tr>
+			<tr>
+				<td>cell</td>
+				<td>cell</td>
+			</tr>
+		</tbody>
+	</table>
+
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=CB70skVw3nU"></oembed>
+	</figure>
+
+	<pre><code class="language-xml">&lt;blockquote&gt;
+		An example blockquote text.
+&lt;/blockquote&gt;</code></pre>
+
+	<p>Time to separate it with a horizontal rule, followed by a page break:</p>
+
+	<hr>
+
+	<div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>
+
+	<p>There is a possibility to work with the restricted editing plugin: <span class="restricted-editing-exception">Like that</span>.</p>
+</div>

tests/manual/performance/richeditor.js

@@ -0,0 +1,150 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+import AutoFormat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
+import AutoSave from '@ckeditor/ckeditor5-autosave/src/autosave';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
+import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
+import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
+import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
+import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
+import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
+import Mention from '@ckeditor/ckeditor5-mention/src/mention';
+import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
+import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
+import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
+import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
+import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import { UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
+import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [
+			ArticlePluginSet,
+			Alignment,
+			AutoFormat,
+			AutoSave,
+			Strikethrough,
+			Subscript,
+			Superscript,
+			Underline,
+			Code,
+			CodeBlock,
+			FontBackgroundColor,
+			FontColor,
+			FontFamily,
+			FontSize,
+			Highlight,
+			HorizontalLine,
+			TodoList,
+			Mention,
+			PageBreak,
+			PasteFromOffice,
+			RemoveFormat,
+			StandardEditingMode,
+			SpecialCharacters,
+			ImageUpload,
+			ImageResize,
+			WordCount,
+			IndentBlock
+		],
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'strikethrough',
+				'subscript',
+				'superscript',
+				'underline',
+				'code',
+				'alignment',
+				'link',
+				'removeFormat',
+				'|',
+				'fontBackgroundColor',
+				'fontColor',
+				'fontFamily',
+				'fontSize',
+				'highlight',
+				'|',
+				'bulletedList',
+				'numberedList',
+				'todoList',
+				'outdent',
+				'indent',
+				'|',
+				'blockQuote',
+				'insertTable',
+				'mediaEmbed',
+				'codeBlock',
+				'horizontalLine',
+				'pageBreak',
+				'specialCharacters',
+				'restrictedEditingException',
+				'undo',
+				'redo'
+			],
+			shouldNotGroupWhenFull: true
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+		},
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		addWordCountListener( editor );
+		addUploadMockAdapter( editor );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+function addWordCountListener( editor ) {
+	const wordCount = editor.plugins.get( WordCount );
+	const wordCountElement = document.getElementById( 'word-count' );
+	const characterCountElement = document.getElementById( 'character-count' );
+
+	wordCountElement.innerHTML = wordCount.words;
+	characterCountElement.innerHTML = wordCount.characters;
+
+	wordCount.on( 'change:words', ( evt, name, value ) => {
+		document.getElementById( 'word-count' ).innerHTML = value;
+	} );
+
+	wordCount.on( 'change:characters', ( evt, name, value ) => {
+		document.getElementById( 'character-count' ).innerHTML = value;
+	} );
+
+	document.getElementById( 'word-count-wrapper' ).style.display = 'block';
+}
+
+function addUploadMockAdapter( editor ) {
+	editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
+		return new UploadAdapterMock( loader );
+	};
+}

tests/manual/performance/richeditor.md

@@ -0,0 +1,3 @@
+# Performance: rich editor
+
+Use this editor to make sure editor features do not interfere with each other.