Explorar el Código

Introduce table clipboard integration plugin.

Maciej Gołaszewski hace 6 años
padre
commit
28c7db5a62

+ 75 - 0
packages/ckeditor5-table/src/tableclipboard.js

@@ -0,0 +1,75 @@
+/**
+ * @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/tableclipboard
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import TableSelection from './tableselection';
+
+/**
+ * The table clipboard integration plugin.
+ *
+ * It introduces the ability to copy selected table cells.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableClipboard extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'TableClipboard';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ TableSelection ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const viewDocument = editor.editing.view.document;
+
+		const tableSelection = editor.plugins.get( 'TableSelection' );
+
+		this.listenTo( viewDocument, 'copy', createTableCopyHandler( tableSelection, editor ), { priority: 'normal' } );
+		this.listenTo( viewDocument, 'cut', createPreventTableCutHandler( tableSelection ), { priority: 'high' } );
+	}
+}
+
+function createPreventTableCutHandler( tableSelection ) {
+	return ( evt, data ) => {
+		if ( tableSelection.hasMultiCellSelection ) {
+			data.preventDefault();
+			evt.stop();
+		}
+	};
+}
+
+function createTableCopyHandler( tableSelection, editor ) {
+	return ( evt, data ) => {
+		if ( !tableSelection.hasMultiCellSelection ) {
+			return;
+		}
+
+		data.preventDefault();
+		evt.stop();
+
+		const content = editor.data.toView( tableSelection.getSelectionAsFragment() );
+
+		editor.editing.view.document.fire( 'clipboardOutput', {
+			dataTransfer: data.dataTransfer,
+			content,
+			method: evt.name
+		} );
+	};
+}

+ 0 - 32
packages/ckeditor5-table/src/tableselection.js

@@ -94,16 +94,12 @@ export default class TableSelection extends Plugin {
 	init() {
 	init() {
 		const editor = this.editor;
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
 		const selection = editor.model.document.selection;
-		const viewDocument = editor.editing.view.document;
 
 
 		this._tableUtils = editor.plugins.get( 'TableUtils' );
 		this._tableUtils = editor.plugins.get( 'TableUtils' );
 
 
 		setupTableSelectionHighlighting( editor, this );
 		setupTableSelectionHighlighting( editor, this );
 
 
 		selection.on( 'change:range', () => this._clearSelectionOnExternalChange( selection ) );
 		selection.on( 'change:range', () => this._clearSelectionOnExternalChange( selection ) );
-
-		this.listenTo( viewDocument, 'copy', createTableCopyHandler( this, editor ), { priority: 'normal' } );
-		this.listenTo( viewDocument, 'cut', createPreventTableCutHandler( this ), { priority: 'high' } );
 	}
 	}
 
 
 	/**
 	/**
@@ -278,31 +274,3 @@ export default class TableSelection extends Plugin {
 		}
 		}
 	}
 	}
 }
 }
-
-function createPreventTableCutHandler( tableSelection ) {
-	return ( evt, data ) => {
-		if ( tableSelection.hasMultiCellSelection ) {
-			data.preventDefault();
-			evt.stop();
-		}
-	};
-}
-
-function createTableCopyHandler( tableSelection, editor ) {
-	return ( evt, data ) => {
-		if ( !tableSelection.hasMultiCellSelection ) {
-			return;
-		}
-
-		data.preventDefault();
-		evt.stop();
-
-		const content = editor.data.toView( tableSelection.getSelectionAsFragment() );
-
-		editor.editing.view.document.fire( 'clipboardOutput', {
-			dataTransfer: data.dataTransfer,
-			content,
-			method: evt.name
-		} );
-	};
-}

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

@@ -11,10 +11,11 @@ import Table from '../../src/table';
 import TableToolbar from '../../src/tabletoolbar';
 import TableToolbar from '../../src/tabletoolbar';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import TableSelection from '../../src/tableselection';
 import TableSelection from '../../src/tableselection';
+import TableClipboard from '../../src/tableclipboard';
 
 
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection ],
+		plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard ],
 		toolbar: [
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],
 		],

+ 4 - 4
packages/ckeditor5-table/tests/tableselection-clipboard.js → packages/ckeditor5-table/tests/tableclipboard.js

@@ -8,24 +8,24 @@ import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtest
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 
 import TableEditing from '../src/tableediting';
 import TableEditing from '../src/tableediting';
-import TableSelection from '../src/tableselection';
 import { modelTable, viewTable } from './_utils/utils';
 import { modelTable, viewTable } from './_utils/utils';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment';
 import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment';
 import { stringify as stringifyView } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import { stringify as stringifyView } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
+import TableClipboard from '../src/tableclipboard';
 
 
-describe( 'table selection', () => {
+describe( 'table copy-paste', () => {
 	let editor, model, modelRoot, tableSelection, viewDocument;
 	let editor, model, modelRoot, tableSelection, viewDocument;
 
 
 	beforeEach( async () => {
 	beforeEach( async () => {
 		editor = await VirtualTestEditor.create( {
 		editor = await VirtualTestEditor.create( {
-			plugins: [ TableEditing, TableSelection, Paragraph, Clipboard ]
+			plugins: [ TableEditing, TableClipboard, Paragraph, Clipboard ]
 		} );
 		} );
 
 
 		model = editor.model;
 		model = editor.model;
 		modelRoot = model.document.getRoot();
 		modelRoot = model.document.getRoot();
 		viewDocument = editor.editing.view.document;
 		viewDocument = editor.editing.view.document;
-		tableSelection = editor.plugins.get( TableSelection );
+		tableSelection = editor.plugins.get( 'TableSelection' );
 
 
 		setModelData( model, modelTable( [
 		setModelData( model, modelTable( [
 			[ '00[]', '01', '02' ],
 			[ '00[]', '01', '02' ],