ソースを参照

Add part of fixes after review.

Mateusz Samsel 6 年 前
コミット
e14e54f985

+ 12 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorcommand.js

@@ -9,6 +9,18 @@
 
 import FontCommand from '../fontcommand';
 import { FONT_BACKGROUND_COLOR } from '../utils';
+
+/**
+ * The font background color command. It's used by
+ * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
+ * to apply the font background color.
+ *
+ * 		editor.execute( 'fontBackgroundColor', { value: 'rgb(250, 20, 20)' } );
+ *
+ * **Note**: Executing the command with value equal null removes the attribute from the model.
+ *
+ * @extends module:font/fontcommand~FontCommand
+ */
 export default class FontBackgroundColorCommand extends FontCommand {
 	/**
 	 * @inheritDoc

+ 11 - 10
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -4,15 +4,23 @@
  */
 
 /**
- * @module font/fontfamily/fontfamilyediting
+ * @module font/fontbackgroundcolor/fontbackgroundcolorediting
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
 import FontBackgroundColorCommand from './fontbackgroundcolorcommand';
-
 import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
 
+/**
+ * The font background color editing feature.
+ *
+ * It introduces the {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand command} and
+ * the `fontBackgroundColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="background-color: hsl(0, 0%, 100%)">`),
+ * depending on the {@link module:font/fontbackgroundcolor~FontBackgroundColortConfig configuration}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
 export default class FontBackgroundColorEditing extends Plugin {
 	/**
 	 * @inheritDoc
@@ -91,13 +99,6 @@ export default class FontBackgroundColorEditing extends Plugin {
 		} );
 
 		editor.commands.add( FONT_BACKGROUND_COLOR, new FontBackgroundColorCommand( editor ) );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
 
 		// Allow fontBackgroundColor attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_BACKGROUND_COLOR } );

+ 26 - 13
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -8,10 +8,15 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
-import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { FONT_BACKGROUND_COLOR, normalizeOptions, colorUI } from '../utils';
+import { FONT_BACKGROUND_COLOR, normalizeOptions, addColorsToDropdown } from '../utils';
+import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
+
+/**
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ *
+ * @extends module:core/plugin~Plugin
+ */
 export default class FontBackgroundColorUI extends Plugin {
 	/**
 	 * @inheritDoc
@@ -26,7 +31,7 @@ export default class FontBackgroundColorUI extends Plugin {
 		// Register UI component.
 		editor.ui.componentFactory.add( FONT_BACKGROUND_COLOR, locale => {
 			const dropdownView = createDropdown( locale );
-			const colorTableView = colorUI.addColorsToDropdown(
+			const colorTableView = addColorsToDropdown(
 				dropdownView,
 				options.map( element => ( {
 					label: element.label,
@@ -54,11 +59,15 @@ export default class FontBackgroundColorUI extends Plugin {
 
 			dropdownView.bind( 'isEnabled' ).to( command );
 
-			dropdownView.on( 'execute', ( evt, val ) => {
-				if ( val.value !== null ) {
-					colorTableView.recentlyUsedColors.add( { color: val.value, hasBorder: val.hasBorder, label: val.label }, 0 );
+			dropdownView.on( 'execute', ( evt, data ) => {
+				if ( data.value !== null ) {
+					colorTableView.recentlyUsedColors.add( {
+						color: data.value,
+						hasBorder: data.hasBorder,
+						label: data.label
+					}, 0 );
 				}
-				editor.execute( FONT_BACKGROUND_COLOR, val );
+				editor.execute( FONT_BACKGROUND_COLOR, data );
 				editor.editing.view.focus();
 			} );
 
@@ -67,19 +76,23 @@ export default class FontBackgroundColorUI extends Plugin {
 	}
 
 	/**
-	 * Returns options as defined in `config.fontFamily.options` but processed to account for
-	 * editor localization, i.e. to display {@link module:font/fontfamily~FontFamilyOption}
+	 * Returns options as defined in `config.fontBackgroundColor.colors` but processed to account for
+	 * editor localization, i.e. to display {@link module:font/fontBackgroundColor~FontBackgroundColorOption}
 	 * in the correct language.
 	 *
 	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
 	 * when the user configuration is defined because the editor does not exist yet.
 	 *
 	 * @private
-	 * @returns {Array.<module:font/fontfamily~FontFamilyOption>}.
+	 * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorOption>}.
 	 */
 	_getLocalizedOptions() {
 		const editor = this.editor;
-		const colors = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ) );
-		return colors;
+		const t = editor.t;
+		const options = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ) );
+		options.forEach( option => {
+			option.label = t( option.label );
+		} );
+		return options;
 	}
 }

+ 11 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorcommand.js

@@ -9,6 +9,17 @@
 
 import FontCommand from '../fontcommand';
 import { FONT_COLOR } from '../utils';
+
+/**
+ * The font color command. It's used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
+ * to apply the font color.
+ *
+ * 		editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ *
+ * **Note**: Executing the command with value equal null removes the attribute from the model.
+ *
+ * @extends module:font/fontcommand~FontCommand
+ */
 export default class FontColorCommand extends FontCommand {
 	/**
 	 * @inheritDoc

+ 11 - 10
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -4,15 +4,23 @@
  */
 
 /**
- * @module font/fontfamily/fontfamilyediting
+ * @module font/fontcolor/fontcolorediting
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
 import FontColorCommand from './fontcolorcommand';
-
 import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
 
+/**
+ * The font color editing feature.
+ *
+ * It introduces the {@link module:font/fontcolor/fontcolorcommand~FontColorCommand command} and
+ * the `fontColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="color: hsl(0, 0%, 100%)">`),
+ * depending on the {@link module:font/fontcolor~FontColortConfig configuration}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
 export default class FontColorEditing extends Plugin {
 	/**
 	 * @inheritDoc
@@ -91,13 +99,6 @@ export default class FontColorEditing extends Plugin {
 		} );
 
 		editor.commands.add( FONT_COLOR, new FontColorCommand( editor ) );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
 
 		// Allow fontColor attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_COLOR } );

+ 27 - 7
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -8,10 +8,15 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
-import fontColorIcon from '../../theme/icons/font-color.svg';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { FONT_COLOR, normalizeOptions, colorUI } from '../utils';
+import { FONT_COLOR, normalizeOptions, addColorsToDropdown } from '../utils';
+import fontColorIcon from '../../theme/icons/font-color.svg';
+
+/**
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ *
+ * @extends module:core/plugin~Plugin
+ */
 export default class FontColorUI extends Plugin {
 	/**
 	 * @inheritDoc
@@ -26,10 +31,10 @@ export default class FontColorUI extends Plugin {
 		// Register UI component.
 		editor.ui.componentFactory.add( FONT_COLOR, locale => {
 			const dropdownView = createDropdown( locale );
-			const colorTableView = colorUI.addColorsToDropdown(
+			const colorTableView = addColorsToDropdown(
 				dropdownView,
 				options.map( element => ( {
-					label: t( element.label ),
+					label: element.label,
 					color: element.model,
 					options: {
 						hasBorder: element.hasBorder
@@ -66,9 +71,24 @@ export default class FontColorUI extends Plugin {
 		} );
 	}
 
+	/**
+	 * Returns options as defined in `config.fontColor.colors` but processed to account for
+	 * editor localization, i.e. to display {@link module:font/fontColor~FontColorOption}
+	 * in the correct language.
+	 *
+	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
+	 * when the user configuration is defined because the editor does not exist yet.
+	 *
+	 * @private
+	 * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorOption>}.
+	 */
 	_getLocalizedOptions() {
 		const editor = this.editor;
-		const colors = normalizeOptions( editor.config.get( `${ FONT_COLOR }.colors` ) );
-		return colors;
+		const t = editor.t;
+		const options = normalizeOptions( editor.config.get( `${ FONT_COLOR }.colors` ) );
+		options.forEach( option => {
+			option.label = t( option.label );
+		} );
+		return options;
 	}
 }

+ 5 - 1
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -26,7 +26,11 @@ export default class ColorGrid extends View {
 				hasBorder: item.options.hasBorder
 			} );
 			colorTile.on( 'execute', () => {
-				this.fire( 'execute', { value: item.color, hasBorder: item.options.hasBorder, label: item.label } );
+				this.fire( 'execute', {
+					value: item.color,
+					hasBorder: item.options.hasBorder,
+					label: item.label
+				} );
 			} );
 			this.items.add( colorTile );
 		} );

+ 2 - 5
packages/ckeditor5-font/src/ui/colortableview.js

@@ -7,14 +7,12 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ColorTile from './colortile';
 import ColorGrid from './colorgrid';
-
-import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
-
-import '../../theme/fontcolor.css';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
+import '../../theme/fontcolor.css';
 
 export default class ColorTableView extends View {
 	constructor( locale, { colors } ) {
@@ -27,7 +25,6 @@ export default class ColorTableView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		this.set( 'selectedColor' );
-		this.set( 'hoveredColor' );
 		this.set( 'removeButtonTooltip' );
 		this.set( 'colorColumns', 5 );
 		this.set( 'recentlyUsedColors', new Collection() );

+ 1 - 0
packages/ckeditor5-font/src/ui/colortile.js

@@ -4,6 +4,7 @@
  */
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
 export default class ColorTile extends ButtonView {
 	constructor( locale ) {
 		super( locale );

+ 8 - 10
packages/ckeditor5-font/src/utils.js

@@ -93,14 +93,12 @@ function getColorsDefinition( color ) {
 	}
 }
 
-export const colorUI = {
-	addColorsToDropdown( dropdownView, colors ) {
-		const locale = dropdownView.locale;
-		const colorTableView = new ColorTableView( locale, { colors } );
-		dropdownView.colorTableView = colorTableView;
-		dropdownView.panelView.children.add( colorTableView );
+export function addColorsToDropdown( dropdownView, colors ) {
+	const locale = dropdownView.locale;
+	const colorTableView = new ColorTableView( locale, { colors } );
+	dropdownView.colorTableView = colorTableView;
+	dropdownView.panelView.children.add( colorTableView );
 
-		colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
-		return colorTableView;
-	}
-};
+	colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
+	return colorTableView;
+}