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

+ 0 - 77
packages/ckeditor5-table/src/tableediting.js

@@ -111,35 +111,6 @@ export default class TableEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).add( downcastTableHeadingRowsChange( { asWidget: true } ) );
 		conversion.for( 'dataDowncast' ).add( downcastTableHeadingRowsChange() );
 
-		// Table styles:
-		schema.extend( 'table', {
-			allowAttributes: [ 'border', 'background-color', 'width', 'height' ]
-		} );
-
-		schema.extend( 'tableRow', {
-			allowAttributes: [ 'height' ]
-		} );
-
-		schema.extend( 'tableCell', {
-			allowAttributes: [ 'border', 'background-color', 'padding', 'vertical-align', 'width', 'height' ]
-		} );
-
-		// Table attributes.
-		setupTableConversion( conversion, 'border' );
-		setupTableConversion( conversion, 'background-color' );
-		setupTableConversion( conversion, 'width' );
-		setupTableConversion( conversion, 'height' );
-
-		// Table row attributes.
-		setupConversion( conversion, 'height', 'tableRow' );
-
-		// Table cell attributes.
-		setupConversion( conversion, 'border', 'tableCell' );
-		setupConversion( conversion, 'background-color', 'tableCell' );
-		setupConversion( conversion, 'padding', 'tableCell' );
-		setupConversion( conversion, 'vertical-align', 'tableCell' );
-		setupConversion( conversion, 'width', 'tableCell' );
-
 		// Define all the commands.
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
 		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
@@ -279,51 +250,3 @@ export default class TableEditing extends Plugin {
 		};
 	}
 }
-
-function setupConversion( conversion, styleName, modelName ) {
-	// General upcast 'border' attribute (requires model border attribute to be allowed).
-	upcastAttribute( conversion, styleName, modelName );
-
-	// Downcast table cell only (table has own downcast converter).
-	conversion.for( 'downcast' ).attributeToAttribute( {
-		model: {
-			name: modelName,
-			key: styleName
-		},
-		view: modelAttributeValue => ( {
-			key: 'style',
-			value: {
-				[ styleName ]: modelAttributeValue
-			}
-		} )
-	} );
-}
-
-function upcastAttribute( conversion, styleName, modelName ) {
-	conversion.for( 'upcast' ).attributeToAttribute( {
-		view: {
-			styles: {
-				[ styleName ]: /[\s\S]+/
-			}
-		},
-		model: {
-			name: modelName,
-			key: styleName,
-			value: viewElement => viewElement.getNormalizedStyle( styleName )
-		}
-	} );
-}
-
-function setupTableConversion( conversion, styleName ) {
-	upcastAttribute( conversion, styleName, 'table' );
-
-	// Properly downcast table border attribute on <table> and not on <figure>.
-	conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( `attribute:${ styleName }:table`, ( evt, data, conversionApi ) => {
-		const { item, attributeNewValue } = data;
-		const { mapper, writer } = conversionApi;
-
-		const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
-
-		writer.setStyle( styleName, attributeNewValue, table );
-	} ) );
-}

+ 103 - 0
packages/ckeditor5-table/src/tablestyle.js

@@ -0,0 +1,103 @@
+/**
+ * @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/tablestyle
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+/**
+ * The table editing feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableStyle extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const model = editor.model;
+		const schema = model.schema;
+		const conversion = editor.conversion;
+
+		schema.extend( 'table', {
+			allowAttributes: [ 'border', 'background-color', 'width', 'height' ]
+		} );
+
+		schema.extend( 'tableRow', {
+			allowAttributes: [ 'height' ]
+		} );
+
+		schema.extend( 'tableCell', {
+			allowAttributes: [ 'border', 'background-color', 'padding', 'vertical-align', 'width', 'height' ]
+		} );
+
+		// Table attributes.
+		setupTableConversion( conversion, 'border' );
+		setupTableConversion( conversion, 'background-color' );
+		setupTableConversion( conversion, 'width' );
+		setupTableConversion( conversion, 'height' );
+
+		// Table row attributes.
+		setupConversion( conversion, 'height', 'tableRow' );
+
+		// Table cell attributes.
+		setupConversion( conversion, 'border', 'tableCell' );
+		setupConversion( conversion, 'background-color', 'tableCell' );
+		setupConversion( conversion, 'padding', 'tableCell' );
+		setupConversion( conversion, 'vertical-align', 'tableCell' );
+		setupConversion( conversion, 'width', 'tableCell' );
+	}
+}
+
+function setupConversion( conversion, styleName, modelName ) {
+	// General upcast 'border' attribute (requires model border attribute to be allowed).
+	upcastAttribute( conversion, styleName, modelName );
+
+	// Downcast table cell only (table has own downcast converter).
+	conversion.for( 'downcast' ).attributeToAttribute( {
+		model: {
+			name: modelName,
+			key: styleName
+		},
+		view: modelAttributeValue => ( {
+			key: 'style',
+			value: {
+				[ styleName ]: modelAttributeValue
+			}
+		} )
+	} );
+}
+
+function upcastAttribute( conversion, styleName, modelName ) {
+	conversion.for( 'upcast' ).attributeToAttribute( {
+		view: {
+			styles: {
+				[ styleName ]: /[\s\S]+/
+			}
+		},
+		model: {
+			name: modelName,
+			key: styleName,
+			value: viewElement => viewElement.getNormalizedStyle( styleName )
+		}
+	} );
+}
+
+function setupTableConversion( conversion, styleName ) {
+	upcastAttribute( conversion, styleName, 'table' );
+
+	// Properly downcast table border attribute on <table> and not on <figure>.
+	conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( `attribute:${ styleName }:table`, ( evt, data, conversionApi ) => {
+		const { item, attributeNewValue } = data;
+		const { mapper, writer } = conversionApi;
+
+		const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
+
+		writer.setStyle( styleName, attributeNewValue, table );
+	} ) );
+}

+ 2 - 1
packages/ckeditor5-table/tests/manual/tablestyles.js

@@ -10,6 +10,7 @@ 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 TableStyle from '../../src/tablestyle';
 
 const sourceElement = document.querySelector( '#editor' );
 const clonedSource = sourceElement.cloneNode( true );
@@ -18,7 +19,7 @@ document.querySelector( '#cloned-source' ).append( ...clonedSource.childNodes );
 
 ClassicEditor
 	.create( sourceElement, {
-		plugins: [ ArticlePluginSet, Alignment, Indent, IndentBlock ],
+		plugins: [ ArticlePluginSet, Alignment, Indent, IndentBlock, TableStyle ],
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],