tablecellpropertiesediting.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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/tablecellproperties/tablecellpropertiesediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { addBorderRules } from '@ckeditor/ckeditor5-engine/src/view/styles/border';
  10. import { addPaddingRules } from '@ckeditor/ckeditor5-engine/src/view/styles/padding';
  11. import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
  12. import { downcastAttributeToStyle, upcastStyleToAttribute, upcastBorderStyles } from './../converters/tableproperties';
  13. import TableEditing from './../tableediting';
  14. import TableCellPaddingCommand from './commands/tablecellpaddingcommand';
  15. import TableCellWidthCommand from './commands/tablecellwidthcommand';
  16. import TableCellHeightCommand from './commands/tablecellheightcommand';
  17. import TableCellBackgroundColorCommand from './commands/tablecellbackgroundcolorcommand';
  18. import TableCellVerticalAlignmentCommand from './commands/tablecellverticalalignmentcommand';
  19. import TableCellHorizontalAlignmentCommand from './commands/tablecellhorizontalalignmentcommand';
  20. import TableCellBorderStyleCommand from './commands/tablecellborderstylecommand';
  21. import TableCellBorderColorCommand from './commands/tablecellbordercolorcommand';
  22. import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand';
  23. const VALIGN_VALUES_REG_EXP = /^(top|bottom)$/;
  24. /**
  25. * The table cell properties editing feature.
  26. *
  27. * Introduces table cell model attributes and their conversion:
  28. *
  29. * - border: `borderStyle`, `borderColor` and `borderWidth`
  30. * - background color: `backgroundColor`
  31. * - cell padding: `padding`
  32. * - horizontal and vertical alignment: `horizontalAlignment`, `verticalAlignment`
  33. * - cell width and height: `width`, `height`
  34. *
  35. * It also registers commands used to manipulate the above attributes:
  36. *
  37. * - border: the `'tableCellBorderStyle'`, `'tableCellBorderColor'` and `'tableCellBorderWidth'` commands
  38. * - background color: the `'tableCellBackgroundColor'` command
  39. * - cell padding: the `'tableCellPadding'` command
  40. * - horizontal and vertical alignment: the `'tableCellHorizontalAlignment'` and `'tableCellVerticalAlignment'` commands
  41. * - width and height: the `'tableCellWidth'` and `'tableCellHeight'` commands
  42. *
  43. * @extends module:core/plugin~Plugin
  44. */
  45. export default class TableCellPropertiesEditing extends Plugin {
  46. /**
  47. * @inheritDoc
  48. */
  49. static get pluginName() {
  50. return 'TableCellPropertiesEditing';
  51. }
  52. /**
  53. * @inheritDoc
  54. */
  55. static get requires() {
  56. return [ TableEditing ];
  57. }
  58. /**
  59. * @inheritDoc
  60. */
  61. init() {
  62. const editor = this.editor;
  63. const schema = editor.model.schema;
  64. const conversion = editor.conversion;
  65. const locale = editor.locale;
  66. editor.data.addStyleProcessorRules( addBorderRules );
  67. enableBorderProperties( schema, conversion );
  68. editor.commands.add( 'tableCellBorderStyle', new TableCellBorderStyleCommand( editor ) );
  69. editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
  70. editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );
  71. enableHorizontalAlignmentProperty( schema, conversion, locale );
  72. editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );
  73. enableProperty( schema, conversion, 'width', 'width' );
  74. editor.commands.add( 'tableCellWidth', new TableCellWidthCommand( editor ) );
  75. enableProperty( schema, conversion, 'height', 'height' );
  76. editor.commands.add( 'tableCellHeight', new TableCellHeightCommand( editor ) );
  77. editor.data.addStyleProcessorRules( addPaddingRules );
  78. enableProperty( schema, conversion, 'padding', 'padding' );
  79. editor.commands.add( 'tableCellPadding', new TableCellPaddingCommand( editor ) );
  80. editor.data.addStyleProcessorRules( addBackgroundRules );
  81. enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
  82. editor.commands.add( 'tableCellBackgroundColor', new TableCellBackgroundColorCommand( editor ) );
  83. enableVerticalAlignmentProperty( schema, conversion );
  84. editor.commands.add( 'tableCellVerticalAlignment', new TableCellVerticalAlignmentCommand( editor ) );
  85. }
  86. }
  87. // Enables the `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table cells.
  88. //
  89. // @param {module:engine/model/schema~Schema} schema
  90. // @param {module:engine/conversion/conversion~Conversion} conversion
  91. function enableBorderProperties( schema, conversion ) {
  92. schema.extend( 'tableCell', {
  93. allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
  94. } );
  95. upcastBorderStyles( conversion, 'td' );
  96. upcastBorderStyles( conversion, 'th' );
  97. downcastAttributeToStyle( conversion, 'tableCell', 'borderStyle', 'border-style' );
  98. downcastAttributeToStyle( conversion, 'tableCell', 'borderColor', 'border-color' );
  99. downcastAttributeToStyle( conversion, 'tableCell', 'borderWidth', 'border-width' );
  100. }
  101. // Enables the `'horizontalAlignment'` attribute for table cells.
  102. //
  103. // @param {module:engine/model/schema~Schema} schema
  104. // @param {module:engine/conversion/conversion~Conversion} conversion
  105. // @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
  106. function enableHorizontalAlignmentProperty( schema, conversion, locale ) {
  107. schema.extend( 'tableCell', {
  108. allowAttributes: [ 'horizontalAlignment' ]
  109. } );
  110. const options = [ locale.contentLanguageDirection == 'rtl' ? 'left' : 'right', 'center', 'justify' ];
  111. conversion.attributeToAttribute( {
  112. model: {
  113. name: 'tableCell',
  114. key: 'horizontalAlignment',
  115. values: options
  116. },
  117. view: options.reduce( ( result, option ) => ( {
  118. ...result,
  119. [ option ]: {
  120. key: 'style',
  121. value: {
  122. 'text-align': option
  123. }
  124. }
  125. } ), {} )
  126. } );
  127. }
  128. // Enables the `'verticalAlignment'` attribute for table cells.
  129. //
  130. // @param {module:engine/model/schema~Schema} schema
  131. // @param {module:engine/conversion/conversion~Conversion} conversion
  132. function enableVerticalAlignmentProperty( schema, conversion ) {
  133. schema.extend( 'tableCell', {
  134. allowAttributes: [ 'verticalAlignment' ]
  135. } );
  136. conversion.attributeToAttribute( {
  137. model: {
  138. name: 'tableCell',
  139. key: 'verticalAlignment',
  140. values: [ 'top', 'bottom' ]
  141. },
  142. view: {
  143. top: {
  144. key: 'style',
  145. value: {
  146. 'vertical-align': 'top'
  147. }
  148. },
  149. bottom: {
  150. key: 'style',
  151. value: {
  152. 'vertical-align': 'bottom'
  153. }
  154. }
  155. }
  156. } );
  157. conversion.for( 'upcast' )
  158. // Support for backwards compatibility and pasting from other sources.
  159. .attributeToAttribute( {
  160. view: {
  161. attributes: {
  162. valign: VALIGN_VALUES_REG_EXP
  163. }
  164. },
  165. model: {
  166. name: 'tableCell',
  167. key: 'verticalAlignment',
  168. value: viewElement => viewElement.getAttribute( 'valign' )
  169. }
  170. } );
  171. }
  172. // Enables conversion for an attribute for simple view-model mappings.
  173. //
  174. // @param {String} modelAttribute
  175. // @param {String} styleName
  176. // @param {module:engine/model/schema~Schema} schema
  177. // @param {module:engine/conversion/conversion~Conversion} conversion
  178. function enableProperty( schema, conversion, modelAttribute, styleName ) {
  179. schema.extend( 'tableCell', {
  180. allowAttributes: [ modelAttribute ]
  181. } );
  182. upcastStyleToAttribute( conversion, 'tableCell', modelAttribute, styleName );
  183. downcastAttributeToStyle( conversion, 'tableCell', modelAttribute, styleName );
  184. }