tabletoolbar.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module table/tabletoolbar
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  10. import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
  11. import { isTableWidgetSelected, isTableContentSelected } from './utils';
  12. import { repositionContextualBalloon, getBalloonPositionData } from './ui/utils';
  13. const balloonClassName = 'ck-toolbar-container';
  14. /**
  15. * The table toolbar class. It creates a table toolbar that shows up when the table widget is selected.
  16. *
  17. * Toolbar components are created using the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}
  18. * based on the {@link module:core/editor/editor~Editor#config configuration} stored under `table.toolbar`.
  19. *
  20. * The toolbar uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
  21. *
  22. * @extends module:core/plugin~Plugin
  23. */
  24. export default class TableToolbar extends Plugin {
  25. /**
  26. * @inheritDoc
  27. */
  28. static get requires() {
  29. return [ ContextualBalloon ];
  30. }
  31. /**
  32. * @inheritDoc
  33. */
  34. static get pluginName() {
  35. return 'TableToolbar';
  36. }
  37. /**
  38. * @inheritDoc
  39. */
  40. init() {
  41. const editor = this.editor;
  42. const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
  43. // If the `BalloonToolbar` plugin is loaded, it should be disabled for tables
  44. // which have their own toolbar to avoid duplication.
  45. // https://github.com/ckeditor/ckeditor5-image/issues/110
  46. if ( balloonToolbar ) {
  47. this.listenTo( balloonToolbar, 'show', evt => {
  48. if ( isTableWidgetSelected( editor.editing.view.document.selection ) ) {
  49. evt.stop();
  50. }
  51. }, { priority: 'high' } );
  52. }
  53. }
  54. /**
  55. * @inheritDoc
  56. */
  57. afterInit() {
  58. const editor = this.editor;
  59. const toolbarConfig = editor.config.get( 'table.toolbar' );
  60. // Don't add the toolbar if there is no configuration.
  61. if ( !toolbarConfig || !toolbarConfig.length ) {
  62. return;
  63. }
  64. /**
  65. * A contextual balloon plugin instance.
  66. *
  67. * @private
  68. * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
  69. */
  70. this._balloon = this.editor.plugins.get( 'ContextualBalloon' );
  71. /**
  72. * A toolbar view instance used to display the buttons specific for table editing.
  73. *
  74. * @protected
  75. * @type {module:ui/toolbar/toolbarview~ToolbarView}
  76. */
  77. this._toolbar = new ToolbarView();
  78. // Add buttons to the toolbar.
  79. this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );
  80. // Show balloon panel each time table widget is selected.
  81. this.listenTo( editor.ui, 'update', () => {
  82. this._checkIsVisible();
  83. } );
  84. // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
  85. this.listenTo( editor.ui.focusTracker, 'change:isFocused', () => {
  86. this._checkIsVisible();
  87. }, { priority: 'low' } );
  88. }
  89. /**
  90. * Checks whether the toolbar should show up or hide depending on the current selection.
  91. *
  92. * @private
  93. */
  94. _checkIsVisible() {
  95. const editor = this.editor;
  96. const viewSelection = editor.editing.view.document.selection;
  97. if ( !editor.ui.focusTracker.isFocused || !isTableContentSelected( viewSelection ) ) {
  98. this._hideToolbar();
  99. } else {
  100. this._showToolbar();
  101. }
  102. }
  103. /**
  104. * Shows the {@link #_toolbar} in the {@link #_balloon}.
  105. *
  106. * @private
  107. */
  108. _showToolbar() {
  109. const editor = this.editor;
  110. if ( this._isVisible ) {
  111. repositionContextualBalloon( editor );
  112. } else if ( !this._balloon.hasView( this._toolbar ) ) {
  113. this._balloon.add( {
  114. view: this._toolbar,
  115. position: getBalloonPositionData( editor ),
  116. balloonClassName
  117. } );
  118. }
  119. }
  120. /**
  121. * Removes the {@link #_toolbar} from the {@link #_balloon}.
  122. *
  123. * @private
  124. */
  125. _hideToolbar() {
  126. if ( !this._isVisible ) {
  127. return;
  128. }
  129. this._balloon.remove( this._toolbar );
  130. }
  131. /**
  132. * Returns `true` when the {@link #_toolbar} is the visible view in the {@link #_balloon}.
  133. *
  134. * @private
  135. * @type {Boolean}
  136. */
  137. get _isVisible() {
  138. return this._balloon.visibleView == this._toolbar;
  139. }
  140. }
  141. /**
  142. * Items to be placed in the table toolbar.
  143. * This option is used by the {@link module:table/tabletoolbar~TableToolbar} feature.
  144. *
  145. * Assuming that you use the {@link module:table/tableui~TableUI} feature, the following toolbar items will be available
  146. * in {@link module:ui/componentfactory~ComponentFactory}:
  147. *
  148. * * `'tableRow'`,
  149. * * `'tableColumn'`,
  150. * * `'mergeTableCells'`.
  151. *
  152. * You can thus configure the toolbar like this:
  153. *
  154. * const tableConfig = {
  155. * toolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
  156. * };
  157. *
  158. * Of course, the same buttons can also be used in the
  159. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  160. *
  161. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  162. *
  163. * @member {Array.<String>} module:table/table~TableConfig#toolbar
  164. */