Skip to content

Latest commit

 

History

History
252 lines (215 loc) · 8.61 KB

README.md

File metadata and controls

252 lines (215 loc) · 8.61 KB
Raw

quill-table-up

Enhancement of quill table module

demo

[email protected] table module

  • complete UI operation process
  • insert/delete row/column/table; merge/split cells
  • support insert header/list/video/image/code-block
  • control cells width/height/background color
  • 100 percent table width or fixed pixel width
  • line break in cells
  • not effect on other formats
  • redo and undo

Usage

npm install quill-table-up
import Quill from 'quill';
import TableUp from 'quill-table-up';
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/tableUp': TableUp }, true);

const quill = new Quill('#editor', {
  // ...
  modules: {
    //  ...
    toolbar: [
      // ...
      [ // use picker to enable the customSelect option
        { [TableUp.toolName]: [] }
        // or
        // { 'table-up': [] }
      ],
    ],
    [TableUp.moduleName]: {},
    // or
    // tableUp: {},
  },
});

Options

TableUp Options

attribute description type default
full if set true. width max will be 100% boolean true
customBtn display a custom button to custom row and column number add a table boolean false
resizerSetOuter if set true. table cell resize will be border around table boolean false
texts the text used to create the table TableTextOptions defaultTexts
customSelect display a custom select to custom row and column number add a table. the DOM returned by the function will replace the default selector (tableModule: TableUp) => HTMLElement -
selection moduel TableSelection options TableSelection -
icon picker svg icon string. it will set with innerHTML string origin table icon
default value 
const defaultTexts = {
  customBtnText: 'Custom',
  confirmText: 'Confirm',
  cancelText: 'Cancel',
  rowText: 'Row',
  colText: 'Column',
  notPositiveNumberError: 'Please enter a positive integer',
};

TableSelection Options

attribute description type default
selectColor selector border color string #0589f3
tableMenu module TableMenu options TableMenuOptions -

TableMenu Options

attribute description type default
tipText display tip text when hover icon boolean true
tipTexts the text to replace tools tip text Record<string, string> {}
localstorageKey used color save localstorage key string __table-bg-used-color
tools menu items Tool[] defaultTools
contextmenu table menu will display when selected at least one cell and right click on table boolean false
defaultColorMap color map string[][] in source code
texts the text that menu needs TableMenuTexts defaultTexts
types and default value 
interface ToolOption {
  name: string;
  icon: string | ((tableModule: TableUp) => HTMLElement);
  tip?: string;
  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',
    handle: (tableModule, selectedTds, color) => {},
  },
];
interface TableMenuTexts {
  custom: string;
  clear: string;
}
const defaultTexts = {
  custom: 'Custom',
  clear: 'Clear',
};

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.

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