quill-table-up v2.1.7

quill-table-up

Enhancement of quill table module

demo

quill@1.3.7 table module

• complete UI operation process
• insert/delete row/column/table; merge/split cells
• support all origin quill formats
• control cells width/height/border/background color
• 100 percent table width or fixed pixel width
• line break in cells
• redo and undo
• support whole table align left/center/right

Usage

npm install quill-table-up

the registe module name is used internal. so if you want to change it, place use the function updateTableConstants

import Quill from 'quill';
import TableUp, { TableAlign, TableMenuContextmenu, TableResizeBox, TableResizeScale, TableSelection, TableVirtualScrollbar } from 'quill-table-up';
import 'quill/dist/quill.snow.css';
import 'quill-table-up/index.css';
// If using the default customSelect option. You need to import this css
import 'quill-table-up/table-creator.css';

Quill.register({ [`modules/${TableUp.moduleName}`]: TableUp }, true);
// or
// Quill.register({ 'modules/table-up': TableUp }, true);

const quill = new Quill('#editor', {
  // ...
  modules: {
    //  ...
    toolbar: [
      // ...
      [ // use picker to enable the customSelect option
        { [TableUp.toolName]: [] }
      ],
    ],
    [TableUp.moduleName]: {
      scrollbar: TableVirtualScrollbar,
      align: TableAlign,
      resize: TableResizeBox,
      resizeScale: TableResizeScale,
      customSelect: defaultCustomSelect,
      selection: TableSelection,
      selectionOptions: {
        tableMenu: TableMenuContextmenu,
      }
    },
  },
});

Options

TableUp Options

I'm not suggest to use TableVirtualScrollbar and TableResizeLine at same time, because it will make the virtual scrollbar display blink. Just like the first editor in demo

const defaultTexts = {
  fullCheckboxText: 'Insert full width table',
  customBtnText: 'Custom',
  confirmText: 'Confirm',
  cancelText: 'Cancel',
  rowText: 'Row',
  colText: 'Column',
  notPositiveNumberError: 'Please enter a positive integer',
  custom: 'Custom',
  clear: 'Clear',
  transparent: 'Transparent',
  perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?',

  InsertTop: 'Insert a row above',
  InsertRight: 'Insert a column right',
  InsertBottom: 'Insert a row below',
  InsertLeft: 'Insert a column Left',
  MergeCell: 'Merge Cell',
  SplitCell: 'Split Cell',
  DeleteRow: 'Delete Row',
  DeleteColumn: 'Delete Column',
  DeleteTable: 'Delete table',
  BackgroundColor: 'Set background color',
  BorderColor: 'Set border color',
};

TableResizeScale Options

TableSelection Options

TableMenu Options

interface ToolOption {
  name: string;
  icon: string | ((tableModule: TableUp) => HTMLElement);
  tip?: string;
  key?: string; // the attribute name to set on td.
  isColorChoose?: boolean;
  handle: (tableModule: TableUp, selectedTds: TableCellInnerFormat[], e: Event | string) => void;
}
interface ToolOptionBreak {
  name: 'break';
}
type Tool = ToolOption | ToolOptionBreak;

const defaultTools = [
  {
    name: 'InsertTop',
    icon: InsertTop,
    tip: 'Insert a row above',
    handle: (tableModule) => {},
  },
  {
    name: 'InsertRight',
    icon: InsertRight,
    tip: 'Insert a column right',
    handle: (tableModule) => {},
  },
  {
    name: 'InsertBottom',
    icon: InsertBottom,
    tip: 'Insert a row below',
    handle: (tableModule) => {},
  },
  {
    name: 'InsertLeft',
    icon: InsertLeft,
    tip: 'Insert a column Left',
    handle: (tableModule) => {},
  },
  {
    name: 'break',
  },
  {
    name: 'MergeCell',
    icon: MergeCell,
    tip: 'Merge Cell',
    handle: (tableModule) => {},
  },
  {
    name: 'SplitCell',
    icon: SplitCell,
    tip: 'Split Cell',
    handle: (tableModule) => {},
  },
  {
    name: 'break',
  },
  {
    name: 'DeleteRow',
    icon: RemoveRow,
    tip: 'Delete Row',
    handle: (tableModule) => {},
  },
  {
    name: 'DeleteColumn',
    icon: RemoveColumn,
    tip: 'Delete Column',
    handle: (tableModule) => {},
  },
  {
    name: 'DeleteTable',
    icon: RemoveTable,
    tip: 'Delete table',
    handle: (tableModule) => {},
  },
  {
    name: 'break',
  },
  {
    name: 'BackgroundColor',
    icon: Color,
    isColorChoose: true,
    tip: 'Set background color',
    key: 'background-color',
    handle: (tableModule, selectedTds, color) => {},
  },
  {
    name: 'BorderColor',
    icon: Border,
    isColorChoose: true,
    tip: 'Set border color',
    key: 'border-color',
    handle: (tableModule, selectedTds, color) => {},
  },
];

Overrides

if you need to rewrite extends from quill Block or Scroll blot. you need to use Quill.import() after TableUp registed. beacuse module internal rewrite some functions, but those change only effect formats about table.

Header,List',Blockquote and CodeBlock have been overrides. so if you need to rewrite them, you need to rewrite them before TableUp registed, or you want to rewrite the internal logic. you can use Quill.import() after TableUp registed.

please read source code to know those change.

import { BlockOverride, ScrollOverride, } from 'quill-table-up';

class ScrollBlot extends ScrollOverride {
  // ...
}

Other

Change internal constants variable

If it's not necessary, you should import constants variable from quill-table-up directly but not edit it.

import { blotName, tableUpEvent, tableUpInternal, tableUpSize, } from 'quill-table-up';

You can change internal constants variable by importing updateTableConstants from quill-table-up and call it before TableUp registed.

It helps to migrate from other table modules with the same data structure.

• full variable demo
• change blot name that in delta demo

If you change the TableWrapperFormat blot name, you also need to add new css style to make toolbar icon have correct style.

/* change 'table-up' to your new blot name */
.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up {
  width: 28px;
}
.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label {
  padding: 2px 4px;
}
.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label svg {
  position: static;
  margin-top: 0;
}