Add modes switching to the manual test.

ckeditor · Nov 15, 2019 · 9ea93d9 · 9ea93d9
1 parent f40c4ca
commit 9ea93d9
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 26 deletions.
diff --git a/tests/manual/restrictedediting.html b/tests/manual/restrictedediting.html
@@ -1,3 +1,8 @@
+<p>
+	<button id="mode-standard">Standard mode</button>
+	<button id="mode-restricted">Restricted mode</button>
+</p>
+
 <div id="editor">
 	<h2>Heading 1</h2>
 	<p>Paragraph <span class="ck-restricted-editing-exception">it is editable</span></p>

diff --git a/tests/manual/restrictedediting.js b/tests/manual/restrictedediting.js
@@ -3,36 +3,72 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals console, window, document */
+/* globals window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import Table from '@ckeditor/ckeditor5-table/src/table';
 
 import RestrictedEditingException from '../../src/restrictededitingexception';
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, RestrictedEditingException ],
-		toolbar: [ 'heading', '|',
-			'bold', 'italic', 'link', '|',
-			'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|',
-			'restrictedEditingException', '|', 'undo', 'redo'
-		],
-		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
-		},
-		table: {
-			contentToolbar: [
-				'tableColumn',
-				'tableRow',
-				'mergeTableCells'
-			]
-		}
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
+const restrictedModeButton = document.getElementById( 'mode-restricted' );
+const standardModeButton = document.getElementById( 'mode-standard' );
+
+enableSwitchToStandardMode();
+enableSwitchToRestrictedMode();
+
+function enableSwitchToRestrictedMode() {
+	restrictedModeButton.removeAttribute( 'disabled' );
+	restrictedModeButton.addEventListener( 'click', startRestrictedMode );
+}
+
+function enableSwitchToStandardMode() {
+	standardModeButton.removeAttribute( 'disabled' );
+	standardModeButton.addEventListener( 'click', startStandardMode );
+}
+
+async function startStandardMode() {
+	standardModeButton.removeEventListener( 'click', startStandardMode );
+	standardModeButton.setAttribute( 'disabled', 'disabled' );
+
+	window.editor = await getEditor( [ ArticlePluginSet, Table, RestrictedEditingException ] );
+
+	enableSwitchToRestrictedMode();
+}
+
+async function startRestrictedMode() {
+	restrictedModeButton.removeEventListener( 'click', startRestrictedMode );
+	restrictedModeButton.setAttribute( 'disabled', 'disabled' );
+
+	window.editor = await getEditor( [ ArticlePluginSet, Table, RestrictedEditingException ] );
+
+	enableSwitchToStandardMode();
+}
+
+async function getEditor( plugins ) {
+	if ( window.editor ) {
+		await window.editor.destroy();
+	}
+
+	// await new Promise( resolve => setTimeout( resolve, 1000 ) );
+
+	return await ClassicEditor
+		.create( document.querySelector( '#editor' ), {
+			plugins,
+			toolbar: [ 'heading', '|',
+				'bold', 'italic', 'link', '|',
+				'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|',
+				'restrictedEditingException', '|', 'undo', 'redo'
+			],
+			image: {
+				toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			},
+			table: {
+				contentToolbar: [
+					'tableColumn',
+					'tableRow',
+					'mergeTableCells'
+				]
+			}
+		} );
+}