@ckeditor/ckeditor5-table 48.3.1 → 48.4.0-alpha.1

package/dist/index.css

@@ -2,67 +2,6 @@
  * @license Copyright (c) 2003-2026, 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 th {
-  text-align: start;
-}
-
-.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 .table:not(.layout-table) {
-  margin: .9em auto;
-}
-
-.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  border: 1px double #b3b3b3;
-}
-
-:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th {
-  background: #0000000d;
-  font-weight: bold;
-}
-
-:is(:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th) > p:first-of-type {
-  margin-top: 0;
-}
-
-:is(:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th) > p:last-of-type {
-  margin-bottom: 0;
-}
-
-:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th {
-  border: 1px solid #bfbfbf;
-  min-width: 2em;
-  padding: .4em;
-}
-
-@media print {
-  .ck-content figure.table:not(.layout-table) {
-    width: fit-content;
-    height: fit-content;
-  }
-
-  .ck-content figure.table:not(.layout-table) > table {
-    height: initial;
-  }
-}
-
 .ck-editor__editable .ck-table-bogus-paragraph {
   width: 100%;
   display: inline-block;
@@ -221,15 +160,6 @@
   --ck-table-layout-default-border-color: #d4d4d4;
 }
 
-.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;
-}
-
 .ck-editor__editable .table.layout-table > table {
   border-collapse: revert;
   width: 100%;
@@ -356,6 +286,85 @@
   margin-bottom: var(--ck-spacing-large);
 }
 
+:root {
+  --ck-table-scroll-widget-type-around-icon-width: 10px;
+  --ck-table-scroll-widget-type-around-icon-height: 8px;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing {
+  flex-direction: column;
+  max-width: 100%;
+  margin-right: 0;
+  display: flex;
+  overflow: scroll clip;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing > figcaption {
+  box-sizing: border-box;
+  order: -1;
+  align-self: flex-start;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget {
+  --ck-table-scroll-offset: 0px;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > table > :is(tbody, thead, tfoot) > tr > :is(td, th):last-of-type {
+  --ck-table-column-resizer-position-offset: 0;
+  --ck-table-column-resizer-width: 3.5px;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget.ck-widget_with-selection-handle > .ck-widget__selection-handle {
+  --ck-widget-handler-icon-size: 10px;
+  transform: translate(var(--ck-table-scroll-offset), calc(0px - var(--ck-widget-outline-thickness)));
+  z-index: 3;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around {
+  --ck-widget-type-around-button-size: 16px;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_before, .ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_after {
+  transform: translate(var(--ck-table-scroll-offset), 0);
+  z-index: 2;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_before {
+  margin-left: var(--ck-widget-type-around-button-size);
+  border-radius: 0 0 100px 100px;
+  left: min(10%, 30px);
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_before:after {
+  border-radius: 0 0 100px 100px;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_after {
+  bottom: calc(-.5 * var(--ck-widget-outline-thickness));
+  border-radius: 100px 100px 0 0;
+  right: min(10%, 30px);
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_after:after {
+  border-radius: 100px 100px 0 0;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button svg {
+  width: var(--ck-table-scroll-widget-type-around-icon-width);
+  height: var(--ck-table-scroll-widget-type-around-icon-height);
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+  top: 0;
+}
+
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+  bottom: 0;
+}
+
 .ck.ck-form__row > :not(.ck-label) + * {
   margin-inline-start: var(--ck-spacing-large);
 }
@@ -529,31 +538,6 @@
   --ck-content-table-style-spacing: 1.5em;
 }
 
-.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;
@@ -579,30 +563,9 @@
 
 :root {
   --ck-content-color-table-caption-background: #f7f7f7;
-  --ck-content-color-table-caption-text: #333;
   --ck-color-table-caption-highlighted-background: #fd0;
 }
 
-.ck-content .table > figcaption, .ck-content figure.table > 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);
-  outline-offset: -1px;
-  padding: .6em;
-  font-size: .75em;
-  display: table-caption;
-}
-
-@media (forced-colors: active) {
-  .ck-content .table > figcaption, .ck-content figure.table > table > caption {
-    background-color: unset;
-    color: unset;
-  }
-}
-
 @media (forced-colors: none) {
   :is(.ck.ck-editor__editable .table > figcaption, .ck.ck-editor__editable figure.table > table > caption).table__caption_highlighted {
     animation: .6s ease-out ck-table-caption-highlight;
@@ -645,7 +608,7 @@
   inset: 0;
 }
 
-.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected ::selection, .ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected:focus {
+.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected:focus, .ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected ::selection {
   background-color: #0000;
 }
 
@@ -663,14 +626,6 @@
   --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -.5 - .5px);
 }
 
-.ck-content .table .ck-table-resized {
-  table-layout: fixed;
-}
-
-.ck-content .table td, .ck-content .table th {
-  overflow-wrap: break-word;
-}
-
 .ck.ck-editor__editable .table td, .ck.ck-editor__editable .table th {
   position: relative;
 }
@@ -681,6 +636,7 @@
   right: var(--ck-table-column-resizer-position-offset);
   width: var(--ck-table-column-resizer-width);
   cursor: col-resize;
+  -webkit-user-select: none;
   user-select: none;
   z-index: var(--ck-z-default);
   position: absolute;
@@ -700,6 +656,10 @@
   right: unset;
 }
 
+.ck-table-column-resize__resizing-cursor, .ck-table-column-resize__resizing-cursor * {
+  cursor: col-resize !important;
+}
+
 [dir="ltr"] :is(.ck.ck-input-color > .ck.ck-input-text) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -853,4 +813,133 @@
   background: var(--ck-color-focus-outer-shadow);
 }
 
+:root {
+  --ck-content-table-style-spacing: 1.5em;
+  --ck-content-color-table-caption-background: #f7f7f7;
+  --ck-content-color-table-caption-text: #333;
+}
+
+.ck-content .table th {
+  text-align: start;
+}
+
+.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 .table:not(.layout-table) {
+  margin: .9em auto;
+}
+
+.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 1px double #b3b3b3;
+}
+
+:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th {
+  background: #0000000d;
+  font-weight: bold;
+}
+
+:is(:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th) > p:first-of-type {
+  margin-top: 0;
+}
+
+:is(:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th) > p:last-of-type {
+  margin-bottom: 0;
+}
+
+:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th {
+  border: 1px solid #bfbfbf;
+  min-width: 2em;
+  padding: .4em;
+}
+
+@media print {
+  .ck-content figure.table:not(.layout-table) {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .ck-content figure.table:not(.layout-table) > table {
+    height: initial;
+  }
+}
+
+.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;
+}
+
+.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-content .table > figcaption, .ck-content figure.table > 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);
+  outline-offset: -1px;
+  padding: .6em;
+  font-size: .75em;
+  display: table-caption;
+}
+
+@media (forced-colors: active) {
+  .ck-content .table > figcaption, .ck-content figure.table > table > caption {
+    background-color: unset;
+    color: unset;
+  }
+}
+
+.ck-content .table .ck-table-resized {
+  table-layout: fixed;
+}
+
+.ck-content .table td, .ck-content .table th {
+  overflow-wrap: break-word;
+}
+
 /*# sourceMappingURL=index.css.map */