@editorjs/table/dist/table.d.ts

Table for Editor.js

import { default as Toolbox } from './toolbox';
/**
 * @typedef {object} TableConfig
 * @description Tool's config from Editor
 * @property {boolean} withHeadings — Uses the first line as headings
 * @property {string[][]} withHeadings — two-dimensional array with table contents
 */
/**
 * @typedef {object} TableData - object with the data transferred to form a table
 * @property {number} rows - number of rows in the table
 * @property {number} cols - number of columns in the table
 */
/**
 * Generates and manages table contents.
 */
export default class Table {
    /**
     * Creates
     *
     * @constructor
     * @param {boolean} readOnly - read-only mode flag
     * @param {object} api - Editor.js API
     * @param {TableData} data - Editor.js API
     * @param {TableConfig} config - Editor.js API
     */
    constructor(readOnly: boolean, api: object, data: TableData, config: TableConfig);
    readOnly: boolean;
    api: any;
    data: TableData;
    config: any;
    /**
     * DOM nodes
     */
    wrapper: Element;
    table: Element;
    /**
     * Toolbox for managing of columns
     */
    toolboxColumn: Toolbox;
    toolboxRow: Toolbox;
    hoveredRow: number;
    hoveredColumn: number;
    selectedRow: number;
    selectedColumn: number;
    tunes: {
        withHeadings: boolean;
    };
    /**
     * The cell in which the focus is currently located, if 0 and 0 then there is no focus
     * Uses to switch between cells with buttons
     */
    focusedCell: {
        row: number;
        column: number;
    };
    /**
     * Global click listener allows to delegate clicks on some elements
     */
    documentClicked: (event: any) => void;
    /**
     * Returns the rendered table wrapper
     *
     * @returns {Element}
     */
    getWrapper(): Element;
    /**
     * Hangs the necessary handlers to events
     */
    bindEvents(): void;
    /**
     * Configures and creates the toolbox for manipulating with columns
     *
     * @returns {Toolbox}
     */
    createColumnToolbox(): Toolbox;
    /**
     * Configures and creates the toolbox for manipulating with rows
     *
     * @returns {Toolbox}
     */
    createRowToolbox(): Toolbox;
    /**
     * When you press enter it moves the cursor down to the next row
     * or creates it if the click occurred on the last one
     */
    moveCursorToNextRow(): void;
    /**
     * Get table cell by row and col index
     *
     * @param {number} row - cell row coordinate
     * @param {number} column - cell column coordinate
     * @returns {HTMLElement}
     */
    getCell(row: number, column: number): HTMLElement;
    /**
     * Get table row by index
     *
     * @param {number} row - row coordinate
     * @returns {HTMLElement}
     */
    getRow(row: number): HTMLElement;
    /**
     * The parent of the cell which is the row
     *
     * @param {HTMLElement} cell - cell element
     * @returns {HTMLElement}
     */
    getRowByCell(cell: HTMLElement): HTMLElement;
    /**
     * Ger row's first cell
     *
     * @param {Element} row - row to find its first cell
     * @returns {Element}
     */
    getRowFirstCell(row: Element): Element;
    /**
     * Set the sell's content by row and column numbers
     *
     * @param {number} row - cell row coordinate
     * @param {number} column - cell column coordinate
     * @param {string} content - cell HTML content
     */
    setCellContent(row: number, column: number, content: string): void;
    /**
     * Add column in table on index place
     * Add cells in each row
     *
     * @param {number} columnIndex - number in the array of columns, where new column to insert, -1 if insert at the end
     * @param {boolean} [setFocus] - pass true to focus the first cell
     */
    addColumn(columnIndex?: number, setFocus?: boolean): void;
    /**
     * Add row in table on index place
     *
     * @param {number} index - number in the array of rows, where new column to insert, -1 if insert at the end
     * @param {boolean} [setFocus] - pass true to focus the inserted row
     * @returns {HTMLElement} row
     */
    addRow(index?: number, setFocus?: boolean): HTMLElement;
    /**
     * Delete a column by index
     *
     * @param {number} index
     */
    deleteColumn(index: number): void;
    /**
     * Delete a row by index
     *
     * @param {number} index
     */
    deleteRow(index: number): void;
    /**
     * Create a wrapper containing a table, toolboxes
     * and buttons for adding rows and columns
     *
     * @returns {HTMLElement} wrapper - where all buttons for a table and the table itself will be
     */
    createTableWrapper(): HTMLElement;
    /**
     * Returns the size of the table based on initial data or config "size" property
     *
     * @return {{rows: number, cols: number}} - number of cols and rows
     */
    computeInitialSize(): {
        rows: number;
        cols: number;
    };
    /**
     * Resize table to match config size or transmitted data size
     *
     * @return {{rows: number, cols: number}} - number of cols and rows
     */
    resize(): {
        rows: number;
        cols: number;
    };
    /**
     * Fills the table with data passed to the constructor
     *
     * @returns {void}
     */
    fill(): void;
    /**
     * Fills a row with cells
     *
     * @param {HTMLElement} row - row to fill
     * @param {number} numberOfColumns - how many cells should be in a row
     */
    fillRow(row: HTMLElement, numberOfColumns: number): void;
    /**
     * Creating a cell element
     *
     * @return {Element}
     */
    createCell(): Element;
    /**
     * Get number of rows in the table
     */
    get numberOfRows(): number;
    /**
     * Get number of columns in the table
     */
    get numberOfColumns(): number;
    /**
     * Is the column toolbox menu displayed or not
     *
     * @returns {boolean}
     */
    get isColumnMenuShowing(): boolean;
    /**
     * Is the row toolbox menu displayed or not
     *
     * @returns {boolean}
     */
    get isRowMenuShowing(): boolean;
    /**
     * Recalculate position of toolbox icons
     *
     * @param {Event} event - mouse move event
     */
    onMouseMoveInTable(event: Event): void;
    /**
     * Prevents default Enter behaviors
     * Adds Shift+Enter processing
     *
     * @param {KeyboardEvent} event - keypress event
     */
    onKeyPressListener(event: KeyboardEvent): boolean;
    /**
     * Prevents tab keydown event from bubbling
     * so that it only works inside the table
     *
     * @param {KeyboardEvent} event - keydown event
     */
    onKeyDownListener(event: KeyboardEvent): void;
    /**
     * Set the coordinates of the cell that the focus has moved to
     *
     * @param {FocusEvent} event - focusin event
     */
    focusInTableListener(event: FocusEvent): void;
    /**
     * Unselect row/column
     * Close toolbox menu
     * Hide toolboxes
     *
     * @returns {void}
     */
    hideToolboxes(): void;
    /**
     * Unselect row, close toolbox
     *
     * @returns {void}
     */
    hideRowToolbox(): void;
    /**
     * Unselect column, close toolbox
     *
     * @returns {void}
     */
    hideColumnToolbox(): void;
    /**
     * Set the cursor focus to the focused cell
     *
     * @returns {void}
     */
    focusCell(): void;
    /**
     * Get current focused element
     *
     * @returns {HTMLElement} - focused cell
     */
    get focusedCellElem(): HTMLElement;
    /**
     * Update toolboxes position
     *
     * @param {number} row - hovered row
     * @param {number} column - hovered column
     */
    updateToolboxesPosition(row?: number, column?: number): void;
    /**
     * Makes the first row headings
     *
     * @param {boolean} withHeadings - use headings row or not
     */
    setHeadingsSetting(withHeadings: boolean): void;
    /**
     * Adds an attribute for displaying the placeholder in the cell
     */
    addHeadingAttrToFirstRow(): void;
    /**
     * Removes an attribute for displaying the placeholder in the cell
     */
    removeHeadingAttrFromFirstRow(): void;
    /**
     * Add effect of a selected row
     *
     * @param {number} index
     */
    selectRow(index: number): void;
    /**
     * Remove effect of a selected row
     */
    unselectRow(): void;
    /**
     * Add effect of a selected column
     *
     * @param {number} index
     */
    selectColumn(index: number): void;
    /**
     * Remove effect of a selected column
     */
    unselectColumn(): void;
    /**
     * Calculates the row and column that the cursor is currently hovering over
     * The search was optimized from O(n) to O (log n) via bin search to reduce the number of calculations
     *
     * @param {Event} event - mousemove event
     * @returns hovered cell coordinates as an integer row and column
     */
    getHoveredCell(event: Event): {
        row: number;
        column: number;
    };
    /**
     * Looks for the index of the cell the mouse is hovering over.
     * Cells can be represented as ordered intervals with left and
     * right (upper and lower for rows) borders inside the table, if the mouse enters it, then this is our index
     *
     * @param {number} numberOfCells - upper bound of binary search
     * @param {function} getCell - function to take the currently viewed cell
     * @param {function} beforeTheLeftBorder - determines the cursor position, to the left of the cell or not
     * @param {function} afterTheRightBorder - determines the cursor position, to the right of the cell or not
     * @returns {number}
     */
    binSearch(numberOfCells: number, getCell: Function, beforeTheLeftBorder: Function, afterTheRightBorder: Function): number;
    /**
     * Collects data from cells into a two-dimensional array
     *
     * @returns {string[][]}
     */
    getData(): string[][];
    /**
     * Remove listeners on the document
     */
    destroy(): void;
}
export type TableConfig = object;
/**
 * - object with the data transferred to form a table
 */
export type TableData = {
    /**
     * - number of rows in the table
     */
    /**
     * - number of rows in the table
     */
    rows: number;
    /**
     * - number of columns in the table
     */
    /**
     * - number of columns in the table
     */
    cols: number;
};