tablepropertiesediting.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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/tableproperties/tablepropertiesediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { addBorderRules } from '@ckeditor/ckeditor5-engine/src/view/styles/border';
  10. import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
  11. import TableEditing from '../tableediting';
  12. import {
  13. downcastAttributeToStyle,
  14. downcastTableAttribute,
  15. upcastBorderStyles,
  16. upcastStyleToAttribute
  17. } from '../converters/tableproperties';
  18. import TableBackgroundColorCommand from './commands/tablebackgroundcolorcommand';
  19. import TableBorderColorCommand from './commands/tablebordercolorcommand';
  20. import TableBorderStyleCommand from './commands/tableborderstylecommand';
  21. import TableBorderWidthCommand from './commands/tableborderwidthcommand';
  22. import TableWidthCommand from './commands/tablewidthcommand';
  23. import TableHeightCommand from './commands/tableheightcommand';
  24. import TableAlignmentCommand from './commands/tablealignmentcommand';
  25. const ALIGN_VALUES_REG_EXP = /^(left|right)$/;
  26. /**
  27. * The table properties editing feature.
  28. *
  29. * Introduces table's model attributes and their conversion:
  30. *
  31. * - border: `borderStyle`, `borderColor` and `borderWidth`
  32. * - background color: `backgroundColor`
  33. * - horizontal alignment: `alignment`
  34. * - width & height: `width` & `height`
  35. *
  36. * It also registers commands used to manipulate the above attributes:
  37. *
  38. * - border: `'tableBorderStyle'`, `'tableBorderColor'` and `'tableBorderWidth'` commands
  39. * - background color: `'tableBackgroundColor'`
  40. * - horizontal alignment: `'tableAlignment'`
  41. * - width & height: `'tableWidth'` & `'tableHeight'`
  42. *
  43. * @extends module:core/plugin~Plugin
  44. */
  45. export default class TablePropertiesEditing extends Plugin {
  46. /**
  47. * @inheritDoc
  48. */
  49. static get pluginName() {
  50. return 'TablePropertiesEditing';
  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. editor.data.addStyleProcessorRules( addBorderRules );
  66. enableBorderProperties( schema, conversion );
  67. editor.commands.add( 'tableBorderColor', new TableBorderColorCommand( editor ) );
  68. editor.commands.add( 'tableBorderStyle', new TableBorderStyleCommand( editor ) );
  69. editor.commands.add( 'tableBorderWidth', new TableBorderWidthCommand( editor ) );
  70. enableAlignmentProperty( schema, conversion );
  71. editor.commands.add( 'tableAlignment', new TableAlignmentCommand( editor ) );
  72. enableTableToFigureProperty( schema, conversion, 'width', 'width' );
  73. editor.commands.add( 'tableWidth', new TableWidthCommand( editor ) );
  74. enableTableToFigureProperty( schema, conversion, 'height', 'height' );
  75. editor.commands.add( 'tableHeight', new TableHeightCommand( editor ) );
  76. editor.data.addStyleProcessorRules( addBackgroundRules );
  77. enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
  78. editor.commands.add( 'tableBackgroundColor', new TableBackgroundColorCommand( editor ) );
  79. }
  80. }
  81. // Enables `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table.
  82. //
  83. // @param {module:engine/model/schema~Schema} schema
  84. // @param {module:engine/conversion/conversion~Conversion} conversion
  85. function enableBorderProperties( schema, conversion ) {
  86. schema.extend( 'table', {
  87. allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
  88. } );
  89. upcastBorderStyles( conversion, 'table' );
  90. downcastTableAttribute( conversion, 'borderColor', 'border-color' );
  91. downcastTableAttribute( conversion, 'borderStyle', 'border-style' );
  92. downcastTableAttribute( conversion, 'borderWidth', 'border-width' );
  93. }
  94. // Enables the `'alignment'` attribute for table.
  95. //
  96. // @param {module:engine/model/schema~Schema} schema
  97. // @param {module:engine/conversion/conversion~Conversion} conversion
  98. function enableAlignmentProperty( schema, conversion ) {
  99. schema.extend( 'table', {
  100. allowAttributes: [ 'alignment' ]
  101. } );
  102. conversion
  103. .attributeToAttribute( {
  104. model: {
  105. name: 'table',
  106. key: 'alignment',
  107. values: [ 'left', 'right' ]
  108. },
  109. view: {
  110. left: {
  111. key: 'style',
  112. value: {
  113. float: 'left'
  114. }
  115. },
  116. right: {
  117. key: 'style',
  118. value: {
  119. float: 'right'
  120. }
  121. }
  122. },
  123. converterPriority: 'high'
  124. } );
  125. conversion.for( 'upcast' )
  126. // Support for backwards compatibility and pasting from other sources.
  127. .attributeToAttribute( {
  128. view: {
  129. attributes: {
  130. align: ALIGN_VALUES_REG_EXP
  131. }
  132. },
  133. model: {
  134. name: 'table',
  135. key: 'alignment',
  136. value: viewElement => viewElement.getAttribute( 'align' )
  137. }
  138. } );
  139. }
  140. // Enables conversion for an attribute for simple view-model mappings.
  141. //
  142. // @param {String} modelAttribute
  143. // @param {String} styleName
  144. // @param {module:engine/model/schema~Schema} schema
  145. // @param {module:engine/conversion/conversion~Conversion} conversion
  146. function enableProperty( schema, conversion, modelAttribute, styleName ) {
  147. schema.extend( 'table', {
  148. allowAttributes: [ modelAttribute ]
  149. } );
  150. upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
  151. downcastTableAttribute( conversion, modelAttribute, styleName );
  152. }
  153. // Enables conversion for an attribute for simple view (figure) to model (table) mappings.
  154. //
  155. // @param {String} modelAttribute
  156. // @param {String} styleName
  157. // @param {module:engine/model/schema~Schema} schema
  158. // @param {module:engine/conversion/conversion~Conversion} conversion
  159. function enableTableToFigureProperty( schema, conversion, modelAttribute, styleName ) {
  160. schema.extend( 'table', {
  161. allowAttributes: [ modelAttribute ]
  162. } );
  163. upcastStyleToAttribute( conversion, 'table', modelAttribute, styleName );
  164. downcastAttributeToStyle( conversion, 'table', modelAttribute, styleName );
  165. }