quill-table-up 1.6.0 → 2.0.1

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.
Files changed (88) hide show
  1. package/README.md +46 -19
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +286 -152
  4. package/dist/index.js +1 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.umd.js +2 -0
  7. package/dist/index.umd.js.map +1 -0
  8. package/dist/table-creator.css +1 -1
  9. package/package.json +9 -8
  10. package/src/__tests__/table-insert-blot.test.ts +0 -321
  11. package/src/__tests__/table-insert-remove-merge.test.ts +0 -1270
  12. package/src/__tests__/table-redo-undo.test.ts +0 -909
  13. package/src/__tests__/utils.test-d.ts +0 -49
  14. package/src/__tests__/utils.test.ts +0 -716
  15. package/src/__tests__/utils.ts +0 -216
  16. package/src/__tests__/vitest.d.ts +0 -12
  17. package/src/formats/container-format.ts +0 -52
  18. package/src/formats/index.ts +0 -10
  19. package/src/formats/overrides/block.ts +0 -93
  20. package/src/formats/overrides/blockquote.ts +0 -8
  21. package/src/formats/overrides/code.ts +0 -8
  22. package/src/formats/overrides/header.ts +0 -8
  23. package/src/formats/overrides/index.ts +0 -6
  24. package/src/formats/overrides/list.ts +0 -10
  25. package/src/formats/overrides/scroll.ts +0 -42
  26. package/src/formats/table-body-format.ts +0 -92
  27. package/src/formats/table-cell-format.ts +0 -146
  28. package/src/formats/table-cell-inner-format.ts +0 -258
  29. package/src/formats/table-col-format.ts +0 -174
  30. package/src/formats/table-colgroup-format.ts +0 -133
  31. package/src/formats/table-main-format.ts +0 -143
  32. package/src/formats/table-row-format.ts +0 -147
  33. package/src/formats/table-wrapper-format.ts +0 -55
  34. package/src/formats/utils.ts +0 -3
  35. package/src/index.ts +0 -1103
  36. package/src/modules/index.ts +0 -5
  37. package/src/modules/table-align.ts +0 -108
  38. package/src/modules/table-menu/constants.ts +0 -139
  39. package/src/modules/table-menu/index.ts +0 -3
  40. package/src/modules/table-menu/table-menu-common.ts +0 -249
  41. package/src/modules/table-menu/table-menu-contextmenu.ts +0 -97
  42. package/src/modules/table-menu/table-menu-select.ts +0 -35
  43. package/src/modules/table-resize/index.ts +0 -4
  44. package/src/modules/table-resize/table-resize-box.ts +0 -297
  45. package/src/modules/table-resize/table-resize-common.ts +0 -332
  46. package/src/modules/table-resize/table-resize-line.ts +0 -166
  47. package/src/modules/table-resize/utils.ts +0 -3
  48. package/src/modules/table-scrollbar.ts +0 -234
  49. package/src/modules/table-selection.ts +0 -275
  50. package/src/style/button.less +0 -45
  51. package/src/style/color-picker.less +0 -134
  52. package/src/style/dialog.less +0 -53
  53. package/src/style/functions.less +0 -9
  54. package/src/style/index.less +0 -437
  55. package/src/style/input.less +0 -64
  56. package/src/style/select-box.less +0 -50
  57. package/src/style/table-creator.less +0 -15
  58. package/src/style/tooltip.less +0 -19
  59. package/src/style/variables.less +0 -1
  60. package/src/svg/background.svg +0 -1
  61. package/src/svg/border.svg +0 -1
  62. package/src/svg/color.svg +0 -1
  63. package/src/svg/insert-bottom.svg +0 -1
  64. package/src/svg/insert-left.svg +0 -1
  65. package/src/svg/insert-right.svg +0 -1
  66. package/src/svg/insert-top.svg +0 -1
  67. package/src/svg/merge-cell.svg +0 -1
  68. package/src/svg/remove-column.svg +0 -1
  69. package/src/svg/remove-row.svg +0 -1
  70. package/src/svg/remove-table.svg +0 -1
  71. package/src/svg/split-cell.svg +0 -1
  72. package/src/types.d.ts +0 -4
  73. package/src/utils/bem.ts +0 -27
  74. package/src/utils/color.ts +0 -109
  75. package/src/utils/components/button.ts +0 -22
  76. package/src/utils/components/color-picker.ts +0 -236
  77. package/src/utils/components/dialog.ts +0 -41
  78. package/src/utils/components/index.ts +0 -6
  79. package/src/utils/components/input.ts +0 -74
  80. package/src/utils/components/table/creator.ts +0 -84
  81. package/src/utils/components/table/index.ts +0 -2
  82. package/src/utils/components/table/select-box.ts +0 -81
  83. package/src/utils/components/tooltip.ts +0 -186
  84. package/src/utils/constants.ts +0 -99
  85. package/src/utils/index.ts +0 -6
  86. package/src/utils/is.ts +0 -6
  87. package/src/utils/types.ts +0 -104
  88. package/src/utils/utils.ts +0 -139
package/README.md CHANGED
@@ -9,7 +9,7 @@ Enhancement of quill table module
9
9
  - [x] complete UI operation process
10
10
  - [x] insert/delete row/column/table; merge/split cells
11
11
  - [x] support all origin quill formats
12
- - [x] control cells width/height/background color/border color
12
+ - [x] control cells width/height/border/background color
13
13
  - [x] 100 percent table width or fixed pixel width
14
14
  - [x] line break in cells
15
15
  - [x] redo and undo
@@ -23,14 +23,15 @@ npm install quill-table-up
23
23
 
24
24
  ```js
25
25
  import Quill from 'quill';
26
- import TableUp from 'quill-table-up';
26
+ import TableUp, { TableAlign, TableMenuContextmenu, TableResizeBox, TableResizeScale, TableSelection, TableVirtualScrollbar } from 'quill-table-up';
27
+ import 'quill/dist/quill.snow.css';
27
28
  import 'quill-table-up/index.css';
28
29
  // If using the default customSelect option. You need to import this css
29
30
  import 'quill-table-up/table-creator.css';
30
31
 
31
32
  Quill.register({ [`modules/${TableUp.moduleName}`]: TableUp }, true);
32
33
  // or
33
- // Quill.register({ 'modules/tableUp': TableUp }, true);
34
+ // Quill.register({ 'modules/table-up': TableUp }, true);
34
35
 
35
36
  const quill = new Quill('#editor', {
36
37
  // ...
@@ -42,7 +43,17 @@ const quill = new Quill('#editor', {
42
43
  { [TableUp.toolName]: [] }
43
44
  ],
44
45
  ],
45
- [TableUp.moduleName]: {},
46
+ [TableUp.moduleName]: {
47
+ scrollbar: TableVirtualScrollbar,
48
+ align: TableAlign,
49
+ resize: TableResizeBox,
50
+ resizeScale: TableResizeScale,
51
+ customSelect: defaultCustomSelect,
52
+ selection: TableSelection,
53
+ selectionOptions: {
54
+ tableMenu: TableMenuContextmenu,
55
+ }
56
+ },
46
57
  },
47
58
  });
48
59
  ```
@@ -51,16 +62,25 @@ const quill = new Quill('#editor', {
51
62
 
52
63
  ### TableUp Options
53
64
 
54
- | attribute | description | type | default |
55
- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------- |
56
- | full | if set `true`. width max will be 100% | `boolean` | `false` |
57
- | customBtn | display a custom button to custom row and column number add a table | `boolean` | `false` |
58
- | resizerSetOuter | if set `true`. table cell resize will be border around table | `boolean` | `false` |
59
- | texts | the text used to create the table | `TableTextOptions` | `defaultTexts` |
60
- | customSelect | display a custom select to custom row and column number add a table. the DOM returned by the function will replace the default selector | `(tableModule: TableUp) => HTMLElement` | - |
61
- | selection | moduel TableSelection options | `TableSelectionOptions` | - |
62
- | icon | picker svg icon string. it will set with `innerHTML` | `string` | `origin table icon` |
63
- | scrollbar | enable table virtual scrollbar | `boolean` | `true` |
65
+ | attribute | description | type | default |
66
+ | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------- |
67
+ | full | if set `true`. width max will be 100% | `boolean` | `false` |
68
+ | texts | the text used to create the table | `TableTextOptions` | `defaultTexts` |
69
+ | customSelect | display a custom select to custom row and column number add a table. module provides default selector `defaultCustomSelect` | `(tableModule: TableUp, picker: Picker) => Promise<HTMLElement> \| HTMLElement` | - |
70
+ | customBtn | display a custom button to custom row and column number add a table. it only when use `defaultCustomSelect` will effect | `boolean` | `false` |
71
+ | selection | table selection handler. module provides `TableSelection` | `Constructor` | - |
72
+ | selectionOptions | table selection options | `TableSelectionOptions` | - |
73
+ | icon | picker svg icon string. it will set with `innerHTML` | `string` | `origin table icon` |
74
+ | resize | table cell resize handler. module provides `TableResizeLine` and `TableResizeBox` | `Constructor` | - |
75
+ | resizeScale | equal scale table cell handler. module provides `TableResizeScale` | `Constructor` | - |
76
+ | scrollbar | table virtual scrollbar handler. module provides `TableVirtualScrollbar` | `Constructor` | - |
77
+ | align | table alignment handler. module provides `TableAlign` | `Constructor` | - |
78
+ | resizeOptions | table cell resize handler options | `any` | - |
79
+ | resizeScaleOptions | equal scale table cell handler options | `TableResizeScaleOptions` | - |
80
+ | alignOptions | table alignment handler options | `any` | - |
81
+ | scrollbarOptions | table virtual scrollbar handler options | `any` | - |
82
+
83
+ > I'm not suggest to use `TableVirtualScrollbar` and `TableResizeLine` at same time, because it will make the virtual scrollbar display blink. Just like the first editor in [demo](https://zzxming.github.io/quill-table-up/)
64
84
 
65
85
  <details>
66
86
  <summary> default value </summary>
@@ -76,18 +96,25 @@ const defaultTexts = {
76
96
  custom: 'Custom',
77
97
  clear: 'Clear',
78
98
  transparent: 'Transparent',
99
+ perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?',
79
100
  };
80
101
  ```
81
102
 
82
103
  </details>
83
104
 
105
+ ### TableResizeScale Options
106
+
107
+ | attribute | description | type | default |
108
+ | --------- | ------------------------ | -------- | ------- |
109
+ | blockSize | resize handle block size | `number` | `12` |
110
+
84
111
  ### TableSelection Options
85
112
 
86
- | attribute | description | type | default |
87
- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------------- |
88
- | selectColor | selector border color | `string` | `#0589f3` |
89
- | tableMenu | module TableMenu options | `TableMenuOptions` | - |
90
- | tableMenuClass | when select a cell will trigger this class to create menu. module provide two menu module `TableMenuContextmenu` and `TableMenuSelect` | `Constructor` | `TableMenuContextmenu` |
113
+ | attribute | description | type | default |
114
+ | ---------------- | ------------------------------------------------------------------------------------ | ------------------ | --------- |
115
+ | selectColor | selector border color | `string` | `#0589f3` |
116
+ | tableMenu | the table operate menu. module provides `TableMenuContextmenu` and `TableMenuSelect` | `Constructor` | - |
117
+ | tableMenuOptions | module TableMenu options | `TableMenuOptions` | - |
91
118
 
92
119
  ### TableMenu Options
93
120
 
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up{width:28px}.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label{padding:2px 4px}.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label svg{position:static;margin-top:0}.ql-toolbar .ql-picker.ql-expanded .ql-picker-options{z-index:1}.ql-container .ql-table-selection{display:none;position:absolute;overflow:hidden;pointer-events:none}.ql-container .ql-table-selection_line{position:absolute;border:2px solid;pointer-events:none}.ql-container .ql-table-resize-line-col,.ql-container .ql-table-resize-line-row{position:absolute;z-index:0}.ql-container .ql-table-resize-line-col::after,.ql-container .ql-table-resize-line-col::before,.ql-container .ql-table-resize-line-row::after,.ql-container .ql-table-resize-line-row::before{content:'';display:block;position:absolute;top:0;z-index:1}.ql-container .ql-table-resize-line-row{height:1px;cursor:ns-resize}.ql-container .ql-table-resize-line-row::after,.ql-container .ql-table-resize-line-row::before{width:100%;height:8px}.ql-container .ql-table-resize-line-row::before{transform:translateY(-8px)}.ql-container .ql-table-resize-line-col{width:1px;cursor:ew-resize}.ql-container .ql-table-resize-line-col::after,.ql-container .ql-table-resize-line-col::before{height:100%;width:8px}.ql-container .ql-table-resize-line-col::before{transform:translateX(-8px)}.ql-container .ql-table-resizer{position:absolute;z-index:0}.ql-container .ql-table-resizer.table-align-right .ql-table-col-separator{left:-2px}.ql-container .ql-table-resizer.table-align-right .ql-table-resizer-corner{border-left-width:1px;border-right-width:1px;border-top-left-radius:0;border-top-right-radius:50%}.ql-container .ql-table-resizer-col,.ql-container .ql-table-resizer-row{position:absolute;top:0;left:0;overflow:hidden}.ql-container .ql-table-resizer .ql-table-col-wrapper,.ql-container .ql-table-resizer .ql-table-row-wrapper{display:flex}.ql-container .ql-table-resizer .ql-table-col-header,.ql-container .ql-table-resizer .ql-table-row-header{position:relative;flex-shrink:0;background-color:#f3f4f5;border:1px solid #ccc}.ql-container .ql-table-resizer .ql-table-col-wrapper{height:100%}.ql-container .ql-table-resizer .ql-table-col-header{height:100%;cursor:pointer}.ql-container .ql-table-resizer .ql-table-col-separator{position:absolute;top:0;bottom:0;right:-2px;width:2px;cursor:ew-resize;z-index:0}.ql-container .ql-table-resizer .ql-table-col-separator::after{right:-6px}.ql-container .ql-table-resizer .ql-table-col-separator::before{left:-6px}.ql-container .ql-table-resizer .ql-table-col-separator::after,.ql-container .ql-table-resizer .ql-table-col-separator::before{content:'';position:absolute;top:0;display:block;width:8px;height:100%;z-index:1}.ql-container .ql-table-resizer .ql-table-row-wrapper{flex-direction:column;width:100%}.ql-container .ql-table-resizer .ql-table-row-header{width:100%;cursor:pointer}.ql-container .ql-table-resizer .ql-table-row-separator{position:absolute;left:0;right:0;bottom:-2px;height:2px;cursor:ns-resize;z-index:0}.ql-container .ql-table-resizer .ql-table-row-separator::after{bottom:-6px}.ql-container .ql-table-resizer .ql-table-row-separator::before{top:-6px}.ql-container .ql-table-resizer .ql-table-row-separator::after,.ql-container .ql-table-resizer .ql-table-row-separator::before{content:'';position:absolute;left:0;display:block;width:100%;height:8px;z-index:1}.ql-container .ql-table-resizer-corner{position:absolute;top:0;left:0;background-color:#f3f4f5;border:1px solid #ccc;border-right-width:0;border-bottom-width:0;border-top-left-radius:50%;cursor:pointer}.ql-table-toolbox{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.ql-table-toolbox *{pointer-events:all}.ql-table-drag-line{position:fixed;z-index:0;background-color:#409eff}.ql-table-drag-line.col{width:2px;cursor:ew-resize}.ql-table-drag-line.row{height:2px;cursor:ns-resize}.ql-table-align,.ql-table-menu{position:absolute;z-index:1;display:none;align-items:center;justify-content:center;padding:4px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.5);background-color:#fff;font-size:14px}.ql-table-align-item,.ql-table-menu-item{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:4px;cursor:pointer}.ql-table-align-item:hover,.ql-table-menu-item:hover{background-color:#eee}.ql-table-align-item.break,.ql-table-menu-item.break{align-self:stretch;width:1px;padding:0;margin:2px 4px;background-color:#a3a3a3;cursor:default}.ql-table-align .icon,.ql-table-menu .icon{display:flex;flex-shrink:0;font-size:20px}.ql-table-align span,.ql-table-menu span{text-wrap:nowrap}.ql-table-menu.contextmenu{flex-direction:column;padding:4px 8px}.ql-table-menu.contextmenu .ql-table-menu-item{display:flex;justify-content:flex-start;width:100%;gap:4px;cursor:pointer}.ql-table-menu.contextmenu .break{width:100%;height:1px;margin:4px 0;background-color:#a3a3a3}.ql-table-align .icon{width:20px;height:20px}.table-color-select-wrapper{display:flex;flex-direction:column}.table-color-map{display:flex;flex-direction:column}.table-color-map-row{display:flex;align-items:center;justify-content:center;gap:.25rem}.table-color-used{display:flex;align-items:center;justify-content:center;flex-direction:row-reverse;margin-top:.25rem;padding-top:.25rem;border-top:.0625rem solid #ccc}.table-color-item{width:.875rem;height:.875rem;margin:.125rem;border:.0625rem solid #a3a3a3;cursor:pointer}.table-color-btn{display:flex;align-items:center;justify-content:center;flex:1;height:1.25rem;padding:0 .375rem;color:#303133;background-color:#fff;cursor:pointer}.table-color-btn:hover{background-color:#edeeef}.ql-table-scrollbar--origin.ql-container .ql-table-wrapper{scrollbar-width:inherit}.ql-editor .ql-table{display:table;border-collapse:collapse;table-layout:fixed;width:auto}.ql-editor .ql-table[data-full]{width:100%}.ql-editor .ql-table-dragging{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ql-editor .ql-table-wrapper{width:100%;overflow:auto;scrollbar-width:none}.ql-editor .ql-table-cell{padding:8px 12px;border-color:transparent;font-size:14px;outline:0;overflow:auto}.ql-editor .ql-table-cell-inner{display:inline-block;min-width:100%;word-break:break-word}.ql-editor .ql-table col{border-collapse:separate;text-indent:initial;display:table-column;table-layout:fixed}.ql-editor .ql-table td{border:1px solid #a1a1aa}.ql-table-scrollbar{position:absolute;z-index:1;transition:opacity .15s linear}.ql-table-scrollbar-container{position:relative}.ql-table-scrollbar.transparent{opacity:0}.ql-table-scrollbar.vertical{top:2px;bottom:2px;left:-8px;width:6px}.ql-table-scrollbar.vertical .ql-table-scrollbar-thumb{width:100%}.ql-table-scrollbar.horizontal{bottom:2px;left:2px;right:2px;height:6px}.ql-table-scrollbar.horizontal .ql-table-scrollbar-thumb{height:100%}.ql-table-scrollbar-thumb{border-radius:5px;background-color:#d2d2d2;cursor:pointer}.ql-table-scrollbar-thumb:hover{background-color:#a1a1aa}.ql-snow .select-box{--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:#e0f2fe;--select-box-custom-color-text:#0d0d0d;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#ebebeb}.select-box{--select-box-color-border:#e5e7eb;--select-box-border:0.0625rem solid var(--select-box-color-border);--select-box-color-active:#0ea5e9;--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:transparent;--select-box-custom-color-text:#f5f5f5;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#2c2c2c}.select-box__block{display:flex;width:10rem;flex-wrap:wrap;align-items:center;justify-content:center}.select-box__item{margin:.125rem;height:1rem;width:1rem;border:var(--select-box-border)}.select-box__item.active{border-color:var(--select-box-color-active);background-color:var(--select-box-color-bg-active)}.select-box__custom{padding:.5rem;color:var(--select-box-custom-color-text);background-color:var(--select-box-custom-color-bg);font-size:1rem;text-align:center;cursor:pointer}.select-box__custom:hover{background-color:var(--select-box-custom-color-bg-hover)}.table-up-tooltip{position:absolute;z-index:20;padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;color:#fff;white-space:nowrap;background-color:#303133;transition:opacity .15s linear}.table-up-tooltip.transparent{opacity:0}.table-up-tooltip.hidden{display:none}.table-up-button{--table-btn-color:#606266;--table-btn-bg-hover:#f3f4f6;--table-btn-color-border:#dcdfe6;--table-btn-border:0.0625rem solid var(--table-btn-color-border);--table-btn-confirm-color-border:#409eff;--table-btn-confirm-bg:#409eff;--table-btn-confirm-hover:#79bbff;--table-btn-confirm-outline-focus-visible:0.125rem solid #a0cfff;box-sizing:border-box;display:inline-flex;height:2rem;line-height:1;margin:0;padding:.5rem 1rem;border-radius:.25rem;border:var(--table-btn-border);color:var(--table-btn-color);background-color:transparent;font-size:.875rem;cursor:pointer}.table-up-button+.table-up-button{margin-left:.375rem}.table-up-button:hover{background-color:var(--table-btn-bg-hover)}.table-up-button.confirm{border-color:var(--table-btn-confirm-color-border);background-color:var(--table-btn-confirm-bg);color:#fff}.table-up-button.confirm:hover{border-color:var(--table-btn-confirm-hover);background-color:var(--table-btn-confirm-hover)}.table-up-button.confirm:focus-visible{outline:var(--table-btn-confirm-outline-focus-visible);outline-offset:.0625rem}.table-up-dialog{--dialog-bg:rgba(0, 0, 0, 0.5);--dialog-color-border:#ebeef5;--dialog-color-boxshadow:rgba(0, 0, 0, 0.12);--dialog-border:0.0625rem solid var(--dialog-color-border);--dialog-boxshadow:0 0 0.75rem var(--dialog-color-boxshadow);position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;height:100%;background-color:var(--dialog-bg);overflow:auto}.table-up-dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;padding:1rem;overflow:auto;text-align:center}.table-up-dialog__overlay::after{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.table-up-dialog__content{display:inline-block;max-width:50vw;width:100%;vertical-align:middle;background-color:#fff;border-radius:.25rem;border:var(--dialog-border);font-size:1.125rem;box-shadow:var(--dialog-boxshadow);text-align:left;overflow:hidden;box-sizing:border-box}.table-up-color-picker{--color-picker-bg-color:#ffffff;box-sizing:border-box;display:inline-flex;flex-direction:column;width:16.75rem;padding:.5rem;border-radius:.375rem;background:var(--color-picker-bg-color);box-shadow:0 0 .375rem #b2b5b8}.table-up-color-picker__content{box-sizing:border-box;width:100%;height:11.75rem;padding-top:.5rem}.table-up-color-picker__selector{width:14.375rem;height:9.375rem;position:absolute}.table-up-color-picker__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%)}.table-up-color-picker__background-handle{box-sizing:border-box;position:absolute;border:.0625rem solid #fff;cursor:pointer;top:0;left:14.375rem;border-radius:100%;width:.625rem;height:.625rem;transform:translate(-.3125rem,-.3125rem)}.table-up-color-picker__hue{width:.75rem;height:9.375rem;margin-left:15rem;position:absolute;background:linear-gradient(0deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.table-up-color-picker__hue-handle{box-sizing:border-box;position:absolute;border:.0625rem solid #fff;cursor:pointer;background-color:#fff;box-shadow:0 0 .125rem #0009;left:0;width:1rem;height:.625rem;transform:translate(-.125rem,-.3125rem)}.table-up-color-picker__alpha{width:14.375rem;height:.75rem;position:absolute;margin-top:10rem;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:.75rem .75rem;background-position:0 0,.375rem 0,.375rem -.375rem,0 .375rem}.table-up-color-picker__alpha-bg{position:relative;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%)}.table-up-color-picker__alpha-handle{box-sizing:border-box;position:absolute;border:.0625rem solid #fff;cursor:pointer;background-color:#fff;box-shadow:0 0 .125rem #0009;top:0;width:.625rem;height:1rem;transform:translate(-.3125rem,-.125rem)}.table-up-color-picker__action{box-sizing:border-box;display:flex;align-items:center;gap:.375rem;width:100%;padding-top:.5rem;border-top:.0625rem solid #e9ecef}.table-up-color-picker__action-item{flex:1;display:inline-flex;align-items:center;font-size:.75rem}.table-up-color-picker__input{box-sizing:border-box;width:100%;height:1.375rem;margin-left:.125rem;padding:.125rem 0 .125rem .25rem;background-color:#fff;border:.0625rem solid #ced4da;border-radius:.25rem;outline:0;color:#405057}.table-up-tooltip .table-up-color-picker{--color-picker-bg-color:transparent;box-shadow:none;width:15.75rem;padding:.5rem 0}
1
+ .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up{width:28px}.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label{padding:2px 4px}.ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label svg{position:static;margin-top:0}.ql-toolbar .ql-picker.ql-expanded .ql-picker-options{z-index:1}.ql-editor .ql-table{display:table;border-collapse:collapse;table-layout:fixed;width:auto}.ql-editor .ql-table[data-full]{width:100%}.ql-editor .ql-table-wrapper{width:100%;overflow:auto;scrollbar-width:none}.ql-editor .ql-table-cell{padding:8px 12px;border-color:transparent;font-size:14px;outline:0;overflow:auto}.ql-editor .ql-table-cell-inner{display:inline-block;min-width:100%;word-break:break-word}.ql-editor .ql-table col{border-collapse:separate;text-indent:initial;display:table-column;table-layout:fixed}.ql-editor .ql-table td{border:1px solid #a1a1aa}.table-up-toolbox{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.table-up-toolbox *{pointer-events:all}.table-up-tooltip{position:absolute;z-index:20;padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;color:#fff;white-space:nowrap;background-color:#303133;transition:opacity .15s linear}.table-up-tooltip.transparent{opacity:0}.table-up-tooltip.hidden{display:none}.table-up-button{--table-btn-color:#606266;--table-btn-bg-hover:#f3f4f6;--table-btn-color-border:#dcdfe6;--table-btn-border:0.0625rem solid var(--table-btn-color-border);--table-btn-confirm-color-border:#409eff;--table-btn-confirm-bg:#409eff;--table-btn-confirm-hover:#79bbff;--table-btn-confirm-outline-focus-visible:0.125rem solid #a0cfff;box-sizing:border-box;display:inline-flex;height:2rem;line-height:1;margin:0;padding:.5rem 1rem;border-radius:.25rem;border:var(--table-btn-border);color:var(--table-btn-color);background-color:transparent;font-size:.875rem;cursor:pointer}.table-up-button+.table-up-button{margin-left:.375rem}.table-up-button:hover{background-color:var(--table-btn-bg-hover)}.table-up-button.confirm{border-color:var(--table-btn-confirm-color-border);background-color:var(--table-btn-confirm-bg);color:#fff}.table-up-button.confirm:hover{border-color:var(--table-btn-confirm-hover);background-color:var(--table-btn-confirm-hover)}.table-up-button.confirm:focus-visible{outline:var(--table-btn-confirm-outline-focus-visible);outline-offset:.0625rem}.table-up-dialog{--dialog-bg:rgba(0, 0, 0, 0.5);--dialog-color-border:#ebeef5;--dialog-color-boxshadow:rgba(0, 0, 0, 0.12);--dialog-border:0.0625rem solid var(--dialog-color-border);--dialog-boxshadow:0 0 0.75rem var(--dialog-color-boxshadow);position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;height:100%;background-color:var(--dialog-bg);overflow:auto}.table-up-dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;padding:1rem;overflow:auto;text-align:center}.table-up-dialog__overlay::after{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.table-up-dialog__content{display:inline-block;max-width:50vw;width:100%;vertical-align:middle;background-color:#fff;border-radius:.25rem;border:var(--dialog-border);font-size:1.125rem;box-shadow:var(--dialog-boxshadow);text-align:left;overflow:hidden;box-sizing:border-box}.table-up-color-picker{--color-picker-bg-color:#ffffff;box-sizing:border-box;display:inline-flex;flex-direction:column;width:16.75rem;padding:.5rem;border-radius:.375rem;background:var(--color-picker-bg-color);box-shadow:0 0 .375rem #b2b5b8}.table-up-color-picker__content{box-sizing:border-box;width:100%;height:11.75rem;padding-top:.5rem}.table-up-color-picker__selector{width:14.375rem;height:9.375rem;position:absolute}.table-up-color-picker__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%)}.table-up-color-picker__background-handle{box-sizing:border-box;position:absolute;border:.0625rem solid #fff;cursor:pointer;top:0;left:14.375rem;border-radius:100%;width:.625rem;height:.625rem;transform:translate(-.3125rem,-.3125rem)}.table-up-color-picker__hue{width:.75rem;height:9.375rem;margin-left:15rem;position:absolute;background:linear-gradient(0deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.table-up-color-picker__hue-handle{box-sizing:border-box;position:absolute;border:.0625rem solid #fff;cursor:pointer;background-color:#fff;box-shadow:0 0 .125rem #0009;left:0;width:1rem;height:.625rem;transform:translate(-.125rem,-.3125rem)}.table-up-color-picker__alpha{width:14.375rem;height:.75rem;position:absolute;margin-top:10rem;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:.75rem .75rem;background-position:0 0,.375rem 0,.375rem -.375rem,0 .375rem}.table-up-color-picker__alpha-bg{position:relative;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%)}.table-up-color-picker__alpha-handle{box-sizing:border-box;position:absolute;border:.0625rem solid #fff;cursor:pointer;background-color:#fff;box-shadow:0 0 .125rem #0009;top:0;width:.625rem;height:1rem;transform:translate(-.3125rem,-.125rem)}.table-up-color-picker__action{box-sizing:border-box;display:flex;align-items:center;gap:.375rem;width:100%;padding-top:.5rem;border-top:.0625rem solid #e9ecef}.table-up-color-picker__action-item{flex:1;display:inline-flex;align-items:center;font-size:.75rem}.table-up-color-picker__input{box-sizing:border-box;width:100%;height:1.375rem;margin-left:.125rem;padding:.125rem 0 .125rem .25rem;background-color:#fff;border:.0625rem solid #ced4da;border-radius:.25rem;outline:0;color:#405057}.table-up-tooltip .table-up-color-picker{--color-picker-bg-color:transparent;box-shadow:none;width:15.75rem;padding:.5rem 0}.ql-container .table-up-selection{display:none;position:absolute;overflow:hidden;pointer-events:none}.ql-container .table-up-selection__line{position:absolute;border:2px solid;pointer-events:none}.table-up-resize-line__col,.table-up-resize-line__row{position:absolute;z-index:0}.table-up-resize-line__col::after,.table-up-resize-line__col::before,.table-up-resize-line__row::after,.table-up-resize-line__row::before{content:'';display:block;position:absolute;top:0;z-index:1}.table-up-resize-line__row{height:.0625rem;cursor:ns-resize}.table-up-resize-line__row::after,.table-up-resize-line__row::before{width:100%;height:.5rem}.table-up-resize-line__row::before{transform:translateY(-.5rem)}.table-up-resize-line__col{width:.0625rem;cursor:ew-resize}.table-up-resize-line__col::after,.table-up-resize-line__col::before{height:100%;width:.5rem}.table-up-resize-line__col::before{transform:translateX(-.5rem)}.table-up-resize-box{position:absolute;z-index:0}.table-up-resize-box.is-hidden{display:none}.table-up-resize-box.is-align-right .table-up-resize-box__col-separator{left:-.125rem}.table-up-resize-box.is-align-right .table-up-resize-box__corner{border-left-width:.0625rem;border-right-width:.0625rem;border-top-left-radius:0;border-top-right-radius:50%}.table-up-resize-box__col,.table-up-resize-box__row{position:absolute;top:0;left:0;overflow:hidden}.table-up-resize-box__col-wrapper,.table-up-resize-box__row-wrapper{display:flex}.table-up-resize-box__col-header,.table-up-resize-box__row-header{position:relative;flex-shrink:0;background-color:#f3f4f5;border:.0625rem solid #ccc}.table-up-resize-box__col-wrapper{height:100%}.table-up-resize-box__col-header{height:100%;cursor:pointer;border-right-color:transparent}.table-up-resize-box__col-header:last-child{border-right-color:#ccc}.table-up-resize-box__col-separator{position:absolute;top:0;bottom:0;right:-.125rem;width:.125rem;cursor:ew-resize;z-index:0}.table-up-resize-box__col-separator::after{right:-.375rem}.table-up-resize-box__col-separator::before{left:-.375rem}.table-up-resize-box__col-separator::after,.table-up-resize-box__col-separator::before{content:'';position:absolute;top:0;display:block;width:.5rem;height:100%;z-index:1}.table-up-resize-box__row-wrapper{flex-direction:column;width:100%}.table-up-resize-box__row-header{width:100%;cursor:pointer;border-bottom-color:transparent}.table-up-resize-box__row-header:last-child{border-bottom-color:#ccc}.table-up-resize-box__row-separator{position:absolute;left:0;right:0;bottom:-.125rem;height:.125rem;cursor:ns-resize;z-index:0}.table-up-resize-box__row-separator::after{bottom:-.375rem}.table-up-resize-box__row-separator::before{top:-.375rem}.table-up-resize-box__row-separator::after,.table-up-resize-box__row-separator::before{content:'';position:absolute;left:0;display:block;width:100%;height:.5rem;z-index:1}.table-up-resize-box__corner{position:absolute;top:0;left:0;background-color:#f3f4f5;border:.0625rem solid #ccc;border-right-width:0;border-bottom-width:0;border-top-left-radius:50%;cursor:pointer}.table-up-drag-line{position:fixed;z-index:0;background-color:#409eff}.table-up-drag-line.is-col{width:.125rem;cursor:ew-resize}.table-up-drag-line.is-row{height:.125rem;cursor:ns-resize}.table-up-scale{position:absolute;top:0;left:0;overflow:hidden;pointer-events:none}.table-up-scale__block{position:absolute;top:0;left:0;transform:translate(-100%,-100%);width:.75rem;height:.75rem;background-color:#f1f5f9;border:.0625rem solid grey;cursor:nw-resize;pointer-events:all}.table-up-scale.is-align-right .table-up-scale__block{cursor:ne-resize}.table-up-scale.is-hidden{display:none}.table-up-scrollbar{position:absolute;z-index:1;transition:opacity .15s linear}.table-up-scrollbar__container{position:relative}.table-up-scrollbar.is-transparent{opacity:0}.table-up-scrollbar.is-vertical{top:.125rem;bottom:.125rem;left:-.5rem;width:.375rem}.table-up-scrollbar.is-vertical .table-up-scrollbar__thumb{width:100%}.table-up-scrollbar.is-horizontal{bottom:.125rem;left:.125rem;right:.125rem;height:.375rem}.table-up-scrollbar.is-horizontal .table-up-scrollbar__thumb{height:100%}.table-up-scrollbar__thumb{border-radius:.3125rem;background-color:#d2d2d2;cursor:pointer}.table-up-scrollbar__thumb:hover{background-color:#a1a1aa}.table-up-scrollbar--origin.ql-container .ql-table-wrapper{scrollbar-width:inherit}.table-up-align,.table-up-menu{position:absolute;z-index:1;display:none;align-items:center;justify-content:center;padding:.25rem;border-radius:.375rem;box-shadow:0 0 .5rem rgba(0,0,0,.5);background-color:#fff;font-size:.875rem}.table-up-align__item,.table-up-menu__item{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;cursor:pointer}.table-up-align__item:hover,.table-up-menu__item:hover{background-color:#eee}.table-up-align__item.is-break,.table-up-menu__item.is-break{align-self:stretch;width:.0625rem;padding:0;margin:.125rem .25rem;background-color:#a3a3a3;cursor:default}.table-up-align .icon,.table-up-menu .icon{display:flex;flex-shrink:0;font-size:1.25rem}.table-up-align span,.table-up-menu span{text-wrap:nowrap}.table-up-menu.is-contextmenu{flex-direction:column;padding:.25rem .5rem}.table-up-menu.is-contextmenu .table-up-menu__item{display:flex;justify-content:flex-start;width:100%;gap:.25rem;cursor:pointer}.table-up-menu.is-contextmenu .is-break{width:100%;height:.0625rem;margin:.25rem 0;background-color:#a3a3a3}.table-up-align--active{display:flex}.table-up-align .icon{width:1.25rem;height:1.25rem}.table-up-color-map{display:flex;flex-direction:column}.table-up-color-map--used{display:flex;align-items:center;justify-content:center;flex-direction:row-reverse;margin-top:.25rem;padding-top:.25rem;border-top:.0625rem solid #ccc}.table-up-color-map__content{display:flex;flex-direction:column}.table-up-color-map__content-row{display:flex;align-items:center;justify-content:center;gap:.25rem}.table-up-color-map__item{width:.875rem;height:.875rem;margin:.125rem;border:.0625rem solid #a3a3a3;cursor:pointer}.table-up-color-map__btn{display:flex;align-items:center;justify-content:center;flex:1;height:1.25rem;padding:0 .375rem;color:#303133;background-color:#fff;cursor:pointer}.table-up-color-map__btn:hover{background-color:#edeeef}