quill-table-up 3.1.2 → 3.2.1

package/src/modules/table-align.ts

@@ -1,131 +1,131 @@
-import type { TableMainFormat, TableWrapperFormat } from '../formats';
-import type { TableUp } from '../table-up';
-import { autoUpdate, computePosition, flip, limitShift, offset, shift } from '@floating-ui/dom';
-import Quill from 'quill';
-import { createBEM, createResizeObserver } from '../utils';
-import { TableDomSelector } from './table-dom-selector';
-
-export class TableAlign extends TableDomSelector {
-  static moduleName: string = 'table-align';
-
-  tableBlot?: TableMainFormat;
-  tableWrapperBlot?: TableWrapperFormat;
-  alignBox: HTMLElement | null;
-  cleanup?: () => void;
-  bem = createBEM('align');
-  resizeObserver?: ResizeObserver;
-
-  constructor(public tableModule: TableUp, public quill: Quill, _options: any) {
-    super(tableModule, quill);
-
-    this.alignBox = this.buildTools();
-    this.hide();
-    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
-  }
-
-  updateWhenTextChange = (eventName: string) => {
-    if (eventName === Quill.events.TEXT_CHANGE) {
-      if (this.table && !this.quill.root.contains(this.table)) {
-        this.setSelectionTable(undefined);
-      }
-      else {
-        this.update();
-      }
-    }
-  };
-
-  buildTools() {
-    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', this.handleAlignItemClick.bind(this));
-      alignBox.appendChild(item);
-    }
-    return alignBox;
-  }
-
-  handleAlignItemClick(e: MouseEvent) {
-    const item = e.currentTarget;
-    if (!item) return;
-    const value = (item as HTMLElement).dataset.align;
-    if (value && this.tableBlot) {
-      this.setTableAlign(this.tableBlot, value);
-    }
-  }
-
-  setTableAlign(tableBlot: TableMainFormat, align: string) {
-    const cols = tableBlot.getCols();
-    for (const col of cols) {
-      col.align = align;
-    }
-  }
-
-  show() {
-    if (!this.table || !this.alignBox) return;
-    this.tableBlot = Quill.find(this.table) as TableMainFormat;
-    this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
-    this.alignBox.classList.remove(this.bem.is('hidden'));
-    this.resizeObserver = createResizeObserver(() => this.update(), { ignoreFirstBind: true });
-    this.resizeObserver.observe(this.table);
-    if (this.cleanup) {
-      this.cleanup();
-    }
-    this.cleanup = autoUpdate(
-      this.tableWrapperBlot.domNode,
-      this.alignBox,
-      () => this.update(),
-    );
-  }
-
-  hide() {
-    this.tableBlot = undefined;
-    this.tableWrapperBlot = undefined;
-    if (this.alignBox) {
-      this.alignBox.classList.add(this.bem.is('hidden'));
-    }
-    if (this.cleanup) {
-      this.cleanup();
-      this.cleanup = undefined;
-    }
-  }
-
-  update() {
-    if (!this.alignBox || !this.tableBlot || !this.tableWrapperBlot) return;
-    if (!this.table || this.tableBlot.full || this.tableBlot.domNode.offsetWidth >= this.quill.root.offsetWidth) {
-      this.hide();
-      return;
-    }
-
-    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();
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = undefined;
-    }
-    this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
-    if (this.alignBox) {
-      this.alignBox.remove();
-      this.alignBox = null;
-    }
-  }
-}
+import type { TableMainFormat, TableWrapperFormat } from '../formats';
+import type { TableUp } from '../table-up';
+import { autoUpdate, computePosition, flip, limitShift, offset, shift } from '@floating-ui/dom';
+import Quill from 'quill';
+import { createBEM, createResizeObserver } from '../utils';
+import { TableDomSelector } from './table-dom-selector';
+
+export class TableAlign extends TableDomSelector {
+  static moduleName: string = 'table-align';
+
+  tableBlot?: TableMainFormat;
+  tableWrapperBlot?: TableWrapperFormat;
+  alignBox: HTMLElement | null;
+  cleanup?: () => void;
+  bem = createBEM('align');
+  resizeObserver?: ResizeObserver;
+
+  constructor(public tableModule: TableUp, public quill: Quill, _options: any) {
+    super(tableModule, quill);
+
+    this.alignBox = this.buildTools();
+    this.hide();
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+  }
+
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE) {
+      if (this.table && !this.quill.root.contains(this.table)) {
+        this.setSelectionTable(undefined);
+      }
+      else {
+        this.update();
+      }
+    }
+  };
+
+  buildTools() {
+    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', this.handleAlignItemClick.bind(this));
+      alignBox.appendChild(item);
+    }
+    return alignBox;
+  }
+
+  handleAlignItemClick(e: MouseEvent) {
+    const item = e.currentTarget;
+    if (!item) return;
+    const value = (item as HTMLElement).dataset.align;
+    if (value && this.tableBlot) {
+      this.setTableAlign(this.tableBlot, value);
+    }
+  }
+
+  setTableAlign(tableBlot: TableMainFormat, align: string) {
+    const cols = tableBlot.getCols();
+    for (const col of cols) {
+      col.align = align;
+    }
+  }
+
+  show() {
+    if (!this.table || !this.alignBox) return;
+    this.tableBlot = Quill.find(this.table) as TableMainFormat;
+    this.tableWrapperBlot = this.tableBlot.parent as TableWrapperFormat;
+    this.alignBox.classList.remove(this.bem.is('hidden'));
+    this.resizeObserver = createResizeObserver(() => this.update(), { ignoreFirstBind: true });
+    this.resizeObserver.observe(this.table);
+    if (this.cleanup) {
+      this.cleanup();
+    }
+    this.cleanup = autoUpdate(
+      this.tableWrapperBlot.domNode,
+      this.alignBox,
+      () => this.update(),
+    );
+  }
+
+  hide() {
+    this.tableBlot = undefined;
+    this.tableWrapperBlot = undefined;
+    if (this.alignBox) {
+      this.alignBox.classList.add(this.bem.is('hidden'));
+    }
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = undefined;
+    }
+  }
+
+  update() {
+    if (!this.alignBox || !this.tableBlot || !this.tableWrapperBlot) return;
+    if (!this.table || this.tableBlot.full || this.tableBlot.domNode.offsetWidth >= this.quill.root.offsetWidth) {
+      this.hide();
+      return;
+    }
+
+    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();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
+    }
+    this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
+    if (this.alignBox) {
+      this.alignBox.remove();
+      this.alignBox = null;
+    }
+  }
+}

package/src/modules/table-clipboard/table-clipboard.ts

@@ -194,7 +194,7 @@ export class TableClipboard extends Clipboard {
   matchThead(node: Node, delta: TypeDelta) {
     const deltaData = this.matchTbody(node, delta);
     for (const op of deltaData.ops) {
-      if (op.attributes && op.attributes[blotName.tableCellInner]) {
+      if (op.attributes?.[blotName.tableCellInner]) {
         const tableCellInner = op.attributes[blotName.tableCellInner] as TableCellValue;
         tableCellInner.wrapTag = 'thead';
       }
@@ -205,7 +205,7 @@ export class TableClipboard extends Clipboard {
   matchTfoot(node: Node, delta: TypeDelta) {
     const deltaData = this.matchTbody(node, delta);
     for (const op of deltaData.ops) {
-      if (op.attributes && op.attributes[blotName.tableCellInner]) {
+      if (op.attributes?.[blotName.tableCellInner]) {
         const tableCellInner = op.attributes[blotName.tableCellInner] as TableCellValue;
         tableCellInner.wrapTag = 'tfoot';
       }
@@ -215,8 +215,7 @@ export class TableClipboard extends Clipboard {
 
   matchColgroup(node: Node, delta: TypeDelta) {
     const ops: Record<string, any>[] = [];
-    for (let i = 0; i < delta.ops.length; i++) {
-      const op = delta.ops[i];
+    for (const op of delta.ops) {
       if (op && isObject(op.insert) && op.insert[blotName.tableCol]) {
         ops.push(op);
       }
@@ -321,7 +320,7 @@ export class TableClipboard extends Clipboard {
       for (const op of delta.ops) {
         const { attributes, ...other } = op;
         const tableCellInner = attributes?.[blotName.tableCellInner] as TableCellValue;
-        if (attributes && tableCellInner && tableCellInner.style) {
+        if (attributes && tableCellInner?.style) {
           const { background, ...attrs } = attributes;
 
           const bgTemp = document.createElement('div');
@@ -361,10 +360,9 @@ export class TableClipboard extends Clipboard {
   }
 
   matchCaption(node: Node, delta: TypeDelta) {
-    for (let i = 0; i < delta.ops.length; i++) {
-      const op = delta.ops[i];
+    for (const op of delta.ops) {
       const { attributes } = op;
-      if (attributes && attributes[blotName.tableCaption]) {
+      if (attributes?.[blotName.tableCaption]) {
         (attributes[blotName.tableCaption] as TableCaptionValue).tableId = this.tableId;
         op.attributes = attributes;
       }

package/src/modules/table-dom-selector.ts

@@ -1,33 +1,33 @@
-import type Quill from 'quill';
-import type { TableUp } from '../table-up';
-
-export class TableDomSelector {
-  table?: HTMLTableElement;
-
-  constructor(public tableModule: TableUp, public quill: Quill) {
-    this.quill.root.addEventListener('mousedown', this.tableSelectHandler.bind(this));
-  }
-
-  tableSelectHandler(event: MouseEvent) {
-    const path = event.composedPath() as HTMLElement[];
-    if (event.button !== 0 || !path || path.length <= 0) return;
-    const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE');
-    this.setSelectionTable(tableNode as HTMLTableElement);
-  }
-
-  setSelectionTable(table: HTMLTableElement | undefined) {
-    if (this.table === table) return;
-    this.hide();
-    this.table = table;
-    if (this.table) {
-      this.show();
-    }
-    this.update();
-  }
-
-  hide() {}
-
-  show() {}
-
-  update() {}
-}
+import type Quill from 'quill';
+import type { TableUp } from '../table-up';
+
+export class TableDomSelector {
+  table?: HTMLTableElement;
+
+  constructor(public tableModule: TableUp, public quill: Quill) {
+    this.quill.root.addEventListener('mousedown', this.tableSelectHandler.bind(this));
+  }
+
+  tableSelectHandler(event: MouseEvent) {
+    const path = event.composedPath() as HTMLElement[];
+    if (event.button !== 0 || !path || path.length <= 0) return;
+    const tableNode = path.find(node => node.tagName && node.tagName.toUpperCase() === 'TABLE');
+    this.setSelectionTable(tableNode as HTMLTableElement);
+  }
+
+  setSelectionTable(table: HTMLTableElement | undefined) {
+    if (this.table === table) return;
+    this.hide();
+    this.table = table;
+    if (this.table) {
+      this.show();
+    }
+    this.update();
+  }
+
+  hide() {}
+
+  show() {}
+
+  update() {}
+}