@ckeditor/ckeditor5-table 39.0.1 → 40.0.0

package/src/ui/inserttableview.js

@@ -1,169 +1,169 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module table/ui/inserttableview
- */
-import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
-import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils';
-import './../../theme/inserttable.css';
-/**
- * The table size view.
- *
- * It renders a 10x10 grid to choose the inserted table size.
- */
-export default class InsertTableView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.items = this._createGridCollection();
-        this.keystrokes = new KeystrokeHandler();
-        this.focusTracker = new FocusTracker();
-        this.set('rows', 0);
-        this.set('columns', 0);
-        this.bind('label').to(this, 'columns', this, 'rows', (columns, rows) => `${rows} × ${columns}`);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: ['ck']
-            },
-            children: [
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: ['ck-insert-table-dropdown__grid']
-                    },
-                    on: {
-                        'mouseover@.ck-insert-table-dropdown-grid-box': bind.to('boxover')
-                    },
-                    children: this.items
-                },
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-insert-table-dropdown__label'
-                        ],
-                        'aria-hidden': true
-                    },
-                    children: [
-                        {
-                            text: bind.to('label')
-                        }
-                    ]
-                }
-            ],
-            on: {
-                mousedown: bind.to(evt => {
-                    evt.preventDefault();
-                }),
-                click: bind.to(() => {
-                    this.fire('execute');
-                })
-            }
-        });
-        // #rows and #columns are set via changes to #focusTracker on mouse over.
-        this.on('boxover', (evt, domEvt) => {
-            const { row, column } = domEvt.target.dataset;
-            this.items.get((parseInt(row, 10) - 1) * 10 + (parseInt(column, 10) - 1)).focus();
-        });
-        // This allows the #rows and #columns to be updated when:
-        // * the user navigates the grid using the keyboard,
-        // * the user moves the mouse over grid items.
-        this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
-            if (!focusedElement) {
-                return;
-            }
-            const { row, column } = focusedElement.dataset;
-            // As row & column indexes are zero-based transform it to number of selected rows & columns.
-            this.set({
-                rows: parseInt(row),
-                columns: parseInt(column)
-            });
-        });
-        this.on('change:columns', () => this._highlightGridBoxes());
-        this.on('change:rows', () => this._highlightGridBoxes());
-    }
-    render() {
-        super.render();
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.items,
-            numberOfColumns: 10,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-        for (const item of this.items) {
-            this.focusTracker.add(item.element);
-        }
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    focus() {
-        this.items.get(0).focus();
-    }
-    /**
-     * @inheritDoc
-     */
-    focusLast() {
-        this.items.get(0).focus();
-    }
-    /**
-     * Highlights grid boxes depending on rows and columns selected.
-     */
-    _highlightGridBoxes() {
-        const rows = this.rows;
-        const columns = this.columns;
-        this.items.map((boxView, index) => {
-            // Translate box index to the row & column index.
-            const itemRow = Math.floor(index / 10);
-            const itemColumn = index % 10;
-            // Grid box is highlighted when its row & column index belongs to selected number of rows & columns.
-            const isOn = itemRow < rows && itemColumn < columns;
-            boxView.set('isOn', isOn);
-        });
-    }
-    /**
-     * Creates a new Button for the grid.
-     *
-     * @param locale The locale instance.
-     * @param row Row number.
-     * @param column Column number.
-     * @param label The grid button label.
-     */
-    _createGridButton(locale, row, column, label) {
-        const button = new ButtonView(locale);
-        button.set({
-            label,
-            class: 'ck-insert-table-dropdown-grid-box'
-        });
-        button.extendTemplate({
-            attributes: {
-                'data-row': row,
-                'data-column': column
-            }
-        });
-        return button;
-    }
-    /**
-     * @returns A view collection containing boxes to be placed in a table grid.
-     */
-    _createGridCollection() {
-        const boxes = [];
-        // Add grid boxes to table selection view.
-        for (let index = 0; index < 100; index++) {
-            const row = Math.floor(index / 10);
-            const column = index % 10;
-            const label = `${row + 1} × ${column + 1}`;
-            boxes.push(this._createGridButton(this.locale, row + 1, column + 1, label));
-        }
-        return this.createCollection(boxes);
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/ui/inserttableview
+ */
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils';
+import './../../theme/inserttable.css';
+/**
+ * The table size view.
+ *
+ * It renders a 10x10 grid to choose the inserted table size.
+ */
+export default class InsertTableView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.items = this._createGridCollection();
+        this.keystrokes = new KeystrokeHandler();
+        this.focusTracker = new FocusTracker();
+        this.set('rows', 0);
+        this.set('columns', 0);
+        this.bind('label').to(this, 'columns', this, 'rows', (columns, rows) => `${rows} × ${columns}`);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: ['ck']
+            },
+            children: [
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: ['ck-insert-table-dropdown__grid']
+                    },
+                    on: {
+                        'mouseover@.ck-insert-table-dropdown-grid-box': bind.to('boxover')
+                    },
+                    children: this.items
+                },
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-insert-table-dropdown__label'
+                        ],
+                        'aria-hidden': true
+                    },
+                    children: [
+                        {
+                            text: bind.to('label')
+                        }
+                    ]
+                }
+            ],
+            on: {
+                mousedown: bind.to(evt => {
+                    evt.preventDefault();
+                }),
+                click: bind.to(() => {
+                    this.fire('execute');
+                })
+            }
+        });
+        // #rows and #columns are set via changes to #focusTracker on mouse over.
+        this.on('boxover', (evt, domEvt) => {
+            const { row, column } = domEvt.target.dataset;
+            this.items.get((parseInt(row, 10) - 1) * 10 + (parseInt(column, 10) - 1)).focus();
+        });
+        // This allows the #rows and #columns to be updated when:
+        // * the user navigates the grid using the keyboard,
+        // * the user moves the mouse over grid items.
+        this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
+            if (!focusedElement) {
+                return;
+            }
+            const { row, column } = focusedElement.dataset;
+            // As row & column indexes are zero-based transform it to number of selected rows & columns.
+            this.set({
+                rows: parseInt(row),
+                columns: parseInt(column)
+            });
+        });
+        this.on('change:columns', () => this._highlightGridBoxes());
+        this.on('change:rows', () => this._highlightGridBoxes());
+    }
+    render() {
+        super.render();
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.items,
+            numberOfColumns: 10,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
+        for (const item of this.items) {
+            this.focusTracker.add(item.element);
+        }
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    focus() {
+        this.items.get(0).focus();
+    }
+    /**
+     * @inheritDoc
+     */
+    focusLast() {
+        this.items.get(0).focus();
+    }
+    /**
+     * Highlights grid boxes depending on rows and columns selected.
+     */
+    _highlightGridBoxes() {
+        const rows = this.rows;
+        const columns = this.columns;
+        this.items.map((boxView, index) => {
+            // Translate box index to the row & column index.
+            const itemRow = Math.floor(index / 10);
+            const itemColumn = index % 10;
+            // Grid box is highlighted when its row & column index belongs to selected number of rows & columns.
+            const isOn = itemRow < rows && itemColumn < columns;
+            boxView.set('isOn', isOn);
+        });
+    }
+    /**
+     * Creates a new Button for the grid.
+     *
+     * @param locale The locale instance.
+     * @param row Row number.
+     * @param column Column number.
+     * @param label The grid button label.
+     */
+    _createGridButton(locale, row, column, label) {
+        const button = new ButtonView(locale);
+        button.set({
+            label,
+            class: 'ck-insert-table-dropdown-grid-box'
+        });
+        button.extendTemplate({
+            attributes: {
+                'data-row': row,
+                'data-column': column
+            }
+        });
+        return button;
+    }
+    /**
+     * @returns A view collection containing boxes to be placed in a table grid.
+     */
+    _createGridCollection() {
+        const boxes = [];
+        // Add grid boxes to table selection view.
+        for (let index = 0; index < 100; index++) {
+            const row = Math.floor(index / 10);
+            const column = index % 10;
+            const label = `${row + 1} × ${column + 1}`;
+            boxes.push(this._createGridButton(this.locale, row + 1, column + 1, label));
+        }
+        return this.createCollection(boxes);
+    }
+}

package/src/utils/common.d.ts

@@ -1,42 +1,42 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module table/utils/common
- */
-import type { Conversion, Element, Item, Position, Schema, Writer } from 'ckeditor5/src/engine';
-import type TableUtils from '../tableutils';
-/**
- * A common method to update the numeric value. If a value is the default one, it will be unset.
- *
- * @param key An attribute key.
- * @param value The new attribute value.
- * @param item A model item on which the attribute will be set.
- * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
- */
-export declare function updateNumericAttribute(key: string, value: unknown, item: Item, writer: Writer, defaultValue?: unknown): void;
-/**
- * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
- *
- * @param writer The model writer.
- * @param insertPosition The position at which the table cell should be inserted.
- * @param attributes The element attributes.
- * @returns Created table cell.
- */
-export declare function createEmptyTableCell(writer: Writer, insertPosition: Position, attributes?: Record<string, unknown>): Element;
-/**
- * Checks if a table cell belongs to the heading column section.
- */
-export declare function isHeadingColumnCell(tableUtils: TableUtils, tableCell: Element): boolean;
-/**
- * Enables conversion for an attribute for simple view-model mappings.
- *
- * @param options.defaultValue The default value for the specified `modelAttribute`.
- */
-export declare function enableProperty(schema: Schema, conversion: Conversion, options: {
-    modelAttribute: string;
-    styleName: string;
-    defaultValue: string;
-    reduceBoxSides?: boolean;
-}): void;
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/utils/common
+ */
+import type { Conversion, Element, Item, Position, Schema, Writer } from 'ckeditor5/src/engine';
+import type TableUtils from '../tableutils';
+/**
+ * A common method to update the numeric value. If a value is the default one, it will be unset.
+ *
+ * @param key An attribute key.
+ * @param value The new attribute value.
+ * @param item A model item on which the attribute will be set.
+ * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
+ */
+export declare function updateNumericAttribute(key: string, value: unknown, item: Item, writer: Writer, defaultValue?: unknown): void;
+/**
+ * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
+ *
+ * @param writer The model writer.
+ * @param insertPosition The position at which the table cell should be inserted.
+ * @param attributes The element attributes.
+ * @returns Created table cell.
+ */
+export declare function createEmptyTableCell(writer: Writer, insertPosition: Position, attributes?: Record<string, unknown>): Element;
+/**
+ * Checks if a table cell belongs to the heading column section.
+ */
+export declare function isHeadingColumnCell(tableUtils: TableUtils, tableCell: Element): boolean;
+/**
+ * Enables conversion for an attribute for simple view-model mappings.
+ *
+ * @param options.defaultValue The default value for the specified `modelAttribute`.
+ */
+export declare function enableProperty(schema: Schema, conversion: Conversion, options: {
+    modelAttribute: string;
+    styleName: string;
+    defaultValue: string;
+    reduceBoxSides?: boolean;
+}): void;

package/src/utils/common.js

@@ -1,57 +1,57 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { downcastAttributeToStyle, upcastStyleToAttribute } from './../converters/tableproperties';
-/**
- * A common method to update the numeric value. If a value is the default one, it will be unset.
- *
- * @param key An attribute key.
- * @param value The new attribute value.
- * @param item A model item on which the attribute will be set.
- * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
- */
-export function updateNumericAttribute(key, value, item, writer, defaultValue = 1) {
-    if (value !== undefined && value !== null && defaultValue !== undefined && defaultValue !== null && value > defaultValue) {
-        writer.setAttribute(key, value, item);
-    }
-    else {
-        writer.removeAttribute(key, item);
-    }
-}
-/**
- * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
- *
- * @param writer The model writer.
- * @param insertPosition The position at which the table cell should be inserted.
- * @param attributes The element attributes.
- * @returns Created table cell.
- */
-export function createEmptyTableCell(writer, insertPosition, attributes = {}) {
-    const tableCell = writer.createElement('tableCell', attributes);
-    writer.insertElement('paragraph', tableCell);
-    writer.insert(tableCell, insertPosition);
-    return tableCell;
-}
-/**
- * Checks if a table cell belongs to the heading column section.
- */
-export function isHeadingColumnCell(tableUtils, tableCell) {
-    const table = tableCell.parent.parent;
-    const headingColumns = parseInt(table.getAttribute('headingColumns') || '0');
-    const { column } = tableUtils.getCellLocation(tableCell);
-    return !!headingColumns && column < headingColumns;
-}
-/**
- * Enables conversion for an attribute for simple view-model mappings.
- *
- * @param options.defaultValue The default value for the specified `modelAttribute`.
- */
-export function enableProperty(schema, conversion, options) {
-    const { modelAttribute } = options;
-    schema.extend('tableCell', {
-        allowAttributes: [modelAttribute]
-    });
-    upcastStyleToAttribute(conversion, { viewElement: /^(td|th)$/, ...options });
-    downcastAttributeToStyle(conversion, { modelElement: 'tableCell', ...options });
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { downcastAttributeToStyle, upcastStyleToAttribute } from './../converters/tableproperties';
+/**
+ * A common method to update the numeric value. If a value is the default one, it will be unset.
+ *
+ * @param key An attribute key.
+ * @param value The new attribute value.
+ * @param item A model item on which the attribute will be set.
+ * @param defaultValue The default attribute value. If a value is lower or equal, it will be unset.
+ */
+export function updateNumericAttribute(key, value, item, writer, defaultValue = 1) {
+    if (value !== undefined && value !== null && defaultValue !== undefined && defaultValue !== null && value > defaultValue) {
+        writer.setAttribute(key, value, item);
+    }
+    else {
+        writer.removeAttribute(key, item);
+    }
+}
+/**
+ * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
+ *
+ * @param writer The model writer.
+ * @param insertPosition The position at which the table cell should be inserted.
+ * @param attributes The element attributes.
+ * @returns Created table cell.
+ */
+export function createEmptyTableCell(writer, insertPosition, attributes = {}) {
+    const tableCell = writer.createElement('tableCell', attributes);
+    writer.insertElement('paragraph', tableCell);
+    writer.insert(tableCell, insertPosition);
+    return tableCell;
+}
+/**
+ * Checks if a table cell belongs to the heading column section.
+ */
+export function isHeadingColumnCell(tableUtils, tableCell) {
+    const table = tableCell.parent.parent;
+    const headingColumns = parseInt(table.getAttribute('headingColumns') || '0');
+    const { column } = tableUtils.getCellLocation(tableCell);
+    return !!headingColumns && column < headingColumns;
+}
+/**
+ * Enables conversion for an attribute for simple view-model mappings.
+ *
+ * @param options.defaultValue The default value for the specified `modelAttribute`.
+ */
+export function enableProperty(schema, conversion, options) {
+    const { modelAttribute } = options;
+    schema.extend('tableCell', {
+        allowAttributes: [modelAttribute]
+    });
+    upcastStyleToAttribute(conversion, { viewElement: /^(td|th)$/, ...options });
+    downcastAttributeToStyle(conversion, { modelElement: 'tableCell', ...options });
+}