8
0

tableproperties.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { downcastTableAttribute, upcastAttribute, upcastBorderStyles } from './tableproperties/utils';
  10. import { addBorderStylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/styles/borderstyles';
  11. import Styles from '@ckeditor/ckeditor5-engine/src/view/styles';
  12. addBorderStylesProcessor( Styles.processor );
  13. /**
  14. * The table properties feature.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class TableProperties extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. static get pluginName() {
  23. return 'TableProperties';
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. afterInit() {
  29. const editor = this.editor;
  30. const schema = editor.model.schema;
  31. const conversion = editor.conversion;
  32. this.enableBorderProperties( schema, conversion );
  33. this.enableBackgroundColorProperty( schema, conversion );
  34. this.enableWidthProperty( schema, conversion );
  35. this.enableHeightProperty( schema, conversion );
  36. this.enableAlignmentProperty( schema, conversion );
  37. }
  38. enableBorderProperties( schema, conversion ) {
  39. schema.extend( 'table', {
  40. allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
  41. } );
  42. upcastBorderStyles( conversion, 'table' );
  43. downcastTableAttribute( conversion, 'borderColor', 'border-color' );
  44. downcastTableAttribute( conversion, 'borderStyle', 'border-style' );
  45. downcastTableAttribute( conversion, 'borderWidth', 'border-width' );
  46. }
  47. enableBackgroundColorProperty( schema, conversion ) {
  48. schema.extend( 'table', {
  49. allowAttributes: [ 'backgroundColor' ]
  50. } );
  51. upcastAttribute( conversion, 'table', 'backgroundColor', 'background-color' );
  52. downcastTableAttribute( conversion, 'backgroundColor', 'background-color' );
  53. }
  54. enableWidthProperty( schema, conversion ) {
  55. schema.extend( 'table', {
  56. allowAttributes: [ 'width' ]
  57. } );
  58. upcastAttribute( conversion, 'table', 'width', 'width' );
  59. downcastTableAttribute( conversion, 'width', 'width' );
  60. }
  61. enableHeightProperty( schema, conversion ) {
  62. schema.extend( 'table', {
  63. allowAttributes: [ 'height' ]
  64. } );
  65. upcastAttribute( conversion, 'table', 'height', 'height' );
  66. downcastTableAttribute( conversion, 'height', 'height' );
  67. }
  68. enableAlignmentProperty( schema, conversion ) {
  69. schema.extend( 'table', {
  70. allowAttributes: [ 'alignment' ]
  71. } );
  72. conversion.for( 'upcast' )
  73. .attributeToAttribute( {
  74. view: {
  75. styles: {
  76. 'margin-right': /^(auto|0(%|[a-z]{2,4})?)$/,
  77. 'margin-left': /^(auto|0(%|[a-z]{2,4})?)$/
  78. }
  79. },
  80. model: {
  81. name: 'table',
  82. key: 'alignment',
  83. value: viewElement => {
  84. // At this point we only have auto or 0 value (with a unit).
  85. if ( viewElement.getStyle( 'margin-right' ) != 'auto' ) {
  86. return 'right';
  87. }
  88. if ( viewElement.getStyle( 'margin-left' ) != 'auto' ) {
  89. return 'left';
  90. }
  91. return 'center';
  92. }
  93. }
  94. } )
  95. // Support for backwards compatibility and pasting from other sources.
  96. .attributeToAttribute( {
  97. view: {
  98. attributes: {
  99. align: /^(left|right|center)$/
  100. }
  101. },
  102. model: {
  103. name: 'table',
  104. key: 'alignment',
  105. value: viewElement => viewElement.getAttribute( 'align' )
  106. }
  107. } );
  108. conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( 'attribute:alignment:table', ( evt, data, conversionApi ) => {
  109. const { item, attributeNewValue } = data;
  110. const { mapper, writer } = conversionApi;
  111. const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
  112. if ( !attributeNewValue ) {
  113. writer.removeStyle( 'margin-left', table );
  114. writer.removeStyle( 'margin-right', table );
  115. return;
  116. }
  117. const styles = {
  118. 'margin-right': 'auto',
  119. 'margin-left': 'auto'
  120. };
  121. if ( attributeNewValue == 'left' ) {
  122. styles[ 'margin-left' ] = '0';
  123. }
  124. if ( attributeNewValue == 'right' ) {
  125. styles[ 'margin-right' ] = '0';
  126. }
  127. writer.setStyle( styles, table );
  128. } ) );
  129. }
  130. }