8
0
Aleksander Nowodzinski 6 жил өмнө
parent
commit
7ec29fb8c7

+ 20 - 0
packages/ckeditor5-table/src/tablecellproperties.js

@@ -35,3 +35,23 @@ export default class TableCellProperties extends Plugin {
 		return [ TableCellPropertiesEditing, TableCellPropertiesUI ];
 	}
 }
+
+/**
+ * TODO
+ *
+ *		const tableConfig = {
+ *			tableCellProperties: {
+ *				border: {
+ *					colors: [ ... ]
+ *				},
+ *				backgroundColors: [ ... ]
+ *			}
+ *		};
+ *
+ * **Note**: The colors configuration does not impact the data loaded into the editor;
+ * it is reflected only in the UI.
+ *
+ * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+ *
+ * @member {Object} module:table/table~TableConfig#tableCellProperties
+ */

+ 15 - 0
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js

@@ -13,6 +13,7 @@ import { addPaddingRules } from '@ckeditor/ckeditor5-engine/src/view/styles/padd
 import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
 
 import { downcastAttributeToStyle, upcastStyleToAttribute, upcastBorderStyles } from './../converters/tableproperties';
+import { defaultColors } from '../ui/utils';
 import TableEditing from './../tableediting';
 import TableCellPaddingCommand from './commands/tablecellpaddingcommand';
 import TableCellWidthCommand from './commands/tablecellwidthcommand';
@@ -60,6 +61,20 @@ export default class TableCellPropertiesEditing extends Plugin {
 		return [ TableEditing ];
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'table.tableCellProperties', {
+			border: {
+				colors: defaultColors
+			},
+			backgroundColors: defaultColors
+		} );
+	}
+
 	/**
 	 * @inheritDoc
 	 */

+ 10 - 1
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -22,6 +22,10 @@ import {
 	colorFieldValidator,
 	lengthFieldValidator
 } from '../ui/utils';
+import {
+	getLocalizedColorOptions,
+	normalizeColorOptions
+} from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
 import { debounce } from 'lodash-es';
 
 const DEFAULT_BORDER_STYLE = 'none';
@@ -121,8 +125,13 @@ export default class TableCellPropertiesUI extends Plugin {
 		const editor = this.editor;
 		const viewDocument = editor.editing.view.document;
 		const config = editor.config.get( 'table.tableCellProperties' );
+		const borderColorsConfig = normalizeColorOptions( config.border.colors );
+		const localizedBorderColors = getLocalizedColorOptions( editor, borderColorsConfig );
+		const backgroundColorsConfig = normalizeColorOptions( config.backgroundColors );
+		const localizedBackgroundColors = getLocalizedColorOptions( editor, backgroundColorsConfig );
 		const view = new TableCellPropertiesView( editor.locale, {
-			config,
+			borderColors: localizedBorderColors,
+			backgroundColors: localizedBackgroundColors
 		} );
 		const t = editor.t;
 

+ 28 - 35
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -21,7 +21,12 @@ import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels } from '../../ui/utils';
+import {
+	fillToolbar,
+	getBorderStyleDefinitions,
+	getBorderStyleLabels,
+	getLabeledColorInputCreator,
+} from '../../ui/utils';
 import FormRowView from '../../ui/formrowview';
 import FormHeaderView from '../../ui/formheaderview';
 
@@ -35,8 +40,6 @@ import alignTopIcon from '@ckeditor/ckeditor5-core/theme/icons/align-top.svg';
 import alignMiddleIcon from '@ckeditor/ckeditor5-core/theme/icons/align-middle.svg';
 import alignBottomIcon from '@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg';
 
-import ColorInputView from '../../ui/colorinputview';
-
 import '../../../theme/form.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tablecellproperties.css';
@@ -59,23 +62,21 @@ const ALIGNMENT_ICONS = {
  */
 export default class TableCellPropertiesView extends View {
 	/**
-	 * @inheritDoc
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {Object} options TODO
+	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options.borderColors TODO
+	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options.backgroundColors
 	 */
 	constructor( locale, options ) {
 		super( locale );
 
 		/**
-		 * A reference to the options object passed to the constructor.
+		 * Options passed to the view.
 		 *
-		 * @readonly
-		 * @member {module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI}
+		 * @protected
+		 * @member {Object}
 		 */
-
-		// These options have to be placed high enough in the constructor that fields like `borderColorInput`
-		// or `backgroundInput` could use them.
-		// It's because those fields contain color picker which can be configured through the table cell properties config
-		// — `editor.config.table.tableCellProperties`.
-		this.options = options;
+		this._options = options;
 
 		const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
 		const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
@@ -446,6 +447,10 @@ export default class TableCellPropertiesView extends View {
 	 * @returns {Object.<String,module:ui/view~View>}
 	 */
 	_createBorderFields() {
+		const colorInputCreator = getLabeledColorInputCreator( {
+			colorDefinitions: this._options.borderColors,
+			columns: 5
+		} );
 		const locale = this.locale;
 		const t = this.t;
 
@@ -498,35 +503,19 @@ export default class TableCellPropertiesView extends View {
 
 		// -- Color ---------------------------------------------------
 
-		const borderColorInput = new LabeledView( locale, ( labeledView, viewUid, statusUid ) => {
-			const inputView = new ColorInputView( locale, this.options );
-
-			inputView.set( {
-				id: viewUid,
-				ariaDescribedById: statusUid
-			} );
-
-			inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
-			inputView.bind( 'errorText' ).to( labeledView );
-			inputView.bind( 'value' ).to( this, 'borderColor' );
-
-			inputView.on( 'input', () => {
-				// UX: Make the error text disappear and disable the error indicator as the user
-				// starts fixing the errors.
-				labeledView.errorText = null;
-			} );
-
-			return inputView;
-		} );
+		const borderColorInput = new LabeledView( locale, colorInputCreator );
 
 		borderColorInput.set( {
 			label: t( 'Color' ),
 			class: 'ck-table-form__border-color',
 		} );
 
+		borderColorInput.bind( 'value' ).to( this, 'borderColor' );
+
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
 			return value !== 'none';
 		} );
+
 		borderColorInput.view.on( 'input', () => {
 			this.borderColor = borderColorInput.view.value;
 		} );
@@ -550,8 +539,12 @@ export default class TableCellPropertiesView extends View {
 	_createBackgroundField() {
 		const locale = this.locale;
 		const t = this.t;
+		const colorInputCreator = getLabeledColorInputCreator( {
+			colorDefinitions: this._options.backgroundColors,
+			columns: 5
+		} );
 
-		const backgroundInput = new LabeledView( locale, createLabeledInputText );
+		const backgroundInput = new LabeledView( locale, colorInputCreator );
 
 		backgroundInput.set( {
 			label: t( 'Background' ),
@@ -560,7 +553,7 @@ export default class TableCellPropertiesView extends View {
 
 		backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
 		backgroundInput.view.on( 'input', () => {
-			this.backgroundColor = backgroundInput.view.element.value;
+			this.backgroundColor = backgroundInput.view.value;
 		} );
 
 		return backgroundInput;

+ 20 - 0
packages/ckeditor5-table/src/tableproperties.js

@@ -36,3 +36,23 @@ export default class TableProperties extends Plugin {
 		return [ TablePropertiesEditing, TablePropertiesUI ];
 	}
 }
+
+/**
+ * TODO
+ *
+ *		const tableConfig = {
+ *			tableProperties: {
+ *				border: {
+ *					colors: [ ... ]
+ *				},
+ *				backgroundColors: [ ... ]
+ *			}
+ *		};
+ *
+ * **Note**: The colors configuration does not impact the data loaded into the editor;
+ * it is reflected only in the UI.
+ *
+ * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+ *
+ * @member {Object} module:table/table~TableConfig#tableProperties
+ */

+ 15 - 0
packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.js

@@ -13,6 +13,7 @@ import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/b
 
 import TableEditing from './../tableediting';
 import { downcastTableAttribute, upcastStyleToAttribute, upcastBorderStyles } from './../converters/tableproperties';
+import { defaultColors } from '../ui/utils';
 import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand';
 import TableBorderColorCommand from './commands/tablebordercolorcommand';
 import TableBorderStyleCommand from './commands/tableborderstylecommand';
@@ -59,6 +60,20 @@ export default class TablePropertiesEditing extends Plugin {
 		return [ TableEditing ];
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'table.tableProperties', {
+			border: {
+				colors: defaultColors
+			},
+			backgroundColors: defaultColors
+		} );
+	}
+
 	/**
 	 * @inheritDoc
 	 */

+ 5 - 99
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -3,7 +3,6 @@ import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
-import { getLocalizedColorOptions, normalizeColorOptions } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
 import '../../theme/colorinputview.css';
 
 export default class ColorInputView extends View {
@@ -26,8 +25,7 @@ export default class ColorInputView extends View {
 
 		this.set( 'ariaDescribedById' );
 
-		this.set( 'options', options );
-
+		this._options = options;
 		this._dropdownView = this._createDropdownView( locale );
 		this._inputView = this._createInputTextView( locale );
 
@@ -142,10 +140,10 @@ export default class ColorInputView extends View {
 	}
 
 	_createColorGrid( locale ) {
-		const config = this.options && this.options.config;
-		const parsedOptions = this._getParsedColorGridOptions( locale, config );
-
-		const colorGrid = new ColorGrid( locale, parsedOptions );
+		const colorGrid = new ColorGrid( locale, {
+			colorDefinitions: this._options.colorDefinitions,
+			columns: this._options.columns
+		} );
 
 		colorGrid.on( 'execute', ( evtData, data ) => {
 			this.value = data.value;
@@ -157,96 +155,4 @@ export default class ColorInputView extends View {
 
 		return colorGrid;
 	}
-
-	_getParsedColorGridOptions( locale, config ) {
-		const defaultOptions = {
-			colors: [
-				{
-					color: 'hsl(0, 0%, 0%)',
-					label: 'Black'
-				},
-				{
-					color: 'hsl(0, 0%, 30%)',
-					label: 'Dim grey'
-				},
-				{
-					color: 'hsl(0, 0%, 60%)',
-					label: 'Grey'
-				},
-				{
-					color: 'hsl(0, 0%, 90%)',
-					label: 'Light grey'
-				},
-				{
-					color: 'hsl(0, 0%, 100%)',
-					label: 'White',
-					hasBorder: true
-				},
-				{
-					color: 'hsl(0, 75%, 60%)',
-					label: 'Red'
-				},
-				{
-					color: 'hsl(30, 75%, 60%)',
-					label: 'Orange'
-				},
-				{
-					color: 'hsl(60, 75%, 60%)',
-					label: 'Yellow'
-				},
-				{
-					color: 'hsl(90, 75%, 60%)',
-					label: 'Light green'
-				},
-				{
-					color: 'hsl(120, 75%, 60%)',
-					label: 'Green'
-				},
-				{
-					color: 'hsl(150, 75%, 60%)',
-					label: 'Aquamarine'
-				},
-				{
-					color: 'hsl(180, 75%, 60%)',
-					label: 'Turquoise'
-				},
-				{
-					color: 'hsl(210, 75%, 60%)',
-					label: 'Light blue'
-				},
-				{
-					color: 'hsl(240, 75%, 60%)',
-					label: 'Blue'
-				},
-				{
-					color: 'hsl(270, 75%, 60%)',
-					label: 'Purple'
-				}
-			],
-			columns: 5
-		};
-
-		let options = config;
-
-		if ( !config ) {
-			options = defaultOptions;
-		}
-
-		const colors = normalizeColorOptions( options.colors );
-		const columns = options.columns;
-
-		const localizedColors = getLocalizedColorOptions( locale, colors );
-		const parsedColors = localizedColors.map( item => ( {
-			color: item.model,
-			label: item.label,
-			options: {
-				hasBorder: item.hasBorder
-			}
-		} ) );
-
-		return {
-			colorDefinitions: parsedColors,
-			columns
-		};
-	}
 }

+ 141 - 0
packages/ckeditor5-table/src/ui/utils.js

@@ -11,6 +11,7 @@ import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpa
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
+import ColorInputView from './colorinputview';
 import { isColor, isLength } from '@ckeditor/ckeditor5-engine/src/view/styles/utils';
 import { getTableWidgetAncestor } from '../utils';
 import { findAncestor } from '../commands/utils';
@@ -233,3 +234,143 @@ export function fillToolbar( { view, icons, toolbar, labels, propertyName } ) {
 		toolbar.items.add( button );
 	}
 }
+
+/**
+ * TODO
+ */
+export const defaultColors = [
+	{
+		color: 'hsl(0, 0%, 0%)',
+		label: 'Black'
+	},
+	{
+		color: 'hsl(0, 0%, 30%)',
+		label: 'Dim grey'
+	},
+	{
+		color: 'hsl(0, 0%, 60%)',
+		label: 'Grey'
+	},
+	{
+		color: 'hsl(0, 0%, 90%)',
+		label: 'Light grey'
+	},
+	{
+		color: 'hsl(0, 0%, 100%)',
+		label: 'White',
+		hasBorder: true
+	},
+	{
+		color: 'hsl(0, 75%, 60%)',
+		label: 'Red'
+	},
+	{
+		color: 'hsl(30, 75%, 60%)',
+		label: 'Orange'
+	},
+	{
+		color: 'hsl(60, 75%, 60%)',
+		label: 'Yellow'
+	},
+	{
+		color: 'hsl(90, 75%, 60%)',
+		label: 'Light green'
+	},
+	{
+		color: 'hsl(120, 75%, 60%)',
+		label: 'Green'
+	},
+	{
+		color: 'hsl(150, 75%, 60%)',
+		label: 'Aquamarine'
+	},
+	{
+		color: 'hsl(180, 75%, 60%)',
+		label: 'Turquoise'
+	},
+	{
+		color: 'hsl(210, 75%, 60%)',
+		label: 'Light blue'
+	},
+	{
+		color: 'hsl(240, 75%, 60%)',
+		label: 'Blue'
+	},
+	{
+		color: 'hsl(270, 75%, 60%)',
+		label: 'Purple'
+	}
+];
+
+/**
+ * TODO
+ *
+ * @param {*} config
+ */
+export function colorConfigToColorGridDefinitions( config ) {
+	return config.map( item => ( {
+		color: item.model,
+		label: item.label,
+		options: {
+			hasBorder: item.hasBorder
+		}
+	} ) );
+}
+
+/**
+ * A helper that creates a labeled color input factory.
+ *
+ * It creates an instance of a {@link TODO color input text} that is
+ * logically related to a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in DOM.
+ *
+ * The helper does the following:
+ *
+ * * It sets input's `id` and `ariaDescribedById` attributes.
+ * * It binds input's `isReadOnly` to the labeled view.
+ * * It binds input's `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when user starts typing in the input..
+ *
+ * Usage:
+ *
+ *		const colorInputCreator = getLabeledColorInputCreator( {
+ *			colorDefinitions: [ ... ]
+ *		} );
+ *
+ *		const labeledInputView = new LabeledView( locale, colorInputCreator );
+ *		console.log( labeledInputView.view ); // An color input instance.
+ *
+ * @private
+ * @param options TODO
+ * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options.colorDefinitions TODO
+ * @returns {Function}
+ */
+export function getLabeledColorInputCreator( options ) {
+	// @param {module:ui/labeledview/labeledview~LabeledView} labeledView The instance of the labeled view.
+	// @param {String} viewUid An UID string that allows DOM logical connection between the
+	// {@link module:ui/labeledview/labeledview~LabeledView#labelView labeled view's label} and the input.
+	// @param {String} statusUid An UID string that allows DOM logical connection between the
+	// {@link module:ui/labeledview/labeledview~LabeledView#statusView labeled view's status} and the input.
+	// @returns {module:ui/inputtext/inputtextview~InputTextView} The input text view instance.
+	return ( labeledView, viewUid, statusUid ) => {
+		const inputView = new ColorInputView( labeledView.locale, {
+			colorDefinitions: colorConfigToColorGridDefinitions( options.colorDefinitions ),
+			columns: options.columns
+		} );
+
+		inputView.set( {
+			id: viewUid,
+			ariaDescribedById: statusUid
+		} );
+
+		inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
+		inputView.bind( 'errorText' ).to( labeledView );
+
+		inputView.on( 'input', () => {
+			// UX: Make the error text disappear and disable the error indicator as the user
+			// starts fixing the errors.
+			labeledView.errorText = null;
+		} );
+
+		return inputView;
+	};
+}

+ 2 - 2
packages/ckeditor5-table/theme/colorinputview.css

@@ -7,7 +7,7 @@
 	width: 100%;
 	display: flex;
 
-	& > .ck.ck-input-text {
+	& > input.ck.ck-input-text {
 		min-width: auto;
 		flex-grow: 1;
 
@@ -17,7 +17,7 @@
 		}
 	}
 
-	& > .ck.ck-dropdown {
+	& > div.ck.ck-dropdown {
 		min-width: auto;
 
 		/* This dropdown has no arrow but a color preview instead. */