@ckeditor/ckeditor5-table
Version:
Table feature for CKEditor 5.
103 lines (102 loc) • 2.45 kB
TypeScript
/**
* @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
*/
/**
* @module table/tableediting
*/
import { Plugin, type Editor } from 'ckeditor5/src/core.js';
import type { PositionOffset, SlotFilter } from 'ckeditor5/src/engine.js';
import TableUtils from '../src/tableutils.js';
import '../theme/tableediting.css';
/**
* The table editing feature.
*/
export default class TableEditing extends Plugin {
/**
* Handlers for creating additional slots in the table.
*/
private _additionalSlots;
/**
* @inheritDoc
*/
static get pluginName(): "TableEditing";
/**
* @inheritDoc
*/
static get isOfficialPlugin(): true;
/**
* @inheritDoc
*/
static get requires(): readonly [typeof TableUtils];
/**
* @inheritDoc
*/
constructor(editor: Editor);
/**
* @inheritDoc
*/
init(): void;
/**
* Registers downcast handler for the additional table slot.
*/
registerAdditionalSlot(slotHandler: AdditionalSlot): void;
}
/**
* By default, only the `tableRow` elements from the `table` model are downcast inside the `<table>` and
* all other elements are pushed outside the table. This handler allows creating additional slots inside
* the table for other elements.
*
* Take this model as an example:
*
* ```xml
* <table>
* <tableRow>...</tableRow>
* <tableRow>...</tableRow>
* <tableColumnGroup>...</tableColumnGroup>
* </table>
* ```
*
* By default, downcasting result will be:
*
* ```xml
* <table>
* <tbody>
* <tr>...</tr>
* <tr>...</tr>
* </tbody>
* </table>
* <colgroup>...</colgroup>
* ```
*
* To allow the `tableColumnGroup` element at the end of the table, use the following configuration:
*
* ```ts
* const additionalSlot = {
* filter: element => element.is( 'element', 'tableColumnGroup' ),
* positionOffset: 'end'
* }
* ```
*
* Now, the downcast result will be:
*
* ```xml
* <table>
* <tbody>
* <tr>...</tr>
* <tr>...</tr>
* </tbody>
* <colgroup>...</colgroup>
* </table>
* ```
*/
export interface AdditionalSlot {
/**
* Filter for elements that should be placed inside given slot.
*/
filter: SlotFilter;
/**
* Position of the slot within the table.
*/
positionOffset: PositionOffset;
}