quill-table-up 2.3.1 → 2.4.0

package/src/table-up.ts

@@ -1,17 +1,21 @@
 import type { EmitterSource, Op, Parchment as TypeParchment, Range as TypeRange } from 'quill';
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
+import type TypeBlock from 'quill/blots/block';
 import type { Context } from 'quill/modules/keyboard';
 import type TypeKeyboard from 'quill/modules/keyboard';
 import type TypeToolbar from 'quill/modules/toolbar';
-import type { InternalModule, InternalTableSelectionModule, QuillTheme, QuillThemePicker, TableCellValue, TableConstantsData, TableTextOptions, TableUpOptions } from './utils';
+import type { Constructor, InternalModule, InternalTableSelectionModule, QuillTheme, QuillThemePicker, TableCellValue, TableConstantsData, TableTextOptions, TableUpOptions } from './utils';
 import Quill from 'quill';
-import { BlockOverride, ContainerFormat, ScrollOverride, TableBodyFormat, TableCaptionFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableColgroupFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from './formats';
+import { BlockEmbedOverride, BlockOverride, ContainerFormat, ScrollOverride, TableBodyFormat, TableCaptionFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableColgroupFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from './formats';
 import { TableClipboard } from './modules';
-import { blotName, createBEM, createSelectBox, cssTextToObject, debounce, findParentBlot, findParentBlots, isForbidInTable, isFunction, isNumber, isString, limitDomInViewPort, mixinClass, objectToCssText, randomId, tableCantInsert, tableUpEvent, tableUpInternal, tableUpSize, toCamelCase } from './utils';
+import { blotName, createBEM, createSelectBox, cssTextToObject, debounce, findParentBlot, findParentBlots, isForbidInTable, isFunction, isNumber, isString, isSubclassOf, limitDomInViewPort, mixinClass, objectToCssText, randomId, tableCantInsert, tableUpEvent, tableUpInternal, tableUpSize, toCamelCase } from './utils';
 
 const Parchment = Quill.import('parchment');
 const Delta = Quill.import('delta');
-const Break = Quill.import('blots/break') as TypeParchment.BlotConstructor;
 const icons = Quill.import('ui/icons') as Record<string, any>;
+const Break = Quill.import('blots/break') as TypeParchment.BlotConstructor;
+const Block = Quill.import('blots/block') as typeof TypeBlock;
+const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed;
 
 function createCell(scroll: TypeParchment.ScrollBlot, { tableId, rowId, colId }: { tableId: string; rowId: string; colId: string }) {
   const value = {
@@ -72,6 +76,26 @@ function generateTableArrowHandler(up: boolean) {
     collapsed: true,
     format: [blotName.tableCellInner],
     handler(this: { quill: Quill }, range: TypeRange, context: Context) {
+      const direction = up ? 'prev' : 'next';
+      const childDirection = up ? 'tail' : 'head';
+      if (context.line[direction]) return true;
+
+      // TODO: if there have a very long text in cell, the line will auto wrap
+      // there is no good way to find the correct index of the last `line`
+      const cursorRect = this.quill.selection.getBounds(range.index);
+      const lineRect = context.line.domNode.getBoundingClientRect();
+      if (!cursorRect || !lineRect) return true;
+      if (up) {
+        if (cursorRect.top - lineRect.top > 3) {
+          return true;
+        }
+      }
+      else {
+        if (lineRect.bottom - cursorRect.bottom > 3) {
+          return true;
+        }
+      }
+
       let tableBlot: TableWrapperFormat;
       let tableMain: TableMainFormat;
       let tableRow: TableRowFormat;
@@ -84,8 +108,6 @@ function generateTableArrowHandler(up: boolean) {
       }
 
       const colIds = tableMain.getColIds();
-      const direction = up ? 'prev' : 'next';
-      const childDirection = up ? 'tail' : 'head';
       const tableCaption = tableBlot.descendants(TableCaptionFormat, 0)[0];
 
       let aroundLine;
@@ -104,10 +126,8 @@ function generateTableArrowHandler(up: boolean) {
       else {
         aroundLine = tableBlot[direction];
       }
+      if (context.line[direction] || !aroundLine) return true;
 
-      if (context.line[direction] || !aroundLine) {
-        return true;
-      }
       const targetRow = tableRow[direction] as TableRowFormat;
       if (targetRow) {
         const cellIndex = colIds.indexOf(tableCell.colId);
@@ -211,18 +231,28 @@ export class TableUp {
 
     TableCellInnerFormat.requiredContainer = TableCellFormat;
 
-    const overrides = ['header', 'list', 'blockquote', 'code-block'].reduce((formatMap, format) => {
-      const key = `formats/${format}`;
-      const blot = Quill.import(key) as any;
-      formatMap[key] = class extends mixinClass(blot, [BlockOverride]) {
-        static register(): void {}
+    // override Block and BlockEmbed
+    const excludeFormat = new Set(['table']);
+    const overrideFormats = Object.entries(Quill.imports as Record<string, Constructor>).filter(([name, blot]) => {
+      const blotName = name.split('formats/')[1];
+      return name.startsWith('formats/')
+        && !excludeFormat.has(blotName)
+        && !isSubclassOf(blot, Parchment.Attributor)
+        && (isSubclassOf(blot, Block) || isSubclassOf(blot, BlockEmbed));
+    },
+    );
+    const overrides = overrideFormats.reduce((pre, [name, blot]) => {
+      const extendsClass = isSubclassOf(blot, BlockEmbed) ? BlockEmbedOverride : BlockOverride;
+      pre[name] = class extends mixinClass(blot, [extendsClass]) {
+        static register() {}
       };
-      return formatMap;
-    }, {} as Record<string, Function>);
+      return pre;
+    }, {} as Record<string, Constructor>);
 
     Quill.register({
       'blots/scroll': ScrollOverride,
       'blots/block': BlockOverride,
+      'blots/block/embed': BlockEmbedOverride,
       ...overrides,
       [`blots/${blotName.container}`]: ContainerFormat,
       [`formats/${blotName.tableCell}`]: TableCellFormat,
@@ -383,6 +413,7 @@ export class TableUp {
       scrollbarOptions: {},
       resizeOptions: {},
       resizeScaleOptions: {},
+      autoMergeCell: true,
     } as TableUpOptions, options);
   }
 
@@ -953,6 +984,9 @@ export class TableUp {
 
   balanceTables() {
     for (const tableBlot of this.quill.scroll.descendants(TableMainFormat)) {
+      // 同时, 当关闭 autoMerge 时, 如何对 cell 数据的 emptyRow 处理
+      tableBlot.checkEmptyCol(this.options.autoMergeCell);
+      tableBlot.checkEmptyRow(this.options.autoMergeCell);
       this.fixUnusuaDeletelTable(tableBlot);
     }
   }
@@ -1064,6 +1098,7 @@ export class TableUp {
    * after insert or remove cell. handle cell colspan and rowspan merge
    */
   fixTableByRemove(tableBlot: TableMainFormat) {
+    if (!this.options.autoMergeCell) return;
     // calculate all cells
     // maybe will get empty tr
     const trBlots = tableBlot.getRows();
@@ -1150,13 +1185,11 @@ export class TableUp {
       }
     }
 
-    const patchTds: {
-      [key: string]: {
-        rowspan: number;
-        colspan: number;
-        colIndex: number;
-      };
-    } = {};
+    const patchTds: Record<string, {
+      rowspan: number;
+      colspan: number;
+      colIndex: number;
+    }> = {};
     for (let i = endTrIndex; i < Math.min(trs.length, nextTrIndex); i++) {
       const tr = trs[i];
       tr.foreachCellInner((td) => {
@@ -1171,6 +1204,7 @@ export class TableUp {
         // only remove td. empty tr to calculate colspan and rowspan
         td.parent.remove();
       });
+      if (tr.length() === 0) tr.remove();
     }
 
     if (trs[nextTrIndex]) {

package/src/utils/blot-helper.ts

@@ -75,12 +75,12 @@ export function findChildBlot<T extends TypeParchment.BlotConstructor>(parent: T
   return descendants;
 }
 
-function mixinProps<T = any, U = any>(target: T, source: U) {
+function mixinProps<T = any, U = any>(target: T, source: U, excludeReg?: RegExp) {
   for (const prop of Object.getOwnPropertyNames(source)) {
-    if (/^constructor$/.test(prop)) continue;
+    if (excludeReg && excludeReg.test(prop)) continue;
     Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop)!);
   }
-  return target as typeof target & Omit<typeof source, 'constructor'>;
+  return target;
 }
 export function mixinClass<
   T extends Constructor,
@@ -95,8 +95,11 @@ export function mixinClass<
     }
   };
   for (const source of mixins) {
-    mixinProps<typeof targetClass.prototype, typeof source.prototype>(targetClass.prototype, source.prototype);
+    mixinProps(targetClass.prototype, source.prototype, /^constructor$/);
   }
 
   return targetClass;
 }
+export function isSubclassOf(childClass: any, parentClass: any): boolean {
+  return childClass.prototype instanceof parentClass;
+}

package/src/utils/index.ts

@@ -6,7 +6,7 @@ export * from './constants';
 export * from './is';
 export * from './position';
 export * from './resize-observer-helper';
-export * from './scroll-event-handle';
+export * from './scroll-event-helper';
 export * from './transformer';
 export * from './transition-event-helper';
 export * from './types';

package/src/utils/{scroll-event-handle.ts → scroll-event-helper.ts}

@@ -13,3 +13,10 @@ export function clearScrollEvent(this: ScrollHandle) {
   }
   this.scrollHandler = [];
 }
+
+export function getElementScroll(el: HTMLElement) {
+  return {
+    y: el.scrollTop,
+    x: el.scrollLeft,
+  };
+}

package/src/utils/types.ts

@@ -71,6 +71,7 @@ export interface TableUpOptions {
   alignOptions: any;
   resizeScale?: Constructor<InternalModule, [TableUp, HTMLElement, Quill, Partial<TableResizeScaleOptions>]>;
   resizeScaleOptions: Partial<TableResizeScaleOptions>;
+  autoMergeCell: boolean;
 }
 export interface TableColValue {
   tableId: string;
@@ -86,6 +87,7 @@ export interface TableCellValue {
   rowspan: number;
   colspan: number;
   style?: string;
+  emptyRow?: string[];
 }
 export interface TableRowValue {
   tableId: string;