8
0

tableui.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. /**
  2. * @license Copyright (c) 2003-2019, 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 `'mergeTableCells'` dropdown.
  24. *
  25. * The `'tableColumn'`, `'tableRow'`, `'mergeTableCells'` dropdowns 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. {
  64. type: 'switchbutton',
  65. model: {
  66. commandName: 'setTableColumnHeader',
  67. label: t( 'Header column' ),
  68. bindIsOn: true
  69. }
  70. },
  71. { type: 'separator' },
  72. {
  73. type: 'button',
  74. model: {
  75. commandName: 'insertTableColumnLeft',
  76. label: t( 'Insert column left' )
  77. }
  78. },
  79. {
  80. type: 'button',
  81. model: {
  82. commandName: 'insertTableColumnRight',
  83. label: t( 'Insert column right' )
  84. }
  85. },
  86. {
  87. type: 'button',
  88. model: {
  89. commandName: 'removeTableColumn',
  90. label: t( 'Delete column' )
  91. }
  92. }
  93. ];
  94. return this._prepareDropdown( t( 'Column' ), tableColumnIcon, options, locale );
  95. } );
  96. editor.ui.componentFactory.add( 'tableRow', locale => {
  97. const options = [
  98. {
  99. type: 'switchbutton',
  100. model: {
  101. commandName: 'setTableRowHeader',
  102. label: t( 'Header row' ),
  103. bindIsOn: true
  104. }
  105. },
  106. { type: 'separator' },
  107. {
  108. type: 'button',
  109. model: {
  110. commandName: 'insertTableRowBelow',
  111. label: t( 'Insert row below' )
  112. }
  113. },
  114. {
  115. type: 'button',
  116. model: {
  117. commandName: 'insertTableRowAbove',
  118. label: t( 'Insert row above' )
  119. }
  120. },
  121. {
  122. type: 'button',
  123. model: {
  124. commandName: 'removeTableRow',
  125. label: t( 'Delete row' )
  126. }
  127. }
  128. ];
  129. return this._prepareDropdown( t( 'Row' ), tableRowIcon, options, locale );
  130. } );
  131. editor.ui.componentFactory.add( 'mergeTableCells', locale => {
  132. const options = [
  133. {
  134. type: 'button',
  135. model: {
  136. commandName: 'mergeTableCellUp',
  137. label: t( 'Merge cell up' )
  138. }
  139. },
  140. {
  141. type: 'button',
  142. model: {
  143. commandName: 'mergeTableCellRight',
  144. label: t( 'Merge cell right' )
  145. }
  146. },
  147. {
  148. type: 'button',
  149. model: {
  150. commandName: 'mergeTableCellDown',
  151. label: t( 'Merge cell down' )
  152. }
  153. },
  154. {
  155. type: 'button',
  156. model: {
  157. commandName: 'mergeTableCellLeft',
  158. label: t( 'Merge cell left' )
  159. }
  160. },
  161. { type: 'separator' },
  162. {
  163. type: 'button',
  164. model: {
  165. commandName: 'splitTableCellVertically',
  166. label: t( 'Split cell vertically' )
  167. }
  168. },
  169. {
  170. type: 'button',
  171. model: {
  172. commandName: 'splitTableCellHorizontally',
  173. label: t( 'Split cell horizontally' )
  174. }
  175. }
  176. ];
  177. return this._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
  178. } );
  179. }
  180. /**
  181. * Creates a dropdown view from the set of options.
  182. *
  183. * @private
  184. * @param {String} label The dropdown button label.
  185. * @param {String} icon An icon for the dropdown button.
  186. * @param {Array.<module:ui/dropdown/utils~ListDropdownItemDefinition>} options The list of options for the dropdown.
  187. * @param {module:utils/locale~Locale} locale
  188. * @returns {module:ui/dropdown/dropdownview~DropdownView}
  189. */
  190. _prepareDropdown( label, icon, options, locale ) {
  191. const editor = this.editor;
  192. const dropdownView = createDropdown( locale );
  193. const commands = [];
  194. // Prepare dropdown list items for list dropdown.
  195. const itemDefinitions = new Collection();
  196. for ( const option of options ) {
  197. addListOption( option, editor, commands, itemDefinitions );
  198. }
  199. addListToDropdown( dropdownView, itemDefinitions );
  200. // Decorate dropdown's button.
  201. dropdownView.buttonView.set( {
  202. label,
  203. icon,
  204. tooltip: true
  205. } );
  206. // Make dropdown button disabled when all options are disabled.
  207. dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
  208. return areEnabled.some( isEnabled => isEnabled );
  209. } );
  210. this.listenTo( dropdownView, 'execute', evt => {
  211. editor.execute( evt.source.commandName );
  212. editor.editing.view.focus();
  213. } );
  214. return dropdownView;
  215. }
  216. }
  217. // Adds an option to a list view.
  218. //
  219. // @param {module:table/tableui~DropdownOption} option Configuration option.
  220. // @param {module:core/editor/editor~Editor} editor
  221. // @param {Array.<module:core/command~Command>} commands List of commands to update.
  222. // @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} itemDefinitions
  223. // Collection of dropdown items to update with given option.
  224. function addListOption( option, editor, commands, itemDefinitions ) {
  225. const model = option.model = new Model( option.model );
  226. const { commandName, bindIsOn } = option.model;
  227. if ( option.type !== 'separator' ) {
  228. const command = editor.commands.get( commandName );
  229. commands.push( command );
  230. model.set( { commandName } );
  231. model.bind( 'isEnabled' ).to( command );
  232. if ( bindIsOn ) {
  233. model.bind( 'isOn' ).to( command, 'value' );
  234. }
  235. }
  236. model.set( {
  237. withText: true
  238. } );
  239. itemDefinitions.add( option );
  240. }