Ver código fonte

Add Some proof of concept for font-color. With basic manual test. Work in progress.

Mateusz Samsel 6 anos atrás
pai
commit
49de8a1ac7

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

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

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

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

+ 167 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -0,0 +1,167 @@
+/**
+ * @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 FontColorCommand from './fontcolorcommand';
+
+const FONT_COLOR = 'fontColor';
+
+export default class FontColorEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( FONT_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: {
+					'color': /#\d+/
+				}
+			},
+			model: {
+				key: 'fontColor',
+				value: _renderUpcastAttribute
+			}
+		} );
+
+		editor.conversion.for( 'downcast' ).attributeToElement( {
+			model: 'fontColor',
+			view: _renderDowncastElement
+		} );
+
+		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 } );
+	}
+}
+
+function _renderUpcastAttribute( viewElement ) {
+	const fontColor = viewElement.getStyle( 'color' );
+	const value = fontColor.replace( '#', '' );
+
+	return value;
+}
+
+function _renderDowncastElement( modelAttributeValue, viewWriter ) {
+	return viewWriter.createAttributeElement( 'span', {
+		style: 'color:#' + modelAttributeValue
+	} );
+}

+ 76 - 0
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontcolor/fontcolorui
+ */
+
+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 } from './utils';
+import InsertColorView from '../ui/insertcolorview';
+
+export default class FontColorUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const command = editor.commands.get( 'fontColor' );
+
+		const options = this._getLocalizedOptions();
+
+		// Register UI component.
+		editor.ui.componentFactory.add( 'fontColor', locale => {
+			const dropdownView = createDropdown( locale );
+
+			const insertColorView = new InsertColorView( locale, options );
+			dropdownView.panelView.children.add( insertColorView );
+
+			insertColorView.delegate( 'execute' ).to( dropdownView );
+
+			dropdownView.buttonView.set( {
+				label: t( 'Font Color' ),
+				icon: fontColorIcon,
+				tooltip: true
+			} );
+
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: 'ck-font-family-dropdown'
+				}
+			} );
+
+			dropdownView.bind( 'isEnabled' ).to( command );
+
+			dropdownView.on( 'execute', ( evt, val ) => {
+				editor.execute( 'fontColor', 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( 'fontColor.options' ) );
+
+		return options;
+	}
+}

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

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module font/fontcolor/utils
+ */
+
+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
+		}
+	};
+}

+ 78 - 0
packages/ckeditor5-font/src/ui/insertcolorview.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
+
+export default class InsertColorView extends View {
+	constructor( locale, options ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		this.items = this.createCollection();
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [ 'ck' ]
+			},
+
+			children: [ new ColorTable( options.map( item => ( { name: item.label, color: item.model } ) ), bind, this ) ]
+		} );
+	}
+}
+
+class ColorTable {
+	constructor( colorsDefinition, bind, colorViewInstance ) {
+		this.bind = bind;
+		this.colorsDefinition = colorsDefinition;
+		this.colorViewInstance = colorViewInstance;
+		this.COLUMNS = 6;
+		const template = new Template( {
+			tag: 'table',
+			children: this.colorRows(),
+			attributes: {
+				style: {
+					width: '150px'
+				}
+			}
+		} );
+		return template;
+	}
+
+	colorRows() {
+		const rows = [];
+		for ( let i = 0; i < Math.ceil( this.colorsDefinition.length / this.COLUMNS ); i++ ) {
+			rows.push( new Template( {
+				tag: 'tr',
+				children: this.colorElements( i )
+			} ) );
+		}
+		return rows;
+	}
+
+	colorElements( index ) {
+		const elements = [];
+		for ( let i = 0; i < this.COLUMNS; i++ ) {
+			elements.push( new Template( {
+				tag: 'td',
+				attributes: {
+					style: {
+						backgroundColor: `#${ this.colorsDefinition[ index * this.COLUMNS + i ].color }`,
+						width: '25px',
+						height: '25px'
+					}
+				},
+				on: {
+					click: this.bind.to( () => {
+						this.colorViewInstance.fire( 'execute', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
+					} )
+				}
+			} ) );
+		}
+		return elements;
+	}
+}

+ 8 - 0
packages/ckeditor5-font/tests/manual/font-color.html

@@ -0,0 +1,8 @@
+<div id="editor">
+	<h2>Font Color feature sample.</h2>
+
+	<h3>Color: #9B59B6;</h3>
+	<p>
+		<span style="color:#9B59B6;">Jujubes sweet wafer. Pastry cotton candy sweet muffin dessert cookie. Chocolate cake candy canes dragée wafer donut bear claw.</span>
+	</p>
+</div>

+ 24 - 0
packages/ckeditor5-font/tests/manual/font-color.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontColor from '../../src/fontcolor';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, FontColor ],
+		toolbar: [
+			'heading', '|', 'fontColor', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+		]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 0 - 0
packages/ckeditor5-font/tests/manual/font-color.md