tabletoolbar.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /**
  2. * @license Copyright (c) 2003-2019, 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 { getSelectedTableWidget, getTableWidgetAncestor } from './utils';
  10. import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
  11. /**
  12. * The table toolbar class. It creates toolbars for the table feature and its content (for now only for a table cell content).
  13. *
  14. * Table toolbar shows up when a table widget is selected. Its components (e.g. buttons) are created based on the
  15. * {@link module:table/table~TableConfig#toolbar `table.tableToolbar` configuration option}.
  16. *
  17. * Table content toolbar shows up when the selection is inside the content of a table. It creates its component based on the
  18. * {@link module:table/table~TableConfig#contentToolbar `table.contentToolbar` configuration option}.
  19. *
  20. * Note that the old {@link module:table/table~TableConfig#toolbar `table.toolbar` configuration option} is deprecated
  21. * and will be removed in the next major release.
  22. *
  23. * @extends module:core/plugin~Plugin
  24. */
  25. export default class TableToolbar extends Plugin {
  26. /**
  27. * @inheritDoc
  28. */
  29. static get requires() {
  30. return [ WidgetToolbarRepository ];
  31. }
  32. /**
  33. * @inheritDoc
  34. */
  35. static get pluginName() {
  36. return 'TableToolbar';
  37. }
  38. /**
  39. * @inheritDoc
  40. */
  41. afterInit() {
  42. const editor = this.editor;
  43. const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
  44. const tableContentToolbarItems = editor.config.get( 'table.contentToolbar' );
  45. const deprecatedTableContentToolbarItems = editor.config.get( 'table.toolbar' );
  46. const tableToolbarItems = editor.config.get( 'table.tableToolbar' );
  47. if ( deprecatedTableContentToolbarItems ) {
  48. // eslint-disable-next-line
  49. console.warn(
  50. '`config.table.toolbar` is deprecated and will be removed in the next major release.' +
  51. ' Use `config.table.contentToolbar` instead.'
  52. );
  53. }
  54. if ( tableContentToolbarItems || deprecatedTableContentToolbarItems ) {
  55. widgetToolbarRepository.register( 'tableContent', {
  56. items: tableContentToolbarItems || deprecatedTableContentToolbarItems,
  57. getRelatedElement: getTableWidgetAncestor
  58. } );
  59. }
  60. if ( tableToolbarItems ) {
  61. widgetToolbarRepository.register( 'table', {
  62. items: tableToolbarItems,
  63. getRelatedElement: getSelectedTableWidget
  64. } );
  65. }
  66. }
  67. }
  68. /**
  69. * Items to be placed in the table content toolbar.
  70. *
  71. * **Note:** This configuration option is deprecated! Use {@link module:table/table~TableConfig#contentToolbar} instead.
  72. *
  73. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  74. *
  75. * @deprecated
  76. * @member {Array.<String>} module:table/table~TableConfig#toolbar
  77. */
  78. /**
  79. * Items to be placed in the table content toolbar.
  80. * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar working.
  81. *
  82. * Assuming that you use the {@link module:table/tableui~TableUI} feature, the following toolbar items will be available
  83. * in {@link module:ui/componentfactory~ComponentFactory}:
  84. *
  85. * * `'tableRow'`,
  86. * * `'tableColumn'`,
  87. * * `'mergeTableCells'`.
  88. *
  89. * You can thus configure the toolbar like this:
  90. *
  91. * const tableConfig = {
  92. * contentToolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
  93. * };
  94. *
  95. * Of course, the same buttons can also be used in the
  96. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  97. *
  98. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  99. *
  100. * @member {Array.<String>} module:table/table~TableConfig#contentToolbar
  101. */
  102. /**
  103. * Items to be placed in the table toolbar.
  104. * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar working.
  105. *
  106. * You can thus configure the toolbar like this:
  107. *
  108. * const tableConfig = {
  109. * tableToolbar: [ 'blockQuote' ]
  110. * };
  111. *
  112. * Of course, the same buttons can also be used in the
  113. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  114. *
  115. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  116. *
  117. * @member {Array.<String>} module:table/table~TableConfig#tableToolbar
  118. */