quill-table-up

Enhancement of quill table module

demo

[email protected] table module

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

Usage

npm install quill-table-up

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

| attribute | description | type | default | | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------- | | full | if set true. width max will be 100% | boolean | false | | fullSwitch | enable to choose insert a full width table | boolean | true | | texts | the text used to create the table | TableTextOptions | defaultTexts | | customSelect | display a custom select to custom row and column number add a table. module provides default selector defaultCustomSelect | (tableModule: TableUp, picker: Picker) => Promise<HTMLElement> \| HTMLElement | - | | customBtn | display a custom button to custom row and column number add a table. it only when use defaultCustomSelect will effect | boolean | false | | selection | table selection handler. module provides TableSelection | Constructor | - | | selectionOptions | table selection options | TableSelectionOptions | - | | icon | picker svg icon string. it will set with innerHTML | string | origin table icon | | resize | table cell resize handler. module provides TableResizeLine and TableResizeBox | Constructor | - | | resizeScale | equal scale table cell handler. module provides TableResizeScale | Constructor | - | | scrollbar | table virtual scrollbar handler. module provides TableVirtualScrollbar | Constructor | - | | align | table alignment handler. module provides TableAlign | Constructor | - | | resizeOptions | table cell resize handler options | any | - | | resizeScaleOptions | equal scale table cell handler options | TableResizeScaleOptions | - | | alignOptions | table alignment handler options | any | - | | scrollbarOptions | table virtual scrollbar handler options | any | - |

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

| attribute | description | type | default | | --------- | ------------------------ | -------- | ------- | | blockSize | resize handle block size | number | 12 |

TableSelection Options

| attribute | description | type | default | | ---------------- | ------------------------------------------------------------------------------------ | ------------------ | --------- | | selectColor | selector border color | string | #0589f3 | | tableMenu | the table operate menu. module provides TableMenuContextmenu and TableMenuSelect | Constructor | - | | tableMenuOptions | module TableMenu options | TableMenuOptions | - |

TableMenu Options

| attribute | description | type | default | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------------------- | | tipText | when tableMenuClass set TableUp.TableMenuSelect, display tip text when hover icon. when tableMenuClass set TableUp.TableMenuContextmenu, display tip text after icon | boolean | true | | localstorageKey | used color save localstorage key | string | __table-bg-used-color | | tools | menu items | Tool[] | defaultTools | | defaultColorMap | color map | string[][] | in source code |

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 import it from quill-table-up. or use Quill.import() after TableUp registed. beacuse module internal rewrite some functions, but those change only effect formats about table.

please read source code to know those change.

import {
  BlockOverride,
  BlockquoteOverride,
  CodeBlockOverride,
  HeaderOverride,
  ListItemOverride,
  ScrollOverride,
} from 'quill-table-up';

class ScrollBlot extends ScrollOverride {
  // ...
}

Other

Change internal constants variable

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.

change variable 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;
}