tabletoolbar.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  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. 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 `ToolbarView` 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.editing.view, 'render', () => {
  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. if ( !editor.ui.focusTracker.isFocused ) {
  97. this._hideToolbar();
  98. } else {
  99. const viewSelection = editor.editing.view.document.selection;
  100. if ( isTableContentSelected( viewSelection ) ) {
  101. this._showToolbar();
  102. } else {
  103. this._hideToolbar();
  104. }
  105. }
  106. }
  107. /**
  108. * Shows the {@link #_toolbar} in the {@link #_balloon}.
  109. *
  110. * @private
  111. */
  112. _showToolbar() {
  113. const editor = this.editor;
  114. if ( this._isVisible ) {
  115. repositionContextualBalloon( editor );
  116. } else {
  117. if ( !this._balloon.hasView( this._toolbar ) ) {
  118. this._balloon.add( {
  119. view: this._toolbar,
  120. position: getBalloonPositionData( editor ),
  121. balloonClassName
  122. } );
  123. }
  124. }
  125. }
  126. /**
  127. * Removes the {@link #_toolbar} from the {@link #_balloon}.
  128. *
  129. * @private
  130. */
  131. _hideToolbar() {
  132. if ( !this._isVisible ) {
  133. return;
  134. }
  135. this._balloon.remove( this._toolbar );
  136. }
  137. /**
  138. * Returns `true` when the {@link #_toolbar} is the visible view in the {@link #_balloon}.
  139. *
  140. * @private
  141. * @type {Boolean}
  142. */
  143. get _isVisible() {
  144. return this._balloon.visibleView == this._toolbar;
  145. }
  146. }
  147. /**
  148. * Items to be placed in the table toolbar.
  149. * This option is used by the {@link module:table/tabletoolbar~TableToolbar} feature.
  150. *
  151. * Assuming that you use the {@link module:table/tableui~TableUI} feature the following toolbar items will be available
  152. * in {@link module:ui/componentfactory~ComponentFactory}:
  153. *
  154. * * `'tableRow'`,
  155. * * `'tableColumn'`,
  156. * * `'mergeCell'`,
  157. * * `'splitCell'`,
  158. *
  159. * so you can configure the toolbar like this:
  160. *
  161. * const tableConfig = {
  162. * toolbar: [ 'tableRow', 'tableColumn', 'mergeCell', 'splitCell' ]
  163. * };
  164. *
  165. * Of course, the same buttons can also be used in the
  166. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  167. *
  168. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  169. *
  170. * @member {Array.<String>} module:table~TableConfig#toolbar
  171. */