tableui.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module table/tableui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { addListToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  10. import Model from '@ckeditor/ckeditor5-ui/src/model';
  11. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  12. import InsertTableView from './ui/inserttableview';
  13. import tableIcon from './../theme/icons/table.svg';
  14. import tableColumnIcon from './../theme/icons/table-column.svg';
  15. import tableRowIcon from './../theme/icons/table-row.svg';
  16. import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
  17. /**
  18. * The table UI plugin. It introduces:
  19. *
  20. * * The `'insertTable'` dropdown,
  21. * * The `'tableColumn'` dropdown,
  22. * * The `'tableRow'` dropdown,
  23. * * The `'mergeCell'` dropdown.
  24. *
  25. * The `'tableColumn'`, `'tableRow'`, `'mergeCell'` work best with {@link module:table/tabletoolbar~TableToolbar}.
  26. *
  27. * @extends module:core/plugin~Plugin
  28. */
  29. export default class TableUI extends Plugin {
  30. /**
  31. * @inheritDoc
  32. */
  33. init() {
  34. const editor = this.editor;
  35. const t = this.editor.t;
  36. editor.ui.componentFactory.add( 'insertTable', locale => {
  37. const command = editor.commands.get( 'insertTable' );
  38. const dropdownView = createDropdown( locale );
  39. dropdownView.bind( 'isEnabled' ).to( command );
  40. // Decorate dropdown's button.
  41. dropdownView.buttonView.set( {
  42. icon: tableIcon,
  43. label: t( 'Insert table' ),
  44. tooltip: true
  45. } );
  46. // Prepare custom view for dropdown's panel.
  47. const insertTableView = new InsertTableView( locale );
  48. dropdownView.panelView.children.add( insertTableView );
  49. insertTableView.delegate( 'execute' ).to( dropdownView );
  50. dropdownView.buttonView.on( 'open', () => {
  51. // Reset the chooser before showing it to the user.
  52. insertTableView.rows = 0;
  53. insertTableView.columns = 0;
  54. } );
  55. dropdownView.on( 'execute', () => {
  56. editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
  57. editor.editing.view.focus();
  58. } );
  59. return dropdownView;
  60. } );
  61. editor.ui.componentFactory.add( 'tableColumn', locale => {
  62. const options = [
  63. { commandName: 'setColumnHeader', label: t( 'Header column' ), bindIsActive: true },
  64. '|',
  65. { commandName: 'insertColumnBefore', label: t( 'Insert column before' ) },
  66. { commandName: 'insertColumnAfter', label: t( 'Insert column after' ) },
  67. { commandName: 'removeColumn', label: t( 'Delete column' ) }
  68. ];
  69. return this._prepareDropdown( 'Column', tableColumnIcon, options, locale );
  70. } );
  71. editor.ui.componentFactory.add( 'tableRow', locale => {
  72. const options = [
  73. { commandName: 'setRowHeader', label: t( 'Header row' ), bindIsActive: true },
  74. '|',
  75. { commandName: 'insertRowBelow', label: t( 'Insert row below' ) },
  76. { commandName: 'insertRowAbove', label: t( 'Insert row above' ) },
  77. { commandName: 'removeRow', label: t( 'Delete row' ) }
  78. ];
  79. return this._prepareDropdown( 'Row', tableRowIcon, options, locale );
  80. } );
  81. editor.ui.componentFactory.add( 'mergeCell', locale => {
  82. const options = [
  83. { commandName: 'mergeCellUp', label: t( 'Merge cell up' ) },
  84. { commandName: 'mergeCellRight', label: t( 'Merge cell right' ) },
  85. { commandName: 'mergeCellDown', label: t( 'Merge cell down' ) },
  86. { commandName: 'mergeCellLeft', label: t( 'Merge cell left' ) },
  87. '|',
  88. { commandName: 'splitCellVertically', label: t( 'Split cell vertically' ) },
  89. { commandName: 'splitCellHorizontally', label: t( 'Split cell horizontally' ) }
  90. ];
  91. return this._prepareDropdown( 'Merge cell', tableMergeCellIcon, options, locale );
  92. } );
  93. }
  94. /**
  95. * Creates dropdown view from set of options.
  96. *
  97. * @private
  98. * @param {String} buttonName Dropdown button name.
  99. * @param {String} icon Icon for dropdown button.
  100. * @param {Array.<module:table/tableui~DropdownOption>} options List of options for dropdown.
  101. * @param {module:utils/locale~Locale} locale
  102. * @returns {module:ui/dropdown/dropdownview~DropdownView}
  103. */
  104. _prepareDropdown( buttonName, icon, options, locale ) {
  105. const editor = this.editor;
  106. const dropdownView = createDropdown( locale );
  107. const commands = [];
  108. // Prepare dropdown list items for list dropdown.
  109. const dropdownItems = new Collection();
  110. for ( const option of options ) {
  111. addListOption( option, editor, commands, dropdownItems );
  112. }
  113. addListToDropdown( dropdownView, dropdownItems );
  114. // Decorate dropdown's button.
  115. dropdownView.buttonView.set( {
  116. label: buttonName,
  117. icon,
  118. tooltip: true
  119. } );
  120. // Make dropdown button disabled when all options are disabled.
  121. dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
  122. return areEnabled.some( isEnabled => isEnabled );
  123. } );
  124. this.listenTo( dropdownView, 'execute', evt => {
  125. editor.execute( evt.source.commandName );
  126. editor.editing.view.focus();
  127. } );
  128. return dropdownView;
  129. }
  130. }
  131. // Adds an option to a list view.
  132. //
  133. // @param {module:table/tableui~DropdownOption} option Configuration option.
  134. // @param {module:core/editor/editor~Editor} editor
  135. // @param {Array.<module:core/command~Command>} commands List of commands to update.
  136. // @param {module:utils/collection~Collection} dropdownItems Collection of dropdown items to update with given option.
  137. function addListOption( option, editor, commands, dropdownItems ) {
  138. const itemModel = new Model();
  139. if ( option === '|' ) {
  140. itemModel.set( {
  141. isSeparator: true
  142. } );
  143. } else {
  144. const { commandName, label, bindIsActive } = option;
  145. const command = editor.commands.get( commandName );
  146. commands.push( command );
  147. itemModel.set( {
  148. commandName,
  149. label
  150. } );
  151. itemModel.bind( 'isEnabled' ).to( command );
  152. if ( bindIsActive ) {
  153. itemModel.bind( 'isActive' ).to( command, 'value' );
  154. }
  155. }
  156. dropdownItems.add( itemModel );
  157. }
  158. /**
  159. * Object describing table dropdowns' items.
  160. *
  161. * @typedef {Object} module:table/tableui~DropdownOption
  162. * @private
  163. * @property {String} commandName A command name to execute for that option.
  164. * @property {String} label A dropdown item label.
  165. * @property {Boolean} bindIsActive If `true` will bind command's value to `isActive` dropdown item property.
  166. */