I/6106: Introduced color pickers in the table and table cell property forms

src/table.js

@@ -63,3 +63,31 @@ export default class Table extends Plugin {
  *
  * @member {module:table/table~TableConfig} module:core/editor/editorconfig~EditorConfig#table
  */
+
+/**
+ * An array of colors definitions (either strings or objects).
+ *
+ * const colors = [
+ * {
+ * color: 'hsl(0, 0%, 60%)',
+ * label: 'Grey'
+ * },
+ * 'hsl(0, 0%, 80%)',
+ * {
+ * color: 'hsl(0, 0%, 90%)',
+ * label: 'Light grey'
+ * },
+ * {
+ * color: 'hsl(0, 0%, 100%)',
+ * label: 'White',
+ * hasBorder: true
+ * },
+ * '#FF0000'
+ * ]
+ *
+ * Usually used as a configuration parameter, for instance in
+ * {@link module:table/table~TableConfig#tableProperties `config.table.tableProperties`}
+ * or {@link module:table/table~TableConfig#tableCellProperties `config.table.tableCellProperties`}.
+ *
+ * @typedef {Array.<String|Object>} module:table/table~TableColorConfig
+ */

src/tablecellproperties.js

@@ -35,3 +35,45 @@ export default class TableCellProperties extends Plugin {
  return [ TableCellPropertiesEditing, TableCellPropertiesUI ];
  }
 }
+
+/**
+ * A configuration of the table cell properties user interface (balloon). It allows to define:
+ *
+ * * the color palette for the cell border color style field (`tableCellProperties.border.colors`),
+ * * the color palette for the cell background style field (`tableCellProperties.backgroundColors`).
+ *
+ * const tableConfig = {
+ * tableCellProperties: {
+ * border: {
+ * colors: [
+ * {
+ * color: 'hsl(0, 0%, 90%)',
+ * label: 'Light grey'
+ * },
+ * // ...
+ * ]
+ * },
+ * backgroundColors: [
+ * {
+ * color: 'hsl(120, 75%, 60%)',
+ * label: 'Green'
+ * },
+ * // ...
+ * ]
+ * }
+ * };
+ *
+ * **Note**: The configurations do not impact the data being loaded into the editor,
+ * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
+ * allowing users to pick colors in a more convenient way.
+ *
+ * The default color palettes for the cell background and the cell border are the same
+ * ({@link module:table/ui/utils~defaultColors check out their content}).
+ *
+ * Both color palette configurations must follow the
+ * {@link module:table/table~TableColorConfig table color configuration format}.
+ *
+ * Read more about configuring the table feature in {@link module:table/table~TableConfig}.
+ *
+ * @member {Object} module:table/table~TableConfig#tableCellProperties
+ */

src/tablecellproperties/tablecellpropertiesui.js

@@ -20,8 +20,13 @@ import {
  getLocalizedColorErrorText,
  getLocalizedLengthErrorText,
  colorFieldValidator,
- lengthFieldValidator
+ lengthFieldValidator,
+ defaultColors
 } from '../ui/utils';
+import {
+ getLocalizedColorOptions,
+ normalizeColorOptions
+} from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
 import { debounce } from 'lodash-es';
 
 const DEFAULT_BORDER_STYLE = 'none';
@@ -53,6 +58,20 @@ export default class TableCellPropertiesUI extends Plugin {
  return 'TableCellPropertiesUI';
  }
 
+ /**
+ * @inheritDoc
+ */
+ constructor( editor ) {
+ super( editor );
+
+ editor.config.define( 'table.tableCellProperties', {
+ border: {
+ colors: defaultColors
+ },
+ backgroundColors: defaultColors
+ } );
+ }
+
  /**
  * @inheritDoc
  */
@@ -120,7 +139,15 @@ export default class TableCellPropertiesUI extends Plugin {
  _createPropertiesView() {
  const editor = this.editor;
  const viewDocument = editor.editing.view.document;
- const view = new TableCellPropertiesView( editor.locale );
+ const config = editor.config.get( 'table.tableCellProperties' );
+ const borderColorsConfig = normalizeColorOptions( config.border.colors );
+ const localizedBorderColors = getLocalizedColorOptions( editor.locale, borderColorsConfig );
+ const backgroundColorsConfig = normalizeColorOptions( config.backgroundColors );
+ const localizedBackgroundColors = getLocalizedColorOptions( editor.locale, backgroundColorsConfig );
+ const view = new TableCellPropertiesView( editor.locale, {
+ borderColors: localizedBorderColors,
+ backgroundColors: localizedBackgroundColors
+ } );
  const t = editor.t;
 
  // Render the view so its #element is available for the clickOutsideHandler.

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';
 
@@ -57,9 +62,16 @@ 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 Additional configuration of the view.
+ * @param {module:table/table~TableColorConfig} options.borderColors A configuration of the border
+ * color palette used by the
+ * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#borderColorInput}.
+ * @param {module:table/table~TableColorConfig} options.backgroundColors A configuration of the background
+ * color palette used by the
+ * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
  */
- constructor( locale ) {
+ constructor( locale, options ) {
  super( locale );
 
  this.set( {
@@ -145,6 +157,13 @@ export default class TableCellPropertiesView extends View {
  verticalAlignment: 'middle'
  } );
 
+ /**
+ * Options passed to the view. See {@link #constructor} to learn more.
+ *
+ * @member {Object}
+ */
+ this.options = options;
+
  const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
  const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
  const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
@@ -193,15 +212,15 @@ export default class TableCellPropertiesView extends View {
  * An input that allows specifying the color of the table cell border.
  *
  * @readonly
- * @member {module:ui/inputtext/inputtextview~InputTextView}
+ * @member {module:table/ui/colorinputview~ColorInputView}
  */
  this.borderColorInput = borderColorInput;
 
  /**
  * An input that allows specifying the table cell background color.
  *
  * @readonly
- * @member {module:ui/inputtext/inputtextview~InputTextView}
+ * @member {module:table/ui/colorinputview~ColorInputView}
  */
  this.backgroundInput = this._createBackgroundField();
 
@@ -329,7 +348,7 @@ export default class TableCellPropertiesView extends View {
  operatorLabel,
  heightInput
  ],
- class: 'ck-table-cell-properties-form__dimensions-row'
+ class: 'ck-table-properties-form__dimensions-row'
  } ),
  // Padding row.
  new FormRowView( locale, {
@@ -431,6 +450,10 @@ export default class TableCellPropertiesView extends View {
  * @returns {Object.<String,module:ui/view~View>}
  */
  _createBorderFields() {
+ const colorInputCreator = getLabeledColorInputCreator( {
+ colorConfig: this.options.borderColors,
+ columns: 5
+ } );
  const locale = this.locale;
  const t = this.t;
 
@@ -483,15 +506,21 @@ export default class TableCellPropertiesView extends View {
 
  // -- Color ---------------------------------------------------
 
- const borderColorInput = new LabeledView( locale, createLabeledInputText );
- borderColorInput.label = t( 'Color' );
+ const borderColorInput = new LabeledView( locale, colorInputCreator );
+
+ borderColorInput.set( {
+ label: t( 'Color' ),
+ class: 'ck-table-form__border-color',
+ } );
+
  borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
+
  borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
  return value !== 'none';
  } );
 
  borderColorInput.view.on( 'input', () => {
- this.borderColor = borderColorInput.view.element.value;
+ this.borderColor = borderColorInput.view.value;
  } );
 
  // Reset the border color and width fields when style is "none".
@@ -522,8 +551,12 @@ export default class TableCellPropertiesView extends View {
  _createBackgroundField() {
  const locale = this.locale;
  const t = this.t;
+ const colorInputCreator = getLabeledColorInputCreator( {
+ colorConfig: this.options.backgroundColors,
+ columns: 5
+ } );
 
- const backgroundInput = new LabeledView( locale, createLabeledInputText );
+ const backgroundInput = new LabeledView( locale, colorInputCreator );
 
  backgroundInput.set( {
  label: t( 'Background' ),
@@ -532,7 +565,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;
@@ -562,7 +595,7 @@ export default class TableCellPropertiesView extends View {
 
  widthInput.set( {
  label: t( 'Width' ),
- class: 'ck-table-cell-properties-form__width',
+ class: 'ck-table-properties-form__width',
  } );
 
  widthInput.view.bind( 'value' ).to( this, 'width' );
@@ -591,7 +624,7 @@ export default class TableCellPropertiesView extends View {
 
  heightInput.set( {
  label: t( 'Height' ),
- class: 'ck-table-cell-properties-form__height',
+ class: 'ck-table-properties-form__height',
  } );
 
  heightInput.view.bind( 'value' ).to( this, 'height' );

src/tableproperties.js

@@ -36,3 +36,45 @@ export default class TableProperties extends Plugin {
  return [ TablePropertiesEditing, TablePropertiesUI ];
  }
 }
+
+/**
+ * A configuration of the table properties user interface (balloon). It allows to define:
+ *
+ * * the color palette for the table border color style field (`tableProperties.border.colors`),
+ * * the color palette for the table background style field (`tableProperties.backgroundColors`).
+ *
+ * const tableConfig = {
+ * tableProperties: {
+ * border: {
+ * colors: [
+ * {
+ * color: 'hsl(0, 0%, 90%)',
+ * label: 'Light grey'
+ * },
+ * // ...
+ * ]
+ * },
+ * backgroundColors: [
+ * {
+ * color: 'hsl(120, 75%, 60%)',
+ * label: 'Green'
+ * },
+ * // ...
+ * ]
+ * }
+ * };
+ *
+ * **Note**: The configurations do not impact the data being loaded into the editor,
+ * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
+ * allowing users to pick colors in a more convenient way.
+ *
+ * The default color palettes for the table background and the table border are the same
+ * ({@link module:table/ui/utils~defaultColors check out their content}).
+ *
+ * Both color palette configurations must follow the
+ * {@link module:table/table~TableColorConfig table color configuration format}.
+ *
+ * Read more about configuring the table feature in {@link module:table/table~TableConfig}.
+ *
+ * @member {Object} module:table/table~TableConfig#tableProperties
+ */

src/tableproperties/tablepropertiesui.js

@@ -20,8 +20,13 @@ import {
  getLocalizedColorErrorText,
  getLocalizedLengthErrorText,
  colorFieldValidator,
- lengthFieldValidator
+ lengthFieldValidator,
+ defaultColors,
 } from '../ui/utils';
+import {
+ getLocalizedColorOptions,
+ normalizeColorOptions
+} from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
 import { debounce } from 'lodash-es';
 
 const DEFAULT_BORDER_STYLE = 'none';
@@ -52,6 +57,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
  */
@@ -119,7 +138,15 @@ export default class TablePropertiesUI extends Plugin {
  _createPropertiesView() {
  const editor = this.editor;
  const viewDocument = editor.editing.view.document;
- const view = new TablePropertiesView( editor.locale );
+ const config = editor.config.get( 'table.tableProperties' );
+ const borderColorsConfig = normalizeColorOptions( config.border.colors );
+ const localizedBorderColors = getLocalizedColorOptions( editor.locale, borderColorsConfig );
+ const backgroundColorsConfig = normalizeColorOptions( config.backgroundColors );
+ const localizedBackgroundColors = getLocalizedColorOptions( editor.locale, backgroundColorsConfig );
+ const view = new TablePropertiesView( editor.locale, {
+ borderColors: localizedBorderColors,
+ backgroundColors: localizedBackgroundColors
+ } );
  const t = editor.t;
 
  // Render the view so its #element is available for the clickOutsideHandler.