@types/ckeditor__ckeditor5-table

  • Version 33.0.0
  • Published
  • 112 kB
  • 5 dependencies
  • MIT license

Install

npm i @types/ckeditor__ckeditor5-table
yarn add @types/ckeditor__ckeditor5-table
pnpm add @types/ckeditor__ckeditor5-table

Overview

TypeScript definitions for @ckeditor/ckeditor5-table

Index

Classes

class Table

class Table extends Plugin {}

    property pluginName

    static readonly pluginName: string;

      property requires

      static readonly requires: [
      typeof TableEditing,
      typeof TableUI,
      typeof TableSelection,
      typeof TableMouse,
      typeof TableKeyboard,
      typeof TableClipboard,
      any
      ];

        class TableCaption

        class TableCaption extends Plugin {}
        • The table caption plugin.

        property pluginName

        static readonly pluginName: string;

          property requires

          static readonly requires: [typeof TableCaptionEditing, typeof TableCaptionUI];

            class TableCaptionEditing

            class TableCaptionEditing extends Plugin {}
            • The table caption editing plugin.

            property pluginName

            static readonly pluginName: string;

              class TableCaptionUI

              class TableCaptionUI extends Plugin {}
              • The table caption UI plugin. It introduces the 'toggleTableCaption' UI button.

              property pluginName

              static readonly pluginName: string;

                method init

                init: () => void;

                  class TableCellProperties

                  class TableCellProperties extends Plugin {}

                    property pluginName

                    static readonly pluginName: string;

                      property requires

                      static readonly requires: [
                      typeof TableCellPropertiesEditing,
                      typeof TableCellPropertiesUI
                      ];

                        class TableCellPropertiesEditing

                        class TableCellPropertiesEditing extends Plugin {}

                          property pluginName

                          static readonly pluginName: string;

                            property requires

                            static readonly requires: [typeof TableEditing];

                              method init

                              init: () => void;

                                class TableCellPropertiesUI

                                class TableCellPropertiesUI extends Plugin {}

                                  property pluginName

                                  static readonly pluginName: string;

                                    property requires

                                    static readonly requires: [any];

                                      method destroy

                                      destroy: () => void;

                                        method init

                                        init: () => void;

                                          class TableClipboard

                                          class TableClipboard extends Plugin {}
                                          • This plugin adds support for copying/cutting/pasting fragments of tables. It is loaded automatically by the plugin.

                                          property pluginName

                                          static readonly pluginName: string;

                                            property requires

                                            static readonly requires: [typeof TableSelection, typeof TableUtils];

                                              method getTableIfOnlyTableInContent

                                              getTableIfOnlyTableInContent: (
                                              content: DocumentFragment | Item,
                                              model: Model
                                              ) => Element | null;
                                              • Extracts the table for pasting into a table.

                                              method init

                                              init: () => void;

                                                class TableEditing

                                                class TableEditing extends Plugin {}

                                                  property pluginName

                                                  static readonly pluginName: string;

                                                    property requires

                                                    static readonly requires: [typeof TableUtils];

                                                      method init

                                                      init: () => void;

                                                        class TableKeyboard

                                                        class TableKeyboard extends Plugin {}

                                                          property pluginName

                                                          static readonly pluginName: string;

                                                            property requires

                                                            static readonly requires: [typeof TableSelection, typeof TableUtils];

                                                              method init

                                                              init: () => void;

                                                                class TableMouse

                                                                class TableMouse extends Plugin {}

                                                                  property pluginName

                                                                  static readonly pluginName: string;

                                                                    property requires

                                                                    static readonly requires: [typeof TableSelection, typeof TableUtils];

                                                                      method init

                                                                      init: () => void;

                                                                        class TableProperties

                                                                        class TableProperties extends Plugin {}

                                                                          property pluginName

                                                                          static readonly pluginName: string;

                                                                            property requires

                                                                            static readonly requires: [
                                                                            typeof TablePropertiesEditing,
                                                                            typeof TablePropertiesUI
                                                                            ];

                                                                              class TablePropertiesEditing

                                                                              class TablePropertiesEditing extends Plugin {}

                                                                                property pluginName

                                                                                static readonly pluginName: string;

                                                                                  property requires

                                                                                  static readonly requires: [typeof TableEditing];

                                                                                    method init

                                                                                    init: () => void;

                                                                                      class TablePropertiesUI

                                                                                      class TablePropertiesUI extends Plugin {}

                                                                                        property pluginName

                                                                                        static readonly pluginName: string;

                                                                                          property requires

                                                                                          static readonly requires: [any];

                                                                                            method destroy

                                                                                            destroy: () => void;

                                                                                              method init

                                                                                              init: () => void;

                                                                                                class TableSelection

                                                                                                class TableSelection extends Plugin {}

                                                                                                  property pluginName

                                                                                                  static readonly pluginName: string;

                                                                                                    property requires

                                                                                                    static readonly requires: [typeof TableUtils];

                                                                                                      method getAnchorCell

                                                                                                      getAnchorCell: () => Element;

                                                                                                        method getFocusCell

                                                                                                        getFocusCell: () => Element;

                                                                                                          method getSelectedTableCells

                                                                                                          getSelectedTableCells: () => Element[] | null;

                                                                                                            method getSelectionAsFragment

                                                                                                            getSelectionAsFragment: () => DocumentFragment | null;

                                                                                                              method init

                                                                                                              init: () => void;

                                                                                                                method setCellSelection

                                                                                                                setCellSelection: (anchorCell: Element, targetCell: Element) => void;

                                                                                                                  class TableToolbar

                                                                                                                  class TableToolbar extends Plugin {}

                                                                                                                    property pluginName

                                                                                                                    static readonly pluginName: string;

                                                                                                                      property requires

                                                                                                                      static readonly requires: [any];

                                                                                                                        method afterInit

                                                                                                                        afterInit: () => void;

                                                                                                                          class TableUI

                                                                                                                          class TableUI extends Plugin {}

                                                                                                                            property pluginName

                                                                                                                            static readonly pluginName: string;

                                                                                                                              method init

                                                                                                                              init: () => void;

                                                                                                                                class TableUtils

                                                                                                                                class TableUtils extends Plugin {}
                                                                                                                                • The table utilities plugin.

                                                                                                                                property pluginName

                                                                                                                                static readonly pluginName: string;

                                                                                                                                  method createTable

                                                                                                                                  createTable: (
                                                                                                                                  writer: Writer,
                                                                                                                                  options?: {
                                                                                                                                  rows?: number;
                                                                                                                                  columns?: number;
                                                                                                                                  headingRows?: number;
                                                                                                                                  headingColumns?: number;
                                                                                                                                  }
                                                                                                                                  ) => ModelElement;
                                                                                                                                  • Creates an empty table with a proper structure. The table needs to be inserted into the model, for example, by using the function.

                                                                                                                                    model.change( ( writer ) => { // Create a table of 2 rows and 7 columns: const table = tableUtils.createTable( writer, { rows: 2, columns: 7 } );

                                                                                                                                    // Insert a table to the model at the best position taking the current selection: model.insertContent( table ); }

                                                                                                                                  method createTableWalker

                                                                                                                                  createTableWalker: (
                                                                                                                                  table: ModelElement,
                                                                                                                                  options?: {
                                                                                                                                  row?: number;
                                                                                                                                  startRow?: number;
                                                                                                                                  endRow?: number;
                                                                                                                                  column?: number;
                                                                                                                                  startColumn?: number;
                                                                                                                                  endColumn?: number;
                                                                                                                                  includeAllSlots?: boolean;
                                                                                                                                  }
                                                                                                                                  ) => TableWalker;
                                                                                                                                  • Creates an instance of the table walker.

                                                                                                                                    The table walker iterates internally by traversing the table from row index = 0 and column index = 0. It walks row by row and column by column in order to output values defined in the options. By default it will output only the locations that are occupied by a cell. To include also spanned rows and columns, pass the includeAllSlots option.

                                                                                                                                  method getCellLocation

                                                                                                                                  getCellLocation: (
                                                                                                                                  tableCell: ModelElement
                                                                                                                                  ) => { row: number; column: number } | void;
                                                                                                                                  • Returns the table cell location as an object with table row and table column indexes.

                                                                                                                                    For instance, in the table below:

                                                                                                                                    0 1 2 3 +---+---+---+---+ 0 | a | b | c | + + +---+ 1 | | | d | +---+---+ +---+ 2 | e | | f | +---+---+---+---+

                                                                                                                                    the method will return:

                                                                                                                                    const cellA = table.getNodeByPath( [ 0, 0 ] ); editor.plugins.get( 'TableUtils' ).getCellLocation( cellA ); // will return { row: 0, column: 0 }

                                                                                                                                    const cellD = table.getNodeByPath( [ 1, 0 ] ); editor.plugins.get( 'TableUtils' ).getCellLocation( cellD ); // will return { row: 1, column: 3 }

                                                                                                                                  method getColumnIndexes

                                                                                                                                  getColumnIndexes: (tableCells: ModelElement[]) => {
                                                                                                                                  first: number;
                                                                                                                                  last: number;
                                                                                                                                  };
                                                                                                                                  • Returns an object with the first and last column index contained in the given tableCells.

                                                                                                                                    const selectedTableCells = getSelectedTableCells( editor.model.document.selection );

                                                                                                                                    const { first, last } = getColumnIndexes( selectedTableCells );

                                                                                                                                    console.log( Selected columns: ${ first } to ${ last } );

                                                                                                                                  method getColumns

                                                                                                                                  getColumns: (table: ModelElement) => number;
                                                                                                                                  • Returns the number of columns for a given table.

                                                                                                                                    editor.plugins.get( 'TableUtils' ).getColumns( table );

                                                                                                                                  method getRowIndexes

                                                                                                                                  getRowIndexes: (tableCells: ModelElement[]) => { first: number; last: number };
                                                                                                                                  • Returns an object with the first and last row index contained in the given tableCells.

                                                                                                                                    const selectedTableCells = getSelectedTableCells( editor.model.document.selection );

                                                                                                                                    const { first, last } = getRowIndexes( selectedTableCells );

                                                                                                                                    console.log( Selected rows: ${ first } to ${ last } );

                                                                                                                                  method getRows

                                                                                                                                  getRows: (table: ModelElement) => number;
                                                                                                                                  • Returns the number of rows for a given table. Any other element present in the table model is omitted.

                                                                                                                                    editor.plugins.get( 'TableUtils' ).getRows( table );

                                                                                                                                  method getSelectedTableCells

                                                                                                                                  getSelectedTableCells: (selection: ModelSelection) => ModelElement[];
                                                                                                                                  • Returns all model table cells that are fully selected (from the outside) within the provided model selection's ranges.

                                                                                                                                    To obtain the cells selected from the inside, use .

                                                                                                                                  method getSelectionAffectedTableCells

                                                                                                                                  getSelectionAffectedTableCells: (selection: ModelSelection) => ModelElement[];
                                                                                                                                  • Returns all model table cells that are either completely selected by selection ranges or host selection range inside them.

                                                                                                                                    Combines and .

                                                                                                                                  method getTableCellsContainingSelection

                                                                                                                                  getTableCellsContainingSelection: (selection: ModelSelection) => ModelElement[];
                                                                                                                                  • Returns all model table cells that the provided model selection's ranges inside.

                                                                                                                                    To obtain the cells selected from the outside, use .

                                                                                                                                  method init

                                                                                                                                  init: () => void;

                                                                                                                                    method insertColumns

                                                                                                                                    insertColumns: (
                                                                                                                                    table: ModelElement,
                                                                                                                                    options?: { at?: number; columns?: number }
                                                                                                                                    ) => void;
                                                                                                                                    • Inserts columns into a table.

                                                                                                                                      editor.plugins.get( 'TableUtils' ).insertColumns( table, { at: 1, columns: 2 } );

                                                                                                                                      Assuming the table on the left, the above code will transform it to the table on the right:

                                                                                                                                      0 1 2 3 0 1 2 3 4 5 +---+---+---+ +---+---+---+---+---+ | a | b | | a | b | + +---+ + +---+ | | c | | | c | +---+---+---+ will give: +---+---+---+---+---+ | d | e | f | | d | | | e | f | +---+ +---+ +---+---+---+ +---+ | g | | h | | g | | | | h | +---+---+---+ +---+---+---+---+---+ | i | | i | +---+---+---+ +---+---+---+---+---+ ^---- insert here, at = 1, columns = 2

                                                                                                                                    method insertRows

                                                                                                                                    insertRows: (
                                                                                                                                    table: ModelElement,
                                                                                                                                    options?: { at?: number; rows?: number; copyStructureFromAbove?: boolean }
                                                                                                                                    ) => void;
                                                                                                                                    • Inserts rows into a table.

                                                                                                                                      editor.plugins.get( 'TableUtils' ).insertRows( table, { at: 1, rows: 2 } );

                                                                                                                                      Assuming the table on the left, the above code will transform it to the table on the right:

                                                                                                                                      row index 0 +---+---+---+ at = 1, +---+---+---+ 0 | a | b | c | rows = 2, | a | b | c | 1 + +---+---+ <-- insert here + +---+---+ 1 | | d | e | | | | | 2 + +---+---+ will give: + +---+---+ 2 | | f | g | | | | | 3 +---+---+---+ + +---+---+ 3 | | d | e | + +---+---+ 4 + + f | g | +---+---+---+ 5

                                                                                                                                    method isSelectionRectangular

                                                                                                                                    isSelectionRectangular: (selectedTableCells: ModelElement[]) => boolean;
                                                                                                                                    • Checks if the selection contains cells that do not exceed rectangular selection.

                                                                                                                                      In a table below:

                                                                                                                                      ┌───┬───┬───┬───┐ │ a │ b │ c │ d │ ├───┴───┼───┤ │ │ e │ f │ │ │ ├───┼───┤ │ │ g │ h │ └───────┴───┴───┘

                                                                                                                                      Valid selections are these which create a solid rectangle (without gaps), such as: - a, b (two horizontal cells) - c, f (two vertical cells) - a, b, e (cell "e" spans over four cells) - c, d, f (cell d spans over a cell in the row below)

                                                                                                                                      While an invalid selection would be: - a, c (the unselected cell "b" creates a gap) - f, g, h (cell "d" spans over a cell from the row of "f" cell - thus creates a gap)

                                                                                                                                    method removeColumns

                                                                                                                                    removeColumns: (
                                                                                                                                    table: ModelElement,
                                                                                                                                    options?: { at?: number; columns?: number }
                                                                                                                                    ) => void;
                                                                                                                                    • Removes columns from the given table.

                                                                                                                                      This method re-calculates the table geometry including the colspan attribute of table cells overlapping removed columns and table headings values.

                                                                                                                                      editor.plugins.get( 'TableUtils' ).removeColumns( table, { at: 1, columns: 2 } );

                                                                                                                                      Executing the above code in the context of the table on the left will transform its structure as presented on the right:

                                                                                                                                      0 1 2 3 4 0 1 2 ┌───────────────┬───┐ ┌───────┬───┐ │ a │ b │ │ a │ b │ │ ├───┤ │ ├───┤ │ │ c │ │ │ c │ ├───┬───┬───┬───┼───┤ will give: ├───┬───┼───┤ │ d │ e │ f │ g │ h │ │ d │ g │ h │ ├───┼───┼───┤ ├───┤ ├───┤ ├───┤ │ i │ j │ k │ │ l │ │ i │ │ l │ ├───┴───┴───┴───┴───┤ ├───┴───┴───┤ │ m │ │ m │ └───────────────────┘ └───────────┘ ^---- remove from here, at = 1, columns = 2

                                                                                                                                    method removeRows

                                                                                                                                    removeRows: (
                                                                                                                                    table: ModelElement,
                                                                                                                                    options?: { at?: number; rows?: number }
                                                                                                                                    ) => void;
                                                                                                                                    • Removes rows from the given table.

                                                                                                                                      This method re-calculates the table geometry including rowspan attribute of table cells overlapping removed rows and table headings values.

                                                                                                                                      editor.plugins.get( 'TableUtils' ).removeRows( table, { at: 1, rows: 2 } );

                                                                                                                                      Executing the above code in the context of the table on the left will transform its structure as presented on the right:

                                                                                                                                      row index ┌───┬───┬───┐ at = 1 ┌───┬───┬───┐ 0 │ a │ b │ c │ rows = 2 │ a │ b │ c │ 0 │ ├───┼───┤ │ ├───┼───┤ 1 │ │ d │ e │ <-- remove from here │ │ d │ g │ 1 │ │ ├───┤ will give: ├───┼───┼───┤ 2 │ │ │ f │ │ h │ i │ j │ 2 │ │ ├───┤ └───┴───┴───┘ 3 │ │ │ g │ ├───┼───┼───┤ 4 │ h │ i │ j │ └───┴───┴───┘

                                                                                                                                    method sortRanges

                                                                                                                                    sortRanges: (ranges: Iterable<ModelRange>) => ModelRange[];
                                                                                                                                    • Returns array of sorted ranges.

                                                                                                                                    method splitCellHorizontally

                                                                                                                                    splitCellHorizontally: (tableCell: ModelElement, numberOfCells?: number) => void;
                                                                                                                                    • Divides a table cell horizontally into several ones.

                                                                                                                                      The cell will be visually split into more cells by updating rowspans of other cells in the row and inserting rows with a single cell below.

                                                                                                                                      If in the table below cell "b" is split into 3 cells:

                                                                                                                                      +---+---+---+ | a | b | c | +---+---+---+ | d | e | f | +---+---+---+

                                                                                                                                      It will result in the table below:

                                                                                                                                      +---+---+---+ | a | b | c | + +---+ + | | | | + +---+ + | | | | +---+---+---+ | d | e | f | +---+---+---+

                                                                                                                                      So cells "a" and "b" will get their rowspan updated to 3 and 2 rows with a single cell will be added.

                                                                                                                                      Splitting a cell that already has a rowspan attribute set will distribute the cell rowspan evenly and the remainder will be left to the original cell:

                                                                                                                                      +---+---+---+ | a | b | c | + +---+---+ | | d | e | + +---+---+ | | f | g | + +---+---+ | | h | i | +---+---+---+

                                                                                                                                      Splitting cell "a" with rowspan=4 into 3 cells will create 2 cells with a rowspan=1 and cell "a" will have rowspan=2:

                                                                                                                                      +---+---+---+ | a | b | c | + +---+---+ | | d | e | +---+---+---+ | | f | g | +---+---+---+ | | h | i | +---+---+---+

                                                                                                                                    method splitCellVertically

                                                                                                                                    splitCellVertically: (tableCell: ModelElement, numberOfCells: number) => void;
                                                                                                                                    • Divides a table cell vertically into several ones.

                                                                                                                                      The cell will be visually split into more cells by updating colspans of other cells in a column and inserting cells (columns) after that cell.

                                                                                                                                      In the table below, if cell "a" is split into 3 cells:

                                                                                                                                      +---+---+---+ | a | b | c | +---+---+---+ | d | e | f | +---+---+---+

                                                                                                                                      it will result in the table below:

                                                                                                                                      +---+---+---+---+---+ | a | | | b | c | +---+---+---+---+---+ | d | e | f | +---+---+---+---+---+

                                                                                                                                      So cell "d" will get its colspan updated to 3 and 2 cells will be added (2 columns will be created).

                                                                                                                                      Splitting a cell that already has a colspan attribute set will distribute the cell colspan evenly and the remainder will be left to the original cell:

                                                                                                                                      +---+---+---+ | a | +---+---+---+ | b | c | d | +---+---+---+

                                                                                                                                      Splitting cell "a" with colspan=3 into 2 cells will create 1 cell with a colspan=a and cell "a" that will have colspan=2:

                                                                                                                                      +---+---+---+ | a | | +---+---+---+ | b | c | d | +---+---+---+

                                                                                                                                    Package Files (19)

                                                                                                                                    Dependencies (5)

                                                                                                                                    Dev Dependencies (0)

                                                                                                                                    No dev dependencies.

                                                                                                                                    Peer Dependencies (0)

                                                                                                                                    No peer dependencies.

                                                                                                                                    Badge

                                                                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-table.

                                                                                                                                    • Markdown
                                                                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-table)
                                                                                                                                    • HTML
                                                                                                                                      <a href="https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-table"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>