8
0
Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
4b1cf3bb28

+ 74 - 0
packages/ckeditor5-table/src/table.js

@@ -63,3 +63,77 @@ export default class Table extends Plugin {
  *
  * @member {module:table/table~TableConfig} module:core/editor/editorconfig~EditorConfig#table
  */
+
+/**
+ * Available font colors defined as an array of strings or objects.
+ *
+ * The default value registers the following colors:
+ *
+ *		const fontColorConfig = {
+ *			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'
+ *				}
+ *			]
+ *		};
+ *
+ * @typedef {Array.<String|Object>} module:table/table~TableColorConfig
+ */

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

@@ -48,6 +48,8 @@ export default class TableCellProperties extends Plugin {
  *			}
  *		};
  *
+ * TODO: Mention {@link module:table/table~TableColorConfig}.
+ *
  * **Note**: The colors configuration does not impact the data loaded into the editor;
  * it is reflected only in the UI.
  *

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

@@ -64,8 +64,8 @@ export default class TableCellPropertiesView extends View {
 	/**
 	 * @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
+	 * @param {module:table/table~TableColorConfig} options.borderColors TODO
+	 * @param {module:table/table~TableColorConfig} options.backgroundColors TODO
 	 */
 	constructor( locale, options ) {
 		super( locale );
@@ -448,7 +448,7 @@ export default class TableCellPropertiesView extends View {
 	 */
 	_createBorderFields() {
 		const colorInputCreator = getLabeledColorInputCreator( {
-			colorDefinitions: this._options.borderColors,
+			colorConfig: this._options.borderColors,
 			columns: 5
 		} );
 		const locale = this.locale;
@@ -540,7 +540,7 @@ export default class TableCellPropertiesView extends View {
 		const locale = this.locale;
 		const t = this.t;
 		const colorInputCreator = getLabeledColorInputCreator( {
-			colorDefinitions: this._options.backgroundColors,
+			colorConfig: this._options.backgroundColors,
 			columns: 5
 		} );
 

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

@@ -12,7 +12,6 @@ import { addBorderRules } from '@ckeditor/ckeditor5-engine/src/view/styles/borde
 import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
 
 import TableEditing from './../tableediting';
-import { defaultColors } from '../ui/utils';
 import {
 	downcastAttributeToStyle,
 	downcastTableAttribute,
@@ -65,20 +64,6 @@ export default class TablePropertiesEditing extends Plugin {
 		return [ TableEditing ];
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		editor.config.define( 'table.tableProperties', {
-			border: {
-				colors: defaultColors
-			},
-			backgroundColors: defaultColors
-		} );
-	}
-
 	/**
 	 * @inheritDoc
 	 */

+ 16 - 1
packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -20,7 +20,8 @@ import {
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
 	colorFieldValidator,
-	lengthFieldValidator
+	lengthFieldValidator,
+	defaultColors
 } from '../ui/utils';
 import { debounce } from 'lodash-es';
 
@@ -52,6 +53,20 @@ export default class TablePropertiesUI extends Plugin {
 		return 'TablePropertiesUI';
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'table.tableProperties', {
+			border: {
+				colors: defaultColors
+			},
+			backgroundColors: defaultColors
+		} );
+	}
+
 	/**
 	 * @inheritDoc
 	 */

+ 23 - 31
packages/ckeditor5-table/src/ui/utils.js

@@ -303,57 +303,37 @@ export const defaultColors = [
 ];
 
 /**
- * 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.
+ * A function that helps creating labeled color inputs.
  *
- * It creates an instance of a {@link TODO color input text} that is
+ * For given options, it returns a function that creates an instance of {@link TODO color input text}
  * 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..
+ * * It sets color input's `id` and `ariaDescribedById` attributes.
+ * * It binds color input's `isReadOnly` to the labeled view.
+ * * It binds color input's `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when user starts typing in the color input.
  *
  * Usage:
  *
  *		const colorInputCreator = getLabeledColorInputCreator( {
- *			colorDefinitions: [ ... ]
+ *			colorConfig: [ ... ]
  *		} );
  *
  *		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
+ * @param options Color input options.
+ * @param {module:table/table~TableColorConfig} options.colorConfig TODO
+ * @param {Number} options.columns 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 ),
+			colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
 			columns: options.columns
 		} );
 
@@ -382,3 +362,15 @@ function isNumberString( value ) {
 
 	return !Number.isNaN( parsedValue ) && value === String( parsedValue );
 }
+
+// @param {Array.<Object>} colorConfig
+// @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}
+function colorConfigToColorGridDefinitions( colorConfig ) {
+	return colorConfig.map( item => ( {
+		color: item.model,
+		label: item.label,
+		options: {
+			hasBorder: item.hasBorder
+		}
+	} ) );
+}