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

package/dist/index-content.css

@@ -2,42 +2,68 @@
  * @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
  */
-.ck-content .table{
-	margin:0.9em auto;
-	display:table;
-}
+.ck-content[dir="rtl"] .table th{
+		text-align:right;
+	}
 
-.ck-content .table table{
+.ck-content[dir="ltr"] .table th{
+		text-align:left;
+	}
+
+.ck-content figure.table:not(.layout-table){
+		display:table;
+	}
+
+.ck-content figure.table:not(.layout-table) > table{
+			width:100%;
+			height:100%;
+		}
+
+.ck-content figure.table:not(.layout-table),
+	.ck-content table.table:not(.layout-table){
+		margin:0.9em auto;
+	}
+
+.ck-content table.table:not(.layout-table),
+	.ck-content figure.table:not(.layout-table) > table{
 		border-collapse:collapse;
 		border-spacing:0;
-		width:100%;
-		height:100%;
 		border:1px double hsl(0, 0%, 70%);
 	}
 
-.ck-content .table table td,
-		.ck-content .table table th{
-			min-width:2em;
-			padding:.4em;
-			border:1px solid hsl(0, 0%, 75%);
-		}
+.ck-content table.table:not(.layout-table) > thead > tr > th, .ck-content figure.table:not(.layout-table) > table > thead > tr > th, .ck-content table.table:not(.layout-table) > tbody > tr > th, .ck-content figure.table:not(.layout-table) > table > tbody > tr > th{
+					font-weight:bold;
+					background:hsla(0, 0%, 0%, 5%);
+				}
 
-.ck-content .table table th{
-			font-weight:bold;
-			background:hsla(0, 0%, 0%, 5%);
-		}
+.ck-content table.table:not(.layout-table) > thead > tr > td,
+				.ck-content figure.table:not(.layout-table) > table > thead > tr > td,
+				.ck-content table.table:not(.layout-table) > tbody > tr > td,
+				.ck-content figure.table:not(.layout-table) > table > tbody > tr > td,
+				.ck-content table.table:not(.layout-table) > thead > tr > th,
+				.ck-content figure.table:not(.layout-table) > table > thead > tr > th,
+				.ck-content table.table:not(.layout-table) > tbody > tr > th,
+				.ck-content figure.table:not(.layout-table) > table > tbody > tr > th{
+					min-width:2em;
+					padding:.4em;
+					border:1px solid hsl(0, 0%, 75%);
+				}
 @media print{
-	.ck-content .table table{
+	.ck-content figure.table > table{
 		height:initial;
 	}
 }
-.ck-content[dir="rtl"] .table th{
-	text-align:right;
-}
 
-.ck-content[dir="ltr"] .table th{
-	text-align:left;
-}
+.ck-content table.table.layout-table,
+	.ck-content figure.table.layout-table{
+		margin-top:0;
+		margin-bottom:0;
+	}
+
+.ck-content table.table.layout-table,
+	.ck-content figure.table.layout-table > table{
+		border-spacing:0;
+	}
 
 :root{
 	--ck-color-selector-caption-background:hsl(0, 0%, 97%);
@@ -72,5 +98,4 @@
 .ck-content .table td,
 .ck-content .table th{
 	overflow-wrap:break-word;
-	position:relative;
 }

package/dist/index-editor.css

@@ -13,22 +13,6 @@
 	flex-wrap:wrap;
 }
 
-.ck.ck-form__row{
-	display:flex;
-	flex-direction:row;
-	flex-wrap:nowrap;
-	justify-content:space-between;
-}
-
-.ck.ck-form__row > *:not(.ck-label){
-		flex-grow:1;
-	}
-
-.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;
-		}
-
 .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row{
 			flex-wrap:wrap;
 		}
@@ -78,6 +62,112 @@
 				display:block;
 			}
 
+.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:first-child{
+				margin-top:var(--ck-spacing-large);
+			}
+
+.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:last-child,
+			
+			.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:nth-last-child(2):has( + .ck-fake-selection-container){
+				margin-bottom:var(--ck-spacing-large);
+			}
+
+.ck-editor__editable .table.layout-table{
+		display:table;
+		margin:0;
+	}
+
+.ck-editor__editable .table.layout-table.ck-widget:hover > .ck-widget__selection-handle{
+				opacity:0.75;
+				visibility:visible;
+			}
+
+.ck-editor__editable .table.layout-table.ck-widget:hover > .ck-widget__selection-handle:hover{
+					opacity:1;
+				}
+
+.ck-editor__editable .table.layout-table.ck-widget:has( .ck-widget:hover) > .ck-widget__selection-handle{
+				opacity:0;
+				visibility:hidden;
+			}
+
+:root{
+	--ck-form-default-width:340px;
+}
+
+.ck.ck-form{
+	padding:0 0 var(--ck-spacing-large);
+}
+
+.ck.ck-form.ck-form_default-width{
+		width:var(--ck-form-default-width);
+	}
+
+.ck.ck-form:focus{
+		outline:none;
+	}
+
+.ck.ck-form .ck.ck-input-text,
+	.ck.ck-form .ck.ck-input-number{
+		min-width:100%;
+		width:0;
+	}
+
+.ck.ck-form .ck.ck-dropdown{
+		min-width:100%;
+	}
+
+.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus){
+				border:1px solid var(--ck-color-base-border);
+			}
+
+.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label{
+				width:100%;
+			}
+
+@media screen and (max-width: 600px){
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit{
+					flex-direction:column;
+					align-items:stretch;
+					padding:0;
+			}
+	}
+
+@media screen and (max-width: 600px){
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck{
+						margin:var(--ck-spacing-large) var(--ck-spacing-large) 0;
+				}
+	}
+
+@media screen and (max-width: 600px){
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text{
+						justify-content:center;
+				}
+	}
+
+@media screen and (max-width: 600px){
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding{
+					padding-bottom:var(--ck-spacing-large);
+			}
+	}
+
+[dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child){
+				margin-left:0;
+			}
+
+[dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child){
+				margin-left:0;
+			}
+
+.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;
+		}
+
 .ck.ck-table-form .ck-form__row.ck-table-form__border-row{
 			flex-wrap:wrap;
 		}
@@ -105,6 +195,10 @@
 				flex-grow:0;
 			}
 
+.ck.ck-table-form .ck-form__row > *:not(.ck-label, .ck-table-form__dimension-operator){
+			flex-grow:1;
+		}
+
 .ck.ck-table-form .ck.ck-labeled-field-view{
 		position:relative;
 	}
@@ -169,6 +263,11 @@
 	--ck-table-column-resizer-position-offset:calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
 }
 
+.ck.ck-editor__editable .table td,
+.ck.ck-editor__editable .table th{
+	position:relative;
+}
+
 .ck.ck-editor__editable .table .ck-table-column-resizer{
 	position:absolute;
 	top:0;

package/dist/index.css

@@ -7,44 +7,73 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-.ck-content .table {
-	/* Give the table widget some air and center it horizontally */
-	/* The first value should be equal to --ck-spacing-large variable if used in the editor context
-	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
-	margin: 0.9em auto;
-	display: table;
-}
+/* Text alignment of the table header should match the editor settings and override the native browser styling,
+	when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
 
-.ck-content .table table {
+.ck-content[dir="rtl"] .table th {
+		text-align: right;
+	}
+
+.ck-content[dir="ltr"] .table th {
+		text-align: left;
+	}
+
+.ck-content figure.table:not(.layout-table) {
+		display: table;
+	}
+
+.ck-content figure.table:not(.layout-table) > table {
+			width: 100%;
+			height: 100%;
+		}
+
+.ck-content figure.table:not(.layout-table),
+	.ck-content table.table:not(.layout-table) {
+		/* Give the table widget some air and center it horizontally */
+		/* The first value should be equal to --ck-spacing-large variable if used in the editor context
+		to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
+		margin: 0.9em auto;
+	}
+
+.ck-content table.table:not(.layout-table),
+	.ck-content figure.table:not(.layout-table) > table {
 		/* The table cells should have slight borders */
 		border-collapse: collapse;
 		border-spacing: 0;
 
-		/* Table width and height are set on the parent <figure>. Make sure the table inside stretches
-		to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */
-		width: 100%;
-		height: 100%;
-
 		/* The outer border of the table should be slightly darker than the inner lines.
 		Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
 		border: 1px double hsl(0, 0%, 70%);
 	}
 
-.ck-content .table table td,
-		.ck-content .table table th {
-			min-width: 2em;
-			padding: .4em;
+/* The linter is disabled here because linter is confused when resolving the `table.table:not(.layout-table)`
+			and `figure.table:not(.layout-table) > table` selectors combined with below selectors.
+			There is no need to split it into two large structures with same code just to make linter happy. */
 
-			/* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
-			However, the border is a content style, so it should use .ck-content (so it works outside the editor).
-			Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
-			border: 1px solid hsl(0, 0%, 75%);
-		}
+/* stylelint-disable no-descending-specificity */
 
-.ck-content .table table th {
-			font-weight: bold;
-			background: hsla(0, 0%, 0%, 5%);
-		}
+.ck-content table.table:not(.layout-table) > thead > tr > th, .ck-content figure.table:not(.layout-table) > table > thead > tr > th, .ck-content table.table:not(.layout-table) > tbody > tr > th, .ck-content figure.table:not(.layout-table) > table > tbody > tr > th {
+					font-weight: bold;
+					background: hsla(0, 0%, 0%, 5%);
+				}
+
+.ck-content table.table:not(.layout-table) > thead > tr > td,
+				.ck-content figure.table:not(.layout-table) > table > thead > tr > td,
+				.ck-content table.table:not(.layout-table) > tbody > tr > td,
+				.ck-content figure.table:not(.layout-table) > table > tbody > tr > td,
+				.ck-content table.table:not(.layout-table) > thead > tr > th,
+				.ck-content figure.table:not(.layout-table) > table > thead > tr > th,
+				.ck-content table.table:not(.layout-table) > tbody > tr > th,
+				.ck-content figure.table:not(.layout-table) > table > tbody > tr > th {
+					/* stylelint-enable no-descending-specificity */
+					min-width: 2em;
+					padding: .4em;
+
+					/* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
+					However, the border is a content style, so it should use .ck-content (so it works outside the editor).
+					Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
+					border: 1px solid hsl(0, 0%, 75%);
+				}
 
 /**
  * Expanding the table to the full height of the parent container is necessary because tables
@@ -58,21 +87,11 @@
  * For now, resetting the height to `initial` in the print mode works as a workaround.
  */
 @media print {
-	.ck-content .table table {
+	.ck-content figure.table > table {
 		height: initial;
 	}
 }
 
-/* Text alignment of the table header should match the editor settings and override the native browser styling,
-when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
-.ck-content[dir="rtl"] .table th {
-	text-align: right;
-}
-
-.ck-content[dir="ltr"] .table th {
-	text-align: left;
-}
-
 .ck-editor__editable .ck-table-bogus-paragraph {
 	/*
 	 * Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
@@ -98,29 +117,6 @@ when content is available outside the editor. See https://github.com/ckeditor/ck
 	flex-wrap: wrap;
 }
 
-/*
- * 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 {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-
-	/* Ignore labels that work as fieldset legends */
-}
-
-.ck.ck-form__row > *:not(.ck-label) {
-		flex-grow: 1;
-	}
-
-.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
@@ -190,6 +186,163 @@ when content is available outside the editor. See https://github.com/ckeditor/ck
  * 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).
+			*/
+
+.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:last-child,
+			
+			.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:nth-last-child(2):has( + .ck-fake-selection-container) {
+				margin-bottom: var(--ck-spacing-large);
+			}
+
+.ck-editor__editable .table.layout-table {
+		display: table;
+		margin: 0;
+
+		/* Widget type around overrides. */
+	}
+
+.ck-editor__editable .table.layout-table.ck-widget:hover > .ck-widget__selection-handle {
+				opacity: 0.75;
+				visibility: visible;
+			}
+
+.ck-editor__editable .table.layout-table.ck-widget:hover > .ck-widget__selection-handle: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. */
+
+.ck-editor__editable .table.layout-table.ck-widget:has( .ck-widget:hover ) > .ck-widget__selection-handle {
+				opacity: 0;
+				visibility: hidden;
+			}
+
+.ck-content table.table.layout-table,
+	.ck-content figure.table.layout-table {
+		/* Do not reserve space above and below the layout table. */
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+.ck-content table.table.layout-table,
+	.ck-content figure.table.layout-table > table {
+		border-spacing: 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
+ */
+/*
+ * 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-form-default-width: 340px;
+}
+
+.ck.ck-form {
+	padding: 0 0 var(--ck-spacing-large);
+}
+
+.ck.ck-form.ck-form_default-width {
+		width: var(--ck-form-default-width);
+	}
+
+.ck.ck-form:focus {
+		outline: none;
+	}
+
+.ck.ck-form .ck.ck-input-text,
+	.ck.ck-form .ck.ck-input-number {
+		min-width: 100%;
+		width: 0;
+	}
+
+.ck.ck-form .ck.ck-dropdown {
+		min-width: 100%;
+	}
+
+.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
+				border: 1px solid var(--ck-color-base-border);
+			}
+
+.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
+				width: 100%;
+			}
+
+/* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
+					flex-direction: column;
+					align-items: stretch;
+					padding: 0;
+			}
+	}
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
+						margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+				}
+	}
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
+						justify-content: center;
+				}
+	}
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
+					padding-bottom: var(--ck-spacing-large);
+			}
+	}
+
+[dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
+				margin-left: 0;
+			}
+
+[dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
+				margin-left: 0;
+			}
+
+/* End of `ck-responsive-form` customization */
+
+/*
+ * 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 .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;
 		}
@@ -217,6 +370,14 @@ when content is available outside the editor. See https://github.com/ckeditor/ck
 				flex-grow: 0;
 			}
 
+/* Ignore labels that work as fieldset legends */
+
+/* Fallback for table dimension operator */
+
+.ck.ck-table-form .ck-form__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;
@@ -350,6 +511,11 @@ when content is available outside the editor. See https://github.com/ckeditor/ck
 	/* 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;
 }