quill-table-up 2.0.1 → 2.0.3

package/src/modules/index.ts

@@ -0,0 +1,5 @@
+export * from './table-align';
+export * from './table-menu';
+export * from './table-resize';
+export * from './table-scrollbar';
+export * from './table-selection';

package/src/modules/table-align.ts

@@ -0,0 +1,116 @@
+import type TableUp from '..';
+import type { TableMainFormat, TableWrapperFormat } from '../formats';
+import { autoUpdate, computePosition, flip, limitShift, offset, shift } from '@floating-ui/dom';
+import Quill from 'quill';
+import { createBEM } from '../utils';
+
+export class TableAlign {
+  tableBlot: TableMainFormat;
+  tableWrapperBlot: TableWrapperFormat;
+  alignBox?: HTMLElement;
+  cleanup?: () => void;
+  bem = createBEM('align');
+  resizeObserver = new ResizeObserver(() => this.hide());
+  constructor(public tableModule: TableUp, public table: HTMLElement, public quill: Quill) {
+    this.tableBlot = Quill.find(table)! as TableMainFormat;
+    this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
+
+    this.alignBox = this.buildTool();
+  }
+
+  buildTool() {
+    const alignBox = this.tableModule.addContainer(this.bem.b());
+    const icons = Quill.import('ui/icons') as Record<string, any>;
+    const alignIcons = {
+      left: icons.align[''],
+      center: icons.align.center,
+      right: icons.align.right,
+    };
+    for (const [align, iconStr] of Object.entries(alignIcons)) {
+      const item = document.createElement('span');
+      item.dataset.align = align;
+      item.classList.add(this.bem.be('item'));
+      item.innerHTML = `<i class="icon">${iconStr}</i>`;
+      item.addEventListener('click', () => {
+        const value = item.dataset.align;
+        if (value) {
+          this.setTableAlign(this.tableBlot, value);
+
+          this.quill.once(Quill.events.SCROLL_OPTIMIZE, () => {
+            if (this.tableModule.tableSelection) {
+              this.tableModule.tableSelection.hide();
+            }
+            if (this.tableModule.tableResize) {
+              this.tableModule.tableResize.update();
+            }
+            if (this.tableModule.tableResizeScale) {
+              this.tableModule.tableResizeScale.update();
+            }
+            if (this.tableModule.tableScrollbar) {
+              this.tableModule.tableScrollbar.update();
+            }
+          });
+        }
+      });
+      alignBox.appendChild(item);
+    }
+    if (!this.cleanup) {
+      this.cleanup = autoUpdate(
+        this.tableWrapperBlot.domNode,
+        alignBox,
+        () => this.update(),
+      );
+    }
+    return alignBox;
+  }
+
+  setTableAlign(tableBlot: TableMainFormat, align: string) {
+    const cols = tableBlot.getCols();
+    for (const col of cols) {
+      col.align = align;
+    }
+  }
+
+  show() {
+    if (!this.alignBox) return;
+    this.alignBox.classList.add(this.bem.bm('active'));
+    this.resizeObserver.observe(this.table);
+  }
+
+  hide() {
+    if (!this.alignBox) return;
+    this.alignBox.classList.remove(this.bem.bm('active'));
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = undefined;
+    }
+  }
+
+  update() {
+    if (!this.alignBox) return;
+    if (this.tableBlot.full || this.tableBlot.domNode.offsetWidth >= this.quill.root.offsetWidth) {
+      this.hide();
+      return;
+    }
+
+    this.show();
+    computePosition(this.tableWrapperBlot.domNode, this.alignBox, {
+      placement: 'top',
+      middleware: [flip(), shift({ limiter: limitShift() }), offset(16)],
+    }).then(({ x, y }) => {
+      Object.assign(this.alignBox!.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  destroy() {
+    this.hide();
+    this.resizeObserver.disconnect();
+    if (this.alignBox) {
+      this.alignBox.remove();
+      this.alignBox = undefined;
+    }
+  }
+}

package/src/modules/table-menu/constants.ts

@@ -0,0 +1,140 @@
+import type { Tool } from '../../utils';
+import Background from '../../svg/background.svg';
+import Border from '../../svg/border.svg';
+import InsertBottom from '../../svg/insert-bottom.svg';
+import InsertLeft from '../../svg/insert-left.svg';
+import InsertRight from '../../svg/insert-right.svg';
+import InsertTop from '../../svg/insert-top.svg';
+import MergeCell from '../../svg/merge-cell.svg';
+import RemoveColumn from '../../svg/remove-column.svg';
+import RemoveRow from '../../svg/remove-row.svg';
+import RemoveTable from '../../svg/remove-table.svg';
+import SplitCell from '../../svg/split-cell.svg';
+import { createBEM } from '../../utils';
+
+export const menuColorSelectClassName = 'color-selector';
+export const defaultTools: Tool[] = [
+  {
+    name: 'InsertTop',
+    icon: InsertTop,
+    tip: 'Insert row above',
+    handle: (tableModule) => {
+      tableModule.appendRow(false);
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'InsertRight',
+    icon: InsertRight,
+    tip: 'Insert column right',
+    handle: (tableModule) => {
+      tableModule.appendCol(true);
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'InsertBottom',
+    icon: InsertBottom,
+    tip: 'Insert row below',
+    handle: (tableModule) => {
+      tableModule.appendRow(true);
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'InsertLeft',
+    icon: InsertLeft,
+    tip: 'Insert column Left',
+    handle: (tableModule) => {
+      tableModule.appendCol(false);
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'break',
+  },
+  {
+
+    name: 'MergeCell',
+    icon: MergeCell,
+    tip: 'Merge Cell',
+    handle: (tableModule) => {
+      tableModule.mergeCells();
+      tableModule.hideTableTools();
+    },
+  },
+  {
+
+    name: 'SplitCell',
+    icon: SplitCell,
+    tip: 'Split Cell',
+    handle: (tableModule) => {
+      tableModule.splitCell();
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'break',
+  },
+  {
+    name: 'DeleteRow',
+    icon: RemoveRow,
+    tip: 'Delete Row',
+    handle: (tableModule) => {
+      tableModule.removeRow();
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'DeleteColumn',
+    icon: RemoveColumn,
+    tip: 'Delete Column',
+    handle: (tableModule) => {
+      tableModule.removeCol();
+      tableModule.hideTableTools();
+    },
+  },
+  {
+    name: 'DeleteTable',
+    icon: RemoveTable,
+    tip: 'Delete table',
+    handle: (tableModule) => {
+      tableModule.deleteTable();
+    },
+  },
+  {
+    name: 'break',
+  },
+  {
+    name: 'BackgroundColor',
+    icon: Background,
+    isColorChoose: true,
+    tip: 'Set background color',
+    key: 'background-color',
+    handle: (tableModule, selectedTds, color) => {
+      tableModule.setCellAttrs(selectedTds, 'background-color', color, true);
+    },
+  },
+  {
+    name: 'BorderColor',
+    icon: Border,
+    isColorChoose: true,
+    tip: 'Set border color',
+    key: 'border-color',
+    handle: (tableModule, selectedTds, color) => {
+      tableModule.setCellAttrs(selectedTds, 'border-color', color, true);
+    },
+  },
+];
+
+export const maxSaveColorCount = 10;
+export const usedColors = new Set<string>();
+const bem = createBEM('color-map');
+export const colorClassName = {
+  selectWrapper: bem.b(),
+  used: bem.bm('used'),
+  item: bem.be('item'),
+  btn: bem.be('btn'),
+  map: bem.be('content'),
+  mapRow: bem.be('content-row'),
+};

package/src/modules/table-menu/index.ts

@@ -0,0 +1,3 @@
+export * from './table-menu-common';
+export * from './table-menu-contextmenu';
+export * from './table-menu-select';

package/src/modules/table-menu/table-menu-common.ts

@@ -0,0 +1,249 @@
+import type Quill from 'quill';
+import type { TableUp } from '../..';
+import type { TableMenuOptions, ToolOption, TooltipInstance, ToolTipOptions } from '../../utils';
+import { createBEM, createColorPicker, createTooltip, debounce, defaultColorMap, isArray, isFunction, randomId } from '../../utils';
+import { colorClassName, defaultTools, maxSaveColorCount, menuColorSelectClassName, usedColors } from './constants';
+
+export type TableMenuOptionsInput = Partial<Omit<TableMenuOptions, 'texts'>>;
+export class TableMenuCommon {
+  options: TableMenuOptions;
+  menu: HTMLElement | null = null;
+  updateUsedColor: (this: any, color?: string) => void;
+  tooltipItem: TooltipInstance[] = [];
+  bem = createBEM('menu');
+  colorItemClass = `color-${randomId()}`;
+  colorChooseTooltipOption: ToolTipOptions = {
+    direction: 'top',
+  };
+
+  constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
+    this.options = this.resolveOptions(options);
+
+    try {
+      const storageValue = localStorage.getItem(this.options.localstorageKey) || '[]';
+      let colorValue = JSON.parse(storageValue);
+      if (!isArray(colorValue)) {
+        colorValue = [];
+      }
+      colorValue.slice(-1 * maxSaveColorCount).map((c: string) => usedColors.add(c));
+    }
+    catch {}
+
+    this.updateUsedColor = debounce((color?: string) => {
+      if (!color) return;
+      usedColors.add(color);
+      if (usedColors.size > maxSaveColorCount) {
+        const saveColors = Array.from(usedColors).slice(-1 * maxSaveColorCount);
+        usedColors.clear();
+        saveColors.map(v => usedColors.add(v));
+      }
+
+      localStorage.setItem(this.options.localstorageKey, JSON.stringify(Array.from(usedColors)));
+      const usedColorWrappers = Array.from(document.querySelectorAll(`.${this.colorItemClass}.${colorClassName.used}`));
+      for (const usedColorWrapper of usedColorWrappers) {
+        const newColorItem = document.createElement('div');
+        newColorItem.classList.add(colorClassName.item);
+        newColorItem.style.backgroundColor = String(color);
+        // if already have same color item. doesn't need insert
+        const sameColorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}[style*="background-color: ${newColorItem.style.backgroundColor}"]`));
+        if (sameColorItem.length <= 0) {
+          usedColorWrapper.appendChild(newColorItem);
+        }
+
+        const colorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}`)).slice(0, -1 * maxSaveColorCount);
+        for (const item of colorItem) {
+          item.remove();
+        }
+      }
+    }, 1000);
+  }
+
+  resolveOptions(options: TableMenuOptionsInput) {
+    const value = Object.assign({
+      tipText: true,
+      tipTexts: {},
+      tools: defaultTools,
+      localstorageKey: '__table-bg-used-color',
+      defaultColorMap,
+    }, options);
+    return value as TableMenuOptions;
+  };
+
+  getUsedColors() {
+    return usedColors;
+  }
+
+  buildTools(): HTMLElement {
+    const toolBox = document.createElement('div');
+    toolBox.classList.add(this.bem.b());
+    Object.assign(toolBox.style, { display: 'flex' });
+    for (const tool of this.options.tools) {
+      const { name, icon, handle, isColorChoose, key: attrKey, tip = '' } = tool as ToolOption;
+      const item = document.createElement('span');
+      item.classList.add(this.bem.be('item'));
+      if (name === 'break') {
+        item.classList.add(this.bem.is('break'));
+      }
+      else {
+        // add icon
+        const iconDom = document.createElement('i');
+        iconDom.classList.add('icon');
+        if (isFunction(icon)) {
+          iconDom.appendChild(icon(this.tableModule));
+        }
+        else {
+          iconDom.innerHTML = icon;
+        }
+        item.appendChild(iconDom);
+
+        if (isColorChoose && attrKey) {
+          const tooltipItem = this.createColorChoose(item, { name, icon, handle, isColorChoose, key: attrKey, tip });
+          this.tooltipItem.push(tooltipItem);
+          item.classList.add(menuColorSelectClassName);
+        }
+        else {
+          isFunction(handle) && item.addEventListener('click', (e) => {
+            this.quill.focus();
+            handle(this.tableModule, this.getSelectedTds(), e);
+          }, false);
+        }
+
+        // add text
+        const tipText = this.options.tipTexts[name] || tip;
+        if (this.options.tipText && tipText && tip) {
+          this.createTipText(item, tipText);
+        }
+      }
+      toolBox.appendChild(item);
+    }
+    return toolBox;
+  };
+
+  createColorChoose(item: HTMLElement, { handle, key }: ToolOption) {
+    const colorSelectWrapper = document.createElement('div');
+    colorSelectWrapper.classList.add(colorClassName.selectWrapper);
+
+    if (this.options.defaultColorMap.length > 0) {
+      const colorMap = document.createElement('div');
+      colorMap.classList.add(colorClassName.map);
+      for (const colors of this.options.defaultColorMap) {
+        const colorMapRow = document.createElement('div');
+        colorMapRow.classList.add(colorClassName.mapRow);
+        for (const color of colors) {
+          const colorItem = document.createElement('div');
+          colorItem.classList.add(colorClassName.item);
+          colorItem.style.backgroundColor = color;
+          colorMapRow.appendChild(colorItem);
+        }
+        colorMap.appendChild(colorMapRow);
+      }
+      colorSelectWrapper.appendChild(colorMap);
+    }
+
+    const colorMapRow = document.createElement('div');
+    colorMapRow.classList.add(colorClassName.mapRow);
+    Object.assign(colorMapRow.style, {
+      marginTop: '4px',
+    });
+    const transparentColor = document.createElement('div');
+    transparentColor.classList.add(colorClassName.btn, 'transparent');
+    transparentColor.textContent = this.tableModule.options.texts.transparent;
+    transparentColor.addEventListener('click', () => {
+      handle(this.tableModule, this.getSelectedTds(), 'transparent');
+    });
+    const clearColor = document.createElement('div');
+    clearColor.classList.add(colorClassName.btn, 'clear');
+    clearColor.textContent = this.tableModule.options.texts.clear;
+    clearColor.addEventListener('click', () => {
+      handle(this.tableModule, this.getSelectedTds(), null);
+    });
+    const customColor = document.createElement('div');
+    customColor.classList.add(colorClassName.btn, 'custom');
+    customColor.textContent = this.tableModule.options.texts.custom;
+    const colorPicker = createColorPicker({
+      onChange: (color) => {
+        handle(this.tableModule, this.getSelectedTds(), color);
+        this.updateUsedColor(color);
+      },
+    });
+    const { hide: hideColorPicker, destroy: destroyColorPicker } = createTooltip(customColor, {
+      direction: 'right',
+      type: 'click',
+      content: colorPicker,
+      container: customColor,
+    })!;
+
+    colorMapRow.appendChild(transparentColor);
+    colorMapRow.appendChild(clearColor);
+    colorMapRow.appendChild(customColor);
+    colorSelectWrapper.appendChild(colorMapRow);
+
+    if (usedColors.size > 0) {
+      const usedColorWrap = document.createElement('div');
+      usedColorWrap.classList.add(colorClassName.used, this.colorItemClass);
+      for (const recordColor of usedColors) {
+        const colorItem = document.createElement('div');
+        colorItem.classList.add(colorClassName.item);
+        colorItem.style.backgroundColor = recordColor;
+        usedColorWrap.appendChild(colorItem);
+      }
+      colorSelectWrapper.appendChild(usedColorWrap);
+    }
+
+    colorSelectWrapper.addEventListener('click', (e) => {
+      e.stopPropagation();
+      hideColorPicker();
+      const item = e.target as HTMLElement;
+      const color = item.style.backgroundColor;
+      const selectedTds = this.getSelectedTds();
+      if (item && color && selectedTds.length > 0) {
+        this.tableModule.setCellAttrs(selectedTds, key!, color, true);
+        if (!item.closest(`.${colorClassName.item}`)) return;
+        this.updateUsedColor(color);
+      }
+    });
+
+    return createTooltip(item, {
+      content: colorSelectWrapper,
+      onClose(force) {
+        const isChild = colorSelectWrapper.contains(colorPicker);
+        if (force && isChild) {
+          hideColorPicker();
+        }
+        return isChild;
+      },
+      onDestroy() {
+        destroyColorPicker();
+      },
+      ...this.colorChooseTooltipOption,
+    })!;
+  }
+
+  getSelectedTds() {
+    return this.tableModule.tableSelection?.selectedTds || [];
+  }
+
+  createTipText(item: HTMLElement, text: string) {
+    const tipTextDom = createTooltip(item, { msg: text });
+    tipTextDom && this.tooltipItem.push(tipTextDom);
+  }
+
+  update() {
+    if (!this.menu || !this.tableModule.tableSelection || !this.tableModule.tableSelection.boundary) return;
+    Object.assign(this.menu.style, { display: 'flex' });
+  }
+
+  hide() {
+    this.menu && Object.assign(this.menu.style, { display: 'none' });
+    for (const tooltip of this.tooltipItem) {
+      tooltip.hide(true);
+    }
+  }
+
+  destroy() {
+    for (const tooltip of this.tooltipItem) tooltip.destroy();
+    if (!this.menu) return;
+    this.menu.remove();
+    this.menu = null;
+  }
+}

package/src/modules/table-menu/table-menu-contextmenu.ts

@@ -0,0 +1,94 @@
+import type Quill from 'quill';
+import type TableUp from '../..';
+import type { TableMenuOptions, ToolTipOptions } from '../../utils';
+import { limitDomInViewPort } from '../../utils';
+import { menuColorSelectClassName } from './constants';
+import { TableMenuCommon } from './table-menu-common';
+
+type TableMenuOptionsInput = Partial<Omit<TableMenuOptions, 'texts'>>;
+export class TableMenuContextmenu extends TableMenuCommon {
+  colorChooseTooltipOption: ToolTipOptions = {
+    direction: 'right',
+  };
+
+  constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
+    super(tableModule, quill, options);
+
+    this.quill.root.addEventListener('contextmenu', this.listenContextmenu);
+  }
+
+  listenContextmenu = (e: MouseEvent) => {
+    e.preventDefault();
+
+    const path = e.composedPath() as HTMLElement[];
+    if (!path || path.length <= 0) return;
+
+    const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE' && node.classList.contains('ql-table'));
+
+    if (tableNode && this.tableModule.tableSelection?.selectedTds?.length) {
+      if (!this.menu) {
+        this.menu = this.buildTools();
+      }
+      this.update({ x: e.clientX, y: e.clientY });
+      document.addEventListener('click', () => {
+        this.hide();
+      }, { once: true });
+    }
+    else {
+      this.hide();
+    }
+  };
+
+  buildTools(): HTMLElement {
+    const menu = super.buildTools();
+    menu.classList.add(this.bem.is('contextmenu'));
+    const items = menu.getElementsByClassName(menuColorSelectClassName);
+    for (const item of Array.from(items)) {
+      item.addEventListener('click', e => e.stopPropagation());
+    }
+    document.body.appendChild(menu);
+    return menu;
+  }
+
+  createTipText(item: HTMLElement, text: string): void {
+    const tipTextDom = document.createElement('span');
+    tipTextDom.textContent = text;
+    item.appendChild(tipTextDom);
+  }
+
+  update(position?: { x: number; y: number }) {
+    if (!this.menu || !this.tableModule.tableSelection || !this.tableModule.tableSelection.boundary) return;
+    super.update();
+    const style: Record<string, any> = {
+      display: 'flex',
+      left: 0,
+      top: 0,
+    };
+
+    if (!position) {
+      return this.hide();
+    }
+    const { x, y } = position;
+    style.left = x;
+    style.top = y;
+
+    Object.assign(this.menu.style, {
+      ...style,
+      left: `${style.left + window.scrollX}px`,
+      top: `${style.top + window.scrollY}px`,
+    });
+
+    // limit menu in viewport
+    const menuRect = this.menu.getBoundingClientRect();
+    const { left: limitLeft, top: limitTop } = limitDomInViewPort(menuRect);
+    Object.assign(this.menu.style, {
+      left: `${limitLeft + window.scrollX}px`,
+      top: `${limitTop + window.scrollY}px`,
+    });
+  }
+
+  destroy() {
+    this.quill.root.removeEventListener('contextmenu', this.listenContextmenu);
+    super.destroy();
+  }
+}

package/src/modules/table-menu/table-menu-select.ts

@@ -0,0 +1,28 @@
+import type Quill from 'quill';
+import type { TableMenuOptionsInput, TableUp } from '../..';
+import { computePosition, flip, limitShift, offset, shift } from '@floating-ui/dom';
+import { TableMenuCommon } from './table-menu-common';
+
+export class TableMenuSelect extends TableMenuCommon {
+  constructor(public tableModule: TableUp, public quill: Quill, options: TableMenuOptionsInput) {
+    super(tableModule, quill, options);
+
+    this.menu = this.buildTools();
+    this.tableModule.addContainer(this.menu);
+  }
+
+  update() {
+    if (!this.menu || !this.tableModule.tableSelection || !this.tableModule.tableSelection.boundary) return;
+    super.update();
+
+    computePosition(this.tableModule.tableSelection.cellSelect, this.menu, {
+      placement: 'bottom',
+      middleware: [flip(), shift({ limiter: limitShift() }), offset(8)],
+    }).then(({ x, y }) => {
+      Object.assign(this.menu!.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+}

package/src/modules/table-resize/index.ts

@@ -0,0 +1,5 @@
+export * from './table-resize-box';
+export * from './table-resize-common';
+export * from './table-resize-line';
+export * from './table-resize-scale';
+export * from './utils';