Kaynağa Gözat

Extended the font-size-numeric manual test.

Kamil Piechaczek 5 yıl önce
ebeveyn
işleme
1294dcd0e5

+ 9 - 0
packages/ckeditor5-font/tests/manual/font-size-numeric.html

@@ -1,3 +1,9 @@
+<p>
+	<b>Font-size converters mode</b>:
+	<input type="radio" id="mode-restricted-values" name="mode" value="restricted-values"><label for="mode-restricted-values">Restricted value matching</label>
+	<input type="radio" id="mode-disable-value-matching" name="mode" value="disable-value" checked><label for="mode-disable-value-matching">Disabled value matching</label>
+</p>
+
 <div id="editor">
 	<h2>Font Size feature sample.</h2>
 
@@ -8,4 +14,7 @@
 	<p><span style="font-size: 18px;">Some text with font-size set to: 18px.</span></p>
 	<p><span style="font-size: 20px;">Some text with font-size set to: 20px.</span></p>
 	<p><span style="font-size: 22px;">Some text with font-size set to: 22px.</span></p>
+	<p><span style="font-size: 36px;">Some text with font-size set to: 36px.</span></p>
+	<p><span style="font-size: 48px;">Some text with font-size set to: 48px.</span></p>
+	<p><span style="font-size: 64px;">Some text with font-size set to: 64px.</span></p>
 </div>

+ 38 - 10
packages/ckeditor5-font/tests/manual/font-size-numeric.js

@@ -3,23 +3,51 @@
  * 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 FontSize from '../../src/fontsize';
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
+const restrictedModeButton = document.getElementById( 'mode-restricted-values' );
+const standardModeButton = document.getElementById( 'mode-disable-value-matching' );
+
+restrictedModeButton.addEventListener( 'change', handleModeChange );
+standardModeButton.addEventListener( 'change', handleModeChange );
+
+// When page loaded.
+startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
+
+// When a user changed a mode.
+async function handleModeChange( evt ) {
+	await startMode( evt.target.value );
+}
+
+// Starts the editor.
+async function startMode( selectedMode ) {
+	if ( selectedMode === 'restricted-values' ) {
+		await reloadEditor();
+	} else {
+		await reloadEditor( { disableValueMatching: true } );
+	}
+}
+
+async function reloadEditor( options = {} ) {
+	if ( window.editor ) {
+		await window.editor.destroy();
+	}
+
+	const config = {
 		plugins: [ ArticlePluginSet, FontSize ],
 		toolbar: [
 			'heading', '|', 'fontSize', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],
 		fontSize: { options: [ 10, 12, 14, 'default', 18, 20, 22 ] }
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
+	};
+
+	if ( options.disableValueMatching ) {
+		config.fontSize.disableValueMatching = true;
+	}
+
+	window.editor = await ClassicEditor.create( document.querySelector( '#editor' ), config );
+}

+ 9 - 0
packages/ckeditor5-font/tests/manual/font-size-numeric.md

@@ -10,3 +10,12 @@ Try to:
 - Change font by selecting some text.
 - Change to default font by selecting many paragraphs.
 - Change to default font by selecting some text.
+
+### Converters mode
+
+The "Restricted value matching" option means that all font-size values that aren't defined in the plugin's configuration will be removed (e.g. when pasted from Google Docs).
+This behaviour can be disabled by selecting the "Disabled value matching" option.
+
+All font-size above 22 aren't specified in the plugin's configuration and should be restored to default size when the "Restricted value matching" option is selected.
+
+By default editor should load with the "Disabled value matching" option.