8
0
Quellcode durchsuchen

Added: Mark font family/font size in the dropdown's panel items.

Maciej Gołaszewski vor 8 Jahren
Ursprung
Commit
775d7807cc

+ 3 - 1
packages/ckeditor5-font/src/fontfamily/fontfamilyui.js

@@ -37,9 +37,11 @@ export default class FontFamilyUI extends Plugin {
 			const itemModel = new Model( {
 				commandName: 'fontFamily',
 				commandParam: option.model,
-				label: option.title,
+				label: option.title
 			} );
 
+			itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
+
 			// Try to set a dropdown list item style.
 			if ( option.view && option.view.style ) {
 				itemModel.set( 'style', 'font-family:' + option.view.style[ 'font-family' ] );

+ 2 - 0
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -39,6 +39,8 @@ export default class FontSizeUI extends Plugin {
 				class: option.class
 			} );
 
+			itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
+
 			// Add the option to the collection.
 			dropdownItems.add( itemModel );
 		}

+ 4 - 4
packages/ckeditor5-font/src/fontsize/utils.js

@@ -26,7 +26,7 @@ export function normalizeOptions( configuredOptions ) {
 const namedPresets = {
 	tiny: {
 		title: 'Tiny',
-		model: 'text-tiny',
+		model: 'tiny',
 		view: {
 			name: 'span',
 			class: 'text-tiny'
@@ -34,7 +34,7 @@ const namedPresets = {
 	},
 	small: {
 		title: 'Small',
-		model: 'text-small',
+		model: 'small',
 		view: {
 			name: 'span',
 			class: 'text-small'
@@ -42,7 +42,7 @@ const namedPresets = {
 	},
 	big: {
 		title: 'Big',
-		model: 'text-big',
+		model: 'big',
 		view: {
 			name: 'span',
 			class: 'text-big'
@@ -50,7 +50,7 @@ const namedPresets = {
 	},
 	huge: {
 		title: 'Huge',
-		model: 'text-huge',
+		model: 'huge',
 		view: {
 			name: 'span',
 			class: 'text-huge'

+ 16 - 0
packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js

@@ -88,6 +88,22 @@ describe( 'FontFamilyUI', () => {
 			sinon.assert.calledOnce( focusSpy );
 		} );
 
+		it( 'should activate current option in dropdown', () => {
+			const listView = dropdown.listView;
+
+			command.value = undefined;
+
+			// The first item is 'default' font family.
+			expect( listView.items.map( item => item.isActive ) )
+				.to.deep.equal( [ true, false, false, false, false, false, false, false, false ] );
+
+			command.value = 'Arial';
+
+			// The second item is 'Arial' font family.
+			expect( listView.items.map( item => item.isActive ) )
+				.to.deep.equal( [ false, true, false, false, false, false, false, false, false ] );
+		} );
+
 		describe( 'model to command binding', () => {
 			it( 'isEnabled', () => {
 				command.isEnabled = false;

+ 2 - 2
packages/ckeditor5-font/tests/fontsize/fontsizeediting.js

@@ -80,7 +80,7 @@ describe( 'FontSizeEditing', () => {
 		} );
 
 		it( 'should convert fontSize attribute to predefined named preset', () => {
-			setModelData( doc, '<paragraph>f<$text fontSize="text-tiny">o</$text>o</paragraph>' );
+			setModelData( doc, '<paragraph>f<$text fontSize="tiny">o</$text>o</paragraph>' );
 
 			expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
 		} );
@@ -152,7 +152,7 @@ describe( 'FontSizeEditing', () => {
 
 			editor.setData( data );
 
-			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="text-tiny">o</$text>o</paragraph>' );
+			expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="tiny">o</$text>o</paragraph>' );
 
 			expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
 		} );

+ 18 - 7
packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -80,8 +80,6 @@ describe( 'FontSizeUI', () => {
 		} );
 
 		it( 'should add custom CSS class to dropdown', () => {
-			const dropdown = editor.ui.componentFactory.create( 'fontSize' );
-
 			dropdown.render();
 
 			expect( dropdown.element.classList.contains( 'ck-font-size-dropdown' ) ).to.be.true;
@@ -89,7 +87,6 @@ describe( 'FontSizeUI', () => {
 
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
-			const dropdown = editor.ui.componentFactory.create( 'fontSize' );
 
 			dropdown.commandName = 'fontSize';
 			dropdown.fire( 'execute' );
@@ -97,6 +94,20 @@ describe( 'FontSizeUI', () => {
 			sinon.assert.calledOnce( focusSpy );
 		} );
 
+		it( 'should activate current option in dropdown', () => {
+			const listView = dropdown.listView;
+
+			command.value = undefined;
+
+			// The third item is 'normal' font size.
+			expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [ false, false, true, false, false ] );
+
+			command.value = 'tiny';
+
+			// The first item is 'tiny' font size.
+			expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [ true, false, false, false, false ] );
+		} );
+
 		describe( 'model to command binding', () => {
 			it( 'isEnabled', () => {
 				command.isEnabled = false;
@@ -116,11 +127,11 @@ describe( 'FontSizeUI', () => {
 			it( 'does not alter normalizeOptions() internals', () => {
 				const options = normalizeOptions( [ 'tiny', 'small', 'normal', 'big', 'huge' ] );
 				expect( options ).to.deep.equal( [
-					{ title: 'Tiny', model: 'text-tiny', view: { name: 'span', class: 'text-tiny' } },
-					{ title: 'Small', model: 'text-small', view: { name: 'span', class: 'text-small' } },
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', class: 'text-tiny' } },
+					{ title: 'Small', model: 'small', view: { name: 'span', class: 'text-small' } },
 					{ title: 'Normal', model: undefined },
-					{ title: 'Big', model: 'text-big', view: { name: 'span', class: 'text-big' } },
-					{ title: 'Huge', model: 'text-huge', view: { name: 'span', class: 'text-huge' } }
+					{ title: 'Big', model: 'big', view: { name: 'span', class: 'text-big' } },
+					{ title: 'Huge', model: 'huge', view: { name: 'span', class: 'text-huge' } }
 				] );
 			} );
 

+ 4 - 4
packages/ckeditor5-font/tests/fontsize/utils.js

@@ -28,11 +28,11 @@ describe( 'FontSizeEditing Utils', () => {
 		describe( 'named presets', () => {
 			it( 'should return defined presets', () => {
 				expect( normalizeOptions( [ 'tiny', 'small', 'normal', 'big', 'huge' ] ) ).to.deep.equal( [
-					{ title: 'Tiny', model: 'text-tiny', view: { name: 'span', class: 'text-tiny' } },
-					{ title: 'Small', model: 'text-small', view: { name: 'span', class: 'text-small' } },
+					{ title: 'Tiny', model: 'tiny', view: { name: 'span', class: 'text-tiny' } },
+					{ title: 'Small', model: 'small', view: { name: 'span', class: 'text-small' } },
 					{ title: 'Normal', model: undefined },
-					{ title: 'Big', model: 'text-big', view: { name: 'span', class: 'text-big' } },
-					{ title: 'Huge', model: 'text-huge', view: { name: 'span', class: 'text-huge' } }
+					{ title: 'Big', model: 'big', view: { name: 'span', class: 'text-big' } },
+					{ title: 'Huge', model: 'huge', view: { name: 'span', class: 'text-huge' } }
 				] );
 			} );
 		} );