@ckeditor/ckeditor5-table 0.0.0-nightly-20251215.0 → 0.0.0-nightly-next-20251215.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/build/table.js +2 -2
  2. package/build/translations/af.js +1 -1
  3. package/build/translations/ar.js +1 -1
  4. package/build/translations/ast.js +1 -1
  5. package/build/translations/az.js +1 -1
  6. package/build/translations/be.js +1 -1
  7. package/build/translations/bg.js +1 -1
  8. package/build/translations/bn.js +1 -1
  9. package/build/translations/bs.js +1 -1
  10. package/build/translations/ca.js +1 -1
  11. package/build/translations/cs.js +1 -1
  12. package/build/translations/da.js +1 -1
  13. package/build/translations/de-ch.js +1 -1
  14. package/build/translations/de.js +1 -1
  15. package/build/translations/el.js +1 -1
  16. package/build/translations/en-au.js +1 -1
  17. package/build/translations/en-gb.js +1 -1
  18. package/build/translations/eo.js +1 -1
  19. package/build/translations/es-co.js +1 -1
  20. package/build/translations/es.js +1 -1
  21. package/build/translations/et.js +1 -1
  22. package/build/translations/eu.js +1 -1
  23. package/build/translations/fa.js +1 -1
  24. package/build/translations/fi.js +1 -1
  25. package/build/translations/fr.js +1 -1
  26. package/build/translations/gl.js +1 -1
  27. package/build/translations/gu.js +1 -1
  28. package/build/translations/he.js +1 -1
  29. package/build/translations/hi.js +1 -1
  30. package/build/translations/hr.js +1 -1
  31. package/build/translations/hu.js +1 -1
  32. package/build/translations/hy.js +1 -1
  33. package/build/translations/id.js +1 -1
  34. package/build/translations/it.js +1 -1
  35. package/build/translations/ja.js +1 -1
  36. package/build/translations/jv.js +1 -1
  37. package/build/translations/kk.js +1 -1
  38. package/build/translations/km.js +1 -1
  39. package/build/translations/kn.js +1 -1
  40. package/build/translations/ko.js +1 -1
  41. package/build/translations/ku.js +1 -1
  42. package/build/translations/lt.js +1 -1
  43. package/build/translations/lv.js +1 -1
  44. package/build/translations/ms.js +1 -1
  45. package/build/translations/nb.js +1 -1
  46. package/build/translations/ne.js +1 -1
  47. package/build/translations/nl.js +1 -1
  48. package/build/translations/no.js +1 -1
  49. package/build/translations/oc.js +1 -1
  50. package/build/translations/pl.js +1 -1
  51. package/build/translations/pt-br.js +1 -1
  52. package/build/translations/pt.js +1 -1
  53. package/build/translations/ro.js +1 -1
  54. package/build/translations/ru.js +1 -1
  55. package/build/translations/si.js +1 -1
  56. package/build/translations/sk.js +1 -1
  57. package/build/translations/sl.js +1 -1
  58. package/build/translations/sq.js +1 -1
  59. package/build/translations/sr-latn.js +1 -1
  60. package/build/translations/sr.js +1 -1
  61. package/build/translations/sv.js +1 -1
  62. package/build/translations/th.js +1 -1
  63. package/build/translations/ti.js +1 -1
  64. package/build/translations/tk.js +1 -1
  65. package/build/translations/tr.js +1 -1
  66. package/build/translations/tt.js +1 -1
  67. package/build/translations/ug.js +1 -1
  68. package/build/translations/uk.js +1 -1
  69. package/build/translations/ur.js +1 -1
  70. package/build/translations/uz.js +1 -1
  71. package/build/translations/vi.js +1 -1
  72. package/build/translations/zh-cn.js +1 -1
  73. package/build/translations/zh.js +1 -1
  74. package/ckeditor5-metadata.json +10 -1
  75. package/dist/index-content.css +30 -30
  76. package/dist/index-editor.css +120 -194
  77. package/dist/index.css +167 -265
  78. package/dist/index.css.map +1 -1
  79. package/dist/index.js +150 -2221
  80. package/dist/index.js.map +1 -1
  81. package/lang/contexts.json +0 -4
  82. package/package.json +9 -9
  83. package/src/augmentation.d.ts +0 -7
  84. package/src/converters/downcast.js +3 -12
  85. package/src/index.d.ts +0 -4
  86. package/src/index.js +0 -5
  87. package/src/tablecellproperties/ui/tablecellpropertiesview.d.ts +8 -0
  88. package/src/tablecellproperties/ui/tablecellpropertiesview.js +30 -10
  89. package/src/tableconfig.d.ts +4 -4
  90. package/src/tableproperties/tablepropertiesediting.js +14 -147
  91. package/src/tableproperties/ui/tablepropertiesview.d.ts +8 -0
  92. package/src/tableproperties/ui/tablepropertiesview.js +59 -37
  93. package/theme/formrow.css +2 -0
  94. package/theme/tableform.css +1 -5
  95. package/theme/tableproperties.css +60 -0
  96. package/src/tablecellproperties/tablecellpropertiesuiexperimental.d.ts +0 -128
  97. package/src/tablecellproperties/tablecellpropertiesuiexperimental.js +0 -386
  98. package/src/tablecellproperties/ui/tablecellpropertiesviewexperimental.d.ts +0 -237
  99. package/src/tablecellproperties/ui/tablecellpropertiesviewexperimental.js +0 -633
  100. package/src/tableproperties/tablepropertiesuiexperimental.d.ts +0 -136
  101. package/src/tableproperties/tablepropertiesuiexperimental.js +0 -375
  102. package/src/tableproperties/ui/tablepropertiesviewexperimental.d.ts +0 -216
  103. package/src/tableproperties/ui/tablepropertiesviewexperimental.js +0 -544
  104. package/src/utils/ui/table-propertiesexperimental.d.ts +0 -215
  105. package/src/utils/ui/table-propertiesexperimental.js +0 -391
  106. package/theme/formrow-experimental.css +0 -15
  107. package/theme/tableform-experimental.css +0 -73
  108. package/theme/tableproperties-experimental.css +0 -78
package/dist/index.css CHANGED
@@ -150,6 +150,29 @@
150
150
  width: 100%;
151
151
  }
152
152
 
153
+ /*
154
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
155
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
156
+ */
157
+
158
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
159
+ flex-wrap: wrap;
160
+ }
161
+
162
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
163
+ /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
164
+ flex-grow: 0.57;
165
+ }
166
+
167
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
168
+ /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
169
+ flex-grow: 0.43;
170
+ }
171
+
172
+ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
173
+ flex-grow: 1;
174
+ }
175
+
153
176
  /*
154
177
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
155
178
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -224,146 +247,90 @@
224
247
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
225
248
  */
226
249
 
227
- .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
228
- flex-wrap: wrap;
229
- flex-basis: 0;
230
- align-content: baseline;
231
- }
232
-
233
- .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
234
- flex-wrap: nowrap;
235
- }
236
-
237
250
  /*
238
251
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
239
252
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
240
253
  */
241
-
242
254
  /*
243
255
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
244
256
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
245
257
  */
246
258
 
247
259
  :root {
248
- --ck-content-color-table-caption-background: hsl(0, 0%, 97%);
249
- --ck-content-color-table-caption-text: hsl(0, 0%, 20%);
250
- --ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
260
+ --ck-form-default-width: 340px;
251
261
  }
252
262
 
253
- /* Content styles */
254
- .ck-content .table > figcaption,
255
- .ck-content figure.table > table > caption {
256
- display: table-caption;
257
- caption-side: top;
258
- word-break: normal;
259
- overflow-wrap: anywhere;
260
- text-align: center;
261
- color: var(--ck-content-color-table-caption-text);
262
- background-color: var(--ck-content-color-table-caption-background);
263
- padding: .6em;
264
- font-size: .75em;
265
- outline-offset: -1px;
266
-
267
- /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
263
+ .ck.ck-form {
264
+ padding: 0 0 var(--ck-spacing-large);
268
265
  }
269
- @media (forced-colors: active) {
270
- .ck-content .table > figcaption, .ck-content figure.table > table > caption {
271
- background-color: unset;
272
- color: unset;
273
- }
274
- }
275
266
 
276
- /* Editing styles */
277
- @media (forced-colors: none) {
278
- .ck.ck-editor__editable .table > figcaption.table__caption_highlighted, .ck.ck-editor__editable figure.table > table > caption.table__caption_highlighted {
279
- animation: ck-table-caption-highlight .6s ease-out;
280
- }
267
+ .ck.ck-form.ck-form_default-width {
268
+ width: var(--ck-form-default-width);
281
269
  }
282
- .ck.ck-editor__editable .table > figcaption.ck-placeholder::before, .ck.ck-editor__editable figure.table > table > caption.ck-placeholder::before {
283
- padding-left: inherit;
284
- padding-right: inherit;
285
270
 
286
- /*
287
- * Make sure the table caption placeholder doesn't overflow the placeholder area.
288
- * See https://github.com/ckeditor/ckeditor5/issues/9162.
289
- */
290
- white-space: nowrap;
291
- overflow: hidden;
292
- text-overflow: ellipsis;
271
+ .ck.ck-form:focus {
272
+ outline: none;
293
273
  }
294
274
 
295
- @keyframes ck-table-caption-highlight {
296
- 0% {
297
- background-color: var(--ck-color-table-caption-highlighted-background);
275
+ .ck.ck-form .ck.ck-input-text,
276
+ .ck.ck-form .ck.ck-input-number {
277
+ min-width: 100%;
278
+ width: 0;
298
279
  }
299
280
 
300
- 100% {
301
- background-color: var(--ck-content-color-table-caption-background);
281
+ .ck.ck-form .ck.ck-dropdown {
282
+ min-width: 100%;
302
283
  }
303
- }
304
284
 
305
- /*
306
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
307
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
308
- */
285
+ .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
286
+ border: 1px solid var(--ck-color-base-border);
287
+ }
309
288
 
310
- :root {
311
- --ck-color-table-column-resizer-hover: var(--ck-color-base-active);
312
- --ck-table-column-resizer-width: 7px;
289
+ .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
290
+ width: 100%;
291
+ }
313
292
 
314
- /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
315
- The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
316
- --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
317
- }
293
+ /* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
318
294
 
319
- .ck-content .table .ck-table-resized {
320
- table-layout: fixed;
321
- }
295
+ @media screen and (max-width: 600px) {
322
296
 
323
- .ck-content .table td,
324
- .ck-content .table th {
325
- /* To prevent text overflowing beyond its cell when columns are resized by resize handler
326
- (https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
327
- overflow-wrap: break-word;
328
- }
297
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
298
+ flex-direction: column;
299
+ align-items: stretch;
300
+ padding: 0;
301
+ }
302
+ }
329
303
 
330
- .ck.ck-editor__editable .table td,
331
- .ck.ck-editor__editable .table th {
332
- /* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
333
- position: relative;
334
- }
304
+ @media screen and (max-width: 600px) {
335
305
 
336
- .ck.ck-editor__editable .table .ck-table-column-resizer {
337
- position: absolute;
338
- top: 0;
339
- bottom: 0;
340
- right: var(--ck-table-column-resizer-position-offset);
341
- width: var(--ck-table-column-resizer-width);
342
- cursor: col-resize;
343
- user-select: none;
344
- z-index: var(--ck-z-default);
345
- }
306
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
307
+ margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
308
+ }
309
+ }
346
310
 
347
- .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
348
- display: none;
349
- }
311
+ @media screen and (max-width: 600px) {
350
312
 
351
- /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
352
- all resizers must be hidden while the table is dragged. */
353
- .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
354
- display: none;
355
- }
313
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
314
+ justify-content: center;
315
+ }
316
+ }
356
317
 
357
- .ck.ck-editor__editable .table .ck-table-column-resizer:hover,
358
- .ck.ck-editor__editable .table .ck-table-column-resizer__active {
359
- background-color: var(--ck-color-table-column-resizer-hover);
360
- opacity: 0.25;
361
- }
318
+ @media screen and (max-width: 600px) {
362
319
 
363
- .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
364
- left: var(--ck-table-column-resizer-position-offset);
365
- right: unset;
366
- }
320
+ .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
321
+ padding-bottom: var(--ck-spacing-large);
322
+ }
323
+ }
324
+
325
+ [dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
326
+ margin-left: 0;
327
+ }
328
+
329
+ [dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
330
+ margin-left: 0;
331
+ }
332
+
333
+ /* End of `ck-responsive-form` customization */
367
334
 
368
335
  /*
369
336
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
@@ -440,14 +407,6 @@
440
407
  transform: translateX( -50% );
441
408
  }
442
409
 
443
- .ck.ck-table-form:has( .ck-form__header > .ck-button-back ) .ck-form__row.ck-table-form__action-row > .ck.ck-button {
444
- flex-grow: initial;
445
- }
446
-
447
- .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 {
448
- color: currentColor;
449
- }
450
-
451
410
  /*
452
411
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
453
412
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -520,188 +479,131 @@
520
479
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
521
480
  */
522
481
 
523
- /*
524
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
525
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
526
- */
527
482
  /*
528
483
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
529
484
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
530
485
  */
531
486
 
532
487
  :root {
533
- --ck-form-default-width: 340px;
534
- }
535
-
536
- .ck.ck-form {
537
- padding: 0 0 var(--ck-spacing-large);
488
+ --ck-content-color-table-caption-background: hsl(0, 0%, 97%);
489
+ --ck-content-color-table-caption-text: hsl(0, 0%, 20%);
490
+ --ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
538
491
  }
539
492
 
540
- .ck.ck-form.ck-form_default-width {
541
- width: var(--ck-form-default-width);
542
- }
543
-
544
- .ck.ck-form:focus {
545
- outline: none;
546
- }
547
-
548
- .ck.ck-form .ck.ck-input-text,
549
- .ck.ck-form .ck.ck-input-number {
550
- min-width: 100%;
551
- width: 0;
552
- }
493
+ /* Content styles */
494
+ .ck-content .table > figcaption,
495
+ .ck-content figure.table > table > caption {
496
+ display: table-caption;
497
+ caption-side: top;
498
+ word-break: normal;
499
+ overflow-wrap: anywhere;
500
+ text-align: center;
501
+ color: var(--ck-content-color-table-caption-text);
502
+ background-color: var(--ck-content-color-table-caption-background);
503
+ padding: .6em;
504
+ font-size: .75em;
505
+ outline-offset: -1px;
553
506
 
554
- .ck.ck-form .ck.ck-dropdown {
555
- min-width: 100%;
507
+ /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
508
+ }
509
+ @media (forced-colors: active) {
510
+ .ck-content .table > figcaption, .ck-content figure.table > table > caption {
511
+ background-color: unset;
512
+ color: unset;
513
+ }
556
514
  }
557
515
 
558
- .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
559
- border: 1px solid var(--ck-color-base-border);
560
- }
561
-
562
- .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
563
- width: 100%;
564
- }
565
-
566
- /* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
567
-
568
- @media screen and (max-width: 600px) {
569
-
570
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
571
- flex-direction: column;
572
- align-items: stretch;
573
- padding: 0;
574
- }
516
+ /* Editing styles */
517
+ @media (forced-colors: none) {
518
+ .ck.ck-editor__editable .table > figcaption.table__caption_highlighted, .ck.ck-editor__editable figure.table > table > caption.table__caption_highlighted {
519
+ animation: ck-table-caption-highlight .6s ease-out;
520
+ }
575
521
  }
522
+ .ck.ck-editor__editable .table > figcaption.ck-placeholder::before, .ck.ck-editor__editable figure.table > table > caption.ck-placeholder::before {
523
+ padding-left: inherit;
524
+ padding-right: inherit;
576
525
 
577
- @media screen and (max-width: 600px) {
578
-
579
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
580
- margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
581
- }
526
+ /*
527
+ * Make sure the table caption placeholder doesn't overflow the placeholder area.
528
+ * See https://github.com/ckeditor/ckeditor5/issues/9162.
529
+ */
530
+ white-space: nowrap;
531
+ overflow: hidden;
532
+ text-overflow: ellipsis;
582
533
  }
583
534
 
584
- @media screen and (max-width: 600px) {
585
-
586
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
587
- justify-content: center;
588
- }
535
+ @keyframes ck-table-caption-highlight {
536
+ 0% {
537
+ background-color: var(--ck-color-table-caption-highlighted-background);
589
538
  }
590
539
 
591
- @media screen and (max-width: 600px) {
592
-
593
- .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
594
- padding-bottom: var(--ck-spacing-large);
595
- }
540
+ 100% {
541
+ background-color: var(--ck-content-color-table-caption-background);
596
542
  }
597
-
598
- [dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
599
- margin-left: 0;
600
- }
601
-
602
- [dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
603
- margin-left: 0;
604
- }
605
-
606
- /* End of `ck-responsive-form` customization */
607
-
608
- /*
609
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
610
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
611
- */
612
-
613
- .ck.ck-form__row.ck-table-form__action-row .ck-button-save,
614
- .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel {
615
- justify-content: center;
616
- }
543
+ }
617
544
 
618
545
  /*
619
546
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
620
547
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
621
548
  */
622
549
 
623
- .ck.ck-table-form .ck-form__row.ck-table-form__border-row {
624
- flex-wrap: wrap;
625
- }
626
-
627
- .ck.ck-table-form .ck-form__row.ck-table-form__background-row {
628
- flex-wrap: wrap;
629
- }
630
-
631
- .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
632
- flex-wrap: wrap;
633
- align-items: center;
634
- }
635
-
636
- .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view {
637
- display: flex;
638
- flex-direction: column-reverse;
639
- align-items: center;
640
- }
641
-
642
- .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view .ck.ck-dropdown {
643
- flex-grow: 0;
644
- }
645
-
646
- .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
647
- flex-grow: 0;
648
- }
649
-
650
- /* Ignore labels that work as fieldset legends */
651
-
652
- /* Fallback for table dimension operator */
653
-
654
- .ck.ck-table-form .ck-form__row > *:not(.ck-label, .ck-table-form__dimension-operator) {
655
- flex-grow: 1;
656
- }
657
-
658
- .ck.ck-table-form .ck.ck-labeled-field-view {
659
- /* Allow absolute positioning of the status (error) balloons. */
660
- position: relative;
661
- }
550
+ :root {
551
+ --ck-color-table-column-resizer-hover: var(--ck-color-base-active);
552
+ --ck-table-column-resizer-width: 7px;
662
553
 
663
- .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
664
- position: absolute;
665
- left: 50%;
666
- bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) );
667
- transform: translate(-50%,100%);
554
+ /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
555
+ The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
556
+ --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
557
+ }
668
558
 
669
- /* Make sure the balloon status stays on top of other form elements. */
670
- z-index: 1;
559
+ .ck-content .table .ck-table-resized {
560
+ table-layout: fixed;
561
+ }
671
562
 
672
- /* The arrow pointing towards the field. */
673
- }
563
+ .ck-content .table td,
564
+ .ck-content .table th {
565
+ /* To prevent text overflowing beyond its cell when columns are resized by resize handler
566
+ (https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
567
+ overflow-wrap: break-word;
568
+ }
674
569
 
675
- .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
676
- content: "";
677
- position: absolute;
678
- top: calc( -1 * var(--ck-table-properties-error-arrow-size) );
679
- left: 50%;
680
- transform: translateX( -50% );
681
- }
570
+ .ck.ck-editor__editable .table td,
571
+ .ck.ck-editor__editable .table th {
572
+ /* The resizer element is placed inside each cell, so it must be positioned relatively to the cell. */
573
+ position: relative;
574
+ }
682
575
 
683
- /*
684
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
685
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
686
- */
576
+ .ck.ck-editor__editable .table .ck-table-column-resizer {
577
+ position: absolute;
578
+ top: 0;
579
+ bottom: 0;
580
+ right: var(--ck-table-column-resizer-position-offset);
581
+ width: var(--ck-table-column-resizer-width);
582
+ cursor: col-resize;
583
+ user-select: none;
584
+ z-index: var(--ck-z-default);
585
+ }
687
586
 
688
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
689
- flex-wrap: wrap;
690
- }
587
+ .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
588
+ display: none;
589
+ }
691
590
 
692
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
693
- /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
694
- flex-grow: 0.57;
695
- }
591
+ /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
592
+ all resizers must be hidden while the table is dragged. */
593
+ .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
594
+ display: none;
595
+ }
696
596
 
697
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
698
- /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
699
- flex-grow: 0.43;
700
- }
597
+ .ck.ck-editor__editable .table .ck-table-column-resizer:hover,
598
+ .ck.ck-editor__editable .table .ck-table-column-resizer__active {
599
+ background-color: var(--ck-color-table-column-resizer-hover);
600
+ opacity: 0.25;
601
+ }
701
602
 
702
- .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
703
- flex-grow: 1;
704
- }
603
+ .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
604
+ left: var(--ck-table-column-resizer-position-offset);
605
+ right: unset;
606
+ }
705
607
 
706
608
  /*
707
609
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.