quill-table-up 2.0.1 → 2.0.3

package/src/modules/table-selection.ts

@@ -0,0 +1,262 @@
+import type { TableUp } from '..';
+import type { TableCellInnerFormat, TableMainFormat } from '../formats';
+import type { InternalModule, RelactiveRect, TableSelectionOptions } from '../utils';
+import Quill from 'quill';
+import { TableCellFormat } from '../formats';
+import { addScrollEvent, clearScrollEvent, createBEM, getRelativeRect, isRectanglesIntersect } from '../utils';
+
+const ERROR_LIMIT = 2;
+export class TableSelection {
+  options: TableSelectionOptions;
+  boundary: RelactiveRect | null = null;
+  startScrollX: number = 0;
+  startScrollY: number = 0;
+  selectedTableScrollX: number = 0;
+  selectedTableScrollY: number = 0;
+  selectedEditorScrollX: number = 0;
+  selectedEditorScrollY: number = 0;
+  selectedTds: TableCellInnerFormat[] = [];
+  cellSelectWrap: HTMLElement;
+  cellSelect: HTMLElement;
+  dragging: boolean = false;
+  scrollHandler: [HTMLElement, (...args: any[]) => void][] = [];
+  selectingHandler = this.mouseDownHandler.bind(this);
+  tableMenu?: InternalModule;
+  resizeObserver: ResizeObserver;
+  bem = createBEM('selection');
+
+  constructor(tableModule: TableUp, public table: HTMLElement, public quill: Quill, options: Partial<TableSelectionOptions> = {}) {
+    this.options = this.resolveOptions(options);
+
+    this.cellSelectWrap = tableModule.addContainer(this.bem.b());
+    this.cellSelect = this.helpLinesInitial();
+
+    this.resizeObserver = new ResizeObserver(() => this.hide());
+    this.resizeObserver.observe(this.table);
+    this.resizeObserver.observe(this.quill.root);
+
+    this.quill.root.addEventListener('mousedown', this.selectingHandler, false);
+    if (this.options.tableMenu) {
+      this.tableMenu = new this.options.tableMenu(tableModule, quill, this.options.tableMenuOptions);
+    }
+  }
+
+  resolveOptions(options: Partial<TableSelectionOptions>): TableSelectionOptions {
+    return Object.assign({
+      selectColor: '#0589f3',
+      tableMenuOptions: {},
+    } as TableSelectionOptions, options);
+  };
+
+  helpLinesInitial() {
+    const cellSelect = document.createElement('div');
+    cellSelect.classList.add(this.bem.be('line'));
+    Object.assign(cellSelect.style, {
+      'border-color': this.options.selectColor,
+    });
+    this.cellSelectWrap.appendChild(cellSelect);
+    return cellSelect;
+  }
+
+  computeSelectedTds(startPoint: { x: number; y: number }, endPoint: { x: number; y: number }) {
+    type TempSortedTableCellFormat = TableCellFormat & { index?: number; __rect?: DOMRect };
+
+    // Use TableCell to calculation selected range, because TableCellInner is scrollable, the width will effect calculate
+    const tableMain = Quill.find(this.table) as TableMainFormat;
+    if (!tableMain) return [];
+    const tableCells = new Set((tableMain.descendants(TableCellFormat) as TempSortedTableCellFormat[]).map((cell, i) => {
+      cell.index = i;
+      return cell;
+    }));
+
+    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
+    const { x: editorScrollX, y: editorScrollY } = this.getQuillViewScroll();
+    this.selectedTableScrollX = tableScrollX;
+    this.selectedTableScrollY = tableScrollY;
+    this.selectedEditorScrollX = editorScrollX;
+    this.selectedEditorScrollY = editorScrollY;
+
+    // set boundary to initially mouse move rectangle
+    const tableRect = this.table.getBoundingClientRect();
+    const startPointX = startPoint.x - tableScrollX + this.startScrollX;
+    const startPointY = startPoint.y - tableScrollY + this.startScrollY;
+    let boundary = {
+      x: Math.max(tableRect.left, Math.min(endPoint.x, startPointX)),
+      y: Math.max(tableRect.top, Math.min(endPoint.y, startPointY)),
+      x1: Math.min(tableRect.right, Math.max(endPoint.x, startPointX)),
+      y1: Math.min(tableRect.bottom, Math.max(endPoint.y, startPointY)),
+    };
+
+    const selectedCells = new Set<TempSortedTableCellFormat>();
+    let findEnd = true;
+    // loop all cells to find correct boundary
+    while (findEnd) {
+      findEnd = false;
+      for (const cell of tableCells) {
+        if (!cell.__rect) {
+          cell.__rect = cell.domNode.getBoundingClientRect();
+        }
+        // Determine whether the cell intersects with the current boundary
+        const { x, y, right, bottom } = cell.__rect;
+        if (isRectanglesIntersect(boundary, { x, y, x1: right, y1: bottom }, ERROR_LIMIT)) {
+          // add cell to selected
+          selectedCells.add(cell);
+          tableCells.delete(cell);
+          // update boundary
+          boundary = {
+            x: Math.min(boundary.x, x),
+            y: Math.min(boundary.y, y),
+            x1: Math.max(boundary.x1, right),
+            y1: Math.max(boundary.y1, bottom),
+          };
+          // recalculate boundary last cells
+          findEnd = true;
+          break;
+        }
+        else if (x > boundary.x1 && y > boundary.y1) {
+          break;
+        }
+      }
+    }
+    for (const cell of [...selectedCells, ...tableCells]) {
+      delete cell.__rect;
+    }
+    // save result boundary relative to the editor
+    this.boundary = getRelativeRect({
+      ...boundary,
+      width: boundary.x1 - boundary.x,
+      height: boundary.y1 - boundary.y,
+    }, this.quill.root);
+    return Array.from(selectedCells).sort((a, b) => a.index! - b.index!).map((cell) => {
+      delete cell.index;
+      return cell.getCellInner();
+    });
+  }
+
+  mouseDownHandler(mousedownEvent: MouseEvent) {
+    const { button, target, clientX, clientY } = mousedownEvent;
+    const closestTable = (target as HTMLElement).closest('.ql-table') as HTMLElement;
+    if (button !== 0 || !closestTable) return;
+
+    const startTableId = closestTable.dataset.tableId;
+    const startPoint = { x: clientX, y: clientY };
+    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
+    this.startScrollX = tableScrollX;
+    this.startScrollY = tableScrollY;
+    this.selectedTds = this.computeSelectedTds(startPoint, startPoint);
+    this.show();
+    if (this.tableMenu) {
+      this.tableMenu.hide();
+    }
+
+    const mouseMoveHandler = (mousemoveEvent: MouseEvent) => {
+      const { button, target, clientX, clientY } = mousemoveEvent;
+      const closestTable = (target as HTMLElement).closest('.ql-table') as HTMLElement;
+      if (
+        button !== 0
+        || !closestTable
+        || closestTable.dataset.tableId !== startTableId
+      ) {
+        return;
+      }
+
+      this.dragging = true;
+      const movePoint = { x: clientX, y: clientY };
+      this.selectedTds = this.computeSelectedTds(startPoint, movePoint);
+      if (this.selectedTds.length > 1) {
+        this.quill.blur();
+      }
+      this.update();
+    };
+    const mouseUpHandler = () => {
+      document.body.removeEventListener('mousemove', mouseMoveHandler, false);
+      document.body.removeEventListener('mouseup', mouseUpHandler, false);
+      this.dragging = false;
+      this.startScrollX = 0;
+      this.startScrollY = 0;
+      if (this.tableMenu) {
+        this.tableMenu.update();
+      }
+    };
+
+    document.body.addEventListener('mousemove', mouseMoveHandler, false);
+    document.body.addEventListener('mouseup', mouseUpHandler, false);
+  }
+
+  update() {
+    if (this.selectedTds.length === 0 || !this.boundary) return;
+    const { x: editorScrollX, y: editorScrollY } = this.getQuillViewScroll();
+    const { x: tableScrollX, y: tableScrollY } = this.getTableViewScroll();
+    const tableWrapperRect = this.table.parentElement!.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    const wrapLeft = tableWrapperRect.x - rootRect.x;
+    const wrapTop = tableWrapperRect.y - rootRect.y;
+
+    Object.assign(this.cellSelect.style, {
+      left: `${this.selectedEditorScrollX * 2 - editorScrollX + this.boundary.x + this.selectedTableScrollX - tableScrollX - wrapLeft}px`,
+      top: `${this.selectedEditorScrollY * 2 - editorScrollY + this.boundary.y + this.selectedTableScrollY - tableScrollY - wrapTop}px`,
+      width: `${this.boundary.width}px`,
+      height: `${this.boundary.height}px`,
+    });
+    Object.assign(this.cellSelectWrap.style, {
+      left: `${wrapLeft}px`,
+      top: `${wrapTop}px`,
+      width: `${tableWrapperRect.width + 2}px`,
+      height: `${tableWrapperRect.height + 2}px`,
+    });
+    if (!this.dragging && this.tableMenu) {
+      this.tableMenu.update();
+    }
+  }
+
+  getQuillViewScroll() {
+    return {
+      x: this.quill.root.scrollLeft,
+      y: this.quill.root.scrollTop,
+    };
+  }
+
+  getTableViewScroll() {
+    return {
+      x: this.table.parentElement!.scrollLeft,
+      y: this.table.parentElement!.scrollTop,
+    };
+  }
+
+  show() {
+    clearScrollEvent.call(this);
+
+    Object.assign(this.cellSelectWrap.style, { display: 'block' });
+    this.update();
+
+    addScrollEvent.call(this, this.quill.root, () => {
+      this.update();
+    });
+    addScrollEvent.call(this, this.table.parentElement!, () => {
+      this.update();
+    });
+  }
+
+  hide() {
+    this.boundary = null;
+    this.selectedTds = [];
+    this.cellSelectWrap && Object.assign(this.cellSelectWrap.style, { display: 'none' });
+    if (this.tableMenu) {
+      this.tableMenu.hide();
+    }
+    clearScrollEvent.call(this);
+  }
+
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.hide();
+    this.cellSelectWrap.remove();
+    if (this.tableMenu) {
+      this.tableMenu.destroy();
+    }
+    clearScrollEvent.call(this);
+
+    this.quill.root.removeEventListener('mousedown', this.selectingHandler, false);
+    return null;
+  }
+}

package/src/style/button.less

@@ -0,0 +1,45 @@
+@import './variables.less';
+@import './functions.less';
+
+.@{namespace}-button {
+  .setCssVar(table-btn-color, #606266);
+  .setCssVar(table-btn-bg-hover, #f3f4f6);
+  .setCssVar(table-btn-color-border, #dcdfe6);
+  .setCssVar(table-btn-border, 1px solid .getCssVar(table-btn-color-border) []);
+  .setCssVar(table-btn-confirm-color-border, #409eff);
+  .setCssVar(table-btn-confirm-bg, #409eff);
+  .setCssVar(table-btn-confirm-hover, #79bbff);
+  .setCssVar(table-btn-confirm-outline-focus-visible, 2px solid #a0cfff);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  height: 32px;
+  line-height: 1;
+  margin: 0;
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: .getCssVar(table-btn-border) [];
+  color: .getCssVar(table-btn-color) [];
+  background-color: transparent;
+  font-size: 14px;
+  cursor: pointer;
+  & + & {
+    margin-left: 6px;
+  }
+  &:hover {
+    background-color: .getCssVar(table-btn-bg-hover) [];
+  }
+  &.confirm {
+    border-color: .getCssVar(table-btn-confirm-color-border) [];
+    background-color: .getCssVar(table-btn-confirm-bg) [];
+    color: #fff;
+    &:hover {
+      border-color: .getCssVar(table-btn-confirm-hover) [];
+      background-color: .getCssVar(table-btn-confirm-hover) [];
+    }
+    &:focus-visible {
+      outline: .getCssVar(table-btn-confirm-outline-focus-visible) [];
+      outline-offset: 1px;
+    }
+  }
+}

package/src/style/color-picker.less

@@ -0,0 +1,134 @@
+@import './variables.less';
+
+@panelWidth: 230px;
+@panelHeight: 150px;
+@barSize: 12px;
+@handleSize: 16px;
+@handleSizeSec: 10px;
+@barGap: 10px;
+@contentPadding: 8px;
+
+.handle(@isBlock: false) {
+  box-sizing: border-box;
+  position: absolute;
+  border: 1px solid #ffffff;
+  cursor: pointer;
+
+  & when(@isBlock) {
+    background-color: #ffffff;
+    box-shadow: 0 0 2px #0009;
+  }
+}
+
+.@{namespace}-color-picker {
+  .setCssVar(color-picker-bg-color, #ffffff);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  width: @panelWidth + @contentPadding * 2 + @barSize + @barGap;
+  padding: @contentPadding;
+  border-radius: 6px;
+  background: .getCssVar(color-picker-bg-color) [];
+  box-shadow: 0 0 6px #b2b5b8;
+
+  &__content {
+    box-sizing: border-box;
+    width: 100%;
+    height: @panelHeight + @contentPadding * 2 + @barSize + @barGap;
+    padding-top: @contentPadding;
+  }
+
+  &__selector {
+    width: @panelWidth;
+    height: @panelHeight;
+    position: absolute;
+  }
+
+  &__background {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    &-handle {
+      .handle();
+      @size: 10px;
+      top: 0px;
+      left: @panelWidth;
+      border-radius: 100%;
+      width: @size;
+      height: @size;
+      transform: translate(-1 * (@size / 2), -1 * (@size / 2));
+    }
+  }
+
+  &__hue {
+    width: @barSize;
+    height: @panelHeight;
+    margin-left: @panelWidth + @barGap;
+    position: absolute;
+    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+    &-handle {
+      .handle(true);
+      left: 0;
+      width: @handleSize;
+      height: @handleSizeSec;
+      transform: translate(((@barSize - @handleSize) / 2), (-1 * @handleSizeSec / 2));
+    }
+  }
+
+  &__alpha {
+    width: @panelWidth;
+    height: @barSize;
+    position: absolute;
+    margin-top: @panelHeight + @barGap;
+    background: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
+    background-size: @barSize @barSize;
+    background-position:
+      0 0,
+      (@barSize / 2) 0,
+      (@barSize / 2) (-1 * @barSize / 2),
+      0 (@barSize / 2);
+    &-bg {
+      position: relative;
+      height: 100%;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    }
+    &-handle {
+      .handle(true);
+      top: 0;
+      width: @handleSizeSec;
+      height: @handleSize;
+      transform: translate((-1 * @handleSizeSec / 2), ((@barSize - @handleSize) / 2));
+    }
+  }
+  &__action {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    padding-top: @contentPadding;
+    border-top: 1px solid #e9ecef;
+    &-item {
+      flex: 1;
+      display: inline-flex;
+      align-items: center;
+      font-size: 12px;
+    }
+  }
+
+  &__input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 22px;
+    margin-left: 2px;
+    padding: 2px 0px 2px 4px;
+    background-color: #ffffff;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    outline: none;
+    color: #405057;
+  }
+}

package/src/style/dialog.less

@@ -0,0 +1,53 @@
+@import './variables.less';
+@import './functions.less';
+@import './button.less';
+
+.@{namespace}-dialog {
+  .setCssVar(dialog-bg, rgba(0, 0, 0, 0.5));
+  .setCssVar(dialog-color-border, #ebeef5);
+  .setCssVar(dialog-color-boxshadow, rgba(0, 0, 0, 0.12));
+  .setCssVar(dialog-border, 1px solid .getCssVar(dialog-color-border) []);
+  .setCssVar(dialog-boxshadow, 0px 0px 12px .getCssVar(dialog-color-boxshadow) []);
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  height: 100%;
+  background-color: .getCssVar(dialog-bg) [];
+  overflow: auto;
+  &__overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px;
+    overflow: auto;
+    text-align: center;
+    &::after {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      width: 0;
+      vertical-align: middle;
+    }
+  }
+  &__content {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 50vw;
+    width: 100%;
+    vertical-align: middle;
+    background-color: #fff;
+    border-radius: 4px;
+    border: .getCssVar(dialog-border) [];
+    font-size: 18px;
+    box-shadow: .getCssVar(dialog-boxshadow) [];
+    text-align: left;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}

package/src/style/functions.less

@@ -0,0 +1,9 @@
+.getCssVarName(@name) {
+  @result: e('--@{name}');
+}
+.getCssVar(@name) {
+  @result: var(.getCssVarName(@name) []);
+}
+.setCssVar(@name; @value) {
+  --@{name}: @value;
+}

package/src/style/index.less

@@ -0,0 +1,89 @@
+.ql-toolbar {
+  .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;
+      }
+    }
+  }
+  .ql-picker.ql-expanded .ql-picker-options {
+    z-index: 1;
+  }
+}
+
+.ql-editor {
+  .ql {
+    &-table {
+      display: table;
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: auto;
+      &[data-full] {
+        width: 100%;
+      }
+      &-wrapper {
+        width: 100%;
+        overflow: auto;
+        scrollbar-width: none;
+      }
+      &-cell {
+        padding: 8px 12px;
+        border-color: transparent;
+        font-size: 14px;
+        outline: none;
+        overflow: auto;
+        &-inner {
+          display: inline-block;
+          min-width: 100%;
+          word-break: break-word;
+        }
+      }
+      col {
+        border-collapse: separate;
+        text-indent: initial;
+        display: table-column;
+        table-layout: fixed;
+      }
+      td {
+        border: 1px solid #a1a1aa;
+      }
+    }
+  }
+}
+
+.@{namespace} {
+  &-toolbox {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    * {
+      pointer-events: all;
+    }
+  }
+}
+
+@import './tooltip.less';
+@import './dialog.less';
+@import './color-picker.less';
+
+.@{namespace}-tooltip {
+  .@{namespace}-color-picker {
+    .setCssVar(color-picker-bg-color, transparent);
+    box-shadow: none;
+    width: 252px;
+    padding: 8px 0px;
+  }
+}
+
+@import './table-selection.less';
+@import './table-resize.less';
+@import './table-resize-scale.less';
+@import './table-scrollbar.less';
+@import './table-menu.less';

package/src/style/input.less

@@ -0,0 +1,64 @@
+@import './variables.less';
+@import './functions.less';
+
+.@{namespace}-input {
+  &__item {
+    .setCssVar(input-height,  32px);
+    .setCssVar(input-inner-height,  calc(.getCssVar(input-height) [] - 2px));
+    .setCssVar(input-color-text,  #606266);
+    .setCssVar(input-color-boxshaow,  #dcdfe6);
+    .setCssVar(input-color-focus,  #409eff);
+    .setCssVar(input-color-error,  #f56c6c);
+    .setCssVar(input-boxshaow,  0 0 0 1px .getCssVar(input-color-boxshaow) [] inset);
+    .setCssVar(input-boxshaow-focus,  0 0 0 1px .getCssVar(input-color-focus) [] inset);
+    .setCssVar(input-boxshaow-error,  0 0 0 1px .getCssVar(input-color-error) [] inset);
+
+    display: flex;
+    align-items: center;
+    & + & {
+      margin-top: 18px;
+    }
+  }
+  &__label {
+    width: 80px;
+    flex-shrink: 0;
+  }
+  &__input {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: .getCssVar(input-height) [];
+    line-height: .getCssVar(input-height) [];
+    padding: 1px 8px;
+    border-radius: 4px;
+    box-shadow: .getCssVar(input-boxshaow) [];
+    transition: box-shadow 0.2s linear;
+    &.focus {
+      box-shadow: .getCssVar(input-boxshaow-focus) [];
+    }
+    input {
+      width: 100%;
+      height: .getCssVar(input-inner-height) [];
+      line-height: .getCssVar(input-inner-height) [];
+      flex-grow: 1;
+      font-size: 14px;
+      color: .getCssVar(input-color-text) [];
+      outline: none;
+      border: 0;
+      padding: 0;
+    }
+    &.error {
+      box-shadow: .getCssVar(input-boxshaow-error) [];
+    }
+  }
+  &__error-tip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    font-size: 12px;
+    color: .getCssVar(input-color-error) [];
+    line-height: 16px;
+  }
+}

package/src/style/select-box.less

@@ -0,0 +1,51 @@
+@import './variables.less';
+@import './functions.less';
+
+.ql-snow {
+  .@{namespace}-select-box {
+    .setCssVar(select-box-color-bg-hover, rgb(245, 245, 245));
+    .setCssVar(select-box-color-bg-active, rgb(224, 242, 254));
+    .setCssVar(select-box-custom-color-text, rgb(13, 13, 13));
+    .setCssVar(select-box-custom-color-bg, transparent);
+    .setCssVar(select-box-custom-color-bg-hover, rgb(235, 235, 235));
+  }
+}
+.@{namespace}-select-box {
+  .setCssVar(select-box-color-border, #e5e7eb);
+  .setCssVar(select-box-border,  1px solid .getCssVar(select-box-color-border) []);
+  .setCssVar(select-box-color-active, rgb(14, 165, 233));
+  .setCssVar(select-box-color-bg-hover, rgb(245, 245, 245));
+  .setCssVar(select-box-color-bg-active, transparent);
+  .setCssVar(select-box-custom-color-text, rgb(245, 245, 245));
+  .setCssVar(select-box-custom-color-bg, transparent);
+  .setCssVar(select-box-custom-color-bg-hover, rgb(44, 44, 44));
+
+  &__block {
+    display: flex;
+    width: 160px;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+  &__item {
+    margin: 2px;
+    height: 16px;
+    width: 16px;
+    border: .getCssVar(select-box-border) [];
+    &.active {
+      border-color: .getCssVar(select-box-color-active) [];
+      background-color: .getCssVar(select-box-color-bg-active) [];
+    }
+  }
+  &__custom {
+    padding: 8px;
+    color: .getCssVar(select-box-custom-color-text) [];
+    background-color: .getCssVar(select-box-custom-color-bg) [];
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+    &:hover {
+      background-color: .getCssVar(select-box-custom-color-bg-hover) [];
+    }
+  }
+}