|
@@ -14,7 +14,15 @@ import { addPaddingRules } from '@ckeditor/ckeditor5-engine/src/view/styles/padd
|
|
|
import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
|
|
import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * The table column row properties feature.
|
|
|
|
|
|
|
+ * The table cell properties editing feature.
|
|
|
|
|
+ *
|
|
|
|
|
+ * Introduces table cells's model attributes and their conversion:
|
|
|
|
|
+ *
|
|
|
|
|
+ * - border: `borderStyle`, `borderColor` and `borderWidth`
|
|
|
|
|
+ * - background color: `backgroundColor`
|
|
|
|
|
+ * - cell padding: `padding`
|
|
|
|
|
+ * - horizontal and vertical alignment: `horizontalAlignment`, `verticalAlignment`
|
|
|
|
|
+ * - cell width & height: `width` & `height`
|
|
|
*
|
|
*
|
|
|
* @extends module:core/plugin~Plugin
|
|
* @extends module:core/plugin~Plugin
|
|
|
*/
|
|
*/
|
|
@@ -33,105 +41,92 @@ export default class TableCellPropertiesEditing extends Plugin {
|
|
|
const editor = this.editor;
|
|
const editor = this.editor;
|
|
|
const schema = editor.model.schema;
|
|
const schema = editor.model.schema;
|
|
|
const conversion = editor.conversion;
|
|
const conversion = editor.conversion;
|
|
|
-
|
|
|
|
|
const viewDoc = editor.editing.view.document;
|
|
const viewDoc = editor.editing.view.document;
|
|
|
|
|
|
|
|
viewDoc.addStyleProcessorRules( addBorderRules );
|
|
viewDoc.addStyleProcessorRules( addBorderRules );
|
|
|
viewDoc.addStyleProcessorRules( addPaddingRules );
|
|
viewDoc.addStyleProcessorRules( addPaddingRules );
|
|
|
viewDoc.addStyleProcessorRules( addBackgroundRules );
|
|
viewDoc.addStyleProcessorRules( addBackgroundRules );
|
|
|
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'height' ]
|
|
|
|
|
- } );
|
|
|
|
|
- upcastAttribute( conversion, 'tableCell', 'height', 'height' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'height', 'height' );
|
|
|
|
|
-
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'width' ]
|
|
|
|
|
- } );
|
|
|
|
|
- upcastAttribute( conversion, 'tableCell', 'width', 'width' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'width', 'width' );
|
|
|
|
|
-
|
|
|
|
|
- this.enableBorderProperties( schema, conversion );
|
|
|
|
|
- this.enableBackgroundColorProperty( schema, conversion );
|
|
|
|
|
- this.enablePaddingProperty( schema, conversion );
|
|
|
|
|
- this.enableVerticalAlignmentProperty( schema, conversion );
|
|
|
|
|
- this.enableHorizontalAlignmentProperty( schema, conversion );
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- enableBorderProperties( schema, conversion ) {
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
|
|
|
|
|
- } );
|
|
|
|
|
- upcastBorderStyles( conversion, 'td' );
|
|
|
|
|
- upcastBorderStyles( conversion, 'th' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'borderStyle', 'border-style' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'borderColor', 'border-color' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'borderWidth', 'border-width' );
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- enableBackgroundColorProperty( schema, conversion ) {
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'backgroundColor' ]
|
|
|
|
|
- } );
|
|
|
|
|
- upcastAttribute( conversion, 'tableCell', 'backgroundColor', 'background-color' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'backgroundColor', 'background-color' );
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- enablePaddingProperty( schema, conversion ) {
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'padding' ]
|
|
|
|
|
- } );
|
|
|
|
|
- upcastAttribute( conversion, 'tableCell', 'padding', 'padding' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'padding', 'padding' );
|
|
|
|
|
|
|
+ enableBorderProperties( schema, conversion );
|
|
|
|
|
+ enableHorizontalAlignmentProperty( schema, conversion );
|
|
|
|
|
+ enableSimpleConversion( schema, conversion, 'width', 'width' );
|
|
|
|
|
+ enableSimpleConversion( schema, conversion, 'height', 'height' );
|
|
|
|
|
+ enableSimpleConversion( schema, conversion, 'padding', 'padding' );
|
|
|
|
|
+ enableSimpleConversion( schema, conversion, 'backgroundColor', 'background-color' );
|
|
|
|
|
+ enableSimpleConversion( schema, conversion, 'verticalAlignment', 'vertical-align' );
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- enableVerticalAlignmentProperty( schema, conversion ) {
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'verticalAlignment' ]
|
|
|
|
|
- } );
|
|
|
|
|
- upcastAttribute( conversion, 'tableCell', 'verticalAlignment', 'vertical-align' );
|
|
|
|
|
- downcastToStyle( conversion, 'tableCell', 'verticalAlignment', 'vertical-align' );
|
|
|
|
|
- }
|
|
|
|
|
|
|
+// Enables `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table cells.
|
|
|
|
|
+//
|
|
|
|
|
+// @param {module:engine/model/schema~Schema} schema
|
|
|
|
|
+// @param {module:engine/conversion/conversion~Conversion} conversion
|
|
|
|
|
+function enableBorderProperties( schema, conversion ) {
|
|
|
|
|
+ schema.extend( 'tableCell', {
|
|
|
|
|
+ allowAttributes: [ 'borderWidth', 'borderColor', 'borderStyle' ]
|
|
|
|
|
+ } );
|
|
|
|
|
+ upcastBorderStyles( conversion, 'td' );
|
|
|
|
|
+ upcastBorderStyles( conversion, 'th' );
|
|
|
|
|
+ downcastToStyle( conversion, 'tableCell', 'borderStyle', 'border-style' );
|
|
|
|
|
+ downcastToStyle( conversion, 'tableCell', 'borderColor', 'border-color' );
|
|
|
|
|
+ downcastToStyle( conversion, 'tableCell', 'borderWidth', 'border-width' );
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- enableHorizontalAlignmentProperty( schema, conversion ) {
|
|
|
|
|
- schema.extend( 'tableCell', {
|
|
|
|
|
- allowAttributes: [ 'horizontalAlignment' ]
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+// Enables `'horizontalAlignment'` attribute for table cells.
|
|
|
|
|
+//
|
|
|
|
|
+// @param {module:engine/model/schema~Schema} schema
|
|
|
|
|
+// @param {module:engine/conversion/conversion~Conversion} conversion
|
|
|
|
|
+function enableHorizontalAlignmentProperty( schema, conversion ) {
|
|
|
|
|
+ schema.extend( 'tableCell', {
|
|
|
|
|
+ allowAttributes: [ 'horizontalAlignment' ]
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
- conversion.attributeToAttribute( {
|
|
|
|
|
- model: {
|
|
|
|
|
- name: 'tableCell',
|
|
|
|
|
- key: 'horizontalAlignment',
|
|
|
|
|
- values: [ 'left', 'right', 'center', 'justify' ]
|
|
|
|
|
|
|
+ conversion.attributeToAttribute( {
|
|
|
|
|
+ model: {
|
|
|
|
|
+ name: 'tableCell',
|
|
|
|
|
+ key: 'horizontalAlignment',
|
|
|
|
|
+ values: [ 'left', 'right', 'center', 'justify' ]
|
|
|
|
|
+ },
|
|
|
|
|
+ view: {
|
|
|
|
|
+ // TODO: controversial one but I don't know if we want "default".
|
|
|
|
|
+ left: {
|
|
|
|
|
+ key: 'style',
|
|
|
|
|
+ value: {
|
|
|
|
|
+ 'text-align': 'left'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ right: {
|
|
|
|
|
+ key: 'style',
|
|
|
|
|
+ value: {
|
|
|
|
|
+ 'text-align': 'right'
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- view: {
|
|
|
|
|
- // TODO: controversial one but I don't know if we want "default".
|
|
|
|
|
- left: {
|
|
|
|
|
- key: 'style',
|
|
|
|
|
- value: {
|
|
|
|
|
- 'text-align': 'left'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- right: {
|
|
|
|
|
- key: 'style',
|
|
|
|
|
- value: {
|
|
|
|
|
- 'text-align': 'right'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- center: {
|
|
|
|
|
- key: 'style',
|
|
|
|
|
- value: {
|
|
|
|
|
- 'text-align': 'center'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- justify: {
|
|
|
|
|
- key: 'style',
|
|
|
|
|
- value: {
|
|
|
|
|
- 'text-align': 'justify'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ center: {
|
|
|
|
|
+ key: 'style',
|
|
|
|
|
+ value: {
|
|
|
|
|
+ 'text-align': 'center'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ justify: {
|
|
|
|
|
+ key: 'style',
|
|
|
|
|
+ value: {
|
|
|
|
|
+ 'text-align': 'justify'
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- } );
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ } );
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// Enables conversion for an attribute for simple view-model mappings.
|
|
|
|
|
+//
|
|
|
|
|
+// @param {String} modelAttribute
|
|
|
|
|
+// @param {String} styleName
|
|
|
|
|
+// @param {module:engine/model/schema~Schema} schema
|
|
|
|
|
+// @param {module:engine/conversion/conversion~Conversion} conversion
|
|
|
|
|
+function enableSimpleConversion( schema, conversion, modelAttribute, styleName ) {
|
|
|
|
|
+ schema.extend( 'tableCell', {
|
|
|
|
|
+ allowAttributes: [ modelAttribute ]
|
|
|
|
|
+ } );
|
|
|
|
|
+ upcastAttribute( conversion, 'tableCell', modelAttribute, styleName );
|
|
|
|
|
+ downcastToStyle( conversion, 'tableCell', modelAttribute, styleName );
|
|
|
}
|
|
}
|