Explorar o código

Other: Enable table widget in editing view.

Maciej Gołaszewski %!s(int64=7) %!d(string=hai) anos
pai
achega
1ed4916611

+ 2 - 1
packages/ckeditor5-table/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
     "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1",
-    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1"
+    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-wdiget": "^1.0.0-beta.2"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-editor-classic": "^1.0.0-beta.2",

+ 17 - 4
packages/ckeditor5-table/src/converters/downcast.js

@@ -10,15 +10,18 @@
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import TableWalker from './../tablewalker';
+import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
 
 /**
  * Model table element to view table element conversion helper.
  *
  * This conversion helper creates whole table element with child elements.
  *
+ * @param {Object} options
+ * @param {Boolean} options.asWidget If set to true the downcast conversion will produce widget.
  * @returns {Function} Conversion helper.
  */
-export function downcastInsertTable() {
+export function downcastInsertTable( options = {} ) {
 	return dispatcher => dispatcher.on( 'insert:table', ( evt, data, conversionApi ) => {
 		const table = data.item;
 
@@ -33,7 +36,17 @@ export function downcastInsertTable() {
 		// The <thead> and <tbody> elements are created on the fly when needed & cached by `getOrCreateTableSection()` function.
 		const tableSections = {};
 
-		const tableElement = conversionApi.writer.createContainerElement( 'table' );
+		const asWidget = options && options.asWidget;
+
+		const tableElement = asWidget ?
+			conversionApi.writer.createEditableElement( 'table' ) :
+			conversionApi.writer.createContainerElement( 'table' );
+
+		let tableWidget;
+
+		if ( asWidget ) {
+			tableWidget = toWidgetEditable( toWidget( tableElement, conversionApi.writer ), conversionApi.writer );
+		}
 
 		const tableWalker = new TableWalker( table );
 
@@ -54,8 +67,8 @@ export function downcastInsertTable() {
 
 		const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 
-		conversionApi.mapper.bindElements( table, tableElement );
-		conversionApi.writer.insert( viewPosition, tableElement );
+		conversionApi.mapper.bindElements( table, asWidget ? tableWidget : tableElement );
+		conversionApi.writer.insert( viewPosition, asWidget ? tableWidget : tableElement );
 	}, { priority: 'normal' } );
 }
 

+ 2 - 1
packages/ckeditor5-table/src/tableediting.js

@@ -53,7 +53,8 @@ export default class TablesEditing extends Plugin {
 
 		// Table conversion.
 		conversion.for( 'upcast' ).add( upcastTable() );
-		conversion.for( 'downcast' ).add( downcastInsertTable() );
+		conversion.for( 'editingDowncast' ).add( downcastInsertTable( { asWidget: true } ) );
+		conversion.for( 'dataDowncast' ).add( downcastInsertTable() );
 
 		// Insert conversion
 		conversion.for( 'downcast' ).add( downcastInsertRow() );

+ 7 - 6
packages/ckeditor5-table/src/tablewalker.js

@@ -125,8 +125,8 @@ export default class TableWalker {
 		 * @private
 		 */
 		this._tableData = {
-			headingRows: this.table.getAttribute( 'headingRows' ) || 0,
-			headingColumns: this.table.getAttribute( 'headingColumns' ) || 0
+			headingRows: parseInt( this.table.getAttribute( 'headingRows' ) || 0 ),
+			headingColumns: parseInt( this.table.getAttribute( 'headingColumns' ) || 0 )
 		};
 	}
 
@@ -192,8 +192,9 @@ export default class TableWalker {
 				cell,
 				row: this.row,
 				column: this.column,
-				rowspan: cell.getAttribute( 'rowspan' ) || 1,
-				colspan: cell.getAttribute( 'colspan' ) || 1,
+				// TODO: parseInt tests in editable?
+				rowspan: parseInt( cell.getAttribute( 'rowspan' ) || 1 ),
+				colspan: parseInt( cell.getAttribute( 'colspan' ) || 1 ),
 				table: this._tableData
 			}
 		};
@@ -206,8 +207,8 @@ export default class TableWalker {
 	 * @private
 	 */
 	_updateSpans() {
-		const colspan = this._previousCell.getAttribute( 'colspan' ) || 1;
-		const rowspan = this._previousCell.getAttribute( 'rowspan' ) || 1;
+		const colspan = parseInt( this._previousCell.getAttribute( 'colspan' ) || 1 );
+		const rowspan = parseInt( this._previousCell.getAttribute( 'rowspan' ) || 1 );
 
 		this._cellSpans.recordSpans( this.row, this.column, rowspan, colspan );