tableui.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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'` and `'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. const contentLanguageDirection = editor.locale.contentLanguageDirection;
  37. const isContentLtr = contentLanguageDirection === 'ltr';
  38. editor.ui.componentFactory.add( 'insertTable', locale => {
  39. const command = editor.commands.get( 'insertTable' );
  40. const dropdownView = createDropdown( locale );
  41. dropdownView.bind( 'isEnabled' ).to( command );
  42. // Decorate dropdown's button.
  43. dropdownView.buttonView.set( {
  44. icon: tableIcon,
  45. label: t( 'Insert table' ),
  46. tooltip: true
  47. } );
  48. let insertTableView;
  49. dropdownView.on( 'change:isOpen', () => {
  50. if ( insertTableView ) {
  51. return;
  52. }
  53. // Prepare custom view for dropdown's panel.
  54. insertTableView = new InsertTableView( locale );
  55. dropdownView.panelView.children.add( insertTableView );
  56. insertTableView.delegate( 'execute' ).to( dropdownView );
  57. dropdownView.buttonView.on( 'open', () => {
  58. // Reset the chooser before showing it to the user.
  59. insertTableView.rows = 0;
  60. insertTableView.columns = 0;
  61. } );
  62. dropdownView.on( 'execute', () => {
  63. editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
  64. editor.editing.view.focus();
  65. } );
  66. } );
  67. return dropdownView;
  68. } );
  69. editor.ui.componentFactory.add( 'tableColumn', locale => {
  70. const options = [
  71. {
  72. type: 'switchbutton',
  73. model: {
  74. commandName: 'setTableColumnHeader',
  75. label: t( 'Header column' ),
  76. bindIsOn: true
  77. }
  78. },
  79. { type: 'separator' },
  80. {
  81. type: 'button',
  82. model: {
  83. commandName: isContentLtr ? 'insertTableColumnLeft' : 'insertTableColumnRight',
  84. label: t( 'Insert column left' )
  85. }
  86. },
  87. {
  88. type: 'button',
  89. model: {
  90. commandName: isContentLtr ? 'insertTableColumnRight' : 'insertTableColumnLeft',
  91. label: t( 'Insert column right' )
  92. }
  93. },
  94. {
  95. type: 'button',
  96. model: {
  97. commandName: 'removeTableColumn',
  98. label: t( 'Delete column' )
  99. }
  100. }
  101. ];
  102. return this._prepareDropdown( t( 'Column' ), tableColumnIcon, options, locale );
  103. } );
  104. editor.ui.componentFactory.add( 'tableRow', locale => {
  105. const options = [
  106. {
  107. type: 'switchbutton',
  108. model: {
  109. commandName: 'setTableRowHeader',
  110. label: t( 'Header row' ),
  111. bindIsOn: true
  112. }
  113. },
  114. { type: 'separator' },
  115. {
  116. type: 'button',
  117. model: {
  118. commandName: 'insertTableRowBelow',
  119. label: t( 'Insert row below' )
  120. }
  121. },
  122. {
  123. type: 'button',
  124. model: {
  125. commandName: 'insertTableRowAbove',
  126. label: t( 'Insert row above' )
  127. }
  128. },
  129. {
  130. type: 'button',
  131. model: {
  132. commandName: 'removeTableRow',
  133. label: t( 'Delete row' )
  134. }
  135. }
  136. ];
  137. return this._prepareDropdown( t( 'Row' ), tableRowIcon, options, locale );
  138. } );
  139. editor.ui.componentFactory.add( 'mergeTableCells', locale => {
  140. const options = [
  141. {
  142. type: 'button',
  143. model: {
  144. commandName: 'mergeTableCellUp',
  145. label: t( 'Merge cell up' )
  146. }
  147. },
  148. {
  149. type: 'button',
  150. model: {
  151. commandName: isContentLtr ? 'mergeTableCellRight' : 'mergeTableCellLeft',
  152. label: t( 'Merge cell right' )
  153. }
  154. },
  155. {
  156. type: 'button',
  157. model: {
  158. commandName: 'mergeTableCellDown',
  159. label: t( 'Merge cell down' )
  160. }
  161. },
  162. {
  163. type: 'button',
  164. model: {
  165. commandName: isContentLtr ? 'mergeTableCellLeft' : 'mergeTableCellRight',
  166. label: t( 'Merge cell left' )
  167. }
  168. },
  169. { type: 'separator' },
  170. {
  171. type: 'button',
  172. model: {
  173. commandName: 'splitTableCellVertically',
  174. label: t( 'Split cell vertically' )
  175. }
  176. },
  177. {
  178. type: 'button',
  179. model: {
  180. commandName: 'splitTableCellHorizontally',
  181. label: t( 'Split cell horizontally' )
  182. }
  183. }
  184. ];
  185. return this._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
  186. } );
  187. }
  188. /**
  189. * Creates a dropdown view from a set of options.
  190. *
  191. * @private
  192. * @param {String} label The dropdown button label.
  193. * @param {String} icon An icon for the dropdown button.
  194. * @param {Array.<module:ui/dropdown/utils~ListDropdownItemDefinition>} options The list of options for the dropdown.
  195. * @param {module:utils/locale~Locale} locale
  196. * @returns {module:ui/dropdown/dropdownview~DropdownView}
  197. */
  198. _prepareDropdown( label, icon, options, locale ) {
  199. const editor = this.editor;
  200. const dropdownView = createDropdown( locale );
  201. const commands = [];
  202. // Prepare dropdown list items for list dropdown.
  203. const itemDefinitions = new Collection();
  204. for ( const option of options ) {
  205. addListOption( option, editor, commands, itemDefinitions );
  206. }
  207. addListToDropdown( dropdownView, itemDefinitions, editor.ui.componentFactory );
  208. // Decorate dropdown's button.
  209. dropdownView.buttonView.set( {
  210. label,
  211. icon,
  212. tooltip: true
  213. } );
  214. // Make dropdown button disabled when all options are disabled.
  215. dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
  216. return areEnabled.some( isEnabled => isEnabled );
  217. } );
  218. this.listenTo( dropdownView, 'execute', evt => {
  219. editor.execute( evt.source.commandName );
  220. editor.editing.view.focus();
  221. } );
  222. return dropdownView;
  223. }
  224. }
  225. // Adds an option to a list view.
  226. //
  227. // @param {module:table/tableui~DropdownOption} option A configuration option.
  228. // @param {module:core/editor/editor~Editor} editor
  229. // @param {Array.<module:core/command~Command>} commands The list of commands to update.
  230. // @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} itemDefinitions
  231. // A collection of dropdown items to update with the given option.
  232. function addListOption( option, editor, commands, itemDefinitions ) {
  233. const model = option.model = new Model( option.model );
  234. const { commandName, bindIsOn } = option.model;
  235. if ( option.type === 'button' || option.type === 'switchbutton' ) {
  236. const command = editor.commands.get( commandName );
  237. commands.push( command );
  238. model.set( { commandName } );
  239. model.bind( 'isEnabled' ).to( command );
  240. if ( bindIsOn ) {
  241. model.bind( 'isOn' ).to( command, 'value' );
  242. }
  243. }
  244. model.set( {
  245. withText: true
  246. } );
  247. itemDefinitions.add( option );
  248. }