8
0
Просмотр исходного кода

Changed: Use one command for font features.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
b54a3f4ac2

+ 8 - 5
packages/ckeditor5-font/src/fontfamily/fontfamilyediting.js

@@ -13,6 +13,8 @@ import {
 	viewToModelAttribute
 	viewToModelAttribute
 } from '@ckeditor/ckeditor5-engine/src/conversion/definition-based-converters';
 } from '@ckeditor/ckeditor5-engine/src/conversion/definition-based-converters';
 
 
+import FontFamilyCommand from './fontfamilycommand';
+
 /**
 /**
  * The Font Family Editing feature.
  * The Font Family Editing feature.
  *
  *
@@ -43,15 +45,16 @@ export default class FontFamilyEditing extends Plugin {
 		const data = editor.data;
 		const data = editor.data;
 		const editing = editor.editing;
 		const editing = editor.editing;
 
 
+		// Add converters from view to model.
 		for ( const item of this.configuredItems ) {
 		for ( const item of this.configuredItems ) {
-			// Covert view to model.
 			viewToModelAttribute( 'fontFamily', item, [ data.viewToModel ] );
 			viewToModelAttribute( 'fontFamily', item, [ data.viewToModel ] );
+		}
 
 
-			// Covert model to view.
-			modelAttributeToViewAttributeElement( 'fontFamily', item, [ data.modelToView, editing.modelToView ] );
+		// Covert from model to view.
+		modelAttributeToViewAttributeElement( 'fontFamily', this.configuredItems, [ data.modelToView, editing.modelToView ] );
 
 
-			// Add command.
-		}
+		// Add FontSize command.
+		editor.commands.add( 'fontFamily', new FontFamilyCommand( editor ) );
 	}
 	}
 
 
 	get configuredItems() {
 	get configuredItems() {

+ 16 - 19
packages/ckeditor5-font/src/fontsize/fontsizecommand.js

@@ -16,13 +16,12 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
  * @extends module:core/command~Command
  * @extends module:core/command~Command
  */
  */
 export default class FontSizeCommand extends Command {
 export default class FontSizeCommand extends Command {
-	constructor( editor, fontSize ) {
-		super( editor );
-
-		/**
-		 * Name of font size config.
-		 */
-		this.fontSize = fontSize;
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const model = this.editor.model;
+		const doc = model.document;
 
 
 		/**
 		/**
 		 * A flag indicating whether the command is active, which means that the selection has fontSize attribute set.
 		 * A flag indicating whether the command is active, which means that the selection has fontSize attribute set.
@@ -31,16 +30,7 @@ export default class FontSizeCommand extends Command {
 		 * @readonly
 		 * @readonly
 		 * @member {Boolean} module:font/fontsizecommand~FontSizeCommand#value
 		 * @member {Boolean} module:font/fontsizecommand~FontSizeCommand#value
 		 */
 		 */
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const model = this.editor.model;
-		const doc = model.document;
-
-		this.value = doc.selection.getAttribute( 'fontSize' ) === this.fontSize;
+		this.value = doc.selection.getAttribute( 'fontSize' );
 		this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'fontSize' );
 		this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'fontSize' );
 	}
 	}
 
 
@@ -49,8 +39,9 @@ export default class FontSizeCommand extends Command {
 	 *
 	 *
 	 * @protected
 	 * @protected
 	 * @param {Object} [options] Options for the executed command.
 	 * @param {Object} [options] Options for the executed command.
+	 * @param {String} [options.fontSize] FontSize value to apply.
 	 */
 	 */
-	execute() {
+	execute( options ) {
 		const model = this.editor.model;
 		const model = this.editor.model;
 		const document = model.document;
 		const document = model.document;
 		const selection = document.selection;
 		const selection = document.selection;
@@ -60,11 +51,17 @@ export default class FontSizeCommand extends Command {
 			return;
 			return;
 		}
 		}
 
 
+		const value = options.fontSize;
+
 		model.change( writer => {
 		model.change( writer => {
 			const ranges = model.schema.getValidRanges( selection.getRanges(), 'fontSize' );
 			const ranges = model.schema.getValidRanges( selection.getRanges(), 'fontSize' );
 
 
 			for ( const range of ranges ) {
 			for ( const range of ranges ) {
-				writer.setAttribute( 'fontSize', this.fontSize, range );
+				if ( value !== 'normal' ) {
+					writer.setAttribute( 'fontSize', value, range );
+				} else {
+					writer.removeAttribute( 'fontSize', range );
+				}
 			}
 			}
 		} );
 		} );
 	}
 	}

+ 9 - 11
packages/ckeditor5-font/src/fontsize/fontsizeediting.js

@@ -42,21 +42,19 @@ export default class FontSizeEditing extends Plugin {
 		const data = editor.data;
 		const data = editor.data;
 		const editing = editor.editing;
 		const editing = editor.editing;
 
 
-		for ( const item of this.configuredItems ) {
-			if ( item.model === 'normal' ) {
-				editor.commands.add( 'font-size:normal', new FontSizeCommand( editor ) );
-				continue;
-			}
+		// Define view to model conversion.
+		const items = this.configuredItems.filter( item => item.model !== 'normal' );
 
 
+		for ( const item of items ) {
 			// Covert view to model.
 			// Covert view to model.
 			viewToModelAttribute( 'fontSize', item, [ data.viewToModel ] );
 			viewToModelAttribute( 'fontSize', item, [ data.viewToModel ] );
-
-			// Add command.
-			editor.commands.add( 'font-size:' + item.model, new FontSizeCommand( editor, item.model ) );
 		}
 		}
 
 
-		// Covert model to view.
-		modelAttributeToViewAttributeElement( 'fontSize', this.configuredItems, [ data.modelToView, editing.modelToView ] );
+		// Define model to view conversion.
+		modelAttributeToViewAttributeElement( 'fontSize', items, [ data.modelToView, editing.modelToView ] );
+
+		// Add FontSize command.
+		editor.commands.add( 'fontSize', new FontSizeCommand( editor ) );
 	}
 	}
 
 
 	get configuredItems() {
 	get configuredItems() {
@@ -88,7 +86,7 @@ export default class FontSizeEditing extends Plugin {
 	init() {
 	init() {
 		const editor = this.editor;
 		const editor = this.editor;
 
 
-		// Allow fontSize attribute on all elements
+		// Allow fontSize attribute on all elements.
 		editor.model.schema.allow( { name: '$inline', attributes: 'fontSize', inside: '$block' } );
 		editor.model.schema.allow( { name: '$inline', attributes: 'fontSize', inside: '$block' } );
 		// Temporary workaround. See https://github.com/ckeditor/ckeditor5/issues/477.
 		// Temporary workaround. See https://github.com/ckeditor/ckeditor5/issues/477.
 		editor.model.schema.allow( { name: '$inline', attributes: 'fontSize', inside: '$clipboardHolder' } );
 		editor.model.schema.allow( { name: '$inline', attributes: 'fontSize', inside: '$clipboardHolder' } );

+ 7 - 31
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -28,27 +28,22 @@ export default class FontSizeUI extends Plugin {
 		const dropdownItems = new Collection();
 		const dropdownItems = new Collection();
 
 
 		const options = this._getLocalizedOptions();
 		const options = this._getLocalizedOptions();
-		const commands = [];
 		const t = editor.t;
 		const t = editor.t;
 
 
+		const command = editor.commands.get( 'fontSize' );
+
 		const dropdownTooltip = t( 'Font Size' );
 		const dropdownTooltip = t( 'Font Size' );
 
 
 		for ( const option of options ) {
 		for ( const option of options ) {
-			const commandName = 'font-size:' + option.model;
-
-			const command = editor.commands.get( commandName );
 			const itemModel = new Model( {
 			const itemModel = new Model( {
-				commandName,
+				commandName: 'fontSize',
+				commandParam: option.model,
 				label: option.title,
 				label: option.title,
 				class: option.class
 				class: option.class
 			} );
 			} );
 
 
-			itemModel.bind( 'isActive' ).to( command, 'value' );
-
 			// Add the option to the collection.
 			// Add the option to the collection.
 			dropdownItems.add( itemModel );
 			dropdownItems.add( itemModel );
-
-			commands.push( command );
 		}
 		}
 
 
 		// Create dropdown model.
 		// Create dropdown model.
@@ -59,12 +54,7 @@ export default class FontSizeUI extends Plugin {
 			tooltip: dropdownTooltip
 			tooltip: dropdownTooltip
 		} );
 		} );
 
 
-		dropdownModel.bind( 'isEnabled' ).to(
-			// Bind to #isEnabled of each command...
-			...getCommandsBindingTargets( commands, 'isEnabled' ),
-			// ...and set it true if any command #isEnabled is true.
-			( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
-		);
+		dropdownModel.bind( 'isEnabled' ).to( command, 'isEnabled' );
 
 
 		// Register UI component.
 		// Register UI component.
 		editor.ui.componentFactory.add( 'fontSize', locale => {
 		editor.ui.componentFactory.add( 'fontSize', locale => {
@@ -81,7 +71,7 @@ export default class FontSizeUI extends Plugin {
 
 
 			// Execute command when an item from the dropdown is selected.
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdown, 'execute', evt => {
 			this.listenTo( dropdown, 'execute', evt => {
-				editor.execute( evt.source.commandName );
+				editor.execute( evt.source.commandName, { fontSize: evt.source.commandParam } );
 				editor.editing.view.focus();
 				editor.editing.view.focus();
 			} );
 			} );
 
 
@@ -110,7 +100,7 @@ export default class FontSizeUI extends Plugin {
 			Huge: t( 'Huge' )
 			Huge: t( 'Huge' )
 		};
 		};
 
 
-		// TODO this is not nice :/
+		// TODO this is not nice :/ in terms of feature split.
 		const items = editor.plugins.get( FontSizeEditing ).configuredItems;
 		const items = editor.plugins.get( FontSizeEditing ).configuredItems;
 
 
 		return items.map( option => {
 		return items.map( option => {
@@ -125,17 +115,3 @@ export default class FontSizeUI extends Plugin {
 		} );
 		} );
 	}
 	}
 }
 }
-
-// Returns an array of binding components for
-// {@link module:utils/observablemixin~Observable#bind} from a set of iterable
-// commands.
-//
-// TODO: it's duplicated in various places - maybe it's worth exporting to utils?
-//
-// @private
-// @param {Iterable.<module:core/command~Command>} commands
-// @param {String} attribute
-// @returns {Array.<String>}
-function getCommandsBindingTargets( commands, attribute ) {
-	return Array.prototype.concat( ...commands.map( c => [ c, attribute ] ) );
-}