瀏覽代碼

Merge branch 'master' into t/ckeditor5/1247

Aleksander Nowodzinski 7 年之前
父節點
當前提交
d4593eab04

+ 9 - 119
packages/ckeditor5-table/src/tabletoolbar.js

@@ -8,17 +8,13 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
-import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
-import { isTableWidgetSelected, isTableContentSelected } from './utils';
-import { repositionContextualBalloon, getBalloonPositionData } from './ui/utils';
-
-const balloonClassName = 'ck-toolbar-container';
+import { isTableContentSelected } from './utils';
+import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
 
 /**
- * The table toolbar class. It creates a table toolbar that shows up when the table widget is selected.
+ * The table toolbar class. It creates a table toolbar that shows up when the table content is selected.
  *
- * Instanecs of toolbar components (e.g. buttons) are created using the editor's
+ * Instances of toolbar components (e.g. buttons) are created using the editor's
  * {@link module:ui/componentfactory~ComponentFactory component factory}
  * based on the {@link module:table/table~TableConfig#toolbar `table.toolbar` configuration option}.
  *
@@ -31,7 +27,7 @@ export default class TableToolbar extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ContextualBalloon ];
+		return [ WidgetToolbarRepository ];
 	}
 
 	/**
@@ -41,123 +37,17 @@ export default class TableToolbar extends Plugin {
 		return 'TableToolbar';
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
-
-		// If the `BalloonToolbar` plugin is loaded, it should be disabled for tables
-		// which have their own toolbar to avoid duplication.
-		// https://github.com/ckeditor/ckeditor5-image/issues/110
-		if ( balloonToolbar ) {
-			this.listenTo( balloonToolbar, 'show', evt => {
-				if ( isTableWidgetSelected( editor.editing.view.document.selection ) ) {
-					evt.stop();
-				}
-			}, { priority: 'high' } );
-		}
-	}
-
 	/**
 	 * @inheritDoc
 	 */
 	afterInit() {
 		const editor = this.editor;
-		const toolbarConfig = editor.config.get( 'table.toolbar' );
-
-		// Don't add the toolbar if there is no configuration.
-		if ( !toolbarConfig || !toolbarConfig.length ) {
-			return;
-		}
+		const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
 
-		/**
-		 * A contextual balloon plugin instance.
-		 *
-		 * @private
-		 * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
-		 */
-		this._balloon = this.editor.plugins.get( 'ContextualBalloon' );
-
-		/**
-		 * A toolbar view instance used to display the buttons specific for table editing.
-		 *
-		 * @protected
-		 * @type {module:ui/toolbar/toolbarview~ToolbarView}
-		 */
-		this._toolbar = new ToolbarView();
-
-		// Add buttons to the toolbar.
-		this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );
-
-		// Show balloon panel each time table widget is selected.
-		this.listenTo( editor.ui, 'update', () => {
-			this._checkIsVisible();
+		widgetToolbarRepository.register( 'table', {
+			items: editor.config.get( 'table.toolbar' ) || [],
+			visibleWhen: isTableContentSelected,
 		} );
-
-		// There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
-		this.listenTo( editor.ui.focusTracker, 'change:isFocused', () => {
-			this._checkIsVisible();
-		}, { priority: 'low' } );
-	}
-
-	/**
-	 * Checks whether the toolbar should show up or hide depending on the current selection.
-	 *
-	 * @private
-	 */
-	_checkIsVisible() {
-		const editor = this.editor;
-		const viewSelection = editor.editing.view.document.selection;
-
-		if ( !editor.ui.focusTracker.isFocused || !isTableContentSelected( viewSelection ) ) {
-			this._hideToolbar();
-		} else {
-			this._showToolbar();
-		}
-	}
-
-	/**
-	 * Shows the {@link #_toolbar} in the {@link #_balloon}.
-	 *
-	 * @private
-	 */
-	_showToolbar() {
-		const editor = this.editor;
-
-		if ( this._isVisible ) {
-			repositionContextualBalloon( editor );
-		} else if ( !this._balloon.hasView( this._toolbar ) ) {
-			this._balloon.add( {
-				view: this._toolbar,
-				position: getBalloonPositionData( editor ),
-				balloonClassName
-			} );
-		}
-	}
-
-	/**
-	 * Removes the {@link #_toolbar} from the {@link #_balloon}.
-	 *
-	 * @private
-	 */
-	_hideToolbar() {
-		if ( !this._isVisible ) {
-			return;
-		}
-
-		this._balloon.remove( this._toolbar );
-	}
-
-	/**
-	 * Returns `true` when the {@link #_toolbar} is the visible view in the {@link #_balloon}.
-	 *
-	 * @private
-	 * @type {Boolean}
-	 */
-	get _isVisible() {
-		return this._balloon.visibleView == this._toolbar;
 	}
 }
 

+ 3 - 3
packages/ckeditor5-table/tests/tabletoolbar.js

@@ -17,7 +17,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'TableToolbar', () => {
-	let editor, model, doc, plugin, toolbar, balloon, editorElement;
+	let editor, model, doc, widgetToolbarRepository, toolbar, balloon, editorElement;
 
 	beforeEach( () => {
 		editorElement = global.document.createElement( 'div' );
@@ -34,8 +34,8 @@ describe( 'TableToolbar', () => {
 				editor = newEditor;
 				model = newEditor.model;
 				doc = model.document;
-				plugin = editor.plugins.get( TableToolbar );
-				toolbar = plugin._toolbar;
+				widgetToolbarRepository = editor.plugins.get( 'WidgetToolbarRepository' );
+				toolbar = widgetToolbarRepository._toolbars.get( 'table' ).view;
 				balloon = editor.plugins.get( 'ContextualBalloon' );
 			} );
 	} );

+ 1 - 1
packages/ckeditor5-table/theme/icons/table.svg

@@ -1 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="#333" fill-rule="evenodd"><path d="M2.5 3v13.5h15V3H19v13.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 16.5V3h1.5z"/><path d="M12 13H8v5H7v-5H1v-1h6V9H1V8h6V4.5H1v-1a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1h-6V8h6v1h-6v3h6v1h-6v5h-1v-5zm0-1V9H8v3h4zm0-4V4.5H8V8h4z" fill-rule="nonzero"/></g></svg>
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M3 6v3h4V6H3zm0 4v3h4v-3H3zm0 4v3h4v-3H3zm5 3h4v-3H8v3zm5 0h4v-3h-4v3zm4-4v-3h-4v3h4zm0-4V6h-4v3h4zm1.5 8a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 17V4c.222-.863 1.068-1.5 2-1.5h13c.932 0 1.778.637 2 1.5v13zM12 13v-3H8v3h4zm0-4V6H8v3h4z" fill="#333" fill-rule="evenodd"/></svg>