tablecellpropertiesediting.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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. /**
  24. * The table cell properties editing feature.
  25. *
  26. * Introduces table cells's model attributes and their conversion:
  27. *
  28. * - border: `borderStyle`, `borderColor` and `borderWidth`
  29. * - background color: `backgroundColor`
  30. * - cell padding: `padding`
  31. * - horizontal and vertical alignment: `horizontalAlignment`, `verticalAlignment`
  32. * - cell width & height: `width` & `height`
  33. *
  34. * @extends module:core/plugin~Plugin
  35. */
  36. export default class TableCellPropertiesEditing extends Plugin {
  37. /**
  38. * @inheritDoc
  39. */
  40. static get pluginName() {
  41. return 'TableCellPropertiesEditing';
  42. }
  43. /**
  44. * @inheritDoc
  45. */
  46. static get requires() {
  47. return [ TableEditing ];
  48. }
  49. /**
  50. * @inheritDoc
  51. */
  52. init() {
  53. const editor = this.editor;
  54. const schema = editor.model.schema;
  55. const conversion = editor.conversion;
  56. const viewDoc = editor.editing.view.document;
  57. viewDoc.addStyleProcessorRules( addBorderRules );
  58. enableBorderProperties( schema, conversion );
  59. editor.commands.add( 'tableCellBorderStyle', new TableCellBorderStyleCommand( editor ) );
  60. editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
  61. editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );
  62. enableHorizontalAlignmentProperty( schema, conversion );
  63. editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );
  64. enableProperty( schema, conversion, 'width', 'width' );
  65. editor.commands.add( 'tableCellWidth', new TableCellWidthCommand( editor ) );
  66. enableProperty( schema, conversion, 'height', 'height' );
  67. editor.commands.add( 'tableCellHeight', new TableCellHeightCommand( editor ) );
  68. viewDoc.addStyleProcessorRules( addPaddingRules );
  69. enableProperty( schema, conversion, 'padding', 'padding' );
  70. editor.commands.add( 'tableCellPadding', new TableCellPaddingCommand( editor ) );
  71. viewDoc.addStyleProcessorRules( addBackgroundRules );
  72. enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
  73. editor.commands.add( 'tableCellBackgroundColor', new TableCellBackgroundColorCommand( editor ) );
  74. enableProperty( schema, conversion, 'verticalAlignment', 'vertical-align' );
  75. editor.commands.add( 'tableCellVerticalAlignment', new TableCellVerticalAlignmentCommand( editor ) );
  76. }
  77. }
  78. // Enables `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table cells.
  79. //
  80. // @param {module:engine/model/schema~Schema} schema
  81. // @param {module:engine/conversion/conversion~Conversion} conversion
  82. function enableBorderProperties( schema, conversion ) {
  83. schema.extend( 'tableCell', {
  84. allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
  85. } );
  86. upcastBorderStyles( conversion, 'td' );
  87. upcastBorderStyles( conversion, 'th' );
  88. downcastAttributeToStyle( conversion, 'tableCell', 'borderStyle', 'border-style' );
  89. downcastAttributeToStyle( conversion, 'tableCell', 'borderColor', 'border-color' );
  90. downcastAttributeToStyle( conversion, 'tableCell', 'borderWidth', 'border-width' );
  91. }
  92. // Enables `'horizontalAlignment'` attribute for table cells.
  93. //
  94. // @param {module:engine/model/schema~Schema} schema
  95. // @param {module:engine/conversion/conversion~Conversion} conversion
  96. function enableHorizontalAlignmentProperty( schema, conversion ) {
  97. schema.extend( 'tableCell', {
  98. allowAttributes: [ 'horizontalAlignment' ]
  99. } );
  100. conversion.attributeToAttribute( {
  101. model: {
  102. name: 'tableCell',
  103. key: 'horizontalAlignment',
  104. values: [ 'left', 'right', 'center', 'justify' ]
  105. },
  106. view: {
  107. // TODO: controversial one but I don't know if we want "default".
  108. left: {
  109. key: 'style',
  110. value: {
  111. 'text-align': 'left'
  112. }
  113. },
  114. right: {
  115. key: 'style',
  116. value: {
  117. 'text-align': 'right'
  118. }
  119. },
  120. center: {
  121. key: 'style',
  122. value: {
  123. 'text-align': 'center'
  124. }
  125. },
  126. justify: {
  127. key: 'style',
  128. value: {
  129. 'text-align': 'justify'
  130. }
  131. }
  132. }
  133. } );
  134. }
  135. // Enables conversion for an attribute for simple view-model mappings.
  136. //
  137. // @param {String} modelAttribute
  138. // @param {String} styleName
  139. // @param {module:engine/model/schema~Schema} schema
  140. // @param {module:engine/conversion/conversion~Conversion} conversion
  141. function enableProperty( schema, conversion, modelAttribute, styleName ) {
  142. schema.extend( 'tableCell', {
  143. allowAttributes: [ modelAttribute ]
  144. } );
  145. upcastStyleToAttribute( conversion, 'tableCell', modelAttribute, styleName );
  146. downcastAttributeToStyle( conversion, 'tableCell', modelAttribute, styleName );
  147. }