|
|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
|