quill-table-up 2.4.2 → 3.0.0

package/README.md

@@ -14,7 +14,7 @@ Enhancement of quill table module
 - [x] line break in cells
 - [x] redo and undo
 - [x] support whole table align left/center/right
-- [x] `<caption>` `<th>` support
+- [x] `<caption>` `<th>` `<thead>` `<tfoot>` support
 
 ## Usage
 
@@ -47,15 +47,15 @@ const quill = new Quill('#editor', {
       ],
     ],
     [TableUp.moduleName]: {
-      scrollbar: TableVirtualScrollbar,
-      align: TableAlign,
-      resize: TableResizeBox,
-      resizeScale: TableResizeScale,
       customSelect: defaultCustomSelect,
-      selection: TableSelection,
-      selectionOptions: {
-        tableMenu: TableMenuContextmenu,
-      }
+      modules: [
+        { module: TableVirtualScrollbar },
+        { module: TableAlign },
+        { module: TableResizeLine },
+        { module: TableResizeScale },
+        { module: TableSelection },
+        { module: TableMenuContextmenu, },
+      ],
     },
   },
 });
@@ -67,25 +67,16 @@ const quill = new Quill('#editor', {
 
 **Full options usage see [demo](https://github.com/zzxming/quill-table-up/blob/master/docs/index.js#L38)**
 
-| attribute          | description                                                                                                                           | type                                                                            | default             |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------- |
-| full               | if set `true`. width max will be 100%                                                                                                 | `boolean`                                                                       | `false`             |
-| fullSwitch         | enable to choose insert a full width table                                                                                            | `boolean`                                                                       | `true`              |
-| texts              | the text used to create the table                                                                                                     | `TableTextOptions`                                                              | `defaultTexts`      |
-| 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` | -                   |
-| customBtn          | display a custom button to custom row and column number add a table. it only when use `defaultCustomSelect` will effect               | `boolean`                                                                       | `false`             |
-| selection          | table selection handler. module provides `TableSelection`                                                                             | `Constructor`                                                                   | -                   |
-| selectionOptions   | table selection options                                                                                                               | `TableSelectionOptions`                                                         | -                   |
-| icon               | picker svg icon string. it will set with `innerHTML`                                                                                  | `string`                                                                        | `origin table icon` |
-| resize             | table cell resize handler. module provides `TableResizeLine` and `TableResizeBox`                                                     | `Constructor`                                                                   | -                   |
-| resizeScale        | equal scale table cell handler. module provides `TableResizeScale`                                                                    | `Constructor`                                                                   | -                   |
-| scrollbar          | table virtual scrollbar handler(don't have any other functional, just like origin scrollbar). module provides `TableVirtualScrollbar` | `Constructor`                                                                   | -                   |
-| align              | table alignment handler. module provides `TableAlign`                                                                                 | `Constructor`                                                                   | -                   |
-| resizeOptions      | table cell resize handler options                                                                                                     | `any`                                                                           | -                   |
-| resizeScaleOptions | equal scale table cell handler options                                                                                                | `TableResizeScaleOptions`                                                       | -                   |
-| alignOptions       | table alignment handler options                                                                                                       | `any`                                                                           | -                   |
-| scrollbarOptions   | table virtual scrollbar handler options                                                                                               | `any`                                                                           | -                   |
-| autoMergeCell      | empty row or column will auto merge to one                                                                                            | `boolean`                                                                       | `true`              |
+| attribute     | description                                                                                                                 | type                                                                            | default                                    |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------ |
+| full          | if set `true`. width max will be 100%                                                                                       | `boolean`                                                                       | `false`                                    |
+| fullSwitch    | enable to choose insert a full width table                                                                                  | `boolean`                                                                       | `true`                                     |
+| texts         | the text used to create the table                                                                                           | `TableTextOptions`                                                              | `defaultTexts`                             |
+| 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` | -                                          |
+| customBtn     | display a custom button to custom row and column number add a table. it only when use `defaultCustomSelect` will effect     | `boolean`                                                                       | `false`                                    |
+| icon          | picker svg icon string. it will set with `innerHTML`                                                                        | `string`                                                                        | `origin table icon`                        |
+| autoMergeCell | empty row or column will auto merge to one                                                                                  | `boolean`                                                                       | `true`                                     |
+| modules       | the module plugin to help user control about table operate. see [`Export Internal Module`](#export-internal-module)         | `[]`                                                                            | `{ module: Contstructor, options: any }[]` |
 
 > 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://zzxming.github.io/quill-table-up/)
 
@@ -127,21 +118,29 @@ const defaultTexts = {
 
 </details>
 
-### TableResizeScale Options
+## Export Internal Module
 
-| attribute | description              | type     | default |
-| --------- | ------------------------ | -------- | ------- |
-| blockSize | resize handle block size | `number` | `12`    |
+### TableSelection
+
+The table cell selection handler
+
+#### Options
+
+| attribute   | description           | type     | default   |
+| ----------- | --------------------- | -------- | --------- |
+| selectColor | selector border color | `string` | `#0589f3` |
+
+### TableResizeLine / TableResizeBox
+
+The table cell resize handler
 
-### TableSelection Options
+### TableMenuContextmenu / TableMenuSelect
 
-| attribute        | description                                                                          | type               | default   |
-| ---------------- | ------------------------------------------------------------------------------------ | ------------------ | --------- |
-| selectColor      | selector border color                                                                | `string`           | `#0589f3` |
-| tableMenu        | the table operate menu. module provides `TableMenuContextmenu` and `TableMenuSelect` | `Constructor`      | -         |
-| tableMenuOptions | module TableMenu options                                                             | `TableMenuOptions` | -         |
+The table operate menu
 
-### TableMenu Options
+> This module needs to be used together with `TableSelection`
+
+#### Options
 
 | attribute       | description                                                                                                                                                                  | type         | default                 |
 | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------------------- |
@@ -160,7 +159,7 @@ interface ToolOption {
   tip?: string;
   isColorChoose?: boolean; // trigger a color picker first. need set `key`
   key?: string; // the style name to set on td.
-  handle: (tableModule: TableUp, selectedTds: TableCellInnerFormat[], e: Event | string) => void;
+  handle: (this: TableMenu, tableModule: TableUp, selectedTds: TableCellInnerFormat[], e: Event | string) => void;
 }
 interface ToolOptionBreak {
   name: 'break';
@@ -292,6 +291,63 @@ const defaultTools = [
 
 </details>
 
+### TableResizeScale
+
+Equal scale table cell handler
+
+#### Options
+
+| attribute | description              | type     | default |
+| --------- | ------------------------ | -------- | ------- |
+| blockSize | resize handle block size | `number` | `12`    |
+
+### TableAlign
+
+The table alignment tool
+
+### TableVirtualScrollbar
+
+The table virtual scrollbar
+
+## Migrate to 3.x
+
+In version 3.x, only changed the way options are passed in, the relevant additional modules are used in the `modules` option. e.g.
+
+```ts
+new Quill('#editor', {
+  theme: 'snow',
+  modules: {
+    toolbar: toolbarConfig,
+    [TableUp.moduleName]: {
+      customSelect: defaultCustomSelect,
+      customBtn: true,
+      modules: [
+        { module: TableVirtualScrollbar },
+        { module: TableAlign },
+        { module: TableResizeLine },
+        { module: TableResizeScale, options: { blockSize: 12, }, },
+        { module: TableSelection, options: { selectColor: '#00ff8b4d', }, },
+        {
+          module: TableMenuContextmenu,
+          options: {
+            localstorageKey: 'used-color',
+            tipText: true,
+            tools: [],
+            defaultColorMap: [],
+          },
+        },
+      ],
+    },
+  },
+});
+```
+
+You can use `quill.getModule(TableUp.moduleName).getModule(TableSelection.moduleName)` to get the TableSelection instance in the TableUp
+
+### Other
+
+- add new attributes `tag` and `wrap-tag` in `table-up-cell-inner` which to represent parent label types
+
 ## Overrides
 
 If you need to rewrite extends from quill `Block` or `Scroll` blot. you need to use `Quill.import()` after `TableUp` registed. beacuse module internal rewrite some functions, but those change only effect formats about table.

package/dist/index.css

@@ -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-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-caption{position:relative;word-break:break-word;outline:0}.ql-editor .ql-table-caption .ql-table-caption--switch{display:flex;align-items:center;justify-content:center;padding:2px;border-radius:4px;border:1px solid #0003;font-size:12px;cursor:pointer;background-color:#fff}.ql-editor .ql-table-caption .ql-table-caption--switch:hover{background-color:#eee}.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;outline:0;counter-reset:list-0}.ql-editor .ql-table col{border-collapse:separate;text-indent:initial;display:table-column;table-layout:fixed}.ql-editor .ql-table tr+tr td,.ql-editor .ql-table tr+tr th{border-top:none}.ql-editor .ql-table td,.ql-editor .ql-table th{border:1px solid #a1a1aa}.ql-editor .ql-table td+td,.ql-editor .ql-table td+th,.ql-editor .ql-table th+td,.ql-editor .ql-table th+th{border-left:none}.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{--select-color:#0589f340;display:none;position:absolute;overflow:hidden;pointer-events:none}.ql-container .table-up-selection__line{position:absolute;background-color:var(--select-color);pointer-events:none}.table-up-resize-line__col,.table-up-resize-line__row{position:absolute;z-index:0}.table-up-resize-line__col.is-hidden,.table-up-resize-line__row.is-hidden{display:none}.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-caption-bottom .table-up-resize-box__corner{border-top-width:0;border-bottom-width:.0625rem;border-top-left-radius:0;border-bottom-left-radius:50%}.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:0;border-right-width:.0625rem;border-top-left-radius:0;border-top-right-radius:50%}.table-up-resize-box.is-align-right.is-caption-bottom .table-up-resize-box__corner{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-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:nwse-resize;pointer-events:all}.table-up-scale.is-align-right .table-up-scale__block{cursor:nesw-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;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;max-height:21.875rem;overflow-y:auto;overflow-x:hidden}.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;flex-shrink:0;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}
+.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}.ql-editor .ql-table-caption{position:relative;word-break:break-word;outline:0}.ql-editor .ql-table-caption .ql-table-caption--switch{display:flex;align-items:center;justify-content:center;padding:2px;border-radius:4px;border:1px solid #0003;font-size:12px;cursor:pointer;background-color:#fff}.ql-editor .ql-table-caption .ql-table-caption--switch:hover{background-color:#eee}.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;outline:0;counter-reset:list-0}.ql-editor .ql-table col{border-collapse:separate;text-indent:initial;display:table-column;table-layout:fixed}.ql-editor .ql-table tr+tr td,.ql-editor .ql-table tr+tr th{border-top:none}.ql-editor .ql-table td,.ql-editor .ql-table th{border:1px solid #a1a1aa}.ql-editor .ql-table td+td,.ql-editor .ql-table td+th,.ql-editor .ql-table th+td,.ql-editor .ql-table th+th{border-left:none}.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{--select-color:#0589f340;display:none;position:absolute;overflow:hidden;pointer-events:none}.ql-container .table-up-selection__line{position:absolute;background-color:var(--select-color);pointer-events:none}.table-up-resize-line__col,.table-up-resize-line__row{position:absolute;z-index:0}.table-up-resize-line__col.is-hidden,.table-up-resize-line__row.is-hidden{display:none}.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-caption-bottom .table-up-resize-box__corner{border-top-width:0;border-bottom-width:.0625rem;border-top-left-radius:0;border-bottom-left-radius:50%}.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:0;border-right-width:.0625rem;border-top-left-radius:0;border-top-right-radius:50%}.table-up-resize-box.is-align-right.is-caption-bottom .table-up-resize-box__corner{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:50%}.table-up-resize-box__col,.table-up-resize-box__row{position:absolute;top:0;left:0;overflow:hidden;display:flex}.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:nwse-resize;pointer-events:all}.table-up-scale.is-align-right .table-up-scale__block{cursor:nesw-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--virtual.ql-container .ql-table-wrapper{scrollbar-width:none}.table-up-align,.table-up-menu{position:absolute;z-index:1;display:flex;align-items: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.is-hidden,.table-up-menu.is-hidden{display:none}.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;max-height:21.875rem;overflow-y:auto;overflow-x:hidden}.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;flex-shrink:0;margin:.25rem 0;background-color:#a3a3a3}.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}