@ckeditor/ckeditor5-table 0.0.0-nightly-20251125.0 → 0.0.0-nightly-20251126.0

package/src/tableconfig.d.ts

@@ -23,7 +23,7 @@ import type { ColorOption, ColorPickerConfig } from 'ckeditor5/src/ui.js';
  */
 export interface TableConfig {
     /**
-     * Number of rows and columns to render by table heading when inserting new tables.
+     * Number of rows and columns to render by the table heading when inserting new tables.
      *
      * You can configure it like this:
      *
@@ -36,7 +36,7 @@ export interface TableConfig {
      * };
      * ```
      *
-     * Both rows and columns properties are optional defaulting to 0 (no heading).
+     * Both rows and columns properties are optional, defaulting to 0 (no heading).
      */
     defaultHeadings?: {
         rows?: number;
@@ -86,7 +86,7 @@ export interface TableConfig {
      */
     tableToolbar?: Array<ToolbarConfigItem>;
     /**
-     * The configuration of the table properties user interface (balloon). It allows to define:
+     * The configuration of the table properties user interface (balloon). It allows us to define:
      *
      * * The color palette for the table border color style field (`tableProperties.borderColors`),
      * * The color palette for the table background style field (`tableProperties.backgroundColors`).
@@ -130,9 +130,9 @@ export interface TableConfig {
      * {@link module:table/tableconfig~TablePropertiesOptions Read more about the supported properties.}
      *
      * **Note**: The `borderColors` and `backgroundColors` options do not impact the data loaded into the editor,
-     * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
-     * allowing users to pick colors in a more convenient way. The `defaultProperties` option does impact the data.
-     * Default values will not be kept in the editor model.
+     * i.e., they do not limit or filter the colors in the data. They are used only in the user interface,
+     * allowing users to pick colors more conveniently. The `defaultProperties` option does impact the data.
+     * The editor model will not keep the default values.
      *
      * The default color palettes for the table background and the table border are the same
      * ({@link module:table/utils/ui/table-properties#defaultColors check out their content}).
@@ -144,7 +144,7 @@ export interface TableConfig {
      */
     tableProperties?: TablePropertiesConfig;
     /**
-     * The configuration of the table cell properties user interface (balloon). It allows to define:
+     * The configuration of the table cell properties user interface (balloon). It allows us to define:
      *
      * * The color palette for the cell border color style field (`tableCellProperties.borderColors`),
      * * The color palette for the cell background style field (`tableCellProperties.backgroundColors`).
@@ -187,11 +187,11 @@ export interface TableConfig {
      * {@link module:table/tableconfig~TablePropertiesOptions Read more about the supported properties.}
      *
      * **Note**: The `borderColors` and `backgroundColors` options do not impact the data loaded into the editor,
-     * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
+     * i.e., they do not limit or filter the colors in the data. They are used only in the user interface,
      * allowing users to pick colors in a more convenient way. The `defaultProperties` option does impact the data.
-     * Default values will not be kept in the editor model.
+     * The editor model will not keep the default values.
      *
-     * The default color palettes for the cell background and the cell border are the same
+     * The default color palettes for the cell background and the cell border are identical
      * ({@link module:table/utils/ui/table-properties#defaultColors check out their content}).
      *
      * Both color palette configurations must follow the
@@ -225,9 +225,99 @@ export interface TableConfig {
  * The configuration of the table properties user interface (balloon).
  */
 export interface TablePropertiesConfig {
+    /**
+     * The color palette for the table border color picker.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableProperties: {
+     * 		borderColors: [
+     * 			{
+     * 				color: 'hsl(0, 0%, 0%)',
+     * 				label: 'Black'
+     * 			},
+     * 			{
+     * 				color: 'hsl(0, 0%, 100%)',
+     * 				label: 'White',
+     * 				hasBorder: true
+     * 			}
+     * 		]
+     * 	}
+     * };
+     * ```
+     *
+     * **Note**: This configuration only affects the UI. It does not limit or filter the colors in the data.
+     *
+     * Defaults to {@link module:table/utils/ui/table-properties#defaultColors}.
+     *
+     * @see {@link module:table/tableconfig~TableColorConfig}
+     */
     borderColors?: TableColorConfig;
+    /**
+     * The color palette for the table background color picker.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableProperties: {
+     * 		backgroundColors: [
+     * 			{
+     * 				color: 'hsl(0, 0%, 100%)',
+     * 				label: 'White',
+     * 				hasBorder: true
+     * 			},
+     * 			{
+     * 				color: 'hsl(120, 75%, 60%)',
+     * 				label: 'Green'
+     * 			}
+     * 		]
+     * 	}
+     * };
+     * ```
+     *
+     * **Note**: This configuration only affects the UI. It does not limit or filter the colors in the data.
+     *
+     * Defaults to {@link module:table/utils/ui/table-properties#defaultColors}.
+     *
+     * @see {@link module:table/tableconfig~TableColorConfig}
+     */
     backgroundColors?: TableColorConfig;
+    /**
+     * Default styles for newly created tables.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableProperties: {
+     * 		defaultProperties: {
+     * 			borderStyle: 'dashed',
+     * 			borderColor: 'hsl(0, 0%, 90%)',
+     * 			borderWidth: '3px',
+     * 			alignment: 'left',
+     * 			width: '550px',
+     * 			height: '450px'
+     * 		}
+     * 	}
+     * }
+     * ```
+     *
+     * **Note**: The model does not store the default values. The editor will only keep values that differ from the defaults.
+     *
+     * See {@link module:table/tableconfig~TablePropertiesOptions} for the full list of properties.
+     */
     defaultProperties?: TablePropertiesOptions;
+    /**
+     * Configuration of the table alignment behavior in the editor output.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableProperties: {
+     * 		alignment: {
+     * 			useInlineStyles: false // Use CSS classes instead of inline styles
+     * 		}
+     * 	}
+     * };
+     * ```
+     */
+    alignment?: TableAlignmentConfig;
     /**
      * Configuration of the color picker in the table properties balloon.
      *
@@ -276,8 +366,84 @@ export interface TablePropertiesOptions {
  * The configuration of the table cell properties user interface (balloon).
  */
 export interface TableCellPropertiesConfig {
+    /**
+     * The color palette for the table cell border color picker.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableCellProperties: {
+     * 		borderColors: [
+     * 			{
+     * 				color: 'hsl(0, 0%, 0%)',
+     * 				label: 'Black'
+     * 			},
+     * 			{
+     * 				color: 'hsl(0, 0%, 100%)',
+     * 				label: 'White',
+     * 				hasBorder: true
+     * 			}
+     * 		]
+     * 	}
+     * };
+     * ```
+     *
+     * **Note**: This configuration only affects the UI. It does not limit or filter the colors in the data.
+     *
+     * Defaults to {@link module:table/utils/ui/table-properties#defaultColors}.
+     *
+     * @see {@link module:table/tableconfig~TableColorConfig}
+     */
     borderColors?: TableColorConfig;
+    /**
+     * The color palette for the table cell background color picker.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableCellProperties: {
+     * 		backgroundColors: [
+     * 			{
+     * 				color: 'hsl(0, 0%, 100%)',
+     * 				label: 'White',
+     * 				hasBorder: true
+     * 			},
+     * 			{
+     * 				color: 'hsl(120, 75%, 60%)',
+     * 				label: 'Green'
+     * 			}
+     * 		]
+     * 	}
+     * };
+     * ```
+     *
+     * **Note**: This configuration only affects the UI. It does not limit or filter the colors in the data.
+     *
+     * Defaults to {@link module:table/utils/ui/table-properties#defaultColors}.
+     *
+     * @see {@link module:table/tableconfig~TableColorConfig}
+     */
     backgroundColors?: TableColorConfig;
+    /**
+     * Default styles for newly created table cells.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableCellProperties: {
+     * 		defaultProperties: {
+     * 			borderStyle: 'dashed',
+     * 			borderColor: 'hsl(0, 0%, 90%)',
+     * 			borderWidth: '3px',
+     * 			horizontalAlignment: 'center',
+     * 			verticalAlignment: 'middle',
+     * 			padding: '10px'
+     * 		}
+     * 	}
+     * }
+     * ```
+     *
+     * **Note**: The model does not store the default values. The editor will only keep values that differ from the defaults.
+     *
+     * See {@link module:table/tableconfig~TableCellPropertiesOptions} for the full list of properties.
+     */
     defaultProperties?: TableCellPropertiesOptions;
     /**
      * Configuration of the color picker in the table cell properties balloon.
@@ -433,3 +599,14 @@ export interface TableCaptionConfig {
  * The type of the table.
  */
 export type TableType = 'content' | 'layout';
+export interface TableAlignmentConfig {
+    /**
+     * Whether to use inline styles for table alignment in the editor output.
+     *
+     * * When `true` (default), the alignment is rendered as inline styles.
+     * * When `false`, the alignment is rendered as CSS classes.
+     *
+     * @default true
+     */
+    useInlineStyles?: boolean;
+}

package/src/tableediting.d.ts

@@ -41,6 +41,11 @@ export declare class TableEditing extends Plugin {
      * Registers downcast handler for the additional table slot.
      */
     registerAdditionalSlot(slotHandler: TableConversionAdditionalSlot): void;
+    /**
+     * Adds converters for plain table output. These converters are used either when the `PlainTableOutput` plugin is loaded
+     * or when content is processed by the clipboard pipeline, ensuring that pasted tables are not wrapped in a <figure> element.
+     */
+    private _addPlainTableOutputConverters;
 }
 /**
  * By default, only the `tableRow` elements from the `table` model are downcast inside the `<table>` and

package/src/tableediting.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { upcastTable, ensureParagraphInTableCell, skipEmptyTableRow, upcastTableFigure } from './converters/upcasttable.js';
-import { convertParagraphInTableCell, downcastCell, downcastRow, downcastTable } from './converters/downcast.js';
+import { convertParagraphInTableCell, downcastCell, downcastRow, downcastTable, downcastTableBorderAndBackgroundAttributes, convertPlainTable, convertPlainTableCaption } from './converters/downcast.js';
 import { InsertTableCommand } from './commands/inserttablecommand.js';
 import { InsertRowCommand } from './commands/insertrowcommand.js';
 import { InsertColumnCommand } from './commands/insertcolumncommand.js';
@@ -148,6 +148,8 @@ export class TableEditing extends Plugin {
             model: { key: 'rowspan', value: upcastCellSpan('rowspan') },
             view: 'rowspan'
         });
+        // Plain table output converters (also used in the clipboard pipeline).
+        this._addPlainTableOutputConverters();
         // Define the config.
         editor.config.define('table.defaultHeadings.rows', 0);
         editor.config.define('table.defaultHeadings.columns', 0);
@@ -183,6 +185,31 @@ export class TableEditing extends Plugin {
     registerAdditionalSlot(slotHandler) {
         this._additionalSlots.push(slotHandler);
     }
+    /**
+     * Adds converters for plain table output. These converters are used either when the `PlainTableOutput` plugin is loaded
+     * or when content is processed by the clipboard pipeline, ensuring that pasted tables are not wrapped in a <figure> element.
+     */
+    _addPlainTableOutputConverters() {
+        const editor = this.editor;
+        // Override default table data downcast converter.
+        editor.conversion.for('dataDowncast').elementToStructure({
+            model: 'table',
+            view: convertPlainTable(editor),
+            converterPriority: 'high'
+        });
+        // Make sure table <caption> is downcasted into <caption> in the data pipeline when necessary.
+        if (editor.plugins.has('TableCaption')) {
+            editor.conversion.for('dataDowncast').elementToElement({
+                model: 'caption',
+                view: convertPlainTableCaption(editor),
+                converterPriority: 'high'
+            });
+        }
+        // Handle border-style, border-color, border-width and background-color table attributes.
+        if (editor.plugins.has('TableProperties')) {
+            downcastTableBorderAndBackgroundAttributes(editor);
+        }
+    }
 }
 /**
  * Returns fixed colspan and rowspan attrbutes values.

package/src/tableproperties/tablepropertiesediting.js

@@ -6,9 +6,10 @@
  * @module table/tableproperties/tablepropertiesediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { addBackgroundStylesRules, addBorderStylesRules } from 'ckeditor5/src/engine.js';
+import { addBackgroundStylesRules, addBorderStylesRules, addMarginStylesRules } from 'ckeditor5/src/engine.js';
+import { first } from 'ckeditor5/src/utils.js';
 import { TableEditing } from '../tableediting.js';
-import { downcastAttributeToStyle, downcastTableAttribute, getDefaultValueAdjusted, upcastBorderStyles, upcastStyleToAttribute } from '../converters/tableproperties.js';
+import { downcastAttributeToStyle, downcastTableAttribute, getDefaultValueAdjusted, upcastBorderStyles, upcastStyleToAttribute, upcastTableAlignmentConfig, DEFAULT_TABLE_ALIGNMENT_OPTIONS } from '../converters/tableproperties.js';
 import { TableBackgroundColorCommand } from './commands/tablebackgroundcolorcommand.js';
 import { TableBorderColorCommand } from './commands/tablebordercolorcommand.js';
 import { TableBorderStyleCommand } from './commands/tableborderstylecommand.js';
@@ -17,8 +18,7 @@ import { TableWidthCommand } from './commands/tablewidthcommand.js';
 import { TableHeightCommand } from './commands/tableheightcommand.js';
 import { TableAlignmentCommand } from './commands/tablealignmentcommand.js';
 import { getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
-const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
-const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
+import { getViewTableFromWrapper } from '../utils/structure.js';
 /**
  * The table properties editing feature.
  *
@@ -79,6 +79,8 @@ export class TablePropertiesEditing extends Plugin {
         const defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
+        const useInlineStyles = editor.config.get('table.tableProperties.alignment.useInlineStyles') !== false;
+        editor.data.addStyleProcessorRules(addMarginStylesRules);
         editor.data.addStyleProcessorRules(addBorderStylesRules);
         enableBorderProperties(editor, {
             color: defaultTableProperties.borderColor,
@@ -88,7 +90,12 @@ export class TablePropertiesEditing extends Plugin {
         editor.commands.add('tableBorderColor', new TableBorderColorCommand(editor, defaultTableProperties.borderColor));
         editor.commands.add('tableBorderStyle', new TableBorderStyleCommand(editor, defaultTableProperties.borderStyle));
         editor.commands.add('tableBorderWidth', new TableBorderWidthCommand(editor, defaultTableProperties.borderWidth));
-        enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment);
+        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
+            enableExtendedAlignmentProperty(schema, conversion, defaultTableProperties.alignment, useInlineStyles);
+        }
+        else {
+            enableAlignmentProperty(schema, conversion, defaultTableProperties.alignment);
+        }
         editor.commands.add('tableAlignment', new TableAlignmentCommand(editor, defaultTableProperties.alignment));
         enableTableToFigureProperty(schema, conversion, {
             modelAttribute: 'tableWidth',
@@ -115,8 +122,50 @@ export class TablePropertiesEditing extends Plugin {
             defaultValue: defaultTableProperties.backgroundColor
         });
         editor.commands.add('tableBackgroundColor', new TableBackgroundColorCommand(editor, defaultTableProperties.backgroundColor));
+        if (editor.config.get('experimentalFlags.useExtendedTableBlockAlignment')) {
+            const viewDoc = editor.editing.view.document;
+            // Adjust clipboard output to wrap tables in divs if needed (for alignment).
+            this.listenTo(viewDoc, 'clipboardOutput', (evt, data) => {
+                editor.editing.view.change(writer => {
+                    for (const { item } of writer.createRangeIn(data.content)) {
+                        wrapInDivIfNeeded(item, writer);
+                    }
+                    data.dataTransfer.setData('text/html', this.editor.data.htmlProcessor.toData(data.content));
+                });
+            }, { priority: 'lowest' });
+        }
     }
 }
+/**
+ * Checks whether the view element is a table and if it needs to be wrapped in a div for alignment purposes.
+ * If so, it wraps it in a div and inserts it into the data content.
+ */
+function wrapInDivIfNeeded(viewItem, writer) {
+    if (!viewItem.is('element', 'table')) {
+        return;
+    }
+    const alignAttribute = viewItem.getAttribute('align');
+    const floatAttribute = viewItem.getStyle('float');
+    const marginLeft = viewItem.getStyle('margin-left');
+    const marginRight = viewItem.getStyle('margin-right');
+    if (
+    // Align center.
+    (alignAttribute && alignAttribute === 'center') ||
+        // Align right with text wrapping.
+        (floatAttribute && floatAttribute === 'right' && alignAttribute && alignAttribute === 'right')) {
+        insertWrapperWithAlignment(writer, alignAttribute, viewItem);
+        return;
+    }
+    // Align right with no text wrapping.
+    if (floatAttribute === undefined && marginLeft === 'auto' && marginRight === '0') {
+        insertWrapperWithAlignment(writer, 'right', viewItem);
+    }
+}
+function insertWrapperWithAlignment(writer, align, table) {
+    const position = writer.createPositionBefore(table);
+    const wrapper = writer.createContainerElement('div', { align }, table);
+    writer.insert(position, wrapper);
+}
 /**
  * Enables `tableBorderStyle'`, `tableBorderColor'` and `tableBorderWidth'` attributes for table.
  *
@@ -144,12 +193,110 @@ function enableBorderProperties(editor, defaultBorder) {
     downcastTableAttribute(conversion, { modelAttribute: modelAttributes.style, styleName: 'border-style' });
     downcastTableAttribute(conversion, { modelAttribute: modelAttributes.width, styleName: 'border-width' });
 }
+/**
+ * Enables the extended block`'alignment'` attribute for table.
+ *
+ * @param defaultValue The default alignment value.
+ */
+function enableExtendedAlignmentProperty(schema, conversion, defaultValue, useInlineStyles) {
+    schema.extend('table', {
+        allowAttributes: ['tableAlignment']
+    });
+    schema.setAttributeProperties('tableAlignment', { isFormatting: true });
+    conversion.for('downcast')
+        .attributeToAttribute({
+        model: {
+            name: 'table',
+            key: 'tableAlignment',
+            values: ['left', 'center', 'right', 'blockLeft', 'blockRight']
+        },
+        view: {
+            left: useInlineStyles ? {
+                key: 'style',
+                value: {
+                    float: 'left',
+                    'margin-right': 'var(--ck-content-table-style-spacing, 1.5em)'
+                }
+            } : {
+                key: 'class',
+                value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.left.className
+            },
+            right: useInlineStyles ? {
+                key: 'style',
+                value: {
+                    float: 'right',
+                    'margin-left': 'var(--ck-content-table-style-spacing, 1.5em)'
+                }
+            } : {
+                key: 'class',
+                value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.right.className
+            },
+            center: useInlineStyles ? {
+                key: 'style',
+                value: {
+                    'margin-left': 'auto',
+                    'margin-right': 'auto'
+                }
+            } : {
+                key: 'class',
+                value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.center.className
+            },
+            blockLeft: useInlineStyles ? {
+                key: 'style',
+                value: {
+                    'margin-left': '0',
+                    'margin-right': 'auto'
+                }
+            } : {
+                key: 'class',
+                value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockLeft.className
+            },
+            blockRight: useInlineStyles ? {
+                key: 'style',
+                value: {
+                    'margin-left': 'auto',
+                    'margin-right': '0'
+                }
+            } : {
+                key: 'class',
+                value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockRight.className
+            }
+        },
+        converterPriority: 'high'
+    });
+    /**
+     * Enables upcasting of the `tableAlignment` attribute.
+     */
+    upcastTableAlignmentConfig.forEach(config => {
+        conversion.for('upcast').attributeToAttribute({
+            view: config.view,
+            model: {
+                key: 'tableAlignment',
+                value: (viewElement, conversionApi, data) => {
+                    if (isNonTableFigureElement(viewElement)) {
+                        return;
+                    }
+                    const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+                    const align = config.getAlign(viewElement);
+                    const consumables = config.getConsumables(viewElement);
+                    conversionApi.consumable.consume(viewElement, consumables);
+                    if (align !== localDefaultValue) {
+                        return align;
+                    }
+                }
+            }
+        });
+    });
+    conversion.for('upcast').add(upcastTableAlignedDiv(defaultValue));
+}
 /**
  * Enables the `'alignment'` attribute for table.
  *
  * @param defaultValue The default alignment value.
  */
 function enableAlignmentProperty(schema, conversion, defaultValue) {
+    const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
+    const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
     schema.extend('table', {
         allowAttributes: ['tableAlignment']
     });
@@ -268,6 +415,98 @@ function enableAlignmentProperty(schema, conversion, defaultValue) {
         }
     });
 }
+/**
+ * Returns a function that converts the table view representation:
+ *
+ * ```html
+ * <div align="right"><table>...</table></div>
+ * <!-- or -->
+ * <div align="center"><table>...</table></div>
+ * <!-- or -->
+ * <div align="left"><table>...</table></div>
+ * ```
+ *
+ * to the model representation:
+ *
+ * ```xml
+ * <table tableAlignment="right|center|left"></table>
+ * ```
+ *
+ * @internal
+ */
+function upcastTableAlignedDiv(defaultValue) {
+    return (dispatcher) => {
+        dispatcher.on('element:div', (evt, data, conversionApi) => {
+            // Do not convert if this is not a "table wrapped in div with align attribute".
+            if (!conversionApi.consumable.test(data.viewItem, { name: true, attributes: 'align' })) {
+                return;
+            }
+            // Find a table element inside the div element.
+            const viewTable = getViewTableFromWrapper(data.viewItem);
+            // Do not convert if table element is absent or was already converted.
+            if (!viewTable || !conversionApi.consumable.test(viewTable, { name: true })) {
+                return;
+            }
+            // Consume the div to prevent other converters from processing it again.
+            conversionApi.consumable.consume(data.viewItem, { name: true, attributes: 'align' });
+            // Convert view table to model table.
+            const conversionResult = conversionApi.convertItem(viewTable, data.modelCursor);
+            // Get table element from conversion result.
+            const modelTable = first(conversionResult.modelRange.getItems());
+            // When table wasn't successfully converted then finish conversion.
+            if (!modelTable || !modelTable.is('element', 'table')) {
+                // Revert consumed div so other features can convert it.
+                conversionApi.consumable.revert(data.viewItem, { name: true, attributes: 'align' });
+                // If anyway some table content was converted, we have to pass the model range and cursor.
+                if (conversionResult.modelRange && !conversionResult.modelRange.isCollapsed) {
+                    data.modelRange = conversionResult.modelRange;
+                    data.modelCursor = conversionResult.modelCursor;
+                }
+                return;
+            }
+            const alignAttributeFromDiv = data.viewItem.getAttribute('align');
+            const alignAttributeFromTable = viewTable.getAttribute('align');
+            const localDefaultValue = getDefaultValueAdjusted(defaultValue, '', data);
+            const align = convertToTableAlignment(alignAttributeFromDiv, alignAttributeFromTable, localDefaultValue);
+            if (align) {
+                conversionApi.writer.setAttribute('tableAlignment', align, modelTable);
+            }
+            conversionApi.convertChildren(data.viewItem, conversionApi.writer.createPositionAt(modelTable, 'end'));
+            conversionApi.updateConversionResult(modelTable, data);
+        });
+    };
+}
+/**
+ * Converts div `align` and table `align` attributes to the model `tableAlignment` attribute.
+ *
+ * @param divAlign The value of the div `align` attribute.
+ * @param tableAlign The value of the table `align` attribute.
+ * @param defaultValue The default alignment value.
+ * @returns The model `tableAlignment` value or `undefined` if no conversion is needed.
+ */
+function convertToTableAlignment(divAlign, tableAlign, defaultValue) {
+    if (divAlign) {
+        switch (divAlign) {
+            case 'right':
+                if (tableAlign === 'right') {
+                    return 'right';
+                }
+                else if (tableAlign === 'left') {
+                    return 'left';
+                }
+                else {
+                    return 'blockRight';
+                }
+            case 'center':
+                return 'center';
+            case 'left':
+                return tableAlign === undefined ? 'blockLeft' : 'left';
+            default:
+                return defaultValue;
+        }
+    }
+    return undefined;
+}
 /**
  * Enables conversion for an attribute for simple view-model mappings.
  *
@@ -299,3 +538,9 @@ function enableTableToFigureProperty(schema, conversion, options) {
     });
     downcastAttributeToStyle(conversion, { modelElement: 'table', ...options });
 }
+/**
+ * Checks whether a given figure element should be ignored when upcasting table properties.
+ */
+function isNonTableFigureElement(viewElement) {
+    return viewElement.name == 'figure' && !viewElement.hasClass('table');
+}