@textbus/xnote 0.0.11 → 0.1.0

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 (9) hide show
  1. package/bundles/components/_api.d.ts +1 -0
  2. package/bundles/components/color-picker/color-picker.d.ts +28 -0
  3. package/bundles/index.css +1 -1
  4. package/bundles/index.esm.css +1 -1
  5. package/bundles/index.esm.js +399 -19
  6. package/bundles/index.js +400 -16
  7. package/bundles/textbus/attributes/_api.d.ts +1 -0
  8. package/bundles/textbus/attributes/cell-background.attr.d.ts +4 -0
  9. package/package.json +2 -2
package/bundles/components/_api.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './button/button';
2
+ export * from './color-picker/color-picker';
2
3
  export * from './component-toolbar/component-toolbar';
3
4
  export * from './divider/divider';
4
5
  export * from './drag-resize/drag-resize';
package/bundles/components/color-picker/color-picker.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { ColorHSL, ColorHSV, ColorRGB, ColorRGBA } from '@tanbo/color';
2
+ export declare class Picker {
3
+ private onChange;
4
+ set hex(color: string);
5
+ get hex(): string | null;
6
+ set hsl(color: ColorHSL);
7
+ get hsl(): ColorHSL | null;
8
+ set rgb(color: ColorRGB);
9
+ get rgb(): ColorRGB | null;
10
+ set rgba(color: ColorRGBA);
11
+ get rgba(): ColorRGBA | null;
12
+ set hsv(color: ColorHSV);
13
+ get hsv(): ColorHSV | null;
14
+ private _hex;
15
+ private _hsl;
16
+ private _rgb;
17
+ private _hsv;
18
+ private _rgba;
19
+ empty: boolean;
20
+ resetAlpha: boolean;
21
+ constructor(onChange: () => void, value?: string);
22
+ }
23
+ export interface ColorPickerProps {
24
+ value?: string;
25
+ onChange?(picker: Picker): void;
26
+ onSelected(picker: Picker): void;
27
+ }
28
+ export declare function ColorPicker(props: ColorPickerProps): () => import("@viewfly/core").JSXNode;
package/bundles/index.css CHANGED
@@ -1,4 +1,4 @@
1
- .btn[vf-d94b56]{align-items:center;background:none;border:none;border-radius:4px;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:inherit;height:28px;outline:none;padding:6px 5px;transition:all .2s}.btn>span[vf-d94b56]{white-space:nowrap}.btn[vf-d94b56]:hover{background:rgba(0,0,0,.1)}.btn-arrow[vf-d94b56]{position:relative;transform:rotate(0);transform-origin:50%;width:1em}.btn.active[vf-d94b56]{background:rgba(0,0,0,.1)}.btn.active .btn-arrow[vf-d94b56]{transform:rotate(180deg)}.btn.highlight[vf-d94b56]{background-color:rgba(41,110,255,.063);color:#296eff}.component-toolbar[vf-ac7e8d]{position:relative;z-index:3}.toolbar[vf-ac7e8d]{background:#fff;border:1px solid #dee0e3;border-radius:5px;bottom:10px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:14px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateY(10px)}.toolbar.active[vf-ac7e8d]{opacity:1;pointer-events:auto;transform:translateY(0);transition-duration:.2s;transition-property:all;transition-timing-function:ease}.divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}.drag-resize[vf-d91ad6]{position:relative;width:100%}.drag-resize .container[vf-d91ad6]{font-size:0;text-indent:0}.drag-resize .resize-tool[vf-d91ad6]{align-items:center;border:1px dashed #296eff;display:none;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.drag-resize .resize-tool.active[vf-d91ad6]{display:flex}.drag-resize .mask[vf-d91ad6]{background-color:rgba(0,0,0,.8);border-radius:3px;color:#fff;font-size:14px;padding:3px 8px;pointer-events:none;position:relative;text-indent:0;text-shadow:1px 2px 3px rgba(0,0,0,.7);user-select:none;white-space:nowrap;z-index:10}.drag-resize .btn-group[vf-d91ad6]{height:100%;left:0;position:absolute;top:0;width:100%}.drag-resize button[vf-d91ad6]{background:#fff;border:2px solid #296eff;border-radius:50%;box-sizing:border-box;cursor:pointer;font-size:0;height:14px;outline:none;padding:0;pointer-events:auto;position:absolute;width:14px}.drag-resize button[vf-d91ad6]:hover{background-color:#fff;box-shadow:0 0 0 3px rgba(18,150,219,.3)}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(3){margin-top:-5px;top:0}.drag-resize button[vf-d91ad6]:nth-child(3),.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(5){margin-right:-5px;right:0}.drag-resize button[vf-d91ad6]:nth-child(5),.drag-resize button[vf-d91ad6]:nth-child(6),.drag-resize button[vf-d91ad6]:nth-child(7){bottom:0;margin-bottom:-5px}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(7),.drag-resize button[vf-d91ad6]:nth-child(8){left:0;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(6){left:50%;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(8){margin-top:-5px;top:50%}.drag-resize button[vf-d91ad6]:first-child{cursor:nw-resize}.drag-resize button[vf-d91ad6]:nth-child(2){cursor:n-resize}.drag-resize button[vf-d91ad6]:nth-child(3){cursor:ne-resize}.drag-resize button[vf-d91ad6]:nth-child(4){cursor:e-resize}.drag-resize button[vf-d91ad6]:nth-child(5){cursor:se-resize}.drag-resize button[vf-d91ad6]:nth-child(6){cursor:s-resize}.drag-resize button[vf-d91ad6]:nth-child(7){cursor:sw-resize}.drag-resize button[vf-d91ad6]:nth-child(8){cursor:w-resize}.dropdown[vf-a99c5e]{display:inline-block;position:relative}.dropdown[vf-a99c5e]:hover{z-index:1}.dropdown-btn[vf-a99c5e]{display:flex;width:100%}.dropdown-btn-inner[vf-a99c5e]{flex:1}.dropdown-menu[vf-8a05e9]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);box-sizing:content-box;height:0;left:-10px;max-height:400px;opacity:0;overflow-y:auto;position:absolute;top:100%;transition-duration:0s;transition:transform .3s,opacity .3s;user-select:none;width:200px;z-index:10}.dropdown-menu[vf-8a05e9]:hover::-webkit-scrollbar-thumb{background-color:#80848f}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb{border:0;border-radius:4px;height:50px;outline:0;outline-offset:0}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb:hover{background-color:#495060;height:50px}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar{border-radius:3px;height:6px;width:6px}.dropdown-menu-content[vf-8a05e9]{box-sizing:content-box;padding:6px}.keymap[vf-c32a7b]{align-items:center;display:inline-flex;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em;margin-left:1em;opacity:.6}.keymap[vf-c32a7b] span{margin:0 2px}.menu-heading[vf-acaa5f]{font-size:14px;opacity:.5;padding:10px}.menu-item[vf-c3b9dc]{border-radius:4px;box-sizing:content-box;cursor:pointer;display:flex;font-size:14px;height:26px;justify-content:space-between;line-height:26px;padding:2px 10px;transition:background-color .2s}.menu-item-content[vf-c3b9dc]{display:flex;flex:1;justify-content:space-between}.menu-item.disabled[vf-c3b9dc]{cursor:not-allowed;opacity:.5}.menu-item[vf-c3b9dc]:hover{background:#eee}.menu-item.active[vf-c3b9dc]{background:rgba(0,0,0,.1)}.menu-icon[vf-c3b9dc]{display:inline-block;width:1.8em}.menu-check[vf-c3b9dc]{display:none}.menu-check.checked[vf-c3b9dc]{color:#296eff;display:block}.popup[vf-a23c47]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);overflow:hidden;position:absolute}.toolbar-item[vf-216815]{padding:3px}.heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}.xnote-source-code.atom-one-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.atom-one-dark code.hljs{padding:3px 5px}.xnote-source-code.atom-one-dark .hljs{background:#282c34;color:#abb2bf}.xnote-source-code.atom-one-dark .hljs-comment,.xnote-source-code.atom-one-dark .hljs-quote{color:#5c6370;font-style:italic}.xnote-source-code.atom-one-dark .hljs-doctag,.xnote-source-code.atom-one-dark .hljs-formula,.xnote-source-code.atom-one-dark .hljs-keyword{color:#c678dd}.xnote-source-code.atom-one-dark .hljs-deletion,.xnote-source-code.atom-one-dark .hljs-name,.xnote-source-code.atom-one-dark .hljs-section,.xnote-source-code.atom-one-dark .hljs-selector-tag,.xnote-source-code.atom-one-dark .hljs-subst{color:#e06c75}.xnote-source-code.atom-one-dark .hljs-literal{color:#56b6c2}.xnote-source-code.atom-one-dark .hljs-addition,.xnote-source-code.atom-one-dark .hljs-attribute,.xnote-source-code.atom-one-dark .hljs-meta .hljs-string,.xnote-source-code.atom-one-dark .hljs-regexp,.xnote-source-code.atom-one-dark .hljs-string{color:#98c379}.xnote-source-code.atom-one-dark .hljs-attr,.xnote-source-code.atom-one-dark .hljs-number,.xnote-source-code.atom-one-dark .hljs-selector-attr,.xnote-source-code.atom-one-dark .hljs-selector-class,.xnote-source-code.atom-one-dark .hljs-selector-pseudo,.xnote-source-code.atom-one-dark .hljs-template-variable,.xnote-source-code.atom-one-dark .hljs-type,.xnote-source-code.atom-one-dark .hljs-variable{color:#d19a66}.xnote-source-code.atom-one-dark .hljs-bullet,.xnote-source-code.atom-one-dark .hljs-link,.xnote-source-code.atom-one-dark .hljs-meta,.xnote-source-code.atom-one-dark .hljs-selector-id,.xnote-source-code.atom-one-dark .hljs-symbol,.xnote-source-code.atom-one-dark .hljs-title{color:#61aeee}.xnote-source-code.atom-one-dark .hljs-built_in,.xnote-source-code.atom-one-dark .hljs-class .hljs-title,.xnote-source-code.atom-one-dark .hljs-title.class_{color:#e6c07b}.xnote-source-code.atom-one-dark .hljs-emphasis{font-style:italic}.xnote-source-code.atom-one-dark .hljs-strong{font-weight:700}.xnote-source-code.atom-one-dark .hljs-link{text-decoration:underline}.xnote-source-code.foundation pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.foundation code.hljs{padding:3px 5px}.xnote-source-code.foundation .hljs{background:#eee;color:#000}.xnote-source-code.foundation .hljs-addition,.xnote-source-code.foundation .hljs-attribute,.xnote-source-code.foundation .hljs-emphasis,.xnote-source-code.foundation .hljs-link{color:#070}.xnote-source-code.foundation .hljs-emphasis{font-style:italic}.xnote-source-code.foundation .hljs-deletion,.xnote-source-code.foundation .hljs-string,.xnote-source-code.foundation .hljs-strong{color:#d14}.xnote-source-code.foundation .hljs-strong{font-weight:700}.xnote-source-code.foundation .hljs-comment,.xnote-source-code.foundation .hljs-quote{color:#998;font-style:italic}.xnote-source-code.foundation .hljs-section,.xnote-source-code.foundation .hljs-title{color:#900}.xnote-source-code.foundation .hljs-class .hljs-title,.xnote-source-code.foundation .hljs-title.class_,.xnote-source-code.foundation .hljs-type{color:#458}.xnote-source-code.foundation .hljs-template-variable,.xnote-source-code.foundation .hljs-variable{color:#369}.xnote-source-code.foundation .hljs-bullet{color:#970}.xnote-source-code.foundation .hljs-meta{color:#34b}.xnote-source-code.foundation .hljs-code,.xnote-source-code.foundation .hljs-keyword,.xnote-source-code.foundation .hljs-literal,.xnote-source-code.foundation .hljs-number,.xnote-source-code.foundation .hljs-selector-tag{color:#099}.xnote-source-code.foundation .hljs-regexp{background-color:#fff0ff;color:#808}.xnote-source-code.foundation .hljs-symbol{color:#990073}.xnote-source-code.foundation .hljs-name,.xnote-source-code.foundation .hljs-selector-class,.xnote-source-code.foundation .hljs-selector-id,.xnote-source-code.foundation .hljs-tag{color:#070}.xnote-source-code.github{
1
+ .btn[vf-d94b56]{align-items:center;background:none;border:none;border-radius:4px;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:inherit;height:28px;outline:none;padding:6px 5px;transition:all .2s}.btn>span[vf-d94b56]{white-space:nowrap}.btn[vf-d94b56]:hover{background:rgba(0,0,0,.1)}.btn-arrow[vf-d94b56]{position:relative;transform:rotate(0);transform-origin:50%;width:1em}.btn.active[vf-d94b56]{background:rgba(0,0,0,.1)}.btn.active .btn-arrow[vf-d94b56]{transform:rotate(180deg)}.btn.highlight[vf-d94b56]{background-color:rgba(41,110,255,.063);color:#296eff}.xnote-color-picker[vf-d552b9]{background-color:#fff;box-sizing:content-box!important;display:inline-block;font-size:12px;overflow:hidden;position:relative;text-align:left;user-select:none;width:165px}.xnote-color-picker.xnote-color-picker-show-palette[vf-d552b9]{height:306px}.xnote-color-picker.xnote-color-picker-show-palette .xnote-color-picker-menu[vf-d552b9]{top:0}.xnote-color-picker-preset>div[vf-d552b9]:first-child{margin-bottom:5px}.xnote-color-picker-recent-text[vf-d552b9]{color:#80848f;padding:2px}.xnote-color-picker-flex[vf-d552b9]{align-items:center;display:flex;justify-content:space-between}.xnote-color-picker-to-palette[vf-d552b9]{align-items:center;background:none;border:0;color:#333;cursor:pointer;display:flex;outline:none;padding-right:0}.xnote-color-picker-to-palette svg[vf-d552b9]{width:1em}.xnote-color-picker-to-palette[vf-d552b9]:hover{color:#296eff}.xnote-color-picker-to-palette:hover svg[vf-d552b9]{fill:#296eff}.xnote-color-picker-back-btn[vf-d552b9]{background:none;border:0;color:#333;cursor:pointer;line-height:20px;outline:none;padding:0}.xnote-color-picker-back-btn-wrap[vf-d552b9]{height:2em}.xnote-color-picker-back-btn svg[vf-d552b9]{height:1em;margin-top:-2px;width:1em}.xnote-color-picker-back-btn[vf-d552b9]:hover{color:#296eff}.xnote-color-picker-menu[vf-d552b9]{background-color:#fff;left:0;position:absolute;top:100%;transition:top .2s cubic-bezier(.36,.66,.04,1)}.xnote-color-picker-viewer[vf-d552b9]{height:160px}.xnote-color-picker-viewer-left[vf-d552b9]{float:left}.xnote-color-picker-palette[vf-d552b9]{cursor:pointer;height:130px;position:relative;width:130px}.xnote-color-picker-palette[vf-d552b9]:before{background:linear-gradient(180deg,transparent,#000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.xnote-color-picker-palette-empty[vf-d552b9]{background-color:#fff;background-image:linear-gradient(45deg,#bbbec4 25%,transparent 0,transparent 75%,#bbbec4 0,#bbbec4),linear-gradient(45deg,#bbbec4 26%,transparent 0,transparent 74%,#bbbec4 0,#bbbec4);background-position:0 0,5px 5px;background-size:10px 10px}.xnote-color-picker-palette-empty[vf-d552b9]:before{display:none}.xnote-color-picker-palette-point[vf-d552b9]{background:#fff;border:none;border-radius:50%;box-shadow:1px 1px 3px rgba(0,0,0,.2);height:1em;pointer-events:none;position:absolute;width:1em}.xnote-color-picker-viewer-alpha[vf-d552b9]{background-color:#bbbec4;background-image:linear-gradient(45deg,#fff 25%,transparent 0,transparent 75%,#fff 0,#fff),linear-gradient(45deg,#fff 26%,transparent 0,transparent 74%,#fff 0,#fff);background-position:-5px -5px,0 0;background-size:10px 10px;height:10px;margin-top:10px;position:relative}.xnote-color-picker-viewer-alpha-bar[vf-d552b9]{border-radius:inherit;cursor:pointer;height:100%;position:relative;z-index:1}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]{height:100%;left:0;position:absolute;right:0;top:0}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:after,.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:before{border-style:solid;border-width:7px 4px;contain:size style layout;content:"";height:0;left:-4px;position:absolute;width:0}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:before{border-color:#495060 transparent transparent;top:-6px}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:after{border-color:transparent transparent #495060;top:2px}.xnote-color-picker-viewer-right[vf-d552b9]{float:left;margin-left:10px;width:20px}.xnote-color-picker-tools[vf-d552b9]{margin-bottom:10px}.xnote-color-picker-viewer-alpha-value[vf-d552b9]{font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:13px;line-height:1;margin-left:-7px;text-align:center;width:34px}.xnote-color-picker-value[vf-d552b9]{background-color:#fff;background-image:linear-gradient(45deg,#bbbec4 25%,transparent 0,transparent 75%,#bbbec4 0,#bbbec4),linear-gradient(45deg,#bbbec4 26%,transparent 0,transparent 74%,#bbbec4 0,#bbbec4);background-position:0 0,5px 5px;background-size:10px 10px;height:20px;margin-bottom:10px;width:20px}.xnote-color-picker-value-color[vf-d552b9]{height:20px;width:20px}.xnote-color-picker-hue-bar[vf-d552b9]{background:linear-gradient(red,#f90,#ff0 16.6%,#0f0 33.3%,#0ff,#00f 66.6%,#f09,red);cursor:pointer;flex:1;height:100px;position:relative;width:20px}.xnote-color-picker-hue-pointer[vf-d552b9]{bottom:0;height:0;left:0;pointer-events:none;position:absolute;top:0}.xnote-color-picker-hue-pointer[vf-d552b9]:after,.xnote-color-picker-hue-pointer[vf-d552b9]:before{border-style:solid;border-width:4px 7px;contain:size style layout;content:"";height:0;position:absolute;top:0;width:0}.xnote-color-picker-hue-pointer[vf-d552b9]:before{border-color:transparent transparent transparent #495060;right:-8px}.xnote-color-picker-hue-pointer[vf-d552b9]:after{border-color:transparent #495060 transparent transparent;left:12px}.xnote-color-picker-inputs[vf-d552b9]{color:#80848f;line-height:22px}.xnote-color-picker-inputs>div[vf-d552b9]{display:flex;padding:4px 0}.xnote-color-picker-inputs>div>div[vf-d552b9]{display:flex;flex:1;padding:0 4px}.xnote-color-picker-inputs>div>div input[vf-d552b9]{-moz-appearance:textfield;border:1px solid #e9eaec;border-radius:3px;flex:1;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:13px;height:22px;line-height:16px;margin-left:5px;outline:0;padding:3px 5px;text-align:center;width:100%}.xnote-color-picker-inputs>div>div input[vf-d552b9]:focus{border-color:#296eff;box-shadow:0 0 0 2px rgba(41,110,255,.5);z-index:1}.xnote-color-picker-inputs>div>div input[vf-d552b9]::-webkit-inner-spin-button,.xnote-color-picker-inputs>div>div input[vf-d552b9]::-webkit-outer-spin-button{-webkit-appearance:none}.xnote-color-picker-swatches[vf-d552b9]{font-size:0;padding-top:3px}.xnote-color-picker-swatches>div[vf-d552b9]{background-color:#fff;background-image:linear-gradient(45deg,#bbbec4 25%,transparent 0,transparent 75%,#bbbec4 0,#bbbec4),linear-gradient(45deg,#bbbec4 26%,transparent 0,transparent 74%,#bbbec4 0,#bbbec4);background-position:0 0,5px 5px;background-size:10px 10px;border-radius:3px;box-shadow:1px 1px 1px rgba(0,0,0,.1);box-sizing:border-box;cursor:pointer;display:inline-block;height:20px;margin-bottom:3px;margin-left:3px;transition:transform .1s;width:20px}.xnote-color-picker-swatches>div.xnote-color-picker-current[vf-d552b9]{border:1px solid rgba(0,0,0,.3);box-shadow:none}.xnote-color-picker-swatches>div[data-color=""][vf-d552b9]{background:#fff;border-left:1px solid #f8f8f9;border-top:1px solid #f8f8f9;box-sizing:border-box;overflow:hidden;position:relative}.xnote-color-picker-swatches>div[data-color=""][vf-d552b9]:after{background-color:#e74f5e;content:"";height:1px;left:0;position:absolute;right:0;top:50%;transform:rotate(-45deg) scaleX(1.5)}.xnote-color-picker-swatches>div[vf-d552b9]:hover{transform:scale(1.1)}.xnote-color-picker-btn-wrap[vf-d552b9]{padding-top:5px}.xnote-color-picker-btn[vf-d552b9]{background-color:#296eff;border:1px solid #296eff;border-radius:3px;color:#fff;cursor:pointer;display:block;font-size:13px;line-height:1.428;outline:none;padding:3px 6px;width:100%}.xnote-color-picker-btn[vf-d552b9]:hover{background-color:#0556ff;border-color:#0556ff}.xnote-color-picker-btn[vf-d552b9]:focus{background-color:#004ff5;border-color:#0556ff;box-shadow:0 0 0 2px rgba(41,110,255,.5);outline:none}.xnote-color-picker-btn[vf-d552b9]:active{background-color:#0047dc;border-color:#0556ff}.component-toolbar[vf-ac7e8d]{position:relative;z-index:3}.toolbar[vf-ac7e8d]{background:#fff;border:1px solid #dee0e3;border-radius:5px;bottom:10px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:14px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateY(10px)}.toolbar.active[vf-ac7e8d]{opacity:1;pointer-events:auto;transform:translateY(0);transition-duration:.2s;transition-property:all;transition-timing-function:ease}.divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}.drag-resize[vf-d91ad6]{position:relative;width:100%}.drag-resize .container[vf-d91ad6]{font-size:0;text-indent:0}.drag-resize .resize-tool[vf-d91ad6]{align-items:center;border:1px dashed #296eff;display:none;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.drag-resize .resize-tool.active[vf-d91ad6]{display:flex}.drag-resize .mask[vf-d91ad6]{background-color:rgba(0,0,0,.8);border-radius:3px;color:#fff;font-size:14px;padding:3px 8px;pointer-events:none;position:relative;text-indent:0;text-shadow:1px 2px 3px rgba(0,0,0,.7);user-select:none;white-space:nowrap;z-index:10}.drag-resize .btn-group[vf-d91ad6]{height:100%;left:0;position:absolute;top:0;width:100%}.drag-resize button[vf-d91ad6]{background:#fff;border:2px solid #296eff;border-radius:50%;box-sizing:border-box;cursor:pointer;font-size:0;height:14px;outline:none;padding:0;pointer-events:auto;position:absolute;width:14px}.drag-resize button[vf-d91ad6]:hover{background-color:#fff;box-shadow:0 0 0 3px rgba(18,150,219,.3)}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(3){margin-top:-5px;top:0}.drag-resize button[vf-d91ad6]:nth-child(3),.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(5){margin-right:-5px;right:0}.drag-resize button[vf-d91ad6]:nth-child(5),.drag-resize button[vf-d91ad6]:nth-child(6),.drag-resize button[vf-d91ad6]:nth-child(7){bottom:0;margin-bottom:-5px}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(7),.drag-resize button[vf-d91ad6]:nth-child(8){left:0;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(6){left:50%;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(8){margin-top:-5px;top:50%}.drag-resize button[vf-d91ad6]:first-child{cursor:nw-resize}.drag-resize button[vf-d91ad6]:nth-child(2){cursor:n-resize}.drag-resize button[vf-d91ad6]:nth-child(3){cursor:ne-resize}.drag-resize button[vf-d91ad6]:nth-child(4){cursor:e-resize}.drag-resize button[vf-d91ad6]:nth-child(5){cursor:se-resize}.drag-resize button[vf-d91ad6]:nth-child(6){cursor:s-resize}.drag-resize button[vf-d91ad6]:nth-child(7){cursor:sw-resize}.drag-resize button[vf-d91ad6]:nth-child(8){cursor:w-resize}.dropdown[vf-a99c5e]{display:inline-block;position:relative}.dropdown[vf-a99c5e]:hover{z-index:1}.dropdown-btn[vf-a99c5e]{display:flex;width:100%}.dropdown-btn-inner[vf-a99c5e]{flex:1}.dropdown-menu[vf-8a05e9]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);box-sizing:content-box;height:0;left:-10px;max-height:400px;opacity:0;overflow-y:auto;position:absolute;top:100%;transition-duration:0s;transition:transform .3s,opacity .3s;user-select:none;width:200px;z-index:10}.dropdown-menu[vf-8a05e9]:hover::-webkit-scrollbar-thumb{background-color:#80848f}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb{border:0;border-radius:4px;height:50px;outline:0;outline-offset:0}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb:hover{background-color:#495060;height:50px}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar{border-radius:3px;height:6px;width:6px}.dropdown-menu-content[vf-8a05e9]{box-sizing:content-box;padding:6px}.keymap[vf-c32a7b]{align-items:center;display:inline-flex;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em;margin-left:1em;opacity:.6}.keymap[vf-c32a7b] span{margin:0 2px}.menu-heading[vf-acaa5f]{font-size:14px;opacity:.5;padding:10px}.menu-item[vf-c3b9dc]{border-radius:4px;box-sizing:content-box;cursor:pointer;display:flex;font-size:14px;height:26px;justify-content:space-between;line-height:26px;padding:2px 10px;transition:background-color .2s}.menu-item-content[vf-c3b9dc]{display:flex;flex:1;justify-content:space-between}.menu-item.disabled[vf-c3b9dc]{cursor:not-allowed;opacity:.5}.menu-item[vf-c3b9dc]:hover{background:#eee}.menu-item.active[vf-c3b9dc]{background:rgba(0,0,0,.1)}.menu-icon[vf-c3b9dc]{display:inline-block;width:1.8em}.menu-check[vf-c3b9dc]{display:none}.menu-check.checked[vf-c3b9dc]{color:#296eff;display:block}.popup[vf-a23c47]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);overflow:hidden;position:absolute}.toolbar-item[vf-216815]{padding:3px}.heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}.xnote-source-code.atom-one-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.atom-one-dark code.hljs{padding:3px 5px}.xnote-source-code.atom-one-dark .hljs{background:#282c34;color:#abb2bf}.xnote-source-code.atom-one-dark .hljs-comment,.xnote-source-code.atom-one-dark .hljs-quote{color:#5c6370;font-style:italic}.xnote-source-code.atom-one-dark .hljs-doctag,.xnote-source-code.atom-one-dark .hljs-formula,.xnote-source-code.atom-one-dark .hljs-keyword{color:#c678dd}.xnote-source-code.atom-one-dark .hljs-deletion,.xnote-source-code.atom-one-dark .hljs-name,.xnote-source-code.atom-one-dark .hljs-section,.xnote-source-code.atom-one-dark .hljs-selector-tag,.xnote-source-code.atom-one-dark .hljs-subst{color:#e06c75}.xnote-source-code.atom-one-dark .hljs-literal{color:#56b6c2}.xnote-source-code.atom-one-dark .hljs-addition,.xnote-source-code.atom-one-dark .hljs-attribute,.xnote-source-code.atom-one-dark .hljs-meta .hljs-string,.xnote-source-code.atom-one-dark .hljs-regexp,.xnote-source-code.atom-one-dark .hljs-string{color:#98c379}.xnote-source-code.atom-one-dark .hljs-attr,.xnote-source-code.atom-one-dark .hljs-number,.xnote-source-code.atom-one-dark .hljs-selector-attr,.xnote-source-code.atom-one-dark .hljs-selector-class,.xnote-source-code.atom-one-dark .hljs-selector-pseudo,.xnote-source-code.atom-one-dark .hljs-template-variable,.xnote-source-code.atom-one-dark .hljs-type,.xnote-source-code.atom-one-dark .hljs-variable{color:#d19a66}.xnote-source-code.atom-one-dark .hljs-bullet,.xnote-source-code.atom-one-dark .hljs-link,.xnote-source-code.atom-one-dark .hljs-meta,.xnote-source-code.atom-one-dark .hljs-selector-id,.xnote-source-code.atom-one-dark .hljs-symbol,.xnote-source-code.atom-one-dark .hljs-title{color:#61aeee}.xnote-source-code.atom-one-dark .hljs-built_in,.xnote-source-code.atom-one-dark .hljs-class .hljs-title,.xnote-source-code.atom-one-dark .hljs-title.class_{color:#e6c07b}.xnote-source-code.atom-one-dark .hljs-emphasis{font-style:italic}.xnote-source-code.atom-one-dark .hljs-strong{font-weight:700}.xnote-source-code.atom-one-dark .hljs-link{text-decoration:underline}.xnote-source-code.foundation pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.foundation code.hljs{padding:3px 5px}.xnote-source-code.foundation .hljs{background:#eee;color:#000}.xnote-source-code.foundation .hljs-addition,.xnote-source-code.foundation .hljs-attribute,.xnote-source-code.foundation .hljs-emphasis,.xnote-source-code.foundation .hljs-link{color:#070}.xnote-source-code.foundation .hljs-emphasis{font-style:italic}.xnote-source-code.foundation .hljs-deletion,.xnote-source-code.foundation .hljs-string,.xnote-source-code.foundation .hljs-strong{color:#d14}.xnote-source-code.foundation .hljs-strong{font-weight:700}.xnote-source-code.foundation .hljs-comment,.xnote-source-code.foundation .hljs-quote{color:#998;font-style:italic}.xnote-source-code.foundation .hljs-section,.xnote-source-code.foundation .hljs-title{color:#900}.xnote-source-code.foundation .hljs-class .hljs-title,.xnote-source-code.foundation .hljs-title.class_,.xnote-source-code.foundation .hljs-type{color:#458}.xnote-source-code.foundation .hljs-template-variable,.xnote-source-code.foundation .hljs-variable{color:#369}.xnote-source-code.foundation .hljs-bullet{color:#970}.xnote-source-code.foundation .hljs-meta{color:#34b}.xnote-source-code.foundation .hljs-code,.xnote-source-code.foundation .hljs-keyword,.xnote-source-code.foundation .hljs-literal,.xnote-source-code.foundation .hljs-number,.xnote-source-code.foundation .hljs-selector-tag{color:#099}.xnote-source-code.foundation .hljs-regexp{background-color:#fff0ff;color:#808}.xnote-source-code.foundation .hljs-symbol{color:#990073}.xnote-source-code.foundation .hljs-name,.xnote-source-code.foundation .hljs-selector-class,.xnote-source-code.foundation .hljs-selector-id,.xnote-source-code.foundation .hljs-tag{color:#070}.xnote-source-code.github{
2
2
  /*!
3
3
  Theme: GitHub
4
4
  Description: Light theme as seen on github.com
package/bundles/index.esm.css CHANGED
@@ -1,4 +1,4 @@
1
- .btn[vf-d94b56]{align-items:center;background:none;border:none;border-radius:4px;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:inherit;height:28px;outline:none;padding:6px 5px;transition:all .2s}.btn>span[vf-d94b56]{white-space:nowrap}.btn[vf-d94b56]:hover{background:rgba(0,0,0,.1)}.btn-arrow[vf-d94b56]{position:relative;transform:rotate(0);transform-origin:50%;width:1em}.btn.active[vf-d94b56]{background:rgba(0,0,0,.1)}.btn.active .btn-arrow[vf-d94b56]{transform:rotate(180deg)}.btn.highlight[vf-d94b56]{background-color:rgba(41,110,255,.063);color:#296eff}.component-toolbar[vf-ac7e8d]{position:relative;z-index:3}.toolbar[vf-ac7e8d]{background:#fff;border:1px solid #dee0e3;border-radius:5px;bottom:10px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:14px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateY(10px)}.toolbar.active[vf-ac7e8d]{opacity:1;pointer-events:auto;transform:translateY(0);transition-duration:.2s;transition-property:all;transition-timing-function:ease}.divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}.drag-resize[vf-d91ad6]{position:relative;width:100%}.drag-resize .container[vf-d91ad6]{font-size:0;text-indent:0}.drag-resize .resize-tool[vf-d91ad6]{align-items:center;border:1px dashed #296eff;display:none;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.drag-resize .resize-tool.active[vf-d91ad6]{display:flex}.drag-resize .mask[vf-d91ad6]{background-color:rgba(0,0,0,.8);border-radius:3px;color:#fff;font-size:14px;padding:3px 8px;pointer-events:none;position:relative;text-indent:0;text-shadow:1px 2px 3px rgba(0,0,0,.7);user-select:none;white-space:nowrap;z-index:10}.drag-resize .btn-group[vf-d91ad6]{height:100%;left:0;position:absolute;top:0;width:100%}.drag-resize button[vf-d91ad6]{background:#fff;border:2px solid #296eff;border-radius:50%;box-sizing:border-box;cursor:pointer;font-size:0;height:14px;outline:none;padding:0;pointer-events:auto;position:absolute;width:14px}.drag-resize button[vf-d91ad6]:hover{background-color:#fff;box-shadow:0 0 0 3px rgba(18,150,219,.3)}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(3){margin-top:-5px;top:0}.drag-resize button[vf-d91ad6]:nth-child(3),.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(5){margin-right:-5px;right:0}.drag-resize button[vf-d91ad6]:nth-child(5),.drag-resize button[vf-d91ad6]:nth-child(6),.drag-resize button[vf-d91ad6]:nth-child(7){bottom:0;margin-bottom:-5px}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(7),.drag-resize button[vf-d91ad6]:nth-child(8){left:0;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(6){left:50%;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(8){margin-top:-5px;top:50%}.drag-resize button[vf-d91ad6]:first-child{cursor:nw-resize}.drag-resize button[vf-d91ad6]:nth-child(2){cursor:n-resize}.drag-resize button[vf-d91ad6]:nth-child(3){cursor:ne-resize}.drag-resize button[vf-d91ad6]:nth-child(4){cursor:e-resize}.drag-resize button[vf-d91ad6]:nth-child(5){cursor:se-resize}.drag-resize button[vf-d91ad6]:nth-child(6){cursor:s-resize}.drag-resize button[vf-d91ad6]:nth-child(7){cursor:sw-resize}.drag-resize button[vf-d91ad6]:nth-child(8){cursor:w-resize}.dropdown[vf-a99c5e]{display:inline-block;position:relative}.dropdown[vf-a99c5e]:hover{z-index:1}.dropdown-btn[vf-a99c5e]{display:flex;width:100%}.dropdown-btn-inner[vf-a99c5e]{flex:1}.dropdown-menu[vf-8a05e9]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);box-sizing:content-box;height:0;left:-10px;max-height:400px;opacity:0;overflow-y:auto;position:absolute;top:100%;transition-duration:0s;transition:transform .3s,opacity .3s;user-select:none;width:200px;z-index:10}.dropdown-menu[vf-8a05e9]:hover::-webkit-scrollbar-thumb{background-color:#80848f}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb{border:0;border-radius:4px;height:50px;outline:0;outline-offset:0}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb:hover{background-color:#495060;height:50px}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar{border-radius:3px;height:6px;width:6px}.dropdown-menu-content[vf-8a05e9]{box-sizing:content-box;padding:6px}.keymap[vf-c32a7b]{align-items:center;display:inline-flex;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em;margin-left:1em;opacity:.6}.keymap[vf-c32a7b] span{margin:0 2px}.menu-heading[vf-acaa5f]{font-size:14px;opacity:.5;padding:10px}.menu-item[vf-c3b9dc]{border-radius:4px;box-sizing:content-box;cursor:pointer;display:flex;font-size:14px;height:26px;justify-content:space-between;line-height:26px;padding:2px 10px;transition:background-color .2s}.menu-item-content[vf-c3b9dc]{display:flex;flex:1;justify-content:space-between}.menu-item.disabled[vf-c3b9dc]{cursor:not-allowed;opacity:.5}.menu-item[vf-c3b9dc]:hover{background:#eee}.menu-item.active[vf-c3b9dc]{background:rgba(0,0,0,.1)}.menu-icon[vf-c3b9dc]{display:inline-block;width:1.8em}.menu-check[vf-c3b9dc]{display:none}.menu-check.checked[vf-c3b9dc]{color:#296eff;display:block}.popup[vf-a23c47]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);overflow:hidden;position:absolute}.toolbar-item[vf-216815]{padding:3px}.heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}.xnote-source-code.atom-one-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.atom-one-dark code.hljs{padding:3px 5px}.xnote-source-code.atom-one-dark .hljs{background:#282c34;color:#abb2bf}.xnote-source-code.atom-one-dark .hljs-comment,.xnote-source-code.atom-one-dark .hljs-quote{color:#5c6370;font-style:italic}.xnote-source-code.atom-one-dark .hljs-doctag,.xnote-source-code.atom-one-dark .hljs-formula,.xnote-source-code.atom-one-dark .hljs-keyword{color:#c678dd}.xnote-source-code.atom-one-dark .hljs-deletion,.xnote-source-code.atom-one-dark .hljs-name,.xnote-source-code.atom-one-dark .hljs-section,.xnote-source-code.atom-one-dark .hljs-selector-tag,.xnote-source-code.atom-one-dark .hljs-subst{color:#e06c75}.xnote-source-code.atom-one-dark .hljs-literal{color:#56b6c2}.xnote-source-code.atom-one-dark .hljs-addition,.xnote-source-code.atom-one-dark .hljs-attribute,.xnote-source-code.atom-one-dark .hljs-meta .hljs-string,.xnote-source-code.atom-one-dark .hljs-regexp,.xnote-source-code.atom-one-dark .hljs-string{color:#98c379}.xnote-source-code.atom-one-dark .hljs-attr,.xnote-source-code.atom-one-dark .hljs-number,.xnote-source-code.atom-one-dark .hljs-selector-attr,.xnote-source-code.atom-one-dark .hljs-selector-class,.xnote-source-code.atom-one-dark .hljs-selector-pseudo,.xnote-source-code.atom-one-dark .hljs-template-variable,.xnote-source-code.atom-one-dark .hljs-type,.xnote-source-code.atom-one-dark .hljs-variable{color:#d19a66}.xnote-source-code.atom-one-dark .hljs-bullet,.xnote-source-code.atom-one-dark .hljs-link,.xnote-source-code.atom-one-dark .hljs-meta,.xnote-source-code.atom-one-dark .hljs-selector-id,.xnote-source-code.atom-one-dark .hljs-symbol,.xnote-source-code.atom-one-dark .hljs-title{color:#61aeee}.xnote-source-code.atom-one-dark .hljs-built_in,.xnote-source-code.atom-one-dark .hljs-class .hljs-title,.xnote-source-code.atom-one-dark .hljs-title.class_{color:#e6c07b}.xnote-source-code.atom-one-dark .hljs-emphasis{font-style:italic}.xnote-source-code.atom-one-dark .hljs-strong{font-weight:700}.xnote-source-code.atom-one-dark .hljs-link{text-decoration:underline}.xnote-source-code.foundation pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.foundation code.hljs{padding:3px 5px}.xnote-source-code.foundation .hljs{background:#eee;color:#000}.xnote-source-code.foundation .hljs-addition,.xnote-source-code.foundation .hljs-attribute,.xnote-source-code.foundation .hljs-emphasis,.xnote-source-code.foundation .hljs-link{color:#070}.xnote-source-code.foundation .hljs-emphasis{font-style:italic}.xnote-source-code.foundation .hljs-deletion,.xnote-source-code.foundation .hljs-string,.xnote-source-code.foundation .hljs-strong{color:#d14}.xnote-source-code.foundation .hljs-strong{font-weight:700}.xnote-source-code.foundation .hljs-comment,.xnote-source-code.foundation .hljs-quote{color:#998;font-style:italic}.xnote-source-code.foundation .hljs-section,.xnote-source-code.foundation .hljs-title{color:#900}.xnote-source-code.foundation .hljs-class .hljs-title,.xnote-source-code.foundation .hljs-title.class_,.xnote-source-code.foundation .hljs-type{color:#458}.xnote-source-code.foundation .hljs-template-variable,.xnote-source-code.foundation .hljs-variable{color:#369}.xnote-source-code.foundation .hljs-bullet{color:#970}.xnote-source-code.foundation .hljs-meta{color:#34b}.xnote-source-code.foundation .hljs-code,.xnote-source-code.foundation .hljs-keyword,.xnote-source-code.foundation .hljs-literal,.xnote-source-code.foundation .hljs-number,.xnote-source-code.foundation .hljs-selector-tag{color:#099}.xnote-source-code.foundation .hljs-regexp{background-color:#fff0ff;color:#808}.xnote-source-code.foundation .hljs-symbol{color:#990073}.xnote-source-code.foundation .hljs-name,.xnote-source-code.foundation .hljs-selector-class,.xnote-source-code.foundation .hljs-selector-id,.xnote-source-code.foundation .hljs-tag{color:#070}.xnote-source-code.github{
1
+ .btn[vf-d94b56]{align-items:center;background:none;border:none;border-radius:4px;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:inherit;height:28px;outline:none;padding:6px 5px;transition:all .2s}.btn>span[vf-d94b56]{white-space:nowrap}.btn[vf-d94b56]:hover{background:rgba(0,0,0,.1)}.btn-arrow[vf-d94b56]{position:relative;transform:rotate(0);transform-origin:50%;width:1em}.btn.active[vf-d94b56]{background:rgba(0,0,0,.1)}.btn.active .btn-arrow[vf-d94b56]{transform:rotate(180deg)}.btn.highlight[vf-d94b56]{background-color:rgba(41,110,255,.063);color:#296eff}.xnote-color-picker[vf-d552b9]{background-color:#fff;box-sizing:content-box!important;display:inline-block;font-size:12px;overflow:hidden;position:relative;text-align:left;user-select:none;width:165px}.xnote-color-picker.xnote-color-picker-show-palette[vf-d552b9]{height:306px}.xnote-color-picker.xnote-color-picker-show-palette .xnote-color-picker-menu[vf-d552b9]{top:0}.xnote-color-picker-preset>div[vf-d552b9]:first-child{margin-bottom:5px}.xnote-color-picker-recent-text[vf-d552b9]{color:#80848f;padding:2px}.xnote-color-picker-flex[vf-d552b9]{align-items:center;display:flex;justify-content:space-between}.xnote-color-picker-to-palette[vf-d552b9]{align-items:center;background:none;border:0;color:#333;cursor:pointer;display:flex;outline:none;padding-right:0}.xnote-color-picker-to-palette svg[vf-d552b9]{width:1em}.xnote-color-picker-to-palette[vf-d552b9]:hover{color:#296eff}.xnote-color-picker-to-palette:hover svg[vf-d552b9]{fill:#296eff}.xnote-color-picker-back-btn[vf-d552b9]{background:none;border:0;color:#333;cursor:pointer;line-height:20px;outline:none;padding:0}.xnote-color-picker-back-btn-wrap[vf-d552b9]{height:2em}.xnote-color-picker-back-btn svg[vf-d552b9]{height:1em;margin-top:-2px;width:1em}.xnote-color-picker-back-btn[vf-d552b9]:hover{color:#296eff}.xnote-color-picker-menu[vf-d552b9]{background-color:#fff;left:0;position:absolute;top:100%;transition:top .2s cubic-bezier(.36,.66,.04,1)}.xnote-color-picker-viewer[vf-d552b9]{height:160px}.xnote-color-picker-viewer-left[vf-d552b9]{float:left}.xnote-color-picker-palette[vf-d552b9]{cursor:pointer;height:130px;position:relative;width:130px}.xnote-color-picker-palette[vf-d552b9]:before{background:linear-gradient(180deg,transparent,#000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.xnote-color-picker-palette-empty[vf-d552b9]{background-color:#fff;background-image:linear-gradient(45deg,#bbbec4 25%,transparent 0,transparent 75%,#bbbec4 0,#bbbec4),linear-gradient(45deg,#bbbec4 26%,transparent 0,transparent 74%,#bbbec4 0,#bbbec4);background-position:0 0,5px 5px;background-size:10px 10px}.xnote-color-picker-palette-empty[vf-d552b9]:before{display:none}.xnote-color-picker-palette-point[vf-d552b9]{background:#fff;border:none;border-radius:50%;box-shadow:1px 1px 3px rgba(0,0,0,.2);height:1em;pointer-events:none;position:absolute;width:1em}.xnote-color-picker-viewer-alpha[vf-d552b9]{background-color:#bbbec4;background-image:linear-gradient(45deg,#fff 25%,transparent 0,transparent 75%,#fff 0,#fff),linear-gradient(45deg,#fff 26%,transparent 0,transparent 74%,#fff 0,#fff);background-position:-5px -5px,0 0;background-size:10px 10px;height:10px;margin-top:10px;position:relative}.xnote-color-picker-viewer-alpha-bar[vf-d552b9]{border-radius:inherit;cursor:pointer;height:100%;position:relative;z-index:1}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]{height:100%;left:0;position:absolute;right:0;top:0}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:after,.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:before{border-style:solid;border-width:7px 4px;contain:size style layout;content:"";height:0;left:-4px;position:absolute;width:0}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:before{border-color:#495060 transparent transparent;top:-6px}.xnote-color-picker-viewer-alpha-pointer[vf-d552b9]:after{border-color:transparent transparent #495060;top:2px}.xnote-color-picker-viewer-right[vf-d552b9]{float:left;margin-left:10px;width:20px}.xnote-color-picker-tools[vf-d552b9]{margin-bottom:10px}.xnote-color-picker-viewer-alpha-value[vf-d552b9]{font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:13px;line-height:1;margin-left:-7px;text-align:center;width:34px}.xnote-color-picker-value[vf-d552b9]{background-color:#fff;background-image:linear-gradient(45deg,#bbbec4 25%,transparent 0,transparent 75%,#bbbec4 0,#bbbec4),linear-gradient(45deg,#bbbec4 26%,transparent 0,transparent 74%,#bbbec4 0,#bbbec4);background-position:0 0,5px 5px;background-size:10px 10px;height:20px;margin-bottom:10px;width:20px}.xnote-color-picker-value-color[vf-d552b9]{height:20px;width:20px}.xnote-color-picker-hue-bar[vf-d552b9]{background:linear-gradient(red,#f90,#ff0 16.6%,#0f0 33.3%,#0ff,#00f 66.6%,#f09,red);cursor:pointer;flex:1;height:100px;position:relative;width:20px}.xnote-color-picker-hue-pointer[vf-d552b9]{bottom:0;height:0;left:0;pointer-events:none;position:absolute;top:0}.xnote-color-picker-hue-pointer[vf-d552b9]:after,.xnote-color-picker-hue-pointer[vf-d552b9]:before{border-style:solid;border-width:4px 7px;contain:size style layout;content:"";height:0;position:absolute;top:0;width:0}.xnote-color-picker-hue-pointer[vf-d552b9]:before{border-color:transparent transparent transparent #495060;right:-8px}.xnote-color-picker-hue-pointer[vf-d552b9]:after{border-color:transparent #495060 transparent transparent;left:12px}.xnote-color-picker-inputs[vf-d552b9]{color:#80848f;line-height:22px}.xnote-color-picker-inputs>div[vf-d552b9]{display:flex;padding:4px 0}.xnote-color-picker-inputs>div>div[vf-d552b9]{display:flex;flex:1;padding:0 4px}.xnote-color-picker-inputs>div>div input[vf-d552b9]{-moz-appearance:textfield;border:1px solid #e9eaec;border-radius:3px;flex:1;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:13px;height:22px;line-height:16px;margin-left:5px;outline:0;padding:3px 5px;text-align:center;width:100%}.xnote-color-picker-inputs>div>div input[vf-d552b9]:focus{border-color:#296eff;box-shadow:0 0 0 2px rgba(41,110,255,.5);z-index:1}.xnote-color-picker-inputs>div>div input[vf-d552b9]::-webkit-inner-spin-button,.xnote-color-picker-inputs>div>div input[vf-d552b9]::-webkit-outer-spin-button{-webkit-appearance:none}.xnote-color-picker-swatches[vf-d552b9]{font-size:0;padding-top:3px}.xnote-color-picker-swatches>div[vf-d552b9]{background-color:#fff;background-image:linear-gradient(45deg,#bbbec4 25%,transparent 0,transparent 75%,#bbbec4 0,#bbbec4),linear-gradient(45deg,#bbbec4 26%,transparent 0,transparent 74%,#bbbec4 0,#bbbec4);background-position:0 0,5px 5px;background-size:10px 10px;border-radius:3px;box-shadow:1px 1px 1px rgba(0,0,0,.1);box-sizing:border-box;cursor:pointer;display:inline-block;height:20px;margin-bottom:3px;margin-left:3px;transition:transform .1s;width:20px}.xnote-color-picker-swatches>div.xnote-color-picker-current[vf-d552b9]{border:1px solid rgba(0,0,0,.3);box-shadow:none}.xnote-color-picker-swatches>div[data-color=""][vf-d552b9]{background:#fff;border-left:1px solid #f8f8f9;border-top:1px solid #f8f8f9;box-sizing:border-box;overflow:hidden;position:relative}.xnote-color-picker-swatches>div[data-color=""][vf-d552b9]:after{background-color:#e74f5e;content:"";height:1px;left:0;position:absolute;right:0;top:50%;transform:rotate(-45deg) scaleX(1.5)}.xnote-color-picker-swatches>div[vf-d552b9]:hover{transform:scale(1.1)}.xnote-color-picker-btn-wrap[vf-d552b9]{padding-top:5px}.xnote-color-picker-btn[vf-d552b9]{background-color:#296eff;border:1px solid #296eff;border-radius:3px;color:#fff;cursor:pointer;display:block;font-size:13px;line-height:1.428;outline:none;padding:3px 6px;width:100%}.xnote-color-picker-btn[vf-d552b9]:hover{background-color:#0556ff;border-color:#0556ff}.xnote-color-picker-btn[vf-d552b9]:focus{background-color:#004ff5;border-color:#0556ff;box-shadow:0 0 0 2px rgba(41,110,255,.5);outline:none}.xnote-color-picker-btn[vf-d552b9]:active{background-color:#0047dc;border-color:#0556ff}.component-toolbar[vf-ac7e8d]{position:relative;z-index:3}.toolbar[vf-ac7e8d]{background:#fff;border:1px solid #dee0e3;border-radius:5px;bottom:10px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:14px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateY(10px)}.toolbar.active[vf-ac7e8d]{opacity:1;pointer-events:auto;transform:translateY(0);transition-duration:.2s;transition-property:all;transition-timing-function:ease}.divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}.drag-resize[vf-d91ad6]{position:relative;width:100%}.drag-resize .container[vf-d91ad6]{font-size:0;text-indent:0}.drag-resize .resize-tool[vf-d91ad6]{align-items:center;border:1px dashed #296eff;display:none;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.drag-resize .resize-tool.active[vf-d91ad6]{display:flex}.drag-resize .mask[vf-d91ad6]{background-color:rgba(0,0,0,.8);border-radius:3px;color:#fff;font-size:14px;padding:3px 8px;pointer-events:none;position:relative;text-indent:0;text-shadow:1px 2px 3px rgba(0,0,0,.7);user-select:none;white-space:nowrap;z-index:10}.drag-resize .btn-group[vf-d91ad6]{height:100%;left:0;position:absolute;top:0;width:100%}.drag-resize button[vf-d91ad6]{background:#fff;border:2px solid #296eff;border-radius:50%;box-sizing:border-box;cursor:pointer;font-size:0;height:14px;outline:none;padding:0;pointer-events:auto;position:absolute;width:14px}.drag-resize button[vf-d91ad6]:hover{background-color:#fff;box-shadow:0 0 0 3px rgba(18,150,219,.3)}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(3){margin-top:-5px;top:0}.drag-resize button[vf-d91ad6]:nth-child(3),.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(5){margin-right:-5px;right:0}.drag-resize button[vf-d91ad6]:nth-child(5),.drag-resize button[vf-d91ad6]:nth-child(6),.drag-resize button[vf-d91ad6]:nth-child(7){bottom:0;margin-bottom:-5px}.drag-resize button[vf-d91ad6]:first-child,.drag-resize button[vf-d91ad6]:nth-child(7),.drag-resize button[vf-d91ad6]:nth-child(8){left:0;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(2),.drag-resize button[vf-d91ad6]:nth-child(6){left:50%;margin-left:-5px}.drag-resize button[vf-d91ad6]:nth-child(4),.drag-resize button[vf-d91ad6]:nth-child(8){margin-top:-5px;top:50%}.drag-resize button[vf-d91ad6]:first-child{cursor:nw-resize}.drag-resize button[vf-d91ad6]:nth-child(2){cursor:n-resize}.drag-resize button[vf-d91ad6]:nth-child(3){cursor:ne-resize}.drag-resize button[vf-d91ad6]:nth-child(4){cursor:e-resize}.drag-resize button[vf-d91ad6]:nth-child(5){cursor:se-resize}.drag-resize button[vf-d91ad6]:nth-child(6){cursor:s-resize}.drag-resize button[vf-d91ad6]:nth-child(7){cursor:sw-resize}.drag-resize button[vf-d91ad6]:nth-child(8){cursor:w-resize}.dropdown[vf-a99c5e]{display:inline-block;position:relative}.dropdown[vf-a99c5e]:hover{z-index:1}.dropdown-btn[vf-a99c5e]{display:flex;width:100%}.dropdown-btn-inner[vf-a99c5e]{flex:1}.dropdown-menu[vf-8a05e9]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);box-sizing:content-box;height:0;left:-10px;max-height:400px;opacity:0;overflow-y:auto;position:absolute;top:100%;transition-duration:0s;transition:transform .3s,opacity .3s;user-select:none;width:200px;z-index:10}.dropdown-menu[vf-8a05e9]:hover::-webkit-scrollbar-thumb{background-color:#80848f}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb{border:0;border-radius:4px;height:50px;outline:0;outline-offset:0}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar-thumb:hover{background-color:#495060;height:50px}.dropdown-menu[vf-8a05e9]::-webkit-scrollbar{border-radius:3px;height:6px;width:6px}.dropdown-menu-content[vf-8a05e9]{box-sizing:content-box;padding:6px}.keymap[vf-c32a7b]{align-items:center;display:inline-flex;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em;margin-left:1em;opacity:.6}.keymap[vf-c32a7b] span{margin:0 2px}.menu-heading[vf-acaa5f]{font-size:14px;opacity:.5;padding:10px}.menu-item[vf-c3b9dc]{border-radius:4px;box-sizing:content-box;cursor:pointer;display:flex;font-size:14px;height:26px;justify-content:space-between;line-height:26px;padding:2px 10px;transition:background-color .2s}.menu-item-content[vf-c3b9dc]{display:flex;flex:1;justify-content:space-between}.menu-item.disabled[vf-c3b9dc]{cursor:not-allowed;opacity:.5}.menu-item[vf-c3b9dc]:hover{background:#eee}.menu-item.active[vf-c3b9dc]{background:rgba(0,0,0,.1)}.menu-icon[vf-c3b9dc]{display:inline-block;width:1.8em}.menu-check[vf-c3b9dc]{display:none}.menu-check.checked[vf-c3b9dc]{color:#296eff;display:block}.popup[vf-a23c47]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);overflow:hidden;position:absolute}.toolbar-item[vf-216815]{padding:3px}.heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}.xnote-source-code.atom-one-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.atom-one-dark code.hljs{padding:3px 5px}.xnote-source-code.atom-one-dark .hljs{background:#282c34;color:#abb2bf}.xnote-source-code.atom-one-dark .hljs-comment,.xnote-source-code.atom-one-dark .hljs-quote{color:#5c6370;font-style:italic}.xnote-source-code.atom-one-dark .hljs-doctag,.xnote-source-code.atom-one-dark .hljs-formula,.xnote-source-code.atom-one-dark .hljs-keyword{color:#c678dd}.xnote-source-code.atom-one-dark .hljs-deletion,.xnote-source-code.atom-one-dark .hljs-name,.xnote-source-code.atom-one-dark .hljs-section,.xnote-source-code.atom-one-dark .hljs-selector-tag,.xnote-source-code.atom-one-dark .hljs-subst{color:#e06c75}.xnote-source-code.atom-one-dark .hljs-literal{color:#56b6c2}.xnote-source-code.atom-one-dark .hljs-addition,.xnote-source-code.atom-one-dark .hljs-attribute,.xnote-source-code.atom-one-dark .hljs-meta .hljs-string,.xnote-source-code.atom-one-dark .hljs-regexp,.xnote-source-code.atom-one-dark .hljs-string{color:#98c379}.xnote-source-code.atom-one-dark .hljs-attr,.xnote-source-code.atom-one-dark .hljs-number,.xnote-source-code.atom-one-dark .hljs-selector-attr,.xnote-source-code.atom-one-dark .hljs-selector-class,.xnote-source-code.atom-one-dark .hljs-selector-pseudo,.xnote-source-code.atom-one-dark .hljs-template-variable,.xnote-source-code.atom-one-dark .hljs-type,.xnote-source-code.atom-one-dark .hljs-variable{color:#d19a66}.xnote-source-code.atom-one-dark .hljs-bullet,.xnote-source-code.atom-one-dark .hljs-link,.xnote-source-code.atom-one-dark .hljs-meta,.xnote-source-code.atom-one-dark .hljs-selector-id,.xnote-source-code.atom-one-dark .hljs-symbol,.xnote-source-code.atom-one-dark .hljs-title{color:#61aeee}.xnote-source-code.atom-one-dark .hljs-built_in,.xnote-source-code.atom-one-dark .hljs-class .hljs-title,.xnote-source-code.atom-one-dark .hljs-title.class_{color:#e6c07b}.xnote-source-code.atom-one-dark .hljs-emphasis{font-style:italic}.xnote-source-code.atom-one-dark .hljs-strong{font-weight:700}.xnote-source-code.atom-one-dark .hljs-link{text-decoration:underline}.xnote-source-code.foundation pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.foundation code.hljs{padding:3px 5px}.xnote-source-code.foundation .hljs{background:#eee;color:#000}.xnote-source-code.foundation .hljs-addition,.xnote-source-code.foundation .hljs-attribute,.xnote-source-code.foundation .hljs-emphasis,.xnote-source-code.foundation .hljs-link{color:#070}.xnote-source-code.foundation .hljs-emphasis{font-style:italic}.xnote-source-code.foundation .hljs-deletion,.xnote-source-code.foundation .hljs-string,.xnote-source-code.foundation .hljs-strong{color:#d14}.xnote-source-code.foundation .hljs-strong{font-weight:700}.xnote-source-code.foundation .hljs-comment,.xnote-source-code.foundation .hljs-quote{color:#998;font-style:italic}.xnote-source-code.foundation .hljs-section,.xnote-source-code.foundation .hljs-title{color:#900}.xnote-source-code.foundation .hljs-class .hljs-title,.xnote-source-code.foundation .hljs-title.class_,.xnote-source-code.foundation .hljs-type{color:#458}.xnote-source-code.foundation .hljs-template-variable,.xnote-source-code.foundation .hljs-variable{color:#369}.xnote-source-code.foundation .hljs-bullet{color:#970}.xnote-source-code.foundation .hljs-meta{color:#34b}.xnote-source-code.foundation .hljs-code,.xnote-source-code.foundation .hljs-keyword,.xnote-source-code.foundation .hljs-literal,.xnote-source-code.foundation .hljs-number,.xnote-source-code.foundation .hljs-selector-tag{color:#099}.xnote-source-code.foundation .hljs-regexp{background-color:#fff0ff;color:#808}.xnote-source-code.foundation .hljs-symbol{color:#990073}.xnote-source-code.foundation .hljs-name,.xnote-source-code.foundation .hljs-selector-class,.xnote-source-code.foundation .hljs-selector-id,.xnote-source-code.foundation .hljs-tag{color:#070}.xnote-source-code.github{
2
2
  /*!
3
3
  Theme: GitHub
4
4
  Description: Light theme as seen on github.com
package/bundles/index.esm.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
2
2
  import { withScopedCSS } from '@viewfly/scoped-css';
3
- import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, getCurrentInstance, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, watch } from '@viewfly/core';
4
- import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
3
+ import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, watch } from '@viewfly/core';
4
+ import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
5
+ import { normalizeHex, hex2Hsl, hex2Rgb, hex2Hsv, hsl2Hex, hsl2Hsv, hsl2Rgb, rgb2Hsl, rgb2Hex, rgb2Hsv, hsv2Hex, hsv2Hsl, hsv2Rgb, any2Hsl, parseCss } from '@tanbo/color';
5
6
  import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
6
7
  import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
7
8
  import { useProduce } from '@viewfly/hooks';
@@ -9,10 +10,9 @@ import highlightjs from 'highlight.js';
9
10
  import { v4 } from 'uuid';
10
11
  import Katex from 'katex';
11
12
  import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
12
- import { any2Hsl, hsl2Rgb } from '@tanbo/color';
13
13
  import { MessageBus, CollaborateModule } from '@textbus/collaborate';
14
14
 
15
- var scopedId$n = "vf-d94b56";
15
+ var scopedId$o = "vf-d94b56";
16
16
 
17
17
  /******************************************************************************
18
18
  Copyright (c) Microsoft Corporation.
@@ -145,7 +145,7 @@ function Button(props) {
145
145
  subscription.unsubscribe();
146
146
  });
147
147
  }
148
- return withScopedCSS(scopedId$n, () => {
148
+ return withScopedCSS(scopedId$o, () => {
149
149
  return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
150
150
  'btn',
151
151
  {
@@ -157,6 +157,346 @@ function Button(props) {
157
157
  });
158
158
  }
159
159
 
160
+ var scopedId$n = "vf-d552b9";
161
+
162
+ class Picker {
163
+ set hex(color) {
164
+ var _a;
165
+ const c = color ? normalizeHex(color) : null;
166
+ if (c) {
167
+ this.empty = false;
168
+ this._hex = c;
169
+ this._hsl = hex2Hsl(c);
170
+ this._rgb = hex2Rgb(c);
171
+ this._hsv = hex2Hsv(c);
172
+ this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
173
+ }
174
+ else {
175
+ this.empty = true;
176
+ }
177
+ this.resetAlpha = true;
178
+ this.onChange();
179
+ }
180
+ get hex() {
181
+ return this.empty ? null : this._hex;
182
+ }
183
+ set hsl(color) {
184
+ var _a;
185
+ if (!color || typeof color.h !== 'number' || typeof color.s !== 'number' || typeof color.l !== 'number') {
186
+ this.empty = true;
187
+ }
188
+ else {
189
+ this.empty = false;
190
+ this._hsl = color;
191
+ this._hex = hsl2Hex(color);
192
+ this._hsv = hsl2Hsv(color);
193
+ this._rgb = hsl2Rgb(color);
194
+ this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
195
+ }
196
+ this.resetAlpha = true;
197
+ this.onChange();
198
+ }
199
+ get hsl() {
200
+ return this.empty ? null : this._hsl;
201
+ }
202
+ set rgb(color) {
203
+ var _a;
204
+ if (!color || typeof color.r !== 'number' || typeof color.g !== 'number' || typeof color.b !== 'number') {
205
+ this.empty = true;
206
+ }
207
+ else {
208
+ this.empty = false;
209
+ this._rgb = color;
210
+ this._rgba = Object.assign(Object.assign({}, color), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
211
+ this._hsl = rgb2Hsl(color);
212
+ this._hex = rgb2Hex(color);
213
+ this._hsv = rgb2Hsv(color);
214
+ }
215
+ this.resetAlpha = true;
216
+ this.onChange();
217
+ }
218
+ get rgb() {
219
+ return this.empty ? null : this._rgb;
220
+ }
221
+ set rgba(color) {
222
+ if (!color ||
223
+ typeof color.r !== 'number' ||
224
+ typeof color.g !== 'number' ||
225
+ typeof color.b !== 'number' ||
226
+ typeof color.a !== 'number') {
227
+ this.empty = true;
228
+ }
229
+ else {
230
+ this.empty = false;
231
+ this._rgba = color;
232
+ this._hsl = rgb2Hsl(color);
233
+ this._hex = rgb2Hex(color);
234
+ this._hsv = rgb2Hsv(color);
235
+ }
236
+ this.onChange();
237
+ }
238
+ get rgba() {
239
+ return this.empty ? null : this._rgba;
240
+ }
241
+ set hsv(color) {
242
+ var _a;
243
+ if (!color || typeof color.h !== 'number' || typeof color.s !== 'number' || typeof color.v !== 'number') {
244
+ this.empty = true;
245
+ }
246
+ else {
247
+ this.empty = false;
248
+ this._hsv = color;
249
+ this._hex = hsv2Hex(color);
250
+ this._hsl = hsv2Hsl(color);
251
+ this._rgb = hsv2Rgb(color);
252
+ this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
253
+ }
254
+ this.resetAlpha = true;
255
+ this.onChange();
256
+ }
257
+ get hsv() {
258
+ return this.empty ? null : this._hsv;
259
+ }
260
+ constructor(onChange, value) {
261
+ this.onChange = onChange;
262
+ this._hex = '';
263
+ this._hsl = null;
264
+ this._rgb = null;
265
+ this._hsv = null;
266
+ this._rgba = null;
267
+ this.empty = false;
268
+ this.resetAlpha = true;
269
+ this.hex = value || '#f00';
270
+ }
271
+ }
272
+ const recentColors = createSignal([]);
273
+ function ColorPicker(props) {
274
+ const instance = getCurrentInstance();
275
+ const picker = new Picker(() => {
276
+ instance.markAsDirtied();
277
+ }, props.value);
278
+ const mainColors = [
279
+ '#000', '#333', '#444', '#555', '#666', '#777', '#888',
280
+ '#999', '#aaa', '#bbb', '#ccc', '#ddd', '#eee', '#fff',
281
+ ];
282
+ const colors = [
283
+ '#fec6c2', '#fee5c3', '#fefcc3', '#baf6c4', '#c3ebfe', '#c3cbfe', '#e1caff',
284
+ '#fc8e88', '#fccc88', '#fcf888', '#76ec8a', '#88d8fc', '#97a4fb', '#c098f4',
285
+ '#ff6666', '#ffb151', '#fada3a', '#18c937', '#3aaafa', '#6373e2', '#a669f7',
286
+ '#f63030', '#f88933', '#deb12a', '#038e23', '#1276cc', '#3f52ce', '#8838ed',
287
+ '#c60000', '#d86912', '#b88811', '#086508', '#144c93', '#1b2eaa', '#6117bf',
288
+ ];
289
+ function addRecentColor() {
290
+ const color = picker.hex;
291
+ if (!color) {
292
+ return;
293
+ }
294
+ const colors = recentColors().filter(item => {
295
+ return item !== color;
296
+ });
297
+ colors.unshift(color);
298
+ if (colors.length >= 7) {
299
+ colors.length = 7;
300
+ }
301
+ recentColors.set(colors);
302
+ }
303
+ const paletteRef = createRef();
304
+ function bindPaletteEvent(ev) {
305
+ const update = (ev) => {
306
+ var _a;
307
+ const position = paletteRef.current.getBoundingClientRect();
308
+ const offsetX = ev.clientX - position.left;
309
+ const offsetY = ev.clientY - position.top;
310
+ let s = offsetX / 130 * 100;
311
+ let v = 100 - offsetY / 130 * 100;
312
+ s = Math.max(0, s);
313
+ s = Math.min(100, s);
314
+ v = Math.max(0, v);
315
+ v = Math.min(100, v);
316
+ picker.resetAlpha = false;
317
+ picker.hsv = {
318
+ h: picker.hsv.h,
319
+ s,
320
+ v
321
+ };
322
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
323
+ };
324
+ update(ev);
325
+ const unMouseMove = fromEvent(document, 'mousemove').subscribe(ev => {
326
+ update(ev);
327
+ });
328
+ const unMouseUp = fromEvent(document, 'mouseup').subscribe(() => {
329
+ unMouseMove.unsubscribe();
330
+ unMouseUp.unsubscribe();
331
+ });
332
+ }
333
+ const hueBarRef = createRef();
334
+ function bindHueBarEvent(ev) {
335
+ const update = (ev) => {
336
+ var _a;
337
+ const position = hueBarRef.current.getBoundingClientRect();
338
+ let offsetY = ev.clientY - position.top;
339
+ offsetY = Math.max(0, offsetY);
340
+ offsetY = Math.min(100, offsetY);
341
+ const h = 360 / 100 * offsetY;
342
+ picker.resetAlpha = false;
343
+ picker.hsv = {
344
+ h,
345
+ s: picker.hsv.s,
346
+ v: picker.hsv.v
347
+ };
348
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
349
+ };
350
+ update(ev);
351
+ const unMouseMove = fromEvent(document, 'mousemove').subscribe(ev => {
352
+ update(ev);
353
+ });
354
+ const unMouseUp = fromEvent(document, 'mouseup').subscribe(() => {
355
+ unMouseMove.unsubscribe();
356
+ unMouseUp.unsubscribe();
357
+ });
358
+ }
359
+ const alphaBarRef = createRef();
360
+ function bindAlphaEvent(ev) {
361
+ const update = (ev) => {
362
+ var _a;
363
+ const position = alphaBarRef.current.getBoundingClientRect();
364
+ let offsetX = ev.clientX - position.left;
365
+ offsetX = Math.max(0, offsetX);
366
+ offsetX = Math.min(position.width, offsetX);
367
+ picker.rgba = Object.assign(Object.assign({}, picker.rgba), { a: offsetX / position.width });
368
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
369
+ };
370
+ update(ev);
371
+ const unMouseMove = fromEvent(document, 'mousemove').subscribe(ev => {
372
+ update(ev);
373
+ });
374
+ const unMouseUp = fromEvent(document, 'mouseup').subscribe(() => {
375
+ unMouseMove.unsubscribe();
376
+ unMouseUp.unsubscribe();
377
+ });
378
+ }
379
+ function bindInputsEvent(ev) {
380
+ var _a;
381
+ const updateByHSL = (h, s, l) => {
382
+ var _a;
383
+ picker.hex = hsl2Hex({ h, s, l });
384
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
385
+ };
386
+ const updateByRGB = (r, g, b) => {
387
+ var _a;
388
+ picker.hex = rgb2Hex({ r, g, b });
389
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
390
+ };
391
+ const el = ev.target;
392
+ const model = el.getAttribute('data-model');
393
+ if (el.type === 'number') {
394
+ const min = +el.min;
395
+ const max = +el.max;
396
+ el.value = Math.max(+el.value, min) + '';
397
+ el.value = Math.min(+el.value, max) + '';
398
+ }
399
+ const { h, s, l } = picker.hsl;
400
+ const { r, g, b } = picker.rgb;
401
+ switch (model) {
402
+ case 'H':
403
+ updateByHSL(+el.value, s, l);
404
+ break;
405
+ case 'S':
406
+ updateByHSL(h, +el.value, l);
407
+ break;
408
+ case 'L':
409
+ updateByHSL(h, s, +el.value);
410
+ break;
411
+ case 'R':
412
+ updateByRGB(+el.value, g, b);
413
+ break;
414
+ case 'G':
415
+ updateByRGB(r, +el.value, b);
416
+ break;
417
+ case 'B':
418
+ updateByRGB(r, g, +el.value);
419
+ break;
420
+ case 'HEX':
421
+ if (/^#(([0-9a-f]){3}){1,2}$/i.test(el.value)) {
422
+ picker.hex = el.value;
423
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
424
+ }
425
+ break;
426
+ }
427
+ }
428
+ const isShowPalette = createSignal(false);
429
+ function selected() {
430
+ props.onSelected(picker);
431
+ addRecentColor();
432
+ isShowPalette.set(false);
433
+ }
434
+ function bindColorOptionsEvent(ev) {
435
+ const target = ev.target;
436
+ if (!target.hasAttribute('data-color')) {
437
+ return;
438
+ }
439
+ const c = target.getAttribute('data-color');
440
+ if (/^rgba/.test(c)) {
441
+ picker.rgba = parseCss(c);
442
+ }
443
+ else {
444
+ picker.hex = c;
445
+ }
446
+ props.onSelected(picker);
447
+ addRecentColor();
448
+ }
449
+ return withScopedCSS(scopedId$n, () => {
450
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
451
+ return (jsxs("div", { onMousedown: ev => {
452
+ ev.stopPropagation();
453
+ }, class: {
454
+ 'xnote-color-picker': true,
455
+ 'xnote-color-picker-show-palette': isShowPalette()
456
+ }, children: [jsxs("div", { class: "xnote-color-picker-preset", onClick: bindColorOptionsEvent, children: [jsx("div", { class: "xnote-color-picker-swatches", style: "height: 50px", children: mainColors.map(color => {
457
+ var _a, _b, _c;
458
+ const hsl = (any2Hsl(color) || {});
459
+ return (jsx("div", { "data-color": color, class: {
460
+ 'xnote-color-picker-current': hsl.l === ((_a = picker.hsl) === null || _a === void 0 ? void 0 : _a.l) && hsl.s === ((_b = picker.hsl) === null || _b === void 0 ? void 0 : _b.s) && hsl.h === ((_c = picker.hsl) === null || _c === void 0 ? void 0 : _c.h),
461
+ }, style: {
462
+ background: color
463
+ } }));
464
+ }) }), jsx("div", { class: "xnote-color-picker-swatches", style: "height: 118px;", children: colors.map(color => {
465
+ return (jsx("div", { "data-color": color, style: {
466
+ background: color
467
+ } }));
468
+ }) }), jsx("div", { class: "xnote-color-picker-recent-text", children: "\u6700\u8FD1\u989C\u8272" }), jsx("div", { class: "xnote-color-picker-swatches", style: "height: 25px;", children: Array.from({ length: 7 }).map((_, index) => {
469
+ const colors = recentColors();
470
+ const color = colors[index] || '';
471
+ return (jsx("div", { "data-color": color || 'unknown', style: {
472
+ background: color
473
+ } }));
474
+ }) }), jsxs("div", { class: "xnote-color-picker-flex", children: [jsx("div", { class: "xnote-color-picker-swatches", children: jsx("div", { "data-color": "" }) }), jsxs("button", { type: "button", class: "xnote-color-picker-to-palette", onClick: () => {
475
+ isShowPalette.set(true);
476
+ }, children: ["\u8C03\u8272\u76D8", jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { transform: "rotate(180, 512, 512)", d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) })] })] })] }), jsxs("div", { class: "xnote-color-picker-menu", children: [jsx("div", { class: "xnote-color-picker-back-btn-wrap", children: jsxs("button", { type: "button", class: "xnote-color-picker-back-btn", onClick: () => {
477
+ isShowPalette.set(false);
478
+ }, children: [jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) }), "\u8FD4\u56DE"] }) }), jsxs("div", { class: "xnote-color-picker-viewer", children: [jsxs("div", { class: "xnote-color-picker-viewer-left", children: [jsx("div", { class: [
479
+ 'xnote-color-picker-palette',
480
+ {
481
+ 'xnote-color-picker-palette-empty': picker.empty
482
+ }
483
+ ], style: {
484
+ background: picker.empty ? '' : `linear-gradient(to right, #fff, hsl(${(_a = picker.hsv) === null || _a === void 0 ? void 0 : _a.h}, 100%, 50%))`
485
+ }, ref: paletteRef, onMousedown: bindPaletteEvent, children: jsx("div", { class: "xnote-color-picker-palette-point", style: {
486
+ left: `calc(${(_b = picker.hsv) === null || _b === void 0 ? void 0 : _b.s}% - 6px)`,
487
+ top: `calc(${100 - (((_c = picker.hsv) === null || _c === void 0 ? void 0 : _c.v) || 0)}% - 6px)`
488
+ } }) }), jsxs("div", { class: "xnote-color-picker-viewer-alpha", children: [jsx("div", { class: "xnote-color-picker-viewer-alpha-pointer", style: {
489
+ left: picker.empty ? '100%' : (((_d = picker.rgba) === null || _d === void 0 ? void 0 : _d.a) || 0) * 100 + '%',
490
+ } }), jsx("div", { class: "xnote-color-picker-viewer-alpha-bar", style: {
491
+ background: picker.empty ? '' : `linear-gradient(to right, transparent, ${picker.hex})`
492
+ }, onMousedown: bindAlphaEvent, ref: alphaBarRef })] })] }), jsxs("div", { class: "xnote-color-picker-viewer-right", children: [jsxs("div", { class: "xnote-color-picker-tools", children: [jsx("div", { class: "xnote-color-picker-value", children: jsx("div", { class: "xnote-color-picker-value-color", style: {
493
+ background: picker.empty ? '' : `rgba(${(_e = picker.rgba) === null || _e === void 0 ? void 0 : _e.r}, ${(_f = picker.rgba) === null || _f === void 0 ? void 0 : _f.g}, ${(_g = picker.rgba) === null || _g === void 0 ? void 0 : _g.b}, ${(_h = picker.rgba) === null || _h === void 0 ? void 0 : _h.a})`
494
+ } }) }), jsx("div", { class: "xnote-color-picker-hue-bar", ref: hueBarRef, onMousedown: bindHueBarEvent, children: jsx("div", { class: "xnote-color-picker-hue-pointer", style: {
495
+ top: `calc(${(((_j = picker.hsv) === null || _j === void 0 ? void 0 : _j.h) || 0) / 360 * 100}% - 4px)`
496
+ } }) })] }), jsx("div", { class: "xnote-color-picker-viewer-alpha-value", children: Number((_k = picker.rgba) === null || _k === void 0 ? void 0 : _k.a.toFixed(2)) })] })] }), jsxs("div", { class: "xnote-color-picker-inputs", onInput: bindInputsEvent, children: [jsxs("div", { class: "xnote-color-picker-hsl", children: [jsxs("div", { children: ["H ", jsx("input", { "data-model": "H", min: "0", max: "360", type: "number", value: (_l = picker.hsl) === null || _l === void 0 ? void 0 : _l.h })] }), jsxs("div", { children: ["S ", jsx("input", { "data-model": "S", min: "0", max: "100", type: "number", value: (_m = picker.hsl) === null || _m === void 0 ? void 0 : _m.s })] }), jsxs("div", { children: ["L ", jsx("input", { "data-model": "L", min: "0", max: "100", type: "number", value: (_o = picker.hsl) === null || _o === void 0 ? void 0 : _o.l })] })] }), jsxs("div", { class: "xnote-color-picker-rgb", children: [jsxs("div", { children: ["R ", jsx("input", { "data-model": "R", min: "0", max: "255", type: "number", value: (_p = picker.rgb) === null || _p === void 0 ? void 0 : _p.r })] }), jsxs("div", { children: ["G ", jsx("input", { "data-model": "G", min: "0", max: "255", type: "number", value: (_q = picker.rgb) === null || _q === void 0 ? void 0 : _q.g })] }), jsxs("div", { children: ["B ", jsx("input", { "data-model": "B", min: "0", max: "255", type: "number", value: (_r = picker.rgb) === null || _r === void 0 ? void 0 : _r.b })] })] }), jsx("div", { class: "xnote-color-picker-hex", children: jsxs("div", { children: ["HEX ", jsx("input", { "data-model": "HEX", type: "text", value: picker.hex })] }) })] }), jsx("div", { class: "xnote-color-picker-btn-wrap", children: jsx("button", { type: "button", class: "xnote-color-picker-btn", onClick: selected, children: "\u786E\u5B9A" }) })] })] }));
497
+ });
498
+ }
499
+
160
500
  var scopedId$m = "vf-ac7e8d";
161
501
 
162
502
  function ComponentToolbar(props) {
@@ -3153,7 +3493,7 @@ const backgroundColorFormatter = new Formatter('backgroundColor', {
3153
3493
  });
3154
3494
  const backgroundColorFormatLoader = {
3155
3495
  match(element) {
3156
- return !!element.style.backgroundColor;
3496
+ return element.tagName !== 'TD' && !!element.style.backgroundColor;
3157
3497
  },
3158
3498
  read(element) {
3159
3499
  return {
@@ -3966,6 +4306,36 @@ function CellAlignTool() {
3966
4306
  };
3967
4307
  }
3968
4308
 
4309
+ const cellBackgroundAttr = new Attribute('cellBackground', {
4310
+ render(node, formatValue) {
4311
+ const rgba = parseCss(formatValue);
4312
+ if (rgba) {
4313
+ const hsl = rgb2Hsl(rgba);
4314
+ if (hsl.l > 50) {
4315
+ hsl.l -= 10;
4316
+ }
4317
+ else {
4318
+ hsl.l += Math.max((50 - hsl.l) * 0.55, 10);
4319
+ }
4320
+ hsl.s *= 0.7;
4321
+ const newRgba = hsl2Rgb(hsl);
4322
+ node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a})`);
4323
+ }
4324
+ node.styles.set('backgroundColor', formatValue);
4325
+ }
4326
+ });
4327
+ const cellBackgroundAttrLoader = {
4328
+ match(element) {
4329
+ return element instanceof HTMLTableCellElement && !!element.style.backgroundColor;
4330
+ },
4331
+ read(element) {
4332
+ return {
4333
+ attribute: cellBackgroundAttr,
4334
+ value: element.style.backgroundColor
4335
+ };
4336
+ }
4337
+ };
4338
+
3969
4339
  function CellBackgroundTool() {
3970
4340
  const refreshService = inject(RefreshService);
3971
4341
  const selection = inject(Selection);
@@ -3973,16 +4343,24 @@ function CellBackgroundTool() {
3973
4343
  highlight: false,
3974
4344
  disabled: false,
3975
4345
  });
3976
- function split() {
3977
- // const commonAncestorComponent = selection.commonAncestorComponent
3978
- // if (commonAncestorComponent instanceof TableComponent) {
3979
- // const scopes = selection.getSelectedScopes()
3980
- // if (scopes.length) {
3981
- // const start = commonAncestorComponent.getCellBySlot(scopes.at(0)!.slot)
3982
- // const end = commonAncestorComponent.getCellBySlot(scopes.at(-1)!.slot)
3983
- // // Re
3984
- // }
3985
- // }
4346
+ function setColor(picker) {
4347
+ const commonAncestorComponent = selection.commonAncestorComponent;
4348
+ if (commonAncestorComponent instanceof TableComponent) {
4349
+ const slots = commonAncestorComponent.getSelectedNormalizedSlots();
4350
+ if (slots) {
4351
+ slots.map(i => {
4352
+ return i.cells.filter(t => t.visible).map(i => i.raw.slot);
4353
+ }).flat().forEach(slot => {
4354
+ const rgba = picker.rgba;
4355
+ if (rgba) {
4356
+ slot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
4357
+ }
4358
+ else {
4359
+ slot.removeAttribute(cellBackgroundAttr);
4360
+ }
4361
+ });
4362
+ }
4363
+ }
3986
4364
  }
3987
4365
  const sub = refreshService.onRefresh.subscribe(() => {
3988
4366
  const commonAncestorComponent = selection.commonAncestorComponent;
@@ -3995,7 +4373,7 @@ function CellBackgroundTool() {
3995
4373
  });
3996
4374
  return () => {
3997
4375
  const vm = viewModel();
3998
- return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsx("span", { class: "xnote-icon-palette" }) });
4376
+ return (jsx(Dropdown, { width: '177px', menu: jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsx("span", { class: "xnote-icon-palette" }) }) }));
3999
4377
  };
4000
4378
  }
4001
4379
 
@@ -4993,7 +5371,7 @@ const Toolbar = withAnnotation({
4993
5371
  opacity: p.opacity,
4994
5372
  display: editorService.hideInlineToolbar ? 'none' : '',
4995
5373
  transitionDuration: p.transitionDuration + 's'
4996
- }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxs(Fragment$1, { children: [jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table"), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) })] }));
5374
+ }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxs(Fragment$1, { children: [jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table"), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) })] }));
4997
5375
  });
4998
5376
  });
4999
5377
 
@@ -6439,6 +6817,7 @@ class Editor extends Textbus {
6439
6817
  strikeThroughFormatLoader,
6440
6818
  underlineFormatLoader
6441
6819
  ], attributeLoaders: [
6820
+ cellBackgroundAttrLoader,
6442
6821
  cellAlignAttrLoader,
6443
6822
  headingAttrLoader,
6444
6823
  textAlignAttrLoader,
@@ -6526,6 +6905,7 @@ class Editor extends Textbus {
6526
6905
  strikeThroughFormatter,
6527
6906
  underlineFormatter
6528
6907
  ], attributes: [
6908
+ cellBackgroundAttr,
6529
6909
  cellAlignAttr,
6530
6910
  headingAttr,
6531
6911
  textAlignAttr,
@@ -6586,4 +6966,4 @@ class Editor extends Textbus {
6586
6966
  }
6587
6967
  }
6588
6968
 
6589
- export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, XNoteMessageBug, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
6969
+ export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CodeTool, ColorPicker, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Picker, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, XNoteMessageBug, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, cellBackgroundAttr, cellBackgroundAttrLoader, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
package/bundles/index.js CHANGED
@@ -4,6 +4,7 @@ var jsxRuntime = require('@viewfly/core/jsx-runtime');
4
4
  var scopedCss = require('@viewfly/scoped-css');
5
5
  var core = require('@viewfly/core');
6
6
  var core$1 = require('@textbus/core');
7
+ var color = require('@tanbo/color');
7
8
  var platformBrowser = require('@textbus/platform-browser');
8
9
  var platformBrowser$1 = require('@viewfly/platform-browser');
9
10
  var hooks = require('@viewfly/hooks');
@@ -11,10 +12,9 @@ var highlightjs = require('highlight.js');
11
12
  var uuid = require('uuid');
12
13
  var Katex = require('katex');
13
14
  var adapterViewfly = require('@textbus/adapter-viewfly');
14
- var color = require('@tanbo/color');
15
15
  var collaborate = require('@textbus/collaborate');
16
16
 
17
- var scopedId$n = "vf-d94b56";
17
+ var scopedId$o = "vf-d94b56";
18
18
 
19
19
  /******************************************************************************
20
20
  Copyright (c) Microsoft Corporation.
@@ -147,7 +147,7 @@ function Button(props) {
147
147
  subscription.unsubscribe();
148
148
  });
149
149
  }
150
- return scopedCss.withScopedCSS(scopedId$n, () => {
150
+ return scopedCss.withScopedCSS(scopedId$o, () => {
151
151
  return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
152
152
  'btn',
153
153
  {
@@ -159,6 +159,346 @@ function Button(props) {
159
159
  });
160
160
  }
161
161
 
162
+ var scopedId$n = "vf-d552b9";
163
+
164
+ class Picker {
165
+ set hex(color$1) {
166
+ var _a;
167
+ const c = color$1 ? color.normalizeHex(color$1) : null;
168
+ if (c) {
169
+ this.empty = false;
170
+ this._hex = c;
171
+ this._hsl = color.hex2Hsl(c);
172
+ this._rgb = color.hex2Rgb(c);
173
+ this._hsv = color.hex2Hsv(c);
174
+ this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
175
+ }
176
+ else {
177
+ this.empty = true;
178
+ }
179
+ this.resetAlpha = true;
180
+ this.onChange();
181
+ }
182
+ get hex() {
183
+ return this.empty ? null : this._hex;
184
+ }
185
+ set hsl(color$1) {
186
+ var _a;
187
+ if (!color$1 || typeof color$1.h !== 'number' || typeof color$1.s !== 'number' || typeof color$1.l !== 'number') {
188
+ this.empty = true;
189
+ }
190
+ else {
191
+ this.empty = false;
192
+ this._hsl = color$1;
193
+ this._hex = color.hsl2Hex(color$1);
194
+ this._hsv = color.hsl2Hsv(color$1);
195
+ this._rgb = color.hsl2Rgb(color$1);
196
+ this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
197
+ }
198
+ this.resetAlpha = true;
199
+ this.onChange();
200
+ }
201
+ get hsl() {
202
+ return this.empty ? null : this._hsl;
203
+ }
204
+ set rgb(color$1) {
205
+ var _a;
206
+ if (!color$1 || typeof color$1.r !== 'number' || typeof color$1.g !== 'number' || typeof color$1.b !== 'number') {
207
+ this.empty = true;
208
+ }
209
+ else {
210
+ this.empty = false;
211
+ this._rgb = color$1;
212
+ this._rgba = Object.assign(Object.assign({}, color$1), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
213
+ this._hsl = color.rgb2Hsl(color$1);
214
+ this._hex = color.rgb2Hex(color$1);
215
+ this._hsv = color.rgb2Hsv(color$1);
216
+ }
217
+ this.resetAlpha = true;
218
+ this.onChange();
219
+ }
220
+ get rgb() {
221
+ return this.empty ? null : this._rgb;
222
+ }
223
+ set rgba(color$1) {
224
+ if (!color$1 ||
225
+ typeof color$1.r !== 'number' ||
226
+ typeof color$1.g !== 'number' ||
227
+ typeof color$1.b !== 'number' ||
228
+ typeof color$1.a !== 'number') {
229
+ this.empty = true;
230
+ }
231
+ else {
232
+ this.empty = false;
233
+ this._rgba = color$1;
234
+ this._hsl = color.rgb2Hsl(color$1);
235
+ this._hex = color.rgb2Hex(color$1);
236
+ this._hsv = color.rgb2Hsv(color$1);
237
+ }
238
+ this.onChange();
239
+ }
240
+ get rgba() {
241
+ return this.empty ? null : this._rgba;
242
+ }
243
+ set hsv(color$1) {
244
+ var _a;
245
+ if (!color$1 || typeof color$1.h !== 'number' || typeof color$1.s !== 'number' || typeof color$1.v !== 'number') {
246
+ this.empty = true;
247
+ }
248
+ else {
249
+ this.empty = false;
250
+ this._hsv = color$1;
251
+ this._hex = color.hsv2Hex(color$1);
252
+ this._hsl = color.hsv2Hsl(color$1);
253
+ this._rgb = color.hsv2Rgb(color$1);
254
+ this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
255
+ }
256
+ this.resetAlpha = true;
257
+ this.onChange();
258
+ }
259
+ get hsv() {
260
+ return this.empty ? null : this._hsv;
261
+ }
262
+ constructor(onChange, value) {
263
+ this.onChange = onChange;
264
+ this._hex = '';
265
+ this._hsl = null;
266
+ this._rgb = null;
267
+ this._hsv = null;
268
+ this._rgba = null;
269
+ this.empty = false;
270
+ this.resetAlpha = true;
271
+ this.hex = value || '#f00';
272
+ }
273
+ }
274
+ const recentColors = core.createSignal([]);
275
+ function ColorPicker(props) {
276
+ const instance = core.getCurrentInstance();
277
+ const picker = new Picker(() => {
278
+ instance.markAsDirtied();
279
+ }, props.value);
280
+ const mainColors = [
281
+ '#000', '#333', '#444', '#555', '#666', '#777', '#888',
282
+ '#999', '#aaa', '#bbb', '#ccc', '#ddd', '#eee', '#fff',
283
+ ];
284
+ const colors = [
285
+ '#fec6c2', '#fee5c3', '#fefcc3', '#baf6c4', '#c3ebfe', '#c3cbfe', '#e1caff',
286
+ '#fc8e88', '#fccc88', '#fcf888', '#76ec8a', '#88d8fc', '#97a4fb', '#c098f4',
287
+ '#ff6666', '#ffb151', '#fada3a', '#18c937', '#3aaafa', '#6373e2', '#a669f7',
288
+ '#f63030', '#f88933', '#deb12a', '#038e23', '#1276cc', '#3f52ce', '#8838ed',
289
+ '#c60000', '#d86912', '#b88811', '#086508', '#144c93', '#1b2eaa', '#6117bf',
290
+ ];
291
+ function addRecentColor() {
292
+ const color = picker.hex;
293
+ if (!color) {
294
+ return;
295
+ }
296
+ const colors = recentColors().filter(item => {
297
+ return item !== color;
298
+ });
299
+ colors.unshift(color);
300
+ if (colors.length >= 7) {
301
+ colors.length = 7;
302
+ }
303
+ recentColors.set(colors);
304
+ }
305
+ const paletteRef = core.createRef();
306
+ function bindPaletteEvent(ev) {
307
+ const update = (ev) => {
308
+ var _a;
309
+ const position = paletteRef.current.getBoundingClientRect();
310
+ const offsetX = ev.clientX - position.left;
311
+ const offsetY = ev.clientY - position.top;
312
+ let s = offsetX / 130 * 100;
313
+ let v = 100 - offsetY / 130 * 100;
314
+ s = Math.max(0, s);
315
+ s = Math.min(100, s);
316
+ v = Math.max(0, v);
317
+ v = Math.min(100, v);
318
+ picker.resetAlpha = false;
319
+ picker.hsv = {
320
+ h: picker.hsv.h,
321
+ s,
322
+ v
323
+ };
324
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
325
+ };
326
+ update(ev);
327
+ const unMouseMove = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
328
+ update(ev);
329
+ });
330
+ const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
331
+ unMouseMove.unsubscribe();
332
+ unMouseUp.unsubscribe();
333
+ });
334
+ }
335
+ const hueBarRef = core.createRef();
336
+ function bindHueBarEvent(ev) {
337
+ const update = (ev) => {
338
+ var _a;
339
+ const position = hueBarRef.current.getBoundingClientRect();
340
+ let offsetY = ev.clientY - position.top;
341
+ offsetY = Math.max(0, offsetY);
342
+ offsetY = Math.min(100, offsetY);
343
+ const h = 360 / 100 * offsetY;
344
+ picker.resetAlpha = false;
345
+ picker.hsv = {
346
+ h,
347
+ s: picker.hsv.s,
348
+ v: picker.hsv.v
349
+ };
350
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
351
+ };
352
+ update(ev);
353
+ const unMouseMove = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
354
+ update(ev);
355
+ });
356
+ const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
357
+ unMouseMove.unsubscribe();
358
+ unMouseUp.unsubscribe();
359
+ });
360
+ }
361
+ const alphaBarRef = core.createRef();
362
+ function bindAlphaEvent(ev) {
363
+ const update = (ev) => {
364
+ var _a;
365
+ const position = alphaBarRef.current.getBoundingClientRect();
366
+ let offsetX = ev.clientX - position.left;
367
+ offsetX = Math.max(0, offsetX);
368
+ offsetX = Math.min(position.width, offsetX);
369
+ picker.rgba = Object.assign(Object.assign({}, picker.rgba), { a: offsetX / position.width });
370
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
371
+ };
372
+ update(ev);
373
+ const unMouseMove = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
374
+ update(ev);
375
+ });
376
+ const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
377
+ unMouseMove.unsubscribe();
378
+ unMouseUp.unsubscribe();
379
+ });
380
+ }
381
+ function bindInputsEvent(ev) {
382
+ var _a;
383
+ const updateByHSL = (h, s, l) => {
384
+ var _a;
385
+ picker.hex = color.hsl2Hex({ h, s, l });
386
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
387
+ };
388
+ const updateByRGB = (r, g, b) => {
389
+ var _a;
390
+ picker.hex = color.rgb2Hex({ r, g, b });
391
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
392
+ };
393
+ const el = ev.target;
394
+ const model = el.getAttribute('data-model');
395
+ if (el.type === 'number') {
396
+ const min = +el.min;
397
+ const max = +el.max;
398
+ el.value = Math.max(+el.value, min) + '';
399
+ el.value = Math.min(+el.value, max) + '';
400
+ }
401
+ const { h, s, l } = picker.hsl;
402
+ const { r, g, b } = picker.rgb;
403
+ switch (model) {
404
+ case 'H':
405
+ updateByHSL(+el.value, s, l);
406
+ break;
407
+ case 'S':
408
+ updateByHSL(h, +el.value, l);
409
+ break;
410
+ case 'L':
411
+ updateByHSL(h, s, +el.value);
412
+ break;
413
+ case 'R':
414
+ updateByRGB(+el.value, g, b);
415
+ break;
416
+ case 'G':
417
+ updateByRGB(r, +el.value, b);
418
+ break;
419
+ case 'B':
420
+ updateByRGB(r, g, +el.value);
421
+ break;
422
+ case 'HEX':
423
+ if (/^#(([0-9a-f]){3}){1,2}$/i.test(el.value)) {
424
+ picker.hex = el.value;
425
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
426
+ }
427
+ break;
428
+ }
429
+ }
430
+ const isShowPalette = core.createSignal(false);
431
+ function selected() {
432
+ props.onSelected(picker);
433
+ addRecentColor();
434
+ isShowPalette.set(false);
435
+ }
436
+ function bindColorOptionsEvent(ev) {
437
+ const target = ev.target;
438
+ if (!target.hasAttribute('data-color')) {
439
+ return;
440
+ }
441
+ const c = target.getAttribute('data-color');
442
+ if (/^rgba/.test(c)) {
443
+ picker.rgba = color.parseCss(c);
444
+ }
445
+ else {
446
+ picker.hex = c;
447
+ }
448
+ props.onSelected(picker);
449
+ addRecentColor();
450
+ }
451
+ return scopedCss.withScopedCSS(scopedId$n, () => {
452
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
453
+ return (jsxRuntime.jsxs("div", { onMousedown: ev => {
454
+ ev.stopPropagation();
455
+ }, class: {
456
+ 'xnote-color-picker': true,
457
+ 'xnote-color-picker-show-palette': isShowPalette()
458
+ }, children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-preset", onClick: bindColorOptionsEvent, children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 50px", children: mainColors.map(color$1 => {
459
+ var _a, _b, _c;
460
+ const hsl = (color.any2Hsl(color$1) || {});
461
+ return (jsxRuntime.jsx("div", { "data-color": color$1, class: {
462
+ 'xnote-color-picker-current': hsl.l === ((_a = picker.hsl) === null || _a === void 0 ? void 0 : _a.l) && hsl.s === ((_b = picker.hsl) === null || _b === void 0 ? void 0 : _b.s) && hsl.h === ((_c = picker.hsl) === null || _c === void 0 ? void 0 : _c.h),
463
+ }, style: {
464
+ background: color$1
465
+ } }));
466
+ }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 118px;", children: colors.map(color => {
467
+ return (jsxRuntime.jsx("div", { "data-color": color, style: {
468
+ background: color
469
+ } }));
470
+ }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-recent-text", children: "\u6700\u8FD1\u989C\u8272" }), jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 25px;", children: Array.from({ length: 7 }).map((_, index) => {
471
+ const colors = recentColors();
472
+ const color = colors[index] || '';
473
+ return (jsxRuntime.jsx("div", { "data-color": color || 'unknown', style: {
474
+ background: color
475
+ } }));
476
+ }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-flex", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", children: jsxRuntime.jsx("div", { "data-color": "" }) }), jsxRuntime.jsxs("button", { type: "button", class: "xnote-color-picker-to-palette", onClick: () => {
477
+ isShowPalette.set(true);
478
+ }, children: ["\u8C03\u8272\u76D8", jsxRuntime.jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { transform: "rotate(180, 512, 512)", d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) })] })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-menu", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-back-btn-wrap", children: jsxRuntime.jsxs("button", { type: "button", class: "xnote-color-picker-back-btn", onClick: () => {
479
+ isShowPalette.set(false);
480
+ }, children: [jsxRuntime.jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) }), "\u8FD4\u56DE"] }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer", children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-left", children: [jsxRuntime.jsx("div", { class: [
481
+ 'xnote-color-picker-palette',
482
+ {
483
+ 'xnote-color-picker-palette-empty': picker.empty
484
+ }
485
+ ], style: {
486
+ background: picker.empty ? '' : `linear-gradient(to right, #fff, hsl(${(_a = picker.hsv) === null || _a === void 0 ? void 0 : _a.h}, 100%, 50%))`
487
+ }, ref: paletteRef, onMousedown: bindPaletteEvent, children: jsxRuntime.jsx("div", { class: "xnote-color-picker-palette-point", style: {
488
+ left: `calc(${(_b = picker.hsv) === null || _b === void 0 ? void 0 : _b.s}% - 6px)`,
489
+ top: `calc(${100 - (((_c = picker.hsv) === null || _c === void 0 ? void 0 : _c.v) || 0)}% - 6px)`
490
+ } }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-alpha", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-pointer", style: {
491
+ left: picker.empty ? '100%' : (((_d = picker.rgba) === null || _d === void 0 ? void 0 : _d.a) || 0) * 100 + '%',
492
+ } }), jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-bar", style: {
493
+ background: picker.empty ? '' : `linear-gradient(to right, transparent, ${picker.hex})`
494
+ }, onMousedown: bindAlphaEvent, ref: alphaBarRef })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-right", children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-tools", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-value", children: jsxRuntime.jsx("div", { class: "xnote-color-picker-value-color", style: {
495
+ background: picker.empty ? '' : `rgba(${(_e = picker.rgba) === null || _e === void 0 ? void 0 : _e.r}, ${(_f = picker.rgba) === null || _f === void 0 ? void 0 : _f.g}, ${(_g = picker.rgba) === null || _g === void 0 ? void 0 : _g.b}, ${(_h = picker.rgba) === null || _h === void 0 ? void 0 : _h.a})`
496
+ } }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-hue-bar", ref: hueBarRef, onMousedown: bindHueBarEvent, children: jsxRuntime.jsx("div", { class: "xnote-color-picker-hue-pointer", style: {
497
+ top: `calc(${(((_j = picker.hsv) === null || _j === void 0 ? void 0 : _j.h) || 0) / 360 * 100}% - 4px)`
498
+ } }) })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-value", children: Number((_k = picker.rgba) === null || _k === void 0 ? void 0 : _k.a.toFixed(2)) })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-inputs", onInput: bindInputsEvent, children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-hsl", children: [jsxRuntime.jsxs("div", { children: ["H ", jsxRuntime.jsx("input", { "data-model": "H", min: "0", max: "360", type: "number", value: (_l = picker.hsl) === null || _l === void 0 ? void 0 : _l.h })] }), jsxRuntime.jsxs("div", { children: ["S ", jsxRuntime.jsx("input", { "data-model": "S", min: "0", max: "100", type: "number", value: (_m = picker.hsl) === null || _m === void 0 ? void 0 : _m.s })] }), jsxRuntime.jsxs("div", { children: ["L ", jsxRuntime.jsx("input", { "data-model": "L", min: "0", max: "100", type: "number", value: (_o = picker.hsl) === null || _o === void 0 ? void 0 : _o.l })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-rgb", children: [jsxRuntime.jsxs("div", { children: ["R ", jsxRuntime.jsx("input", { "data-model": "R", min: "0", max: "255", type: "number", value: (_p = picker.rgb) === null || _p === void 0 ? void 0 : _p.r })] }), jsxRuntime.jsxs("div", { children: ["G ", jsxRuntime.jsx("input", { "data-model": "G", min: "0", max: "255", type: "number", value: (_q = picker.rgb) === null || _q === void 0 ? void 0 : _q.g })] }), jsxRuntime.jsxs("div", { children: ["B ", jsxRuntime.jsx("input", { "data-model": "B", min: "0", max: "255", type: "number", value: (_r = picker.rgb) === null || _r === void 0 ? void 0 : _r.b })] })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-hex", children: jsxRuntime.jsxs("div", { children: ["HEX ", jsxRuntime.jsx("input", { "data-model": "HEX", type: "text", value: picker.hex })] }) })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-btn-wrap", children: jsxRuntime.jsx("button", { type: "button", class: "xnote-color-picker-btn", onClick: selected, children: "\u786E\u5B9A" }) })] })] }));
499
+ });
500
+ }
501
+
162
502
  var scopedId$m = "vf-ac7e8d";
163
503
 
164
504
  function ComponentToolbar(props) {
@@ -3155,7 +3495,7 @@ const backgroundColorFormatter = new core$1.Formatter('backgroundColor', {
3155
3495
  });
3156
3496
  const backgroundColorFormatLoader = {
3157
3497
  match(element) {
3158
- return !!element.style.backgroundColor;
3498
+ return element.tagName !== 'TD' && !!element.style.backgroundColor;
3159
3499
  },
3160
3500
  read(element) {
3161
3501
  return {
@@ -3968,6 +4308,36 @@ function CellAlignTool() {
3968
4308
  };
3969
4309
  }
3970
4310
 
4311
+ const cellBackgroundAttr = new core$1.Attribute('cellBackground', {
4312
+ render(node, formatValue) {
4313
+ const rgba = color.parseCss(formatValue);
4314
+ if (rgba) {
4315
+ const hsl = color.rgb2Hsl(rgba);
4316
+ if (hsl.l > 50) {
4317
+ hsl.l -= 10;
4318
+ }
4319
+ else {
4320
+ hsl.l += Math.max((50 - hsl.l) * 0.55, 10);
4321
+ }
4322
+ hsl.s *= 0.7;
4323
+ const newRgba = color.hsl2Rgb(hsl);
4324
+ node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a})`);
4325
+ }
4326
+ node.styles.set('backgroundColor', formatValue);
4327
+ }
4328
+ });
4329
+ const cellBackgroundAttrLoader = {
4330
+ match(element) {
4331
+ return element instanceof HTMLTableCellElement && !!element.style.backgroundColor;
4332
+ },
4333
+ read(element) {
4334
+ return {
4335
+ attribute: cellBackgroundAttr,
4336
+ value: element.style.backgroundColor
4337
+ };
4338
+ }
4339
+ };
4340
+
3971
4341
  function CellBackgroundTool() {
3972
4342
  const refreshService = core.inject(exports.RefreshService);
3973
4343
  const selection = core.inject(core$1.Selection);
@@ -3975,16 +4345,24 @@ function CellBackgroundTool() {
3975
4345
  highlight: false,
3976
4346
  disabled: false,
3977
4347
  });
3978
- function split() {
3979
- // const commonAncestorComponent = selection.commonAncestorComponent
3980
- // if (commonAncestorComponent instanceof TableComponent) {
3981
- // const scopes = selection.getSelectedScopes()
3982
- // if (scopes.length) {
3983
- // const start = commonAncestorComponent.getCellBySlot(scopes.at(0)!.slot)
3984
- // const end = commonAncestorComponent.getCellBySlot(scopes.at(-1)!.slot)
3985
- // // Re
3986
- // }
3987
- // }
4348
+ function setColor(picker) {
4349
+ const commonAncestorComponent = selection.commonAncestorComponent;
4350
+ if (commonAncestorComponent instanceof TableComponent) {
4351
+ const slots = commonAncestorComponent.getSelectedNormalizedSlots();
4352
+ if (slots) {
4353
+ slots.map(i => {
4354
+ return i.cells.filter(t => t.visible).map(i => i.raw.slot);
4355
+ }).flat().forEach(slot => {
4356
+ const rgba = picker.rgba;
4357
+ if (rgba) {
4358
+ slot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
4359
+ }
4360
+ else {
4361
+ slot.removeAttribute(cellBackgroundAttr);
4362
+ }
4363
+ });
4364
+ }
4365
+ }
3988
4366
  }
3989
4367
  const sub = refreshService.onRefresh.subscribe(() => {
3990
4368
  const commonAncestorComponent = selection.commonAncestorComponent;
@@ -3997,7 +4375,7 @@ function CellBackgroundTool() {
3997
4375
  });
3998
4376
  return () => {
3999
4377
  const vm = viewModel();
4000
- return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) });
4378
+ return (jsxRuntime.jsx(Dropdown, { width: '177px', menu: jsxRuntime.jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
4001
4379
  };
4002
4380
  }
4003
4381
 
@@ -4995,7 +5373,7 @@ const Toolbar = core.withAnnotation({
4995
5373
  opacity: p.opacity,
4996
5374
  display: editorService.hideInlineToolbar ? 'none' : '',
4997
5375
  transitionDuration: p.transitionDuration + 's'
4998
- }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
5376
+ }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
4999
5377
  });
5000
5378
  });
5001
5379
 
@@ -6441,6 +6819,7 @@ class Editor extends core$1.Textbus {
6441
6819
  strikeThroughFormatLoader,
6442
6820
  underlineFormatLoader
6443
6821
  ], attributeLoaders: [
6822
+ cellBackgroundAttrLoader,
6444
6823
  cellAlignAttrLoader,
6445
6824
  headingAttrLoader,
6446
6825
  textAlignAttrLoader,
@@ -6528,6 +6907,7 @@ class Editor extends core$1.Textbus {
6528
6907
  strikeThroughFormatter,
6529
6908
  underlineFormatter
6530
6909
  ], attributes: [
6910
+ cellBackgroundAttr,
6531
6911
  cellAlignAttr,
6532
6912
  headingAttr,
6533
6913
  textAlignAttr,
@@ -6599,6 +6979,7 @@ exports.Button = Button;
6599
6979
  exports.CellAlignTool = CellAlignTool;
6600
6980
  exports.CellBackgroundTool = CellBackgroundTool;
6601
6981
  exports.CodeTool = CodeTool;
6982
+ exports.ColorPicker = ColorPicker;
6602
6983
  exports.ColorTool = ColorTool;
6603
6984
  exports.ComponentToolbar = ComponentToolbar;
6604
6985
  exports.Divider = Divider;
@@ -6632,6 +7013,7 @@ exports.Organization = Organization;
6632
7013
  exports.OutputInjectionToken = OutputInjectionToken;
6633
7014
  exports.ParagraphComponent = ParagraphComponent;
6634
7015
  exports.ParagraphView = ParagraphView;
7016
+ exports.Picker = Picker;
6635
7017
  exports.Popup = Popup;
6636
7018
  exports.RootComponent = RootComponent;
6637
7019
  exports.RootView = RootView;
@@ -6658,6 +7040,8 @@ exports.boldFormatLoader = boldFormatLoader;
6658
7040
  exports.boldFormatter = boldFormatter;
6659
7041
  exports.cellAlignAttr = cellAlignAttr;
6660
7042
  exports.cellAlignAttrLoader = cellAlignAttrLoader;
7043
+ exports.cellBackgroundAttr = cellBackgroundAttr;
7044
+ exports.cellBackgroundAttrLoader = cellBackgroundAttrLoader;
6661
7045
  exports.codeFormatLoader = codeFormatLoader;
6662
7046
  exports.codeFormatter = codeFormatter;
6663
7047
  exports.colorFormatLoader = colorFormatLoader;
package/bundles/textbus/attributes/_api.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './cell-align.attr';
2
+ export * from './cell-background.attr';
2
3
  export * from './heading.attr';
3
4
  export * from './text-align.attr';
4
5
  export * from './text-indent.attr';
package/bundles/textbus/attributes/cell-background.attr.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Attribute } from '@textbus/core';
2
+ import { AttributeLoader } from '@textbus/platform-browser';
3
+ export declare const cellBackgroundAttr: Attribute<string>;
4
+ export declare const cellBackgroundAttrLoader: AttributeLoader<string>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@textbus/xnote",
3
- "version": "0.0.11",
3
+ "version": "0.1.0",
4
4
  "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
5
5
  "main": "./bundles/index.js",
6
6
  "module": "./bundles/index.esm.js",
@@ -33,7 +33,7 @@
33
33
  "@textbus/platform-browser": "^4.2.0",
34
34
  "@viewfly/core": "^1.0.5",
35
35
  "@viewfly/hooks": "^1.0.5",
36
- "@viewfly/platform-browser": "^1.0.5",
36
+ "@viewfly/platform-browser": "^1.0.6",
37
37
  "@viewfly/scoped-css": "^1.0.5",
38
38
  "highlight.js": "^11.9.0",
39
39
  "katex": "^0.16.10",