8
0

tableui.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  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 SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
  11. import Model from '@ckeditor/ckeditor5-ui/src/model';
  12. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  13. import InsertTableView from './ui/inserttableview';
  14. import tableIcon from './../theme/icons/table.svg';
  15. import tableColumnIcon from './../theme/icons/table-column.svg';
  16. import tableRowIcon from './../theme/icons/table-row.svg';
  17. import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
  18. /**
  19. * The table UI plugin. It introduces:
  20. *
  21. * * The `'insertTable'` dropdown,
  22. * * The `'tableColumn'` dropdown,
  23. * * The `'tableRow'` dropdown,
  24. * * The `'mergeTableCells'` split button.
  25. *
  26. * The `'tableColumn'`, `'tableRow'` and `'mergeTableCells'` dropdowns work best with {@link module:table/tabletoolbar~TableToolbar}.
  27. *
  28. * @extends module:core/plugin~Plugin
  29. */
  30. export default class TableUI extends Plugin {
  31. /**
  32. * @inheritDoc
  33. */
  34. init() {
  35. const editor = this.editor;
  36. const t = this.editor.t;
  37. const contentLanguageDirection = editor.locale.contentLanguageDirection;
  38. const isContentLtr = contentLanguageDirection === 'ltr';
  39. editor.ui.componentFactory.add( 'insertTable', locale => {
  40. const command = editor.commands.get( 'insertTable' );
  41. const dropdownView = createDropdown( locale );
  42. dropdownView.bind( 'isEnabled' ).to( command );
  43. // Decorate dropdown's button.
  44. dropdownView.buttonView.set( {
  45. icon: tableIcon,
  46. label: t( 'Insert table' ),
  47. tooltip: true
  48. } );
  49. let insertTableView;
  50. dropdownView.on( 'change:isOpen', () => {
  51. if ( insertTableView ) {
  52. return;
  53. }
  54. // Prepare custom view for dropdown's panel.
  55. insertTableView = new InsertTableView( locale );
  56. dropdownView.panelView.children.add( insertTableView );
  57. insertTableView.delegate( 'execute' ).to( dropdownView );
  58. dropdownView.buttonView.on( 'open', () => {
  59. // Reset the chooser before showing it to the user.
  60. insertTableView.rows = 0;
  61. insertTableView.columns = 0;
  62. } );
  63. dropdownView.on( 'execute', () => {
  64. editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
  65. editor.editing.view.focus();
  66. } );
  67. } );
  68. return dropdownView;
  69. } );
  70. editor.ui.componentFactory.add( 'tableColumn', locale => {
  71. const options = [
  72. {
  73. type: 'switchbutton',
  74. model: {
  75. commandName: 'setTableColumnHeader',
  76. label: t( 'Header column' ),
  77. bindIsOn: true
  78. }
  79. },
  80. { type: 'separator' },
  81. {
  82. type: 'button',
  83. model: {
  84. commandName: isContentLtr ? 'insertTableColumnLeft' : 'insertTableColumnRight',
  85. label: t( 'Insert column left' )
  86. }
  87. },
  88. {
  89. type: 'button',
  90. model: {
  91. commandName: isContentLtr ? 'insertTableColumnRight' : 'insertTableColumnLeft',
  92. label: t( 'Insert column right' )
  93. }
  94. },
  95. {
  96. type: 'button',
  97. model: {
  98. commandName: 'removeTableColumn',
  99. label: t( 'Delete column' )
  100. }
  101. },
  102. {
  103. type: 'button',
  104. model: {
  105. commandName: 'selectTableColumn',
  106. label: t( 'Select column' )
  107. }
  108. }
  109. ];
  110. return this._prepareDropdown( t( 'Column' ), tableColumnIcon, options, locale );
  111. } );
  112. editor.ui.componentFactory.add( 'tableRow', locale => {
  113. const options = [
  114. {
  115. type: 'switchbutton',
  116. model: {
  117. commandName: 'setTableRowHeader',
  118. label: t( 'Header row' ),
  119. bindIsOn: true
  120. }
  121. },
  122. { type: 'separator' },
  123. {
  124. type: 'button',
  125. model: {
  126. commandName: 'insertTableRowAbove',
  127. label: t( 'Insert row above' )
  128. }
  129. },
  130. {
  131. type: 'button',
  132. model: {
  133. commandName: 'insertTableRowBelow',
  134. label: t( 'Insert row below' )
  135. }
  136. },
  137. {
  138. type: 'button',
  139. model: {
  140. commandName: 'removeTableRow',
  141. label: t( 'Delete row' )
  142. }
  143. },
  144. {
  145. type: 'button',
  146. model: {
  147. commandName: 'selectTableRow',
  148. label: t( 'Select row' )
  149. }
  150. }
  151. ];
  152. return this._prepareDropdown( t( 'Row' ), tableRowIcon, options, locale );
  153. } );
  154. editor.ui.componentFactory.add( 'mergeTableCells', locale => {
  155. const options = [
  156. {
  157. type: 'button',
  158. model: {
  159. commandName: 'mergeTableCellUp',
  160. label: t( 'Merge cell up' )
  161. }
  162. },
  163. {
  164. type: 'button',
  165. model: {
  166. commandName: isContentLtr ? 'mergeTableCellRight' : 'mergeTableCellLeft',
  167. label: t( 'Merge cell right' )
  168. }
  169. },
  170. {
  171. type: 'button',
  172. model: {
  173. commandName: 'mergeTableCellDown',
  174. label: t( 'Merge cell down' )
  175. }
  176. },
  177. {
  178. type: 'button',
  179. model: {
  180. commandName: isContentLtr ? 'mergeTableCellLeft' : 'mergeTableCellRight',
  181. label: t( 'Merge cell left' )
  182. }
  183. },
  184. { type: 'separator' },
  185. {
  186. type: 'button',
  187. model: {
  188. commandName: 'splitTableCellVertically',
  189. label: t( 'Split cell vertically' )
  190. }
  191. },
  192. {
  193. type: 'button',
  194. model: {
  195. commandName: 'splitTableCellHorizontally',
  196. label: t( 'Split cell horizontally' )
  197. }
  198. }
  199. ];
  200. return this._prepareMergeSplitButtonDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
  201. } );
  202. }
  203. /**
  204. * Creates a dropdown view from a set of options.
  205. *
  206. * @private
  207. * @param {String} label The dropdown button label.
  208. * @param {String} icon An icon for the dropdown button.
  209. * @param {Array.<module:ui/dropdown/utils~ListDropdownItemDefinition>} options The list of options for the dropdown.
  210. * @param {module:utils/locale~Locale} locale
  211. * @returns {module:ui/dropdown/dropdownview~DropdownView}
  212. */
  213. _prepareDropdown( label, icon, options, locale ) {
  214. const editor = this.editor;
  215. const dropdownView = createDropdown( locale );
  216. const commands = this._fillDropdownWithListOptions( dropdownView, options );
  217. // Decorate dropdown's button.
  218. dropdownView.buttonView.set( {
  219. label,
  220. icon,
  221. tooltip: true
  222. } );
  223. // Make dropdown button disabled when all options are disabled.
  224. dropdownView.bind( 'isEnabled' ).toMany( commands, 'isEnabled', ( ...areEnabled ) => {
  225. return areEnabled.some( isEnabled => isEnabled );
  226. } );
  227. this.listenTo( dropdownView, 'execute', evt => {
  228. editor.execute( evt.source.commandName );
  229. editor.editing.view.focus();
  230. } );
  231. return dropdownView;
  232. }
  233. /**
  234. * Creates a dropdown view with a {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} for
  235. * merge (and split)–related commands.
  236. *
  237. * @private
  238. * @param {String} label The dropdown button label.
  239. * @param {String} icon An icon for the dropdown button.
  240. * @param {Array.<module:ui/dropdown/utils~ListDropdownItemDefinition>} options The list of options for the dropdown.
  241. * @param {module:utils/locale~Locale} locale
  242. * @returns {module:ui/dropdown/dropdownview~DropdownView}
  243. */
  244. _prepareMergeSplitButtonDropdown( label, icon, options, locale ) {
  245. const editor = this.editor;
  246. const dropdownView = createDropdown( locale, SplitButtonView );
  247. const mergeCommandName = 'mergeTableCells';
  248. this._fillDropdownWithListOptions( dropdownView, options );
  249. dropdownView.buttonView.set( {
  250. label,
  251. icon,
  252. tooltip: true,
  253. isEnabled: true
  254. } );
  255. // Merge selected table cells when the main part of the split button is clicked.
  256. this.listenTo( dropdownView.buttonView, 'execute', () => {
  257. editor.execute( mergeCommandName );
  258. editor.editing.view.focus();
  259. } );
  260. // Execute commands for events coming from the list in the dropdown panel.
  261. this.listenTo( dropdownView, 'execute', evt => {
  262. editor.execute( evt.source.commandName );
  263. editor.editing.view.focus();
  264. } );
  265. return dropdownView;
  266. }
  267. /**
  268. * Injects a {@link module:ui/list/listview~ListView} into the passed dropdown with buttons
  269. * which execute editor commands as configured in passed options.
  270. *
  271. * @private
  272. * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
  273. * @param {Array.<module:ui/dropdown/utils~ListDropdownItemDefinition>} options The list of options for the dropdown.
  274. * @returns {Array.<module:core/command~Command>} Commands the list options are interacting with.
  275. */
  276. _fillDropdownWithListOptions( dropdownView, options ) {
  277. const editor = this.editor;
  278. const commands = [];
  279. const itemDefinitions = new Collection();
  280. for ( const option of options ) {
  281. addListOption( option, editor, commands, itemDefinitions );
  282. }
  283. addListToDropdown( dropdownView, itemDefinitions, editor.ui.componentFactory );
  284. return commands;
  285. }
  286. }
  287. // Adds an option to a list view.
  288. //
  289. // @param {module:table/tableui~DropdownOption} option A configuration option.
  290. // @param {module:core/editor/editor~Editor} editor
  291. // @param {Array.<module:core/command~Command>} commands The list of commands to update.
  292. // @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} itemDefinitions
  293. // A collection of dropdown items to update with the given option.
  294. function addListOption( option, editor, commands, itemDefinitions ) {
  295. const model = option.model = new Model( option.model );
  296. const { commandName, bindIsOn } = option.model;
  297. if ( option.type === 'button' || option.type === 'switchbutton' ) {
  298. const command = editor.commands.get( commandName );
  299. commands.push( command );
  300. model.set( { commandName } );
  301. model.bind( 'isEnabled' ).to( command );
  302. if ( bindIsOn ) {
  303. model.bind( 'isOn' ).to( command, 'value' );
  304. }
  305. }
  306. model.set( {
  307. withText: true
  308. } );
  309. itemDefinitions.add( option );
  310. }