@ckeditor/ckeditor5-table 44.3.0-alpha.7 → 45.0.0-alpha.0

package/theme/tableform.css

@@ -31,6 +31,12 @@
 				flex-grow: 0;
 			}
 		}
+
+		/* Ignore labels that work as fieldset legends */
+		/* Fallback for table dimension operator */
+		& > *:not(.ck-label, .ck-table-form__dimension-operator) {
+			flex-grow: 1;
+		}
 	}
 
 	& .ck.ck-labeled-field-view {

package/theme/tablelayout.css

@@ -0,0 +1,62 @@
+/*
+ * 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
+ */
+
+.ck-editor__editable {
+	&.ck-editor__editable_inline {
+		& > .ck-widget.ck-widget_with-selection-handle.layout-table {
+			&:first-child {
+				margin-top: var(--ck-spacing-large);
+			}
+			/*
+			* This value should match with the default margins of the block elements (like .media, .image or .table)
+			* to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825).
+			*/
+			&:last-child,
+			/* Fallback for hidden fake selection div */
+			&:nth-last-child(2):has( + .ck-fake-selection-container) {
+				margin-bottom: var(--ck-spacing-large);
+			}
+		}
+	}
+
+	& .table.layout-table {
+		display: table;
+		margin: 0;
+
+		/* Widget type around overrides. */
+		&.ck-widget {
+			&:hover > .ck-widget__selection-handle {
+				opacity: 0.75;
+				visibility: visible;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			/* Because of setting the opacity to 0.75 to the selection handle for the layout table,
+			it overrides the similar selector in widget (specificity is higher),
+			thats why we must override it here also. */
+			&:has( .ck-widget:hover ) > .ck-widget__selection-handle {
+				opacity: 0;
+				visibility: hidden;
+			}
+		}
+	}
+}
+
+.ck-content {
+	& table.table.layout-table,
+	& figure.table.layout-table {
+		/* Do not reserve space above and below the layout table. */
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	& table.table.layout-table,
+	& figure.table.layout-table > table {
+		border-spacing: 0;
+	}
+}

package/src/ui/formrowview.d.ts

@@ -1,61 +0,0 @@
-/**
- * @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/ui/formrowview
- */
-import { View, type LabelView, type ViewCollection } from 'ckeditor5/src/ui.js';
-import type { Locale } from 'ckeditor5/src/utils.js';
-import '../../theme/formrow.css';
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @internal
- */
-export default class FormRowView extends View {
-    /**
-     * An additional CSS class added to the {@link #element}.
-     *
-     * @observable
-     */
-    class: string | null;
-    /**
-     * A collection of row items (buttons, dropdowns, etc.).
-     */
-    readonly children: ViewCollection;
-    /**
-     * The role property reflected by the `role` DOM attribute of the {@link #element}.
-     *
-     * **Note**: Used only when a `labelView` is passed to constructor `options`.
-     *
-     * @observable
-     * @internal
-     */
-    _role: string | null;
-    /**
-     * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
-     *
-     * **Note**: Used only when a `labelView` is passed to constructor `options`.
-     *
-     * @observable
-     * @internal
-     */
-    _ariaLabelledBy: string | null;
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-     * DOM attributes and gets described by the label.
-     */
-    constructor(locale: Locale, options?: {
-        children?: Array<View>;
-        class?: string;
-        labelView?: LabelView;
-    });
-}

package/src/ui/formrowview.js

@@ -1,57 +0,0 @@
-/**
- * @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/ui/formrowview
- */
-import { View } from 'ckeditor5/src/ui.js';
-import '../../theme/formrow.css';
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @internal
- */
-export default class FormRowView extends View {
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-     * DOM attributes and gets described by the label.
-     */
-    constructor(locale, options = {}) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('class', options.class || null);
-        this.children = this.createCollection();
-        if (options.children) {
-            options.children.forEach(child => this.children.add(child));
-        }
-        this.set('_role', null);
-        this.set('_ariaLabelledBy', null);
-        if (options.labelView) {
-            this.set({
-                _role: 'group',
-                _ariaLabelledBy: options.labelView.id
-            });
-        }
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form__row',
-                    bind.to('class')
-                ],
-                role: bind.to('_role'),
-                'aria-labelledby': bind.to('_ariaLabelledBy')
-            },
-            children: this.children
-        });
-    }
-}

package/theme/form.css

@@ -1,11 +0,0 @@
-/*
- * 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
- */
-
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */
-

package/theme/icons/table-cell-properties.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.105 18-.17 1H2.5A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1h15A1.5 1.5 0 0 1 19 2.5v9.975l-.85-.124-.15-.302V8h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5h3.105zM2 12h5V8H2v4zm10-4H8v4h4V8zM2 2v5h5V2H2zm0 16h5v-5H2v5zM13 7h5V2h-5v5zM8 2v5h4V2H8z" opacity=".6"/><path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM13 6a1 1 0 0 1 1 1v3.172a2.047 2.047 0 0 0-.293.443l-.858 1.736-1.916.28-.151.027A1.976 1.976 0 0 0 9.315 14H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm-1 2H8v4h4V8z"/></svg>

package/theme/icons/table-column.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z" opacity=".6"/><path d="M18 7v1H2V7h16zm0 5v1H2v-1h16z" opacity=".6"/><path d="M14 1v18a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1zm-2 1H8v4h4V2zm0 6H8v4h4V8zm0 6H8v4h4v-4z"/></svg>

package/theme/icons/table-merge-cell.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z" opacity=".6"/><path d="M7 2h1v16H7V2zm5 0h1v7h-1V2zm6 5v1H2V7h16zM8 12v1H2v-1h6z" opacity=".6"/><path d="M7 7h12a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1 2v9h10V9H8z"/></svg>

package/theme/icons/table-properties.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 2v5h4V2h1v5h5v1h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5H7v-5H2v-1h5V8H2V7h5V2h1zm4 6H8v4h4V8z" opacity=".6"/><path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM17 1a2 2 0 0 1 2 2v9.475l-.85-.124-.857-1.736a2.048 2.048 0 0 0-.292-.44L17 3H3v14h7.808l.402.392L10.935 19H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h14z"/></svg>

package/theme/icons/table-row.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1h15A1.5 1.5 0 0 1 19 2.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1zM2 2v16h16V2H2z" opacity=".6"/><path d="M7 2h1v16H7V2zm5 0h1v16h-1V2z" opacity=".6"/><path d="M1 6h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1 2v4h4V8H2zm6 0v4h4V8H8zm6 0v4h4V8h-4z"/></svg>