ソースを参照

Add font background color, move common logic to utils and update paths for imports.

Mateusz Samsel 6 年 前
コミット
0cccaec851

+ 28 - 0
packages/ckeditor5-font/src/fontbackgroundcolor.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontbackgroundcolor
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import FontBackgroundColorEditing from './fontbackgroundcolor/fontbackgroundcolorediting';
+import FontBackgroundColorUI from './fontbackgroundcolor/fontbackgroundcolorui';
+
+export default class FontBackgroundColor extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ FontBackgroundColorEditing, FontBackgroundColorUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'FontBackgroundColor';
+	}
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontbackgroundcolor/fontbackgroundcolorcommand
+ */
+
+import FontCommand from '../fontcommand';
+import { FONT_BACKGROUND_COLOR } from '../utils';
+export default class FontBackgroundColorCommand extends FontCommand {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor, FONT_BACKGROUND_COLOR );
+	}
+}

+ 154 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -0,0 +1,154 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontfamily/fontfamilyediting
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import FontBackgroundColorCommand from './fontbackgroundcolorcommand';
+
+import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
+
+export default class FontBackgroundColorEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( FONT_BACKGROUND_COLOR, {
+			options: [
+				{
+					label: 'Strong Cyan',
+					color: '#1ABC9C'
+				},
+				{
+					label: 'Emerald',
+					color: '#2ECC71'
+				},
+				{
+					label: 'Bright Blue',
+					color: '#3498DB'
+				},
+				{
+					label: 'Amethyst',
+					color: '#9B59B6'
+				},
+				{
+					label: 'Grayish Blue',
+					color: '#4E5F70'
+				},
+				{
+					label: 'Vivid Yellow',
+					color: '#F1C40F'
+				},
+				{
+					label: 'Dark Cyan',
+					color: '#16A085'
+				},
+				{
+					label: 'Dark Emerald',
+					color: '#27AE60'
+				},
+				{
+					label: 'Strong Blue',
+					color: '#2980B9'
+				},
+				{
+					label: 'Dark Violet',
+					color: '#8E44AD'
+				},
+				{
+					label: 'Desaturated Blue',
+					color: '#2C3E50'
+				},
+				{
+					label: 'Orange',
+					color: '#F39C12'
+				},
+				{
+					label: 'Carrot',
+					color: '#E67E22'
+				},
+				{
+					label: 'Pale Red',
+					color: '#E74C3C'
+				},
+				{
+					label: 'Bright Silver',
+					color: '#ECF0F1'
+				},
+				{
+					label: 'Light Grayish Cyan',
+					color: '#95A5A6'
+				},
+				{
+					label: 'Light Gray',
+					color: '#DDD'
+				},
+				{
+					label: 'White',
+					color: '#FFF'
+				},
+				{
+					label: 'Pumpkin',
+					color: '#D35400'
+				},
+				{
+					label: 'Strong Red',
+					color: '#C0392B'
+				},
+				{
+					label: 'Silver',
+					color: '#BDC3C7'
+				},
+				{
+					label: 'Grayish Cyan',
+					color: '#7F8C8D'
+				},
+				{
+					label: 'Dark Gray',
+					color: '#999'
+				},
+				{
+					label: 'Black',
+					color: '#000'
+				}
+			]
+		} );
+
+		editor.conversion.for( 'upcast' ).elementToAttribute( {
+			view: {
+				name: 'span',
+				styles: {
+					'background-color': /[\s\S]+/
+				}
+			},
+			model: {
+				key: FONT_BACKGROUND_COLOR,
+				value: renderUpcastAttribute( 'background-color' )
+			}
+		} );
+
+		editor.conversion.for( 'downcast' ).attributeToElement( {
+			model: FONT_BACKGROUND_COLOR,
+			view: renderDowncastElement( 'background-color' )
+		} );
+
+		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 } );
+	}
+}

+ 79 - 0
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -0,0 +1,79 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontbackgroundcolor/fontbackgroundolorui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import fontBackgroundColorIcon from '../../theme/icons/font-family.svg';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import { FONT_BACKGROUND_COLOR, normalizeOptions } from '../utils';
+import ColorTableView from '../ui/colortableview';
+export default class FontBackgroundColorUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const command = editor.commands.get( FONT_BACKGROUND_COLOR );
+
+		const options = this._getLocalizedOptions();
+
+		// Register UI component.
+		editor.ui.componentFactory.add( FONT_BACKGROUND_COLOR, locale => {
+			const dropdownView = createDropdown( locale );
+
+			const colorTableView = new ColorTableView( locale, {
+				colors: options.map( item => ( { name: item.label, color: item.model } ) )
+			} );
+
+			dropdownView.panelView.children.add( colorTableView );
+
+			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
+			colorTableView.delegate( 'colorPicked' ).to( dropdownView, 'execute' );
+
+			dropdownView.buttonView.set( {
+				label: t( 'Font Background Color' ),
+				icon: fontBackgroundColorIcon,
+				tooltip: true
+			} );
+
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: 'ck-font-family-dropdown'
+				}
+			} );
+
+			dropdownView.bind( 'isEnabled' ).to( command );
+
+			dropdownView.on( 'execute', ( evt, val ) => {
+				editor.execute( FONT_BACKGROUND_COLOR, val );
+			} );
+
+			return dropdownView;
+		} );
+	}
+
+	/**
+	 * Returns options as defined in `config.fontFamily.options` but processed to account for
+	 * editor localization, i.e. to display {@link module:font/fontfamily~FontFamilyOption}
+	 * 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>}.
+	 */
+	_getLocalizedOptions() {
+		const editor = this.editor;
+		const options = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.options` ) );
+
+		return options;
+	}
+}

+ 1 - 1
packages/ckeditor5-font/src/fontcolor.js

@@ -11,7 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FontColorEditing from './fontcolor/fontcolorediting';
 import FontColorUI from './fontcolor/fontcolorui';
 
-export default class FontFamily extends Plugin {
+export default class FontColor extends Plugin {
 	/**
 	 * @inheritDoc
 	 */

+ 1 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorcommand.js

@@ -8,7 +8,7 @@
  */
 
 import FontCommand from '../fontcommand';
-import { FONT_COLOR } from './utils';
+import { FONT_COLOR } from '../utils';
 export default class FontColorCommand extends FontCommand {
 	/**
 	 * @inheritDoc

+ 3 - 3
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -11,7 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import FontColorCommand from './fontcolorcommand';
 
-import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from './utils';
+import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../utils';
 
 export default class FontColorEditing extends Plugin {
 	/**
@@ -130,13 +130,13 @@ export default class FontColorEditing extends Plugin {
 			},
 			model: {
 				key: FONT_COLOR,
-				value: renderUpcastAttribute
+				value: renderUpcastAttribute( 'color' )
 			}
 		} );
 
 		editor.conversion.for( 'downcast' ).attributeToElement( {
 			model: FONT_COLOR,
-			view: renderDowncastElement
+			view: renderDowncastElement( 'color' )
 		} );
 
 		editor.commands.add( FONT_COLOR, new FontColorCommand( editor ) );

+ 1 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -11,7 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import fontColorIcon from '../../theme/icons/font-family.svg';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { normalizeOptions, FONT_COLOR } from './utils';
+import { FONT_COLOR, normalizeOptions } from '../utils';
 import ColorTableView from '../ui/colortableview';
 export default class FontColorUI extends Plugin {
 	/**

+ 0 - 46
packages/ckeditor5-font/src/fontcolor/utils.js

@@ -1,46 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module font/fontcolor/utils
- */
-
-export const FONT_COLOR = 'fontColor';
-
-export function normalizeOptions( configuredOptions ) {
-	return configuredOptions
-		.map( getOptionDefinition )
-		.filter( option => !!option );
-}
-
-export function renderUpcastAttribute( viewElement ) {
-	const fontColor = viewElement.getStyle( 'color' );
-	return normalizeColorCode( fontColor );
-}
-
-export function renderDowncastElement( modelAttributeValue, viewWriter ) {
-	return viewWriter.createAttributeElement( 'span', {
-		style: 'color:' + modelAttributeValue
-	} );
-}
-
-function getOptionDefinition( option ) {
-	return {
-		title: option.label,
-		model: option.color,
-		label: option.label,
-		view: {
-			name: 'span',
-			styles: {
-				color: `${ option.color }`
-			},
-			priority: 5
-		}
-	};
-}
-
-function normalizeColorCode( color ) {
-	return color.replace( /\s/g, '' );
-}

+ 41 - 0
packages/ckeditor5-font/src/utils.js

@@ -35,3 +35,44 @@ export function buildDefinition( modelAttributeKey, options ) {
 
 	return definition;
 }
+
+export const FONT_COLOR = 'fontColor';
+export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
+
+export function renderUpcastAttribute( styleAttr ) {
+	return viewElement => {
+		const fontColor = viewElement.getStyle( styleAttr );
+		return normalizeColorCode( fontColor );
+	};
+}
+
+export function renderDowncastElement( styleAttr ) {
+	return ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
+		style: `${ styleAttr }:${ modelAttributeValue }`
+	} );
+}
+
+function normalizeColorCode( value ) {
+	return value.replace( /\s/g, '' );
+}
+
+export function normalizeOptions( configuredOptions ) {
+	return configuredOptions
+		.map( getOptionDefinition )
+		.filter( option => !!option );
+}
+
+function getOptionDefinition( option ) {
+	return {
+		title: option.label,
+		model: option.color,
+		label: option.label,
+		view: {
+			name: 'span',
+			styles: {
+				color: `${ option.color }`
+			},
+			priority: 5
+		}
+	};
+}

+ 4 - 2
packages/ckeditor5-font/tests/manual/font-color.js

@@ -8,12 +8,14 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import FontColor from '../../src/fontcolor';
+import FontBackgroundColor from '../../src/fontbackgroundcolor';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, FontColor ],
+		plugins: [ ArticlePluginSet, FontColor, FontBackgroundColor ],
 		toolbar: [
-			'heading', '|', 'fontColor', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+			'heading', '|',
+			'fontColor', 'fontBackgroundColor', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		]
 	} )
 	.then( editor => {