浏览代码

Add table cell properties config & add private helper to parse color grid options

panr 5 年之前
父节点
当前提交
93e8f6c5c6

+ 4 - 1
packages/ckeditor5-table/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.

+ 15 - 2
packages/ckeditor5-table/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,

+ 43 - 13
packages/ckeditor5-table/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
+		};
 	}
 }

+ 2 - 3
packages/ckeditor5-table/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 );
 	} );
-