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

package/dist/index.css

@@ -109,9 +109,9 @@
 		 * 	* The table has `display: table` style set.
 		 * 	* The block element is placed directly after the table.
 		 */
-		.ck-content figure.table:not(.layout-table):not(:has(> figcaption)) {
-			display: block;
+		.ck-content figure.table:not(.layout-table) {
 			width: fit-content;
+			height: fit-content;
 		}
 
 		/**
@@ -144,29 +144,6 @@
 	width: 100%;
 }
 
-/*
- * 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.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
-			flex-wrap: wrap;
-		}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
-					/* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
-					flex-grow: 0.57;
-				}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
-					/* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
-					flex-grow: 0.43;
-				}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
-					flex-grow: 1;
-				}
-
 /*
  * 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
@@ -241,6 +218,302 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
+			flex-wrap: wrap;
+			flex-basis: 0;
+			align-content: baseline;
+		}
+
+.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
+				flex-wrap: nowrap;
+			}
+
+/*
+ * 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
+ */
+
+/*
+ * 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
+ */
+
+:root {
+	--ck-content-color-table-caption-background: hsl(0, 0%, 97%);
+	--ck-content-color-table-caption-text: hsl(0, 0%, 20%);
+	--ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
+}
+
+/* Content styles */
+.ck-content .table > figcaption,
+.ck-content figure.table > table > caption {
+	display: table-caption;
+	caption-side: top;
+	word-break: normal;
+	overflow-wrap: anywhere;
+	text-align: center;
+	color: var(--ck-content-color-table-caption-text);
+	background-color: var(--ck-content-color-table-caption-background);
+	padding: .6em;
+	font-size: .75em;
+	outline-offset: -1px;
+
+	/* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
+}
+@media (forced-colors: active) {
+		.ck-content .table > figcaption, .ck-content figure.table > table > caption {
+		background-color: unset;
+		color: unset;
+		}
+	}
+
+/* Editing styles */
+@media (forced-colors: none) {
+		.ck.ck-editor__editable .table > figcaption.table__caption_highlighted, .ck.ck-editor__editable figure.table > table > caption.table__caption_highlighted {
+			animation: ck-table-caption-highlight .6s ease-out;
+		}
+	}
+.ck.ck-editor__editable .table > figcaption.ck-placeholder::before, .ck.ck-editor__editable figure.table > table > caption.ck-placeholder::before {
+		padding-left: inherit;
+		padding-right: inherit;
+
+		/*
+		 * Make sure the table caption placeholder doesn't overflow the placeholder area.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9162.
+		 */
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+@keyframes ck-table-caption-highlight {
+	0% {
+		background-color: var(--ck-color-table-caption-highlighted-background);
+	}
+
+	100% {
+		background-color: var(--ck-content-color-table-caption-background);
+	}
+}
+
+/*
+ * 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
+ */
+
+:root {
+	--ck-color-table-column-resizer-hover: var(--ck-color-base-active);
+	--ck-table-column-resizer-width: 7px;
+
+	/* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
+	   The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
+	--ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
+}
+
+.ck-content .table .ck-table-resized {
+	table-layout: fixed;
+}
+
+.ck-content .table td,
+.ck-content .table th {
+	/* To prevent text overflowing beyond its cell when columns are resized by resize handler
+	(https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
+	overflow-wrap: break-word;
+}
+
+.ck.ck-editor__editable .table td,
+.ck.ck-editor__editable .table th {
+	/* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
+	position: relative;
+}
+
+.ck.ck-editor__editable .table .ck-table-column-resizer {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: var(--ck-table-column-resizer-position-offset);
+	width: var(--ck-table-column-resizer-width);
+	cursor: col-resize;
+	user-select: none;
+	z-index: var(--ck-z-default);
+}
+
+.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
+	display: none;
+}
+
+/* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
+   all resizers must be hidden while the table is dragged. */
+.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
+	display: none;
+}
+
+.ck.ck-editor__editable .table .ck-table-column-resizer:hover,
+.ck.ck-editor__editable .table .ck-table-column-resizer__active {
+	background-color: var(--ck-color-table-column-resizer-hover);
+	opacity: 0.25;
+}
+
+.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
+	left: var(--ck-table-column-resizer-position-offset);
+	right: unset;
+}
+
+/*
+ * 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.ck-form__row.ck-table-form__action-row {
+		justify-content: flex-end;
+	}
+
+.ck.ck-form__row.ck-table-form__action-row .ck-button-save,
+		.ck.ck-form__row.ck-table-form__action-row .ck-button-cancel {
+			justify-content: center;
+		}
+
+/*
+ * 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.ck-table-form .ck-form__row.ck-table-form__border-row {
+			flex-wrap: wrap;
+		}
+
+.ck.ck-table-form .ck-form__row.ck-table-form__background-row {
+			flex-wrap: wrap;
+		}
+
+.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
+			flex-wrap: wrap;
+			align-items: center;
+		}
+
+.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view {
+				display: flex;
+				flex-direction: column-reverse;
+				align-items: center;
+			}
+
+.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view .ck.ck-dropdown {
+					flex-grow: 0;
+				}
+
+/* Ignore labels that work as fieldset legends */
+
+/* Fallback for table dimension operator */
+
+.ck.ck-table-form .ck-form__row:not(.ck-table-form__action-row) > *:not(.ck-label, .ck-table-form__dimension-operator) {
+			flex-grow: 1;
+		}
+
+.ck.ck-table-form .ck.ck-labeled-field-view {
+		/* Allow absolute positioning of the status (error) balloons. */
+		position: relative;
+	}
+
+.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
+			position: absolute;
+			left: 50%;
+			bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) );
+			transform: translate(-50%,100%);
+
+			/* Make sure the balloon status stays on top of other form elements. */
+			z-index: 1;
+
+			/* The arrow pointing towards the field. */
+		}
+
+.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
+				content: "";
+				position: absolute;
+				top: calc( -1 * var(--ck-table-properties-error-arrow-size) );
+				left: 50%;
+				transform: translateX( -50% );
+			}
+
+.ck.ck-table-form:has( .ck-form__header > .ck-button-back ) .ck-form__row.ck-table-form__action-row > .ck.ck-button {
+				flex-grow: initial;
+			}
+
+.ck.ck-table-form:has( .ck-form__header > .ck-button-back ) .ck-form__row.ck-table-form__action-row > .ck.ck-button .ck-button__label {
+					color: currentColor;
+				}
+
+/*
+ * 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
+ */
+
+:root {
+	--ck-content-table-style-spacing: 1.5em;
+}
+
+.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
+			flex-wrap: wrap;
+			flex-basis: 0;
+			align-content: baseline;
+		}
+
+.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
+				flex-wrap: nowrap;
+			}
+
+.ck-content .table.table-style-align-left {
+			float: left;
+			margin-right: var(--ck-content-table-style-spacing);
+		}
+
+.ck-content .table.table-style-align-right {
+			float: right;
+			margin-left: var(--ck-content-table-style-spacing);
+		}
+
+.ck-content .table.table-style-align-center {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+.ck-content .table.table-style-block-align-left {
+			margin-left: 0;
+			margin-right: auto;
+		}
+
+.ck-content .table.table-style-block-align-right {
+			margin-left: auto;
+			margin-right: 0;
+		}
+
+.ck-editor__editable .table.layout-table.table-style-align-center {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+.ck-editor__editable .table.layout-table.table-style-align-left {
+			margin-right: var(--ck-content-table-style-spacing);
+		}
+
+.ck-editor__editable .table.layout-table.table-style-align-right {
+			margin-left: var(--ck-content-table-style-spacing);
+		}
+
+.ck-editor__editable .table.layout-table.table-style-block-align-left {
+			margin-left: 0;
+			margin-right: auto;
+		}
+
+.ck-editor__editable .table.layout-table.table-style-block-align-right {
+			margin-left: auto;
+			margin-right: 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
+ */
+
 /*
  * 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
@@ -406,146 +679,23 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
+.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
 			flex-wrap: wrap;
-			flex-basis: 0;
-			align-content: baseline;
 		}
 
-.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
-				flex-wrap: nowrap;
-			}
-
-/*
- * 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
- */
-
-/*
- * 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
- */
-
-:root {
-	--ck-content-color-table-caption-background: hsl(0, 0%, 97%);
-	--ck-content-color-table-caption-text: hsl(0, 0%, 20%);
-	--ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
-}
-
-/* Content styles */
-.ck-content .table > figcaption,
-.ck-content figure.table > table > caption {
-	display: table-caption;
-	caption-side: top;
-	word-break: normal;
-	overflow-wrap: anywhere;
-	text-align: center;
-	color: var(--ck-content-color-table-caption-text);
-	background-color: var(--ck-content-color-table-caption-background);
-	padding: .6em;
-	font-size: .75em;
-	outline-offset: -1px;
-
-	/* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
-}
-@media (forced-colors: active) {
-		.ck-content .table > figcaption, .ck-content figure.table > table > caption {
-		background-color: unset;
-		color: unset;
-		}
-	}
-
-/* Editing styles */
-@media (forced-colors: none) {
-		.ck.ck-editor__editable .table > figcaption.table__caption_highlighted, .ck.ck-editor__editable figure.table > table > caption.table__caption_highlighted {
-			animation: ck-table-caption-highlight .6s ease-out;
-		}
-	}
-.ck.ck-editor__editable .table > figcaption.ck-placeholder::before, .ck.ck-editor__editable figure.table > table > caption.ck-placeholder::before {
-		padding-left: inherit;
-		padding-right: inherit;
-
-		/*
-		 * Make sure the table caption placeholder doesn't overflow the placeholder area.
-		 * See https://github.com/ckeditor/ckeditor5/issues/9162.
-		 */
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-@keyframes ck-table-caption-highlight {
-	0% {
-		background-color: var(--ck-color-table-caption-highlighted-background);
-	}
-
-	100% {
-		background-color: var(--ck-content-color-table-caption-background);
-	}
-}
-
-/*
- * 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
- */
-
-:root {
-	--ck-color-table-column-resizer-hover: var(--ck-color-base-active);
-	--ck-table-column-resizer-width: 7px;
-
-	/* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
-	   The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
-	--ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
-}
-
-.ck-content .table .ck-table-resized {
-	table-layout: fixed;
-}
-
-.ck-content .table td,
-.ck-content .table th {
-	/* To prevent text overflowing beyond its cell when columns are resized by resize handler
-	(https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
-	overflow-wrap: break-word;
-}
-
-.ck.ck-editor__editable .table td,
-.ck.ck-editor__editable .table th {
-	/* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
-	position: relative;
-}
-
-.ck.ck-editor__editable .table .ck-table-column-resizer {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	right: var(--ck-table-column-resizer-position-offset);
-	width: var(--ck-table-column-resizer-width);
-	cursor: col-resize;
-	user-select: none;
-	z-index: var(--ck-z-default);
-}
-
-.ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
-	display: none;
-}
-
-/* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
-   all resizers must be hidden while the table is dragged. */
-.ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
-	display: none;
-}
+.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
+					/* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
+					flex-grow: 0.57;
+				}
 
-.ck.ck-editor__editable .table .ck-table-column-resizer:hover,
-.ck.ck-editor__editable .table .ck-table-column-resizer__active {
-	background-color: var(--ck-color-table-column-resizer-hover);
-	opacity: 0.25;
-}
+.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
+					/* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
+					flex-grow: 0.43;
+				}
 
-.ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
-	left: var(--ck-table-column-resizer-position-offset);
-	right: unset;
-}
+.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
+					flex-grow: 1;
+				}
 
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.