quill-table-up 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -11
- package/dist/index.d.ts +30 -33
- package/dist/index.js +10 -10
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +6 -6
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/e2e/table-keyboard-handler.test.ts +9 -2
- package/src/__tests__/e2e/table-resize.test.ts +109 -60
- package/src/__tests__/e2e/types.d.ts +1 -0
- package/src/__tests__/unit/table-cell-merge.test.ts +3 -14
- package/src/__tests__/unit/table-insert.test.ts +3 -14
- package/src/__tests__/unit/table-remove.test.ts +4 -34
- package/src/__tests__/unit/utils.ts +1 -2
- package/src/formats/container-format.ts +2 -2
- package/src/formats/table-body-format.ts +1 -1
- package/src/formats/table-caption-format.ts +1 -1
- package/src/modules/table-clipboard/paste-cell-into-cell.ts +2 -2
- package/src/modules/table-resize/table-resize-line.ts +12 -0
- package/src/modules/table-resize/table-resize-scale.ts +32 -52
- package/src/modules/table-scrollbar.ts +25 -31
- package/src/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -1
- package/src/style/table-selection.less +0 -5
- package/src/table-up.ts +4 -1
- package/src/utils/types.ts +1 -0
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Enhancement of quill table module
|
|
4
4
|
|
|
5
|
-
[demo](https://
|
|
5
|
+
[demo](https://quill-modules.github.io/quill-table-up/)
|
|
6
6
|
|
|
7
|
-
[quill@1.3.7 table module](https://github.com/
|
|
7
|
+
[quill@1.3.7 table module](https://github.com/quill-modules/quill-table)
|
|
8
8
|
|
|
9
9
|
- [x] complete UI operation process
|
|
10
10
|
- [x] insert/delete row/column/table; merge/split cells
|
|
@@ -22,7 +22,7 @@ Enhancement of quill table module
|
|
|
22
22
|
npm install quill-table-up
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
> the registe module name is used internal. so if you want to change it, place use the function [`updateTableConstants`](https://github.com/
|
|
25
|
+
> the registe module name is used internal. so if you want to change it, place use the function [`updateTableConstants`](https://github.com/quill-modules/quill-table-up?tab=readme-ov-file#change-internal-constants-variable)
|
|
26
26
|
|
|
27
27
|
```js
|
|
28
28
|
import Quill from 'quill';
|
|
@@ -63,7 +63,7 @@ const quill = new Quill('#editor', {
|
|
|
63
63
|
|
|
64
64
|
## Options
|
|
65
65
|
|
|
66
|
-
**Full options usage see [demo](https://github.com/
|
|
66
|
+
**Full options usage see [demo](https://github.com/quill-modules/quill-table-up/blob/master/docs/index.js#L38)**
|
|
67
67
|
|
|
68
68
|
| Attribute | Description | Type | Default |
|
|
69
69
|
| ------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------ |
|
|
@@ -76,7 +76,7 @@ const quill = new Quill('#editor', {
|
|
|
76
76
|
| autoMergeCell | empty row or column will auto merge to one | `boolean` | `true` |
|
|
77
77
|
| modules | the module plugin to help user control about table operate. see [`Export Internal Module`](#export-internal-module) | `[]` | `{ module: Contstructor, options: any }[]` |
|
|
78
78
|
|
|
79
|
-
> I'm not suggest to use `TableVirtualScrollbar` and `TableResizeLine` at same time, because it have a little conflict when user hover on it. Just like the first editor in [demo](https://
|
|
79
|
+
> I'm not suggest to use `TableVirtualScrollbar` and `TableResizeLine` at same time, because it have a little conflict when user hover on it. Just like the first editor in [demo](https://quill-modules.github.io/quill-table-up/)
|
|
80
80
|
|
|
81
81
|
> If you doesn't use `TableVirtualScrollbar`, you may need to set css `.ql-editor .ql-table-wrapper { scrollbar-width: auto; }` to display the browser origin scrollbar.
|
|
82
82
|
|
|
@@ -275,6 +275,18 @@ const tableMenuTools: Record<string, Tool> = {
|
|
|
275
275
|
tip: 'Toggle td between th',
|
|
276
276
|
handle: (tableModule, selectedTds) => {},
|
|
277
277
|
},
|
|
278
|
+
ConvertTothead: {
|
|
279
|
+
name: 'ConvertTothead',
|
|
280
|
+
icon: ConvertCell,
|
|
281
|
+
tip: 'Convert to thead',
|
|
282
|
+
handle: (tableModule, selectedTds) => {},
|
|
283
|
+
},
|
|
284
|
+
ConvertTotfoot: {
|
|
285
|
+
name: 'ConvertTotfoot',
|
|
286
|
+
icon: ConvertCell,
|
|
287
|
+
tip: 'Convert to tfoot',
|
|
288
|
+
handle: (tableModule, selectedTds) => {},
|
|
289
|
+
},
|
|
278
290
|
};
|
|
279
291
|
const defaultTools = [
|
|
280
292
|
tableMenuTools.InsertTop,
|
|
@@ -302,9 +314,10 @@ Equal scale table cell handler
|
|
|
302
314
|
|
|
303
315
|
#### Options
|
|
304
316
|
|
|
305
|
-
| Attribute | Description
|
|
306
|
-
| --------- |
|
|
307
|
-
| blockSize | resize handle block size
|
|
317
|
+
| Attribute | Description | Type | Default |
|
|
318
|
+
| --------- | ----------------------------- | -------- | ------- |
|
|
319
|
+
| blockSize | resize handle block size | `number` | `12` |
|
|
320
|
+
| offset | resize handle offset to table | `number` | `6` |
|
|
308
321
|
|
|
309
322
|
### TableAlign
|
|
310
323
|
|
|
@@ -359,7 +372,7 @@ If you need to rewrite extends from quill `Block` or `Scroll` blot. you need to
|
|
|
359
372
|
|
|
360
373
|
`Header`, `List'`, `Blockquote` and `CodeBlock` have been overrides. If you need to rewrite them, you need to rewrite them before `TableUp` registed.
|
|
361
374
|
|
|
362
|
-
Please read [source code](https://github.com/
|
|
375
|
+
Please read [source code](https://github.com/quill-modules/quill-table-up/tree/master/src/formats/overrides) to know those change.
|
|
363
376
|
|
|
364
377
|
```ts
|
|
365
378
|
import { BlockOverride, ScrollOverride, } from 'quill-table-up';
|
|
@@ -385,8 +398,8 @@ You can change internal constants variable by importing `updateTableConstants` f
|
|
|
385
398
|
|
|
386
399
|
It helps to migrate from other table modules with the same data structure.
|
|
387
400
|
|
|
388
|
-
- [full variable demo](https://github.com/
|
|
389
|
-
- [change blot name that in delta demo](https://github.com/
|
|
401
|
+
- [full variable demo](https://github.com/quill-modules/quill-table-up/blob/master/docs/update-constants.js)
|
|
402
|
+
- [change blot name that in delta demo](https://github.com/quill-modules/quill-table-up/blob/master/docs/update-formats-value.js)
|
|
390
403
|
|
|
391
404
|
If you change the `TableWrapperFormat` blot name, you also need to add new css style to make toolbar icon have correct style.
|
|
392
405
|
|
package/dist/index.d.ts
CHANGED
|
@@ -375,8 +375,8 @@ interface CellUpdate {
|
|
|
375
375
|
length: number;
|
|
376
376
|
insertDelta: Delta;
|
|
377
377
|
cell: TableCellInnerFormat;
|
|
378
|
-
rowspan
|
|
379
|
-
colspan
|
|
378
|
+
rowspan: number;
|
|
379
|
+
colspan: number;
|
|
380
380
|
emptyRow?: string[];
|
|
381
381
|
}
|
|
382
382
|
interface TableCellValueLike {
|
|
@@ -730,9 +730,6 @@ declare class TableResizeScale extends TableDomSelector {
|
|
|
730
730
|
cv: (v?: string) => string;
|
|
731
731
|
is: (n: string) => string;
|
|
732
732
|
};
|
|
733
|
-
startX: number;
|
|
734
|
-
startY: number;
|
|
735
|
-
offset: number;
|
|
736
733
|
options: TableResizeScaleOptions;
|
|
737
734
|
root?: HTMLElement;
|
|
738
735
|
block?: HTMLElement;
|
|
@@ -741,9 +738,9 @@ declare class TableResizeScale extends TableDomSelector {
|
|
|
741
738
|
updateWhenTextChange: (eventName: string) => void;
|
|
742
739
|
resolveOptions(options: Partial<TableResizeScaleOptions>): {
|
|
743
740
|
blockSize: number;
|
|
741
|
+
offset: number;
|
|
744
742
|
} & Partial<TableResizeScaleOptions>;
|
|
745
743
|
buildResizer(): void;
|
|
746
|
-
isTableOutofEditor(): boolean;
|
|
747
744
|
update(): void;
|
|
748
745
|
show(): void;
|
|
749
746
|
hide(): void;
|
|
@@ -763,6 +760,24 @@ declare function isCellsSpan(isX: boolean, tableBlot: TableMainFormat, cells: Ta
|
|
|
763
760
|
};
|
|
764
761
|
//#endregion
|
|
765
762
|
//#region src/modules/table-scrollbar.d.ts
|
|
763
|
+
declare const propertyMapY: {
|
|
764
|
+
readonly size: "height";
|
|
765
|
+
readonly offset: "offsetHeight";
|
|
766
|
+
readonly scrollDirection: "scrollTop";
|
|
767
|
+
readonly scrollSize: "scrollHeight";
|
|
768
|
+
readonly axis: "y";
|
|
769
|
+
readonly direction: "top";
|
|
770
|
+
readonly client: "clientY";
|
|
771
|
+
};
|
|
772
|
+
declare const propertyMapX: {
|
|
773
|
+
readonly size: "width";
|
|
774
|
+
readonly offset: "offsetWidth";
|
|
775
|
+
readonly scrollDirection: "scrollLeft";
|
|
776
|
+
readonly scrollSize: "scrollWidth";
|
|
777
|
+
readonly axis: "x";
|
|
778
|
+
readonly direction: "left";
|
|
779
|
+
readonly client: "clientX";
|
|
780
|
+
};
|
|
766
781
|
declare class Scrollbar {
|
|
767
782
|
quill: Quill;
|
|
768
783
|
table: HTMLElement;
|
|
@@ -779,32 +794,6 @@ declare class Scrollbar {
|
|
|
779
794
|
sizeWidth: string;
|
|
780
795
|
sizeHeight: string;
|
|
781
796
|
size: string;
|
|
782
|
-
thumbState: {
|
|
783
|
-
X: number;
|
|
784
|
-
Y: number;
|
|
785
|
-
};
|
|
786
|
-
ob: ResizeObserver;
|
|
787
|
-
container: HTMLElement;
|
|
788
|
-
scrollbar: HTMLElement;
|
|
789
|
-
thumb: HTMLElement;
|
|
790
|
-
scrollHandler: [HTMLElement, (e: Event) => void][];
|
|
791
|
-
propertyMap: {
|
|
792
|
-
readonly size: 'height';
|
|
793
|
-
readonly offset: 'offsetHeight';
|
|
794
|
-
readonly scrollDirection: 'scrollTop';
|
|
795
|
-
readonly scrollSize: 'scrollHeight';
|
|
796
|
-
readonly axis: 'Y';
|
|
797
|
-
readonly direction: 'top';
|
|
798
|
-
readonly client: 'clientY';
|
|
799
|
-
} | {
|
|
800
|
-
readonly size: 'width';
|
|
801
|
-
readonly offset: 'offsetWidth';
|
|
802
|
-
readonly scrollDirection: 'scrollLeft';
|
|
803
|
-
readonly scrollSize: 'scrollWidth';
|
|
804
|
-
readonly axis: 'X';
|
|
805
|
-
readonly direction: 'left';
|
|
806
|
-
readonly client: 'clientX';
|
|
807
|
-
};
|
|
808
797
|
bem: {
|
|
809
798
|
b: () => string;
|
|
810
799
|
be: (e?: string) => string;
|
|
@@ -816,6 +805,13 @@ declare class Scrollbar {
|
|
|
816
805
|
is: (n: string) => string;
|
|
817
806
|
};
|
|
818
807
|
tableMainBlot: TableMainFormat;
|
|
808
|
+
ob: ResizeObserver;
|
|
809
|
+
container: HTMLElement;
|
|
810
|
+
scrollbar: HTMLElement;
|
|
811
|
+
thumb: HTMLElement;
|
|
812
|
+
scrollHandler: [HTMLElement, (e: Event) => void][];
|
|
813
|
+
propertyMap: typeof propertyMapY | typeof propertyMapX;
|
|
814
|
+
thumbState: Position;
|
|
819
815
|
get isVertical(): boolean;
|
|
820
816
|
constructor(quill: Quill, table: HTMLElement, options: {
|
|
821
817
|
isVertical: boolean;
|
|
@@ -915,8 +911,8 @@ declare class TableSelection extends TableDomSelector {
|
|
|
915
911
|
updateWithSelectedTds(): void;
|
|
916
912
|
update(): void;
|
|
917
913
|
getTableViewScroll(): {
|
|
918
|
-
x: number;
|
|
919
914
|
y: number;
|
|
915
|
+
x: number;
|
|
920
916
|
};
|
|
921
917
|
setSelectionTable(table: HTMLTableElement | undefined): void;
|
|
922
918
|
showDisplay(): void;
|
|
@@ -956,6 +952,7 @@ interface TableSelectionOptions {
|
|
|
956
952
|
}
|
|
957
953
|
interface TableResizeScaleOptions {
|
|
958
954
|
blockSize: number;
|
|
955
|
+
offset: number;
|
|
959
956
|
}
|
|
960
957
|
interface TableResizeBoxOptions {
|
|
961
958
|
size: number;
|