8
0

tablepropertiesui.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. /**
  2. * @license Copyright (c) 2003-2019, 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/tableproperties/tablepropertiesui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import { getTableWidgetAncestor } from '../utils';
  11. import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
  12. import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
  13. import TablePropertiesView from './ui/tablepropertiesview';
  14. import tableProperties from './../../theme/icons/table-properties.svg';
  15. import {
  16. repositionContextualBalloon,
  17. getBalloonTablePositionData,
  18. getLocalizedColorErrorText,
  19. getLocalizedLengthErrorText,
  20. colorFieldValidator,
  21. lengthFieldValidator
  22. } from '../ui/utils';
  23. import { debounce } from 'lodash-es';
  24. const DEFAULT_BORDER_STYLE = 'none';
  25. const DEFAULT_ALIGNMENT = '';
  26. const ERROR_TEXT_TIMEOUT = 500;
  27. /**
  28. * The table properties UI plugin. It introduces the `'tableProperties'` button
  29. * that opens a form allowing to specify visual styling of an entire table.
  30. *
  31. * It uses the
  32. * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  33. *
  34. * @extends module:core/plugin~Plugin
  35. */
  36. export default class TablePropertiesUI extends Plugin {
  37. /**
  38. * @inheritDoc
  39. */
  40. static get requires() {
  41. return [ ContextualBalloon ];
  42. }
  43. /**
  44. * @inheritDoc
  45. */
  46. static get pluginName() {
  47. return 'TablePropertiesUI';
  48. }
  49. /**
  50. * @inheritDoc
  51. */
  52. init() {
  53. const editor = this.editor;
  54. const t = editor.t;
  55. /**
  56. * The contextual balloon plugin instance.
  57. *
  58. * @private
  59. * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
  60. */
  61. this._balloon = editor.plugins.get( ContextualBalloon );
  62. /**
  63. * The properties form view displayed inside the balloon.
  64. *
  65. * @member {module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}
  66. */
  67. this.view = this._createPropertiesView();
  68. /**
  69. * The batch used to undo all changes made by the form (which are live, as the user types)
  70. * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
  71. *
  72. * @protected
  73. * @member {module:engine/model/batch~Batch}
  74. */
  75. this._undoStepBatch = null;
  76. editor.ui.componentFactory.add( 'tableProperties', locale => {
  77. const view = new ButtonView( locale );
  78. view.set( {
  79. label: t( 'Table properties' ),
  80. icon: tableProperties,
  81. tooltip: true
  82. } );
  83. this.listenTo( view, 'execute', () => this._showView() );
  84. return view;
  85. } );
  86. }
  87. /**
  88. * @inheritDoc
  89. */
  90. destroy() {
  91. super.destroy();
  92. // Destroy created UI components as they are not automatically destroyed.
  93. // See https://github.com/ckeditor/ckeditor5/issues/1341.
  94. this.view.destroy();
  95. }
  96. /**
  97. * Creates the {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} instance.
  98. *
  99. * @private
  100. * @returns {module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} The table
  101. * properties form view instance.
  102. */
  103. _createPropertiesView() {
  104. const editor = this.editor;
  105. const viewDocument = editor.editing.view.document;
  106. const view = new TablePropertiesView( editor.locale );
  107. const t = editor.t;
  108. // Render the view so its #element is available for the clickOutsideHandler.
  109. view.render();
  110. this.listenTo( view, 'submit', () => {
  111. this._hideView();
  112. } );
  113. this.listenTo( view, 'cancel', () => {
  114. // https://github.com/ckeditor/ckeditor5/issues/6180
  115. if ( this._undoStepBatch.operations.length ) {
  116. editor.execute( 'undo', this._undoStepBatch );
  117. }
  118. this._hideView();
  119. } );
  120. // Close the balloon on Esc key press.
  121. view.keystrokes.set( 'Esc', ( data, cancel ) => {
  122. this._hideView();
  123. cancel();
  124. } );
  125. // Reposition the balloon or hide the form if a table is no longer selected.
  126. this.listenTo( editor.ui, 'update', () => {
  127. if ( !getTableWidgetAncestor( viewDocument.selection ) ) {
  128. this._hideView();
  129. } else if ( this._isViewVisible ) {
  130. repositionContextualBalloon( editor, 'table' );
  131. }
  132. } );
  133. // Close on click outside of balloon panel element.
  134. clickOutsideHandler( {
  135. emitter: view,
  136. activator: () => this._isViewInBalloon,
  137. contextElements: [ this._balloon.view.element ],
  138. callback: () => this._hideView()
  139. } );
  140. const colorErrorText = getLocalizedColorErrorText( t );
  141. const lengthErrorText = getLocalizedLengthErrorText( t );
  142. // Create the "UI -> editor data" binding.
  143. // These listeners update the editor data (via table commands) when any observable
  144. // property of the view has changed. They also validate the value and display errors in the UI
  145. // when necessary. This makes the view live, which means the changes are
  146. // visible in the editing as soon as the user types or changes fields' values.
  147. view.on( 'change:borderStyle', this._getPropertyChangeCallback( 'tableBorderStyle' ) );
  148. view.on( 'change:borderColor', this._getValidatedPropertyChangeCallback( {
  149. viewField: view.borderColorInput,
  150. commandName: 'tableBorderColor',
  151. errorText: colorErrorText,
  152. validator: colorFieldValidator
  153. } ) );
  154. view.on( 'change:borderWidth', this._getValidatedPropertyChangeCallback( {
  155. viewField: view.borderWidthInput,
  156. commandName: 'tableBorderWidth',
  157. errorText: lengthErrorText,
  158. validator: lengthFieldValidator
  159. } ) );
  160. view.on( 'change:backgroundColor', this._getValidatedPropertyChangeCallback( {
  161. viewField: view.backgroundInput,
  162. commandName: 'tableBackgroundColor',
  163. errorText: colorErrorText,
  164. validator: colorFieldValidator
  165. } ) );
  166. view.on( 'change:width', this._getValidatedPropertyChangeCallback( {
  167. viewField: view.widthInput,
  168. commandName: 'tableWidth',
  169. errorText: lengthErrorText,
  170. validator: lengthFieldValidator
  171. } ) );
  172. view.on( 'change:height', this._getValidatedPropertyChangeCallback( {
  173. viewField: view.heightInput,
  174. commandName: 'tableHeight',
  175. errorText: lengthErrorText,
  176. validator: lengthFieldValidator
  177. } ) );
  178. view.on( 'change:alignment', this._getPropertyChangeCallback( 'tableAlignment' ) );
  179. return view;
  180. }
  181. /**
  182. * In this method the "editor data -> UI" binding is happening.
  183. *
  184. * When executed, this method obtains selected table property values from various table commands
  185. * and passes them to the {@link #view}.
  186. *
  187. * This way, the UI stays up–to–date with the editor data.
  188. *
  189. * @private
  190. */
  191. _fillViewFormFromCommandValues() {
  192. const commands = this.editor.commands;
  193. this.view.set( {
  194. borderStyle: commands.get( 'tableBorderStyle' ).value || DEFAULT_BORDER_STYLE,
  195. borderColor: commands.get( 'tableBorderColor' ).value || '',
  196. borderWidth: commands.get( 'tableBorderWidth' ).value || '',
  197. backgroundColor: commands.get( 'tableBackgroundColor' ).value || '',
  198. width: commands.get( 'tableWidth' ).value || '',
  199. height: commands.get( 'tableHeight' ).value || '',
  200. alignment: commands.get( 'tableAlignment' ).value || DEFAULT_ALIGNMENT,
  201. } );
  202. }
  203. /**
  204. * Shows the {@link #view} in the {@link #_balloon}.
  205. *
  206. * **Note**: Each time a view is shown, the new {@link #_undoStepBatch} is created that contains
  207. * all changes made to the document when the view is visible, allowing a single undo step
  208. * for all of them.
  209. *
  210. * @protected
  211. */
  212. _showView() {
  213. const editor = this.editor;
  214. this._balloon.add( {
  215. view: this.view,
  216. position: getBalloonTablePositionData( editor )
  217. } );
  218. // Create a new batch. Clicking "Cancel" will undo this batch.
  219. this._undoStepBatch = editor.model.createBatch();
  220. // Update the view with the model values.
  221. this._fillViewFormFromCommandValues();
  222. // Basic a11y.
  223. this.view.focus();
  224. }
  225. /**
  226. * Removes the {@link #view} from the {@link #_balloon}.
  227. *
  228. * @protected
  229. */
  230. _hideView() {
  231. if ( !this._isViewInBalloon ) {
  232. return;
  233. }
  234. const editor = this.editor;
  235. this.stopListening( editor.ui, 'update' );
  236. // Blur any input element before removing it from DOM to prevent issues in some browsers.
  237. // See https://github.com/ckeditor/ckeditor5/issues/1501.
  238. this.view.saveButtonView.focus();
  239. this._balloon.remove( this.view );
  240. // Make sure the focus is not lost in the process by putting it directly
  241. // into the editing view.
  242. this.editor.editing.view.focus();
  243. }
  244. /**
  245. * Returns `true` when the {@link #view} is the visible in the {@link #_balloon}.
  246. *
  247. * @private
  248. * @type {Boolean}
  249. */
  250. get _isViewVisible() {
  251. return this._balloon.visibleView === this.view;
  252. }
  253. /**
  254. * Returns `true` when the {@link #view} is in the {@link #_balloon}.
  255. *
  256. * @private
  257. * @type {Boolean}
  258. */
  259. get _isViewInBalloon() {
  260. return this._balloon.hasView( this.view );
  261. }
  262. /**
  263. * Creates a callback that when executed upon {@link #view view's} property change
  264. * executes a related editor command with the new property value.
  265. *
  266. * @private
  267. * @param {String} commandName
  268. * @returns {Function}
  269. */
  270. _getPropertyChangeCallback( commandName ) {
  271. return ( evt, propertyName, newValue ) => {
  272. this.editor.execute( commandName, {
  273. value: newValue,
  274. batch: this._undoStepBatch
  275. } );
  276. };
  277. }
  278. /**
  279. * Creates a callback that when executed upon {@link #view view's} property change:
  280. * * executes a related editor command with the new property value if the value is valid,
  281. * * or sets the error text next to the invalid field, if the value did not pass the validation.
  282. *
  283. * @private
  284. * @param {Object} options
  285. * @param {String} options.commandName
  286. * @param {module:ui/view~View} options.viewField
  287. * @param {Function} options.validator
  288. * @param {String} options.errorText
  289. * @returns {Function}
  290. */
  291. _getValidatedPropertyChangeCallback( { commandName, viewField, validator, errorText } ) {
  292. const setErrorTextDebounced = debounce( () => {
  293. viewField.errorText = errorText;
  294. }, ERROR_TEXT_TIMEOUT );
  295. return ( evt, propertyName, newValue ) => {
  296. setErrorTextDebounced.cancel();
  297. if ( validator( newValue ) ) {
  298. this.editor.execute( commandName, {
  299. value: newValue,
  300. batch: this._undoStepBatch
  301. } );
  302. viewField.errorText = null;
  303. } else {
  304. setErrorTextDebounced();
  305. }
  306. };
  307. }
  308. }