@ckeditor/ckeditor5-table 36.0.1 → 37.0.0-alpha.1

package/src/tableproperties.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/tableproperties
+ */
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+/**
+ * The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
+ *
+ * Read more in the {@glink features/table#table-and-cell-styling-tools Table and cell styling tools} section.
+ * See also the {@link module:table/tablecellproperties~TableCellProperties} plugin.
+ *
+ * This is a "glue" plugin that loads the
+ * {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table properties editing feature} and
+ * the {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI table properties UI feature}.
+ */
+export default class TableProperties extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'TableProperties';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+}

package/src/tableproperties.js

@@ -2,16 +2,12 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module table/tableproperties
  */
-
 import { Plugin } from 'ckeditor5/src/core';
-
 import TablePropertiesEditing from './tableproperties/tablepropertiesediting';
 import TablePropertiesUI from './tableproperties/tablepropertiesui';
-
 /**
  * The table properties feature. Enables support for setting properties of tables (size, border, background, etc.).
  *
@@ -21,97 +17,18 @@ import TablePropertiesUI from './tableproperties/tablepropertiesui';
  * This is a "glue" plugin that loads the
  * {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table properties editing feature} and
  * the {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI table properties UI feature}.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class TableProperties extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TableProperties';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ TablePropertiesEditing, TablePropertiesUI ];
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableProperties';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [TablePropertiesEditing, TablePropertiesUI];
+    }
 }
-
-/**
- * The configuration of the table properties user interface (balloon). It allows to define:
- *
- * * The color palette for the table border color style field (`tableProperties.borderColors`),
- * * The color palette for the table background style field (`tableProperties.backgroundColors`).
- *
- *		const tableConfig = {
- *			tableProperties: {
- *				borderColors: [
- *					{
- *						color: 'hsl(0, 0%, 90%)',
- *						label: 'Light grey'
- *					},
- *					// ...
- *				],
- *				backgroundColors: [
- *					{
- *						color: 'hsl(120, 75%, 60%)',
- *						label: 'Green'
- *					},
- *					// ...
- *				]
- *			}
- *		};
- *
- * * The default styles for tables (`tableProperties.defaultProperties`):
- *
- *		const tableConfig = {
- *			tableProperties: {
- *				defaultProperties: {
- *					borderStyle: 'dashed',
- *					borderColor: 'hsl(0, 0%, 90%)',
- *					borderWidth: '3px',
- *					alignment: 'left'
- *				}
- *			}
- *		}
- *
- * 	 {@link module:table/tableproperties~TablePropertiesOptions Read more about the supported properties.}
- *
- * **Note**: The `borderColors` and `backgroundColors` options do not impact the data loaded into the editor,
- * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
- * allowing users to pick colors in a more convenient way. The `defaultProperties` option does impact the data.
- * Default values will not be kept in the editor model.
- *
- * The default color palettes for the table background and the table border are the same
- * ({@link module:table/utils/ui/table-properties~defaultColors check out their content}).
- *
- * Both color palette configurations must follow the
- * {@link module:table/table~TableColorConfig table color configuration format}.
- *
- * Read more about configuring the table feature in {@link module:table/table~TableConfig}.
- *
- * @member {Object} module:table/table~TableConfig#tableProperties
- */
-
-/**
- * The configuration of the table default properties feature.
- *
- * @typedef {Object} module:table/tableproperties~TablePropertiesOptions
- *
- * @property {String} width The default `width` of the table.
- *
- * @property {String} height The default `height` of the table.
- *
- * @property {String} backgroundColor The default `background-color` of the table.
- *
- * @property {String} borderColor The default `border-color` of the table.
- *
- * @property {String} borderWidth The default `border-width` of the table.
- *
- * @property {String} [borderStyle='none'] The default `border-style` of the table.
- *
- * @property {String} [alignment='center'] The default `alignment` of the table.
- */

package/src/tableselection.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/tableselection
+ */
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+import type { Element, DocumentFragment } from 'ckeditor5/src/engine';
+import '../theme/tableselection.css';
+/**
+ * This plugin enables the advanced table cells, rows and columns selection.
+ * It is loaded automatically by the {@link module:table/table~Table} plugin.
+ */
+export default class TableSelection extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'TableSelection';
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Returns the currently selected table cells or `null` if it is not a table cells selection.
+     */
+    getSelectedTableCells(): Array<Element> | null;
+    /**
+     * Returns the selected table fragment as a document fragment.
+     */
+    getSelectionAsFragment(): DocumentFragment | null;
+    /**
+     * Sets the model selection based on given anchor and target cells (can be the same cell).
+     * Takes care of setting the backward flag.
+     *
+     * ```ts
+     * const modelRoot = editor.model.document.getRoot();
+     * const firstCell = modelRoot.getNodeByPath( [ 0, 0, 0 ] );
+     * const lastCell = modelRoot.getNodeByPath( [ 0, 0, 1 ] );
+     *
+     * const tableSelection = editor.plugins.get( 'TableSelection' );
+     * tableSelection.setCellSelection( firstCell, lastCell );
+     * ```
+     */
+    setCellSelection(anchorCell: Element, targetCell: Element): void;
+    /**
+     * Returns the focus cell from the current selection.
+     */
+    getFocusCell(): Element | null;
+    /**
+     * Returns the anchor cell from the current selection.
+     */
+    getAnchorCell(): Element | null;
+    /**
+     * Defines a selection converter which marks the selected cells with a specific class.
+     *
+     * The real DOM selection is put in the last cell. Since the order of ranges is dependent on whether the
+     * selection is backward or not, the last cell will usually be close to the "focus" end of the selection
+     * (a selection has anchor and focus).
+     *
+     * The real DOM selection is then hidden with CSS.
+     */
+    private _defineSelectionConverter;
+    /**
+     * Creates a listener that reacts to changes in {@link #isEnabled} and, if the plugin was disabled,
+     * it collapses the multi-cell selection to a regular selection placed inside a table cell.
+     *
+     * This listener helps features that disable the table selection plugin bring the selection
+     * to a clear state they can work with (for instance, because they don't support multiple cell selection).
+     */
+    private _enablePluginDisabling;
+    /**
+     * Overrides the default `model.deleteContent()` behavior over a selected table fragment.
+     *
+     * @param args Delete content method arguments.
+     */
+    private _handleDeleteContent;
+    /**
+     * This handler makes it possible to remove the content of all selected cells by starting to type.
+     * If you take a look at {@link #_defineSelectionConverter} you will find out that despite the multi-cell selection being set
+     * in the model, the view selection is collapsed in the last cell (because most browsers are unable to render multi-cell selections;
+     * yes, it's a hack).
+     *
+     * When multiple cells are selected in the model and the user starts to type, the
+     * {@link module:engine/view/document~Document#event:insertText} event carries information provided by the
+     * beforeinput DOM  event, that in turn only knows about this collapsed DOM selection in the last cell.
+     *
+     * As a result, the selected cells have no chance to be cleaned up. To fix this, this listener intercepts
+     * the event and injects the custom view selection in the data that translates correctly to the actual state
+     * of the multi-cell selection in the model.
+     *
+     * @param data Insert text event data.
+     */
+    private _handleInsertTextEvent;
+    /**
+     * Returns an array of table cells that should be selected based on the
+     * given anchor cell and target (focus) cell.
+     *
+     * The cells are returned in a reverse direction if the selection is backward.
+     */
+    private _getCellsToSelect;
+}