QuillJS Table (quill1-table)

TABLE functionality in QuillJS (v1) using Containers.

Code of quill is included in project so we can easily play with it in our tests.

Features

• Add or remove a table/column/row/cell
• ctrl+z/ctrl+shift+z or cmd+z/cmd+shift+z on Mac (undo/redo)
• select a cell or multiple cells
• split/merge cell
• remove cell/selection
• copy/paste a table
• add col/row before/after
• copy & paste table from Word
• tabbing between cells
• select all cell content
• cell selection on click or with CTRL key (or CMD on Mac)
• show/hide table border

Usage

see example demo.js

// import module
import TableModule from 'quill1-table';

// register module
Quill.register('modules/table', TableModule);

// add toolbar controls in Toolbar module options
[
  {
    table: TableModule.tableOptions()
  },
  {
    table: [
      'insert',
      'append-row-above',
      'append-row-below',
      'append-col-before',
      'append-col-after',
      'remove-col',
      'remove-row',
      'remove-table',
      'split-cell',
      'merge-selection',
      'remove-cell',
      'remove-selection',
      'undo',
      'redo'
    ]
  }
]

// add module in Quill options
modules: {
  table: {
    // table module options
    cellSelectionOnClick: true // true: cell selection on click, false: cell selection with CTRL key
  },
  // add keyboard bindings in Keyboard options
  keyboard: {
    // Since Quill’s default handlers are added at initialization, the only way to prevent them is to add yours in the configuration.
    bindings: {
      backspace: {
        key: 'backspace',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'backspace', range, keycontext);
        }
      },
      delete: {
        key: 'delete',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'delete', range, keycontext);
        }
      },
      undo: {
        shortKey: true,
        key: 'z',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'undo', range, keycontext);
        }
      },
      redo: {
        shortKey: true,
        shiftKey: true,
        key: 'z',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'redo', range, keycontext);
        }
      }
    }
  }
}

If you use "bubble" theme, it is recommended to display the toolbar on single click, otherwise the selection cannot be kept.

quill.on('selection-change', range => {
  if (range) {
    quill.theme.tooltip.show();
    quill.theme.tooltip.position(quill.getBounds(range));
  }
});

Changelog

see CHANGELOG.md

For development

npm install

npm run build