@ckeditor/ckeditor5-table 47.2.0 → 47.3.0-alpha.0

package/src/converters/downcast.js

@@ -2,11 +2,10 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module table/converters/downcast
- */
 import { toWidget, toWidgetEditable } from 'ckeditor5/src/widget.js';
 import { TableWalker } from './../tablewalker.js';
+import { downcastTableAlignmentConfig } from './tableproperties.js';
+import { getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
 /**
  * Model table element to view table element conversion helper.
  *
@@ -158,3 +157,130 @@ function hasAnyAttribute(element) {
     }
     return false;
 }
+/**
+ * Downcasts a plain table (also used in the clipboard pipeline).
+ */
+export function convertPlainTable(editor) {
+    return (table, conversionApi) => {
+        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
+        const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
+        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+            return null;
+        }
+        return downcastPlainTable(table, conversionApi, editor);
+    };
+}
+/**
+ * Downcasts a plain table caption (also used in the clipboard pipeline).
+ */
+export function convertPlainTableCaption(editor) {
+    return (modelElement, { writer, options }) => {
+        const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
+        const isClipboardPipeline = options.isClipboardPipeline;
+        const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+        if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+            return null;
+        }
+        if (modelElement.parent.name === 'table') {
+            return writer.createContainerElement('caption');
+        }
+        return null;
+    };
+}
+/**
+ * Downcasts a plain table.
+ *
+ * @param table Table model element.
+ * @param conversionApi The conversion API object.
+ * @param defaultTableProperties Normalized default table properties.
+ * @returns Created element.
+ */
+export function downcastPlainTable(table, conversionApi, editor) {
+    const writer = conversionApi.writer;
+    const headingRows = table.getAttribute('headingRows') || 0;
+    // Table head rows slot.
+    const headRowsSlot = writer.createSlot((element) => element.is('element', 'tableRow') && element.index < headingRows);
+    // Table body rows slot.
+    const bodyRowsSlot = writer.createSlot((element) => element.is('element', 'tableRow') && element.index >= headingRows);
+    // Table children slot.
+    const childrenSlot = writer.createSlot((element) => !element.is('element', 'tableRow'));
+    // Table <thead> element with all the heading rows.
+    const theadElement = writer.createContainerElement('thead', null, headRowsSlot);
+    // Table <tbody> element with all the body rows.
+    const tbodyElement = writer.createContainerElement('tbody', null, bodyRowsSlot);
+    // Table contents element containing <thead> and <tbody> when necessary.
+    const tableContentElements = [];
+    if (headingRows) {
+        tableContentElements.push(theadElement);
+    }
+    if (headingRows < table.childCount) {
+        tableContentElements.push(tbodyElement);
+    }
+    const tableAttributes = { class: 'table' };
+    if (editor.plugins.has('TableProperties') && conversionApi.options.isClipboardPipeline) {
+        const defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
+            includeAlignmentProperty: true
+        });
+        const tableAlignment = table.getAttribute('tableAlignment');
+        let localDefaultValue = defaultTableProperties.alignment;
+        if (table.getAttribute('tableType') === 'layout') {
+            localDefaultValue = '';
+        }
+        const tableAlignmentValue = tableAlignment || localDefaultValue;
+        if (tableAlignmentValue) {
+            tableAttributes.class += ' ' + downcastTableAlignmentConfig[tableAlignmentValue].className;
+            tableAttributes.style = downcastTableAlignmentConfig[tableAlignmentValue].style;
+            if (downcastTableAlignmentConfig[tableAlignmentValue].align !== undefined) {
+                tableAttributes.align = downcastTableAlignmentConfig[tableAlignmentValue].align;
+            }
+        }
+    }
+    // Create table structure.
+    //
+    // <table>
+    //    {children-slot-like-caption}
+    //    <thead>
+    //        {table-head-rows-slot}
+    //    </thead>
+    //    <tbody>
+    //        {table-body-rows-slot}
+    //    </tbody>
+    // </table>
+    return writer.createContainerElement('table', tableAttributes, [childrenSlot, ...tableContentElements]);
+}
+/**
+ * Registers border and background attributes converters for plain tables or when the clipboard pipeline is used.
+ */
+export function downcastTableBorderAndBackgroundAttributes(editor) {
+    const modelAttributes = {
+        'border-width': 'tableBorderWidth',
+        'border-color': 'tableBorderColor',
+        'border-style': 'tableBorderStyle',
+        'background-color': 'tableBackgroundColor'
+    };
+    for (const [styleName, modelAttribute] of Object.entries(modelAttributes)) {
+        editor.conversion.for('dataDowncast').add(dispatcher => {
+            return dispatcher.on(`attribute:${modelAttribute}:table`, (evt, data, conversionApi) => {
+                const { item, attributeNewValue } = data;
+                const { mapper, writer } = conversionApi;
+                const hasPlainTableOutput = editor.plugins.has('PlainTableOutput');
+                const isClipboardPipeline = conversionApi.options.isClipboardPipeline;
+                const useExtendedAlignment = editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+                if (!hasPlainTableOutput && !(useExtendedAlignment && isClipboardPipeline)) {
+                    return;
+                }
+                if (!conversionApi.consumable.consume(item, evt.name)) {
+                    return;
+                }
+                const table = mapper.toViewElement(item);
+                if (attributeNewValue) {
+                    writer.setStyle(styleName, attributeNewValue, table);
+                }
+                else {
+                    writer.removeStyle(styleName, table);
+                }
+            }, { priority: 'high' });
+        });
+    }
+}

package/src/converters/tableproperties.d.ts

@@ -5,7 +5,8 @@
 /**
  * @module table/converters/tableproperties
  */
-import type { Conversion, UpcastConversionData, ViewElement } from 'ckeditor5/src/engine.js';
+import type { Editor } from 'ckeditor5/src/core.js';
+import type { Conversion, UpcastConversionData, ViewElement, Consumables } from 'ckeditor5/src/engine.js';
 /**
  * Conversion helper for upcasting attributes using normalized styles.
  *
@@ -41,13 +42,14 @@ export interface StyleValues {
 /**
  * Conversion helper for upcasting border styles for view elements.
  *
+ * @param editor The editor instance.
  * @param defaultBorder The default border values.
  * @param defaultBorder.color The default `borderColor` value.
  * @param defaultBorder.style The default `borderStyle` value.
  * @param defaultBorder.width The default `borderWidth` value.
  * @internal
  */
-export declare function upcastBorderStyles(conversion: Conversion, viewElementName: string, modelAttributes: StyleValues, defaultBorder: StyleValues): void;
+export declare function upcastBorderStyles(editor: Editor, viewElementName: string, modelAttributes: StyleValues, defaultBorder: StyleValues): void;
 /**
  * Conversion helper for downcasting an attribute to a style.
  *
@@ -73,3 +75,45 @@ export declare function downcastTableAttribute(conversion: Conversion, options:
  * @internal
  */
 export declare function getDefaultValueAdjusted(defaultValue: string, layoutTableDefault: string, data: UpcastConversionData<ViewElement>): string;
+/**
+ * Default table alignment options.
+ */
+export declare const DEFAULT_TABLE_ALIGNMENT_OPTIONS: {
+    left: {
+        className: string;
+    };
+    center: {
+        className: string;
+    };
+    right: {
+        className: string;
+    };
+    blockLeft: {
+        className: string;
+    };
+    blockRight: {
+        className: string;
+    };
+};
+/**
+ * Configuration for upcasting table alignment from view to model.
+ */
+export declare const upcastTableAlignmentConfig: Array<UpcastTableAlignmentConfig>;
+export declare const downcastTableAlignmentConfig: Record<TableAlignmentValues, {
+    align: string | undefined;
+    style: string;
+    className: string;
+}>;
+type UpcastTableAlignmentConfig = {
+    view: {
+        name: RegExp | string;
+        styles?: Record<string, RegExp | string>;
+        attributes?: Record<string, RegExp | string>;
+        key?: string;
+        value?: RegExp | string;
+    };
+    getAlign: ((viewElement: ViewElement) => string | undefined) | (() => string);
+    getConsumables: (viewElement: ViewElement) => Consumables;
+};
+export type TableAlignmentValues = 'left' | 'center' | 'right' | 'blockLeft' | 'blockRight';
+export {};

package/src/converters/tableproperties.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { first } from 'ckeditor5/src/utils.js';
+const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/;
+const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/;
 /**
  * Conversion helper for upcasting attributes using normalized styles.
  *
@@ -79,13 +81,15 @@ export function upcastStyleToAttribute(conversion, options) {
 /**
  * Conversion helper for upcasting border styles for view elements.
  *
+ * @param editor The editor instance.
  * @param defaultBorder The default border values.
  * @param defaultBorder.color The default `borderColor` value.
  * @param defaultBorder.style The default `borderStyle` value.
  * @param defaultBorder.width The default `borderWidth` value.
  * @internal
  */
-export function upcastBorderStyles(conversion, viewElementName, modelAttributes, defaultBorder) {
+export function upcastBorderStyles(editor, viewElementName, modelAttributes, defaultBorder) {
+    const { conversion } = editor;
     conversion.for('upcast').add(dispatcher => dispatcher.on('element:' + viewElementName, (evt, data, conversionApi) => {
         // If the element was not converted by element-to-element converter,
         // we should not try to convert the style. See #8393.
@@ -149,6 +153,35 @@ export function upcastBorderStyles(conversion, viewElementName, modelAttributes,
             conversionApi.writer.setAttribute(modelAttributes.width, reducedBorder.width, modelElement);
         }
     }));
+    if (editor.config.get('experimentalFlags.upcastTableBorderZeroAttributes')) {
+        // If parent table has `border="0"` attribute then set border style to `none`
+        // all table cells of that table and table itself.
+        conversion.for('upcast').add(dispatcher => {
+            dispatcher.on(`element:${viewElementName}`, (evt, data, conversionApi) => {
+                const { modelRange, viewItem } = data;
+                const viewTable = (viewItem.is('element', 'table') ?
+                    viewItem :
+                    viewItem.findAncestor('table'));
+                // If something already consumed the border attribute on the nearest table element, skip the conversion.
+                if (!conversionApi.consumable.test(viewTable, { attributes: 'border' })) {
+                    return;
+                }
+                // Ignore tables with border different than "0".
+                if (viewTable.getAttribute('border') !== '0') {
+                    return;
+                }
+                const modelElement = modelRange?.start?.nodeAfter;
+                // If model element has already border style attribute, skip the conversion.
+                if (!modelElement || modelElement.hasAttribute(modelAttributes.style)) {
+                    return;
+                }
+                conversionApi.writer.setAttribute(modelAttributes.style, 'none', modelElement);
+                if (viewItem.is('element', 'table')) {
+                    conversionApi.consumable.consume(viewItem, { attributes: 'border' });
+                }
+            });
+        });
+    }
 }
 /**
  * Conversion helper for downcasting an attribute to a style.
@@ -225,3 +258,187 @@ function reduceBoxSidesValue(style) {
     }
     return topSideStyle;
 }
+/**
+ * Default table alignment options.
+ */
+export const DEFAULT_TABLE_ALIGNMENT_OPTIONS = {
+    left: { className: 'table-style-align-left' },
+    center: { className: 'table-style-align-center' },
+    right: { className: 'table-style-align-right' },
+    blockLeft: { className: 'table-style-block-align-left' },
+    blockRight: { className: 'table-style-block-align-right' }
+};
+/**
+ * Configuration for upcasting table alignment from view to model.
+ */
+export const upcastTableAlignmentConfig = [
+    // Support for the `float:*;` CSS definition for the table alignment.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                float: FLOAT_VALUES_REG_EXP
+            }
+        },
+        getAlign: (viewElement) => {
+            let align = viewElement.getStyle('float');
+            if (align === 'none') {
+                align = 'center';
+            }
+            return align;
+        },
+        getConsumables(viewElement) {
+            const float = viewElement.getStyle('float');
+            const styles = ['float'];
+            if (float === 'left' && viewElement.hasStyle('margin-right')) {
+                styles.push('margin-right');
+            }
+            else if (float === 'right' && viewElement.hasStyle('margin-left')) {
+                styles.push('margin-left');
+            }
+            return { styles };
+        }
+    },
+    // Support for the `margin-left:auto; margin-right:auto;` CSS definition for the table alignment.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                'margin-left': 'auto',
+                'margin-right': 'auto'
+            }
+        },
+        getAlign: () => 'center',
+        getConsumables: () => {
+            return { styles: ['margin-left', 'margin-right'] };
+        }
+    },
+    // Support for the left alignment using CSS classes.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            key: 'class',
+            value: 'table-style-align-left'
+        },
+        getAlign: () => 'left',
+        getConsumables() {
+            return { classes: DEFAULT_TABLE_ALIGNMENT_OPTIONS.left.className };
+        }
+    },
+    // Support for the right alignment using CSS classes.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            key: 'class',
+            value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.right.className
+        },
+        getAlign: () => 'right',
+        getConsumables() {
+            return { classes: DEFAULT_TABLE_ALIGNMENT_OPTIONS.right.className };
+        }
+    },
+    // Support for the center alignment using CSS classes.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            key: 'class',
+            value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.center.className
+        },
+        getAlign: () => 'center',
+        getConsumables() {
+            return { classes: DEFAULT_TABLE_ALIGNMENT_OPTIONS.center.className };
+        }
+    },
+    // Support for the block alignment left using CSS classes.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            key: 'class',
+            value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockLeft.className
+        },
+        getAlign: () => 'blockLeft',
+        getConsumables() {
+            return { classes: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockLeft.className };
+        }
+    },
+    // Support for the block alignment right using CSS classes.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            key: 'class',
+            value: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockRight.className
+        },
+        getAlign: () => 'blockRight',
+        getConsumables() {
+            return { classes: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockRight.className };
+        }
+    },
+    // Support for the block alignment left using margin CSS styles.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                'margin-left': '0',
+                'margin-right': 'auto'
+            }
+        },
+        getAlign: () => 'blockLeft',
+        getConsumables() {
+            return { styles: ['margin-left', 'margin-right'] };
+        }
+    },
+    // Support for the block alignment right using margin CSS styles.
+    {
+        view: {
+            name: /^(table|figure)$/,
+            styles: {
+                'margin-left': 'auto',
+                'margin-right': '0'
+            }
+        },
+        getAlign: () => 'blockRight',
+        getConsumables() {
+            return { styles: ['margin-left', 'margin-right'] };
+        }
+    },
+    // Support for the `align` attribute as the backward compatibility while pasting from other sources.
+    {
+        view: {
+            name: 'table',
+            attributes: {
+                align: ALIGN_VALUES_REG_EXP
+            }
+        },
+        getAlign: (viewElement) => viewElement.getAttribute('align'),
+        getConsumables() {
+            return { attributes: 'align' };
+        }
+    }
+];
+export const downcastTableAlignmentConfig = {
+    center: {
+        align: 'center',
+        style: 'margin-left: auto; margin-right: auto;',
+        className: 'table-style-align-center'
+    },
+    left: {
+        align: 'left',
+        style: 'float: left;',
+        className: 'table-style-align-left'
+    },
+    right: {
+        align: 'right',
+        style: 'float: right;',
+        className: 'table-style-align-right'
+    },
+    blockLeft: {
+        align: undefined,
+        style: 'margin-left: 0; margin-right: auto;',
+        className: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockLeft.className
+    },
+    blockRight: {
+        align: undefined,
+        style: 'margin-left: auto; margin-right: 0;',
+        className: DEFAULT_TABLE_ALIGNMENT_OPTIONS.blockRight.className
+    }
+};