@ckeditor/ckeditor5-table 46.0.2 → 46.1.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "46.0.2",
+  "version": "46.1.0-alpha.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "46.0.2",
-    "@ckeditor/ckeditor5-clipboard": "46.0.2",
-    "@ckeditor/ckeditor5-core": "46.0.2",
-    "@ckeditor/ckeditor5-engine": "46.0.2",
-    "@ckeditor/ckeditor5-icons": "46.0.2",
-    "@ckeditor/ckeditor5-ui": "46.0.2",
-    "@ckeditor/ckeditor5-utils": "46.0.2",
-    "@ckeditor/ckeditor5-widget": "46.0.2",
+    "ckeditor5": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-clipboard": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "46.1.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "46.1.0-alpha.0",
     "es-toolkit": "1.39.5"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/index.d.ts

@@ -68,7 +68,7 @@ export { TableHeightCommand } from './tableproperties/commands/tableheightcomman
 export { TableWidthCommand } from './tableproperties/commands/tablewidthcommand.js';
 export { TablePropertyCommand, type TablePropertyCommandExecuteOptions } from './tableproperties/commands/tablepropertycommand.js';
 export type { ViewDocumentTableMouseMoveEvent, ViewDocumentTableMouseLeaveEvent } from './tablemouse/mouseeventsobserver.js';
-export type { TableConfig, TablePropertiesConfig, TablePropertiesOptions, TableCellPropertiesConfig, TableColorConfig, TableCellPropertiesOptions, TableLayoutConfig, TableType } from './tableconfig.js';
+export type { TableConfig, TablePropertiesConfig, TablePropertiesOptions, TableCellPropertiesConfig, TableColorConfig, TableCellPropertiesOptions, TableLayoutConfig, TableCaptionConfig, TableType } from './tableconfig.js';
 export { downcastTable as _downcastTable, downcastRow as _downcastTableRow, downcastCell as _downcastTableCell, convertParagraphInTableCell as _convertParagraphInTableCell, isSingleParagraphWithoutAttributes as _isSingleTableParagraphWithoutAttributes } from './converters/downcast.js';
 export type { DowncastTableOptions as _DowncastTableOptions } from './converters/downcast.js';
 export { injectTableCaptionPostFixer as _injectTableCaptionPostFixer } from './converters/table-caption-post-fixer.js';

package/src/tablecaption/tablecaptionediting.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/tablecaption/tablecaptionediting
  */
-import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { ModelElement } from 'ckeditor5/src/engine.js';
 /**
  * The table caption editing plugin.
@@ -26,10 +26,6 @@ export declare class TableCaptionEditing extends Plugin {
      * @inheritDoc
      */
     static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
     /**
      * @inheritDoc
      */

package/src/tablecaption/tablecaptionediting.js

@@ -21,7 +21,7 @@ export class TableCaptionEditing extends Plugin {
      *
      * To learn more about this system, see {@link #_saveCaption}.
      */
-    _savedCaptionsMap;
+    _savedCaptionsMap = new WeakMap();
     /**
      * @inheritDoc
      */
@@ -34,13 +34,6 @@ export class TableCaptionEditing extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._savedCaptionsMap = new WeakMap();
-    }
     /**
      * @inheritDoc
      */
@@ -49,6 +42,7 @@ export class TableCaptionEditing extends Plugin {
         const schema = editor.model.schema;
         const view = editor.editing.view;
         const t = editor.t;
+        const useCaptionElement = editor.config.get('table.tableCaption.useCaptionElement');
         if (!schema.isRegistered('caption')) {
             schema.register('caption', {
                 allowIn: 'table',
@@ -62,6 +56,13 @@ export class TableCaptionEditing extends Plugin {
             });
         }
         editor.commands.add('toggleTableCaption', new ToggleTableCaptionCommand(this.editor));
+        if (useCaptionElement) {
+            const tableEditing = editor.plugins.get('TableEditing');
+            tableEditing.registerAdditionalSlot({
+                filter: element => element.is('element', 'caption'),
+                positionOffset: 'end'
+            });
+        }
         // View -> model converter for the data pipeline.
         editor.conversion.for('upcast').elementToElement({
             view: matchTableCaptionViewElement,
@@ -74,7 +75,7 @@ export class TableCaptionEditing extends Plugin {
                 if (!isTable(modelElement.parent)) {
                     return null;
                 }
-                return writer.createContainerElement('figcaption');
+                return writer.createContainerElement(useCaptionElement ? 'caption' : 'figcaption');
             }
         });
         // Model -> view converter for the editing pipeline.
@@ -84,15 +85,15 @@ export class TableCaptionEditing extends Plugin {
                 if (!isTable(modelElement.parent)) {
                     return null;
                 }
-                const figcaptionElement = writer.createEditableElement('figcaption');
-                writer.setCustomProperty('tableCaption', true, figcaptionElement);
-                figcaptionElement.placeholder = t('Enter table caption');
+                const captionElement = writer.createEditableElement(useCaptionElement ? 'caption' : 'figcaption');
+                writer.setCustomProperty('tableCaption', true, captionElement);
+                captionElement.placeholder = t('Enter table caption');
                 enableViewPlaceholder({
                     view,
-                    element: figcaptionElement,
+                    element: captionElement,
                     keepOnFocus: true
                 });
-                return toWidgetEditable(figcaptionElement, writer);
+                return toWidgetEditable(captionElement, writer);
             }
         });
         injectTableCaptionPostFixer(editor.model);

package/src/tableconfig.d.ts

@@ -212,6 +212,16 @@ export interface TableConfig {
      * ```
      */
     tableLayout?: TableLayoutConfig;
+    /**
+     * Configuration of the table caption feature.
+     *
+     * ```ts
+     * const tableConfig = {
+     * 	tableCaption: ... // Table caption feature config.
+     * };
+     * ```
+     */
+    tableCaption?: TableCaptionConfig;
 }
 /**
  * The configuration of the table properties user interface (balloon).
@@ -377,6 +387,50 @@ export interface TableLayoutConfig {
      */
     preferredExternalTableType: TableType;
 }
+/**
+ * The configuration of the table caption feature.
+ */
+export interface TableCaptionConfig {
+    /**
+     * Sets the preferred HTML structure for table captions.
+     *
+     * When this option is `false` (the default) the structure is like this:
+     *
+     * ```html
+     * <figure class="table">
+     * 	<table>
+     * 		<tbody> ... </tbody>
+     * 	</table>
+     * 	<figcaption> ... </figcaption>
+     * </figure>
+     * ```
+     *
+     * When this option is `true` the structure is like this:
+     *
+     * ```html
+     * <figure class="table">
+     * 	<table>
+     * 		<tbody> ... </tbody>
+     * 		<caption> ... </caption>
+     * 	</table>
+     * </figure>
+     * ```
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( {
+     * 		table: {
+     * 			tableCaption: {
+     * 				useCaptionElement: true
+     * 			}
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     */
+    useCaptionElement?: boolean;
+}
 /**
  * The type of the table.
  */

package/src/tablewalker.d.ts

@@ -351,7 +351,7 @@ declare class TableSlot {
      */
     getPositionBefore(): ModelPosition;
 }
-export type { TableSlot };
+export { TableSlot };
 /**
  * This `TableSlot`'s getter (property) was removed in CKEditor 5 v20.0.0.
  *

package/src/tablewalker.js

@@ -473,6 +473,7 @@ class TableSlot {
         return model.createPositionAt(this._table.getChild(this.row), this._cellIndex);
     }
 }
+export { TableSlot };
 /**
  * This `TableSlot`'s getter (property) was removed in CKEditor 5 v20.0.0.
  *

package/theme/table.css

@@ -90,6 +90,23 @@
 
 @media print {
 	.ck-content figure.table {
+		/**
+		 * Sometimes Chrome incorrectly calculates the height of the last table row and some
+		 * of the content overlaps the paragraph that is placed directly after the table. It affects
+		 * the column split mode pagination calculation which causes mismatch between the print mode and
+		 * the preview mode.
+		 *
+		 * This issue happens only if:
+		 *
+		 * 	* The table is inside a figure element.
+		 * 	* The table has `display: table` style set.
+		 * 	* The block element is placed directly after the table.
+		 */
+		&:not(.layout-table):not(:has(> figcaption)) {
+			display: block;
+			width: fit-content;
+		}
+
 		/**
 		 * Expanding the table to the full height of the parent container is necessary because tables
 		 * are rendered inside <figure> elements, which is kinda buggy in table height calculation.

package/theme/tablecaption.css

@@ -12,7 +12,8 @@
 }
 
 /* Content styles */
-.ck-content .table > figcaption {
+.ck-content .table > figcaption,
+.ck-content figure.table > table > caption {
 	display: table-caption;
 	caption-side: top;
 	word-break: normal;
@@ -32,7 +33,8 @@
 }
 
 /* Editing styles */
-.ck.ck-editor__editable .table > figcaption {
+.ck.ck-editor__editable .table > figcaption,
+.ck.ck-editor__editable figure.table > table > caption {
 	@mixin ck-media-default-colors {
 		&.table__caption_highlighted {
 			animation: ck-table-caption-highlight .6s ease-out;