From 42fc63cdf71de4478cdc062f835640a211f3c386 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 10 Feb 2020 14:19:51 +0100 Subject: [PATCH 01/34] Refactor setting borderColor in TableCellPropertiesView --- src/tablecellproperties/ui/tablecellpropertiesview.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index 0eed0afa..47ec06c6 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -35,6 +35,8 @@ 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 '@ckeditor/ckeditor5-ui/src/colorinputview/colorinputview'; + import '../../../theme/form.css'; import '../../../theme/tableform.css'; import '../../../theme/tablecellproperties.css'; @@ -419,15 +421,14 @@ export default class TableCellPropertiesView extends View { // -- Color --------------------------------------------------- - const borderColorInput = new LabeledView( locale, createLabeledInputText ); + const borderColorInput = new ColorInputView( locale ); borderColorInput.label = t( 'Color' ); - borderColorInput.view.bind( 'value' ).to( this, 'borderColor' ); + borderColorInput.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; + borderColorInput.on( 'setColor', ( evt, data ) => { + this.borderColor = data.value; } ); return { From 2d0595cb42d9bc26a564805b85b73f8642473206 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 10 Feb 2020 16:36:00 +0100 Subject: [PATCH 02/34] Code refactoring. --- .../ui/tablecellpropertiesview.js | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index 85c06d6a..b7873e63 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -485,14 +485,37 @@ export default class TableCellPropertiesView extends View { // -- Color --------------------------------------------------- - const borderColorInput = new ColorInputView( locale ); - borderColorInput.label = t( 'Color' ); + const borderColorInput = new LabeledView( locale, ( labeledView, viewUid, statusUid ) => { + const inputView = new ColorInputView( locale ); + + 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; + } ); + + 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.on( 'setColor', ( evt, data ) => { - this.borderColor = data.value; + borderColorInput.view.on( 'input', () => { + this.borderColor = borderColorInput.view.value; } ); return { From 7262d182ce6183a9cd4fedf6be248ada9d47c7a4 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 11 Feb 2020 09:58:38 +0100 Subject: [PATCH 03/34] Fix initial value binding for color input --- src/tablecellproperties/ui/tablecellpropertiesview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index b7873e63..d02f15c1 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -495,6 +495,7 @@ export default class TableCellPropertiesView extends View { 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 @@ -510,7 +511,6 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-form__border-color', } ); - borderColorInput.bind( 'value' ).to( this, 'borderColor' ); borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => { return value !== 'none'; } ); From 51fef8d55b0bd8ca547d21881767d3f0d3429234 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 11 Feb 2020 10:57:59 +0100 Subject: [PATCH 04/34] Move color input view to table --- .../ui/tablecellpropertiesview.js | 2 +- src/ui/colorinputview.js | 222 ++++++++++++++++++ theme/colorinputview.css | 28 +++ 3 files changed, 251 insertions(+), 1 deletion(-) create mode 100644 src/ui/colorinputview.js create mode 100644 theme/colorinputview.css diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index d02f15c1..40fc0781 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -35,7 +35,7 @@ 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 '@ckeditor/ckeditor5-ui/src/colorinputview/colorinputview'; +import ColorInputView from '../../ui/colorinputview'; import '../../../theme/form.css'; import '../../../theme/tableform.css'; diff --git a/src/ui/colorinputview.js b/src/ui/colorinputview.js new file mode 100644 index 00000000..109bf7af --- /dev/null +++ b/src/ui/colorinputview.js @@ -0,0 +1,222 @@ +import View from '@ckeditor/ckeditor5-ui/src/view'; +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 '../../theme/colorinputview.css'; + +export default class ColorInputView extends View { + // options? + constructor( locale ) { + super( locale ); + + const bind = this.bindTemplate; + + this.set( 'label' ); + + this.set( 'value' ); + + this.set( 'id' ); + + this.set( 'placeholder' ); + + this.set( 'isReadOnly', false ); + + this.set( 'errorText', null ); + + this.set( 'ariaDescribedById' ); + + this._dropdownView = this._createDropdownView( locale ); + this._inputView = this._createInputTextView( locale ); + + this.setTemplate( { + tag: 'div', + attributes: { + class: [ + 'ck', + 'ck-input-color-picker', + bind.if( 'hasError', 'ck-error' ) + ], + id: bind.to( 'id' ), + placeholder: bind.to( 'placeholder' ), + 'aria-invalid': bind.if( 'hasError', true ), + 'aria-describedby': bind.to( 'ariaDescribedById' ) + }, + children: [ + this._inputView, + this._dropdownView + ], + } ); + } + + focus() { + this._inputView.focus(); + } + + _createDropdownView( locale ) { + const bind = this.bindTemplate; + const colorGrid = this._createColorGrid(); + const dropdown = createDropdown( locale ); + const colorPreview = new View(); + const removeColorButton = this._createRemoveColorButton( locale ); + + colorPreview.setTemplate( { + tag: 'span', + attributes: { + class: [ + 'ck', + 'ck-dropdown__color-picker-preview' + ], + style: { + backgroundColor: bind.to( 'value' ) + } + } + } ); + + dropdown.buttonView.extendTemplate( { + attributes: { + class: 'ck-dropdown__color-picker-button' + }, + } ); + + dropdown.buttonView.children.add( colorPreview ); + + dropdown.panelPosition = 'sw'; + dropdown.panelView.children.add( removeColorButton ); + dropdown.panelView.children.add( colorGrid ); + dropdown.bind( 'isReadOnly' ).to( this ); + dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value ); + + return dropdown; + } + + _createInputTextView( locale ) { + const input = new InputTextView( locale ); + + input.bind( 'value' ).to( this ); + input.bind( 'isReadOnly' ).to( this ); + input.bind( 'placeholder' ).to( this ); + input.bind( 'hasError' ).to( this, 'errorText', value => !!value ); + + input.on( 'input', () => { + this.value = input.element.value; + } ); + + input.delegate( 'input' ).to( this ); + + return input; + } + + _createRemoveColorButton( locale ) { + const bind = this.bindTemplate; + const removeColor = new ButtonView( locale ); + const buttonLabel = new View(); + + removeColor.extendTemplate( { + attributes: { + class: [ + 'ck', + 'ck-dropdown__color-picker-remove-color' + ] + }, + } ); + + buttonLabel.setTemplate( { + tag: 'span', + children: [ + 'Remove color' + ], + on: { + click: bind.to( () => { + this.value = ''; + this._dropdownView.isOpen = false; + } ) + } + } ); + + removeColor.children.add( buttonLabel ); + + return removeColor; + } + + _createColorGrid( locale ) { + const options = { + colorDefinitions: [ + { + 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 + }; + + const colorGrid = new ColorGrid( locale, options ); + + colorGrid.on( 'execute', ( evtData, data ) => { + this.value = data.value; + this._dropdownView.isOpen = false; + this.fire( 'input' ); + } ); + + colorGrid.bind( 'selectedColor' ).to( this, 'value' ); + + return colorGrid; + } +} diff --git a/theme/colorinputview.css b/theme/colorinputview.css new file mode 100644 index 00000000..a65df6ba --- /dev/null +++ b/theme/colorinputview.css @@ -0,0 +1,28 @@ +/* + * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +.ck.ck-input-color-picker { + width: 100%; + display: flex; + + & > .ck.ck-input-text { + min-width: auto; + flex-grow: 1; + + &:active, + &:focus { + z-index: 1; + } + } + + & > .ck.ck-dropdown { + min-width: auto; + + /* This dropdown has no arrow but a color preview instead. */ + & > .ck-dropdown__color-picker-button .ck-dropdown__arrow { + display: none; + } + } +} From b8ec5e6f31a03e2f72b5b653a6cef1b7cf48a2c3 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 11 Feb 2020 13:06:33 +0100 Subject: [PATCH 05/34] Add table cell properties config & add private helper to parse color grid options --- .../tablecellpropertiesui.js | 5 +- .../ui/tablecellpropertiesview.js | 17 +++++- src/ui/colorinputview.js | 56 ++++++++++++++----- tests/manual/tableproperties.js | 5 +- 4 files changed, 64 insertions(+), 19 deletions(-) diff --git a/src/tablecellproperties/tablecellpropertiesui.js b/src/tablecellproperties/tablecellpropertiesui.js index a94b70d9..ed024177 100644 --- a/src/tablecellproperties/tablecellpropertiesui.js +++ b/src/tablecellproperties/tablecellpropertiesui.js @@ -120,7 +120,10 @@ 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 view = new TableCellPropertiesView( editor.locale, { + config, + } ); const t = editor.t; // Render the view so its #element is available for the clickOutsideHandler. diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index 40fc0781..f76e029a 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -61,9 +61,22 @@ export default class TableCellPropertiesView extends View { /** * @inheritDoc */ - constructor( locale ) { + constructor( locale, options ) { super( locale ); + /** + * A reference to the options object passed to the constructor. + * + * @readonly + * @member {module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI} + */ + + // 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; + const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields(); const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields(); const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields(); @@ -486,7 +499,7 @@ export default class TableCellPropertiesView extends View { // -- Color --------------------------------------------------- const borderColorInput = new LabeledView( locale, ( labeledView, viewUid, statusUid ) => { - const inputView = new ColorInputView( locale ); + const inputView = new ColorInputView( locale, this.options ); inputView.set( { id: viewUid, diff --git a/src/ui/colorinputview.js b/src/ui/colorinputview.js index 109bf7af..a3ddeebf 100644 --- a/src/ui/colorinputview.js +++ b/src/ui/colorinputview.js @@ -3,11 +3,11 @@ 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 { - // options? - constructor( locale ) { + constructor( locale, options ) { super( locale ); const bind = this.bindTemplate; @@ -26,6 +26,8 @@ export default class ColorInputView extends View { this.set( 'ariaDescribedById' ); + this.set( 'options', options ); + this._dropdownView = this._createDropdownView( locale ); this._inputView = this._createInputTextView( locale ); @@ -55,7 +57,7 @@ export default class ColorInputView extends View { _createDropdownView( locale ) { const bind = this.bindTemplate; - const colorGrid = this._createColorGrid(); + const colorGrid = this._createColorGrid( locale ); const dropdown = createDropdown( locale ); const colorPreview = new View(); const removeColorButton = this._createRemoveColorButton( locale ); @@ -140,8 +142,25 @@ export default class ColorInputView extends View { } _createColorGrid( locale ) { - const options = { - colorDefinitions: [ + const config = this.options && this.options.config; + const parsedOptions = this._getParsedColorGridOptions( locale, config ); + + const colorGrid = new ColorGrid( locale, parsedOptions ); + + colorGrid.on( 'execute', ( evtData, data ) => { + this.value = data.value; + this._dropdownView.isOpen = false; + this.fire( 'input' ); + } ); + + colorGrid.bind( 'selectedColor' ).to( this, 'value' ); + + return colorGrid; + } + + _getParsedColorGridOptions( locale, config ) { + const defaultOptions = { + colors: [ { color: 'hsl(0, 0%, 0%)', label: 'Black' @@ -207,16 +226,27 @@ export default class ColorInputView extends View { columns: 5 }; - const colorGrid = new ColorGrid( locale, options ); + let options = config; - colorGrid.on( 'execute', ( evtData, data ) => { - this.value = data.value; - this._dropdownView.isOpen = false; - this.fire( 'input' ); - } ); + if ( !config ) { + options = defaultOptions; + } - colorGrid.bind( 'selectedColor' ).to( this, 'value' ); + const colors = normalizeColorOptions( options.colors ); + const columns = options.columns; - return colorGrid; + const localizedColors = getLocalizedColorOptions( locale, colors ); + const parsedColors = localizedColors.map( item => ( { + color: item.model, + label: item.label, + options: { + hasBorder: item.hasBorder + } + } ) ); + + return { + colorDefinitions: parsedColors, + columns + }; } } diff --git a/tests/manual/tableproperties.js b/tests/manual/tableproperties.js index 58939228..cbf1935e 100644 --- a/tests/manual/tableproperties.js +++ b/tests/manual/tableproperties.js @@ -27,8 +27,8 @@ ClassicEditor ], table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ], - tableToolbar: [ 'bold', 'italic' ] - } + tableToolbar: [ 'bold', 'italic' ], + }, } ) .then( editor => { window.editor = editor; @@ -36,4 +36,3 @@ ClassicEditor .catch( err => { console.error( err.stack ); } ); - From 9c9415ac25c808ab03ce623882b9fe47d887e85a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 11 Feb 2020 14:58:05 +0100 Subject: [PATCH 06/34] Code refactoring. --- src/tablecellproperties.js | 20 +++ .../tablecellpropertiesediting.js | 15 ++ .../tablecellpropertiesui.js | 11 +- .../ui/tablecellpropertiesview.js | 63 ++++---- src/tableproperties.js | 20 +++ src/tableproperties/tablepropertiesediting.js | 15 ++ src/ui/colorinputview.js | 104 +------------ src/ui/utils.js | 141 ++++++++++++++++++ theme/colorinputview.css | 4 +- 9 files changed, 256 insertions(+), 137 deletions(-) diff --git a/src/tablecellproperties.js b/src/tablecellproperties.js index 692beb7e..0be9e279 100644 --- a/src/tablecellproperties.js +++ b/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 + */ diff --git a/src/tablecellproperties/tablecellpropertiesediting.js b/src/tablecellproperties/tablecellpropertiesediting.js index 5d8a5bbd..12136a1e 100644 --- a/src/tablecellproperties/tablecellpropertiesediting.js +++ b/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 */ diff --git a/src/tablecellproperties/tablecellpropertiesui.js b/src/tablecellproperties/tablecellpropertiesui.js index ed024177..6a6af8ad 100644 --- a/src/tablecellproperties/tablecellpropertiesui.js +++ b/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; diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index f76e029a..dee1b2f5 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/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.} options.borderColors TODO + * @param {Array.} 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.} */ _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; diff --git a/src/tableproperties.js b/src/tableproperties.js index bda740e5..e9eef831 100644 --- a/src/tableproperties.js +++ b/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 + */ diff --git a/src/tableproperties/tablepropertiesediting.js b/src/tableproperties/tablepropertiesediting.js index f3e0107b..fc5dd4d5 100644 --- a/src/tableproperties/tablepropertiesediting.js +++ b/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 */ diff --git a/src/ui/colorinputview.js b/src/ui/colorinputview.js index a3ddeebf..e52fec2f 100644 --- a/src/ui/colorinputview.js +++ b/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 - }; - } } diff --git a/src/ui/utils.js b/src/ui/utils.js index 8475995f..4eada8cb 100644 --- a/src/ui/utils.js +++ b/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.} 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; + }; +} diff --git a/theme/colorinputview.css b/theme/colorinputview.css index a65df6ba..68c9bc04 100644 --- a/theme/colorinputview.css +++ b/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. */ From 5ca187949cc665208171627afd50fc524909f8f3 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 11 Feb 2020 15:32:14 +0100 Subject: [PATCH 07/34] Docs, code refactoring. --- src/table.js | 74 +++++++++++++++++++ src/tablecellproperties.js | 2 + .../ui/tablecellpropertiesview.js | 8 +- src/tableproperties/tablepropertiesediting.js | 15 ---- src/tableproperties/tablepropertiesui.js | 17 ++++- src/ui/utils.js | 54 ++++++-------- 6 files changed, 119 insertions(+), 51 deletions(-) diff --git a/src/table.js b/src/table.js index e33d3706..0fb54ca8 100644 --- a/src/table.js +++ b/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.} module:table/table~TableColorConfig + */ diff --git a/src/tablecellproperties.js b/src/tablecellproperties.js index 0be9e279..5b417a2e 100644 --- a/src/tablecellproperties.js +++ b/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. * diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index dee1b2f5..3c835cf8 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/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.} options.borderColors TODO - * @param {Array.} 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 } ); diff --git a/src/tableproperties/tablepropertiesediting.js b/src/tableproperties/tablepropertiesediting.js index 51592c07..f398884c 100644 --- a/src/tableproperties/tablepropertiesediting.js +++ b/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 */ diff --git a/src/tableproperties/tablepropertiesui.js b/src/tableproperties/tablepropertiesui.js index b6cbaabc..5e70b91c 100644 --- a/src/tableproperties/tablepropertiesui.js +++ b/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 */ diff --git a/src/ui/utils.js b/src/ui/utils.js index b5a89aec..1cf72bd9 100644 --- a/src/ui/utils.js +++ b/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.} 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.} colorConfig +// @returns {Array.} +function colorConfigToColorGridDefinitions( colorConfig ) { + return colorConfig.map( item => ( { + color: item.model, + label: item.label, + options: { + hasBorder: item.hasBorder + } + } ) ); +} From 8c311ed46c50f00904ca35f5e6c80b82643b3307 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 11 Feb 2020 16:47:19 +0100 Subject: [PATCH 08/34] Added docs and tests for the ColorInputView. --- src/ui/colorinputview.js | 163 +++++++++++++++------ tests/ui/colorinputview.js | 281 +++++++++++++++++++++++++++++++++++++ 2 files changed, 402 insertions(+), 42 deletions(-) create mode 100644 tests/ui/colorinputview.js diff --git a/src/ui/colorinputview.js b/src/ui/colorinputview.js index e52fec2f..492a75c9 100644 --- a/src/ui/colorinputview.js +++ b/src/ui/colorinputview.js @@ -1,3 +1,12 @@ +/** + * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +/** + * @module table/ui/colorinputview + */ + import View from '@ckeditor/ckeditor5-ui/src/view'; import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; @@ -5,28 +14,92 @@ import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview'; import '../../theme/colorinputview.css'; +/** + * The color input view class. + * + * @private + * @extends module:ui/view~View + */ export default class ColorInputView extends View { + /** + * Creates an instance of the color input view. + * + * @param {module:utils/locale~Locale} locale The locale instance. + * @param {Object} options The input options. + * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options.colorDefinitions + * @param {Number} options.columns + */ constructor( locale, options ) { super( locale ); const bind = this.bindTemplate; - this.set( 'label' ); - - this.set( 'value' ); - + /** + * The value of the input. + * + * @observable + * @member {String} #value + * @default '' + */ + this.set( 'value', '' ); + + /** + * The `id` attribute of the input (i.e. to pair with a `