8
0

tablepropertiesediting.js 5.5 KB

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