8
0
Maciej Gołaszewski 5 лет назад
Родитель
Сommit
6db2feb7f5

+ 0 - 270
packages/ckeditor5-table/src/tablestyleui.js

@@ -1,270 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module table/tablestyleui
- */
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import { findAncestor } from './commands/utils';
-import TableUI from './tableui';
-import tableMergeCellIcon from '../theme/icons/table-merge-cell.svg';
-
-/**
- * The table style UI feature.
- *
- * @extends module:core/plugin~Plugin
- */
-export default class TableStyleUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-
-		this._setupUI();
-
-		editor.ui.componentFactory.add( 'tableCellStyle', locale => {
-			const t = this.editor.t;
-
-			const options = [
-				{
-					type: 'ui',
-					name: 'borderWidth'
-				},
-				{
-					type: 'ui',
-					name: 'borderColor'
-				},
-				{
-					type: 'ui',
-					name: 'borderStyle'
-				},
-				{ type: 'separator' },
-				{
-					type: 'ui',
-					name: 'backgroundColor'
-				},
-				{
-					type: 'ui',
-					name: 'padding'
-				}
-			];
-
-			const dropdownView = editor.plugins.get( TableUI )._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
-
-			dropdownView.isEnabled = true;
-
-			return dropdownView;
-		} );
-	}
-
-	_setupUI() {
-		const editor = this.editor;
-		const model = editor.model;
-		const document = model.document;
-		const selection = document.selection;
-
-		const componentFactory = editor.ui.componentFactory;
-
-		componentFactory.add( 'borderWidth', locale => {
-			const button = new ButtonView( locale );
-
-			button.set( {
-				label: 'Border width',
-				icon: false,
-				tooltip: true,
-				withText: true
-			} );
-
-			button.on( 'execute', () => {
-				const firstPosition = selection.getFirstPosition();
-
-				const tableCell = findAncestor( 'tableCell', firstPosition );
-
-				const border = tableCell.getAttribute( 'border' );
-
-				let currentWidth;
-
-				if ( border ) {
-					const borderWidth = ( border && border.width ) || {};
-
-					// Unify width to one value. If different values are set default to top (or right, etc).
-					currentWidth = borderWidth.top || borderWidth.right || borderWidth.bottom || borderWidth.left;
-				}
-
-				// eslint-disable-next-line no-undef,no-alert
-				const newWidth = prompt( 'Set border width:', currentWidth || '' );
-
-				const parts = /^([0-9]*[.]?[0-9]*)([a-z]{2,4})?/.exec( newWidth );
-				const unit = parts[ 2 ];
-
-				const borderWidthToSet = parts[ 1 ] + ( unit || 'px' );
-
-				// TODO: Command, setting new value is dumb on `border` object.
-				editor.model.change( writer => {
-					writer.setAttribute( 'borderWidth', {
-						top: borderWidthToSet,
-						right: borderWidthToSet,
-						bottom: borderWidthToSet,
-						left: borderWidthToSet
-					}, tableCell );
-				} );
-			} );
-
-			return button;
-		} );
-
-		componentFactory.add( 'borderColor', locale => {
-			const button = new ButtonView( locale );
-
-			button.set( {
-				label: 'Border color',
-				icon: false,
-				tooltip: true,
-				withText: true
-			} );
-
-			button.on( 'execute', () => {
-				const firstPosition = selection.getFirstPosition();
-
-				const tableCell = findAncestor( 'tableCell', firstPosition );
-
-				const border = tableCell.getAttribute( 'border' );
-
-				let currentColor;
-
-				if ( border ) {
-					const borderColor = ( border && border.color ) || {};
-
-					// Unify width to one value. If different values are set default to top (or right, etc).
-					currentColor = borderColor.top || borderColor.right || borderColor.bottom || borderColor.left;
-				}
-
-				// eslint-disable-next-line no-undef,no-alert
-				const newColor = prompt( 'Set new border color:', currentColor || '' );
-
-				// TODO: Command, setting new value is dumb on `border` object.
-				editor.model.change( writer => {
-					writer.setAttribute( 'borderColor', {
-						top: newColor,
-						right: newColor,
-						bottom: newColor,
-						left: newColor
-					}, tableCell );
-				} );
-			} );
-
-			return button;
-		} );
-
-		componentFactory.add( 'borderStyle', locale => {
-			const button = new ButtonView( locale );
-
-			button.set( {
-				label: 'Border style',
-				icon: false,
-				tooltip: true,
-				withText: true
-			} );
-
-			button.on( 'execute', () => {
-				const firstPosition = selection.getFirstPosition();
-
-				const tableCell = findAncestor( 'tableCell', firstPosition );
-
-				const border = tableCell.getAttribute( 'border' );
-
-				let currentStyle;
-
-				if ( border ) {
-					const borderStyle = ( border && border.style ) || {};
-
-					// Unify width to one value. If different values are set default to top (or right, etc).
-					currentStyle = borderStyle.top || borderStyle.right || borderStyle.bottom || borderStyle.left;
-				}
-
-				// eslint-disable-next-line no-undef,no-alert
-				const newStyle = prompt( 'Set new border style:', currentStyle || '' );
-
-				// TODO: Command, setting new value is dumb on `border` object.
-				editor.model.change( writer => {
-					writer.setAttribute( 'borderStyle', {
-						top: newStyle,
-						right: newStyle,
-						bottom: newStyle,
-						left: newStyle
-					}, tableCell );
-				} );
-			} );
-
-			return button;
-		} );
-
-		componentFactory.add( 'backgroundColor', locale => {
-			const button = new ButtonView( locale );
-
-			button.set( {
-				label: 'Background color',
-				icon: false,
-				tooltip: true,
-				withText: true
-			} );
-
-			button.on( 'execute', () => {
-				const firstPosition = selection.getFirstPosition();
-
-				const tableCell = findAncestor( 'tableCell', firstPosition );
-
-				const backgroundColor = tableCell.getAttribute( 'backgroundColor' );
-
-				// eslint-disable-next-line no-undef,no-alert
-				const newColor = prompt( 'Set new background color:', backgroundColor || '' );
-
-				editor.model.change( writer => {
-					writer.setAttribute( 'backgroundColor', newColor, tableCell );
-				} );
-			} );
-
-			return button;
-		} );
-
-		componentFactory.add( 'padding', locale => {
-			const button = new ButtonView( locale );
-
-			button.set( {
-				label: 'Cell padding',
-				icon: false,
-				tooltip: true,
-				withText: true
-			} );
-
-			button.on( 'execute', () => {
-				const firstPosition = selection.getFirstPosition();
-
-				const tableCell = findAncestor( 'tableCell', firstPosition );
-
-				const padding = tableCell.getAttribute( 'padding' );
-
-				let currentPadding;
-
-				if ( padding ) {
-					// Unify width to one value. If different values are set default to top (or right, etc).
-					currentPadding = padding.top || padding.right || padding.bottom || padding.left;
-				}
-
-				// eslint-disable-next-line no-undef,no-alert
-				const newPadding = prompt( 'Set new padding:', currentPadding || '' );
-
-				editor.model.change( writer => {
-					writer.setAttribute( 'padding', newPadding, tableCell );
-				} );
-			} );
-
-			return button;
-		} );
-	}
-}

+ 3 - 4
packages/ckeditor5-table/tests/manual/tableproperties.js

@@ -10,10 +10,10 @@ import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articleplugi
 import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
 import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
 import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+
 import TableProperties from '../../src/tableproperties';
 import TableCellProperties from '../../src/tablecellproperties';
 import TableColumnRowProperties from '../../src/tablecolumnrowproperties';
-import TableStyleUI from '../../src/tablestyleui';
 
 const sourceElement = document.querySelector( '#editor' );
 const clonedSource = sourceElement.cloneNode( true );
@@ -22,13 +22,12 @@ document.querySelector( '#cloned-source' ).append( ...clonedSource.childNodes );
 
 ClassicEditor
 	.create( sourceElement, {
-		plugins: [ ArticlePluginSet, Alignment, Indent, IndentBlock, TableProperties, TableColumnRowProperties, TableCellProperties,
-			TableStyleUI ],
+		plugins: [ ArticlePluginSet, Alignment, Indent, IndentBlock, TableProperties, TableColumnRowProperties, TableCellProperties ],
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],
 		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellStyle' ],
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
 			tableToolbar: [ 'bold', 'italic' ]
 		}
 	} )