@hufe921/canvas-editor 0.9.9 → 0.9.11

package/dist/canvas-editor.es.js

@@ -1,4 +1,4 @@
-(()=>{(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode('.select-control-popup{max-width:160px;min-width:69px;max-height:225px;position:absolute;z-index:1;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px #0000001a;box-sizing:border-box;margin:5px 0;overflow-y:auto}.select-control-popup ul{list-style:none;padding:3px 0;margin:0;box-sizing:border-box}.select-control-popup ul li{font-size:13px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#666;height:36px;line-height:36px;box-sizing:border-box;cursor:pointer}.select-control-popup ul li:hover{background-color:#eef2fd}.select-control-popup ul li.active{color:var(--COLOR-HOVER, #5175f4);font-weight:700}.date-container{display:none;width:300px;overflow:hidden;left:0;right:0;position:absolute;z-index:1;color:#606266;background:#ffffff;border-radius:4px;padding:10px;user-select:none;border:1px solid #e4e7ed;box-shadow:0 2px 12px #0000001a}.date-container.active{display:block}.date-wrap{display:none}.date-wrap.active{display:block}.date-title{display:flex;justify-content:center;align-items:center;text-align:center;color:#606266;font-size:16px}.date-title>span{display:inline-block}.date-title>span:not(.date-title__now){font-family:cursive;cursor:pointer}.date-title>span:not(.date-title__now):hover{color:#5175f4}.date-title .date-title__pre-year,.date-title .date-title__pre-month{width:15%}.date-title .date-title__now{width:40%}.date-title .date-title__next-year,.date-title .date-title__next-month{width:15%}.date-week{width:100%;display:flex;justify-content:center;margin-top:15px;padding-bottom:5px;border-bottom:1px solid #e4e7ed}.date-week>span{list-style:none;width:14.28571%;text-align:center;color:#606266;font-size:14px}.date-day{width:100%;display:flex;flex-wrap:wrap;align-items:center;margin-top:5px}.date-day>div{width:14.28571%;height:40px;text-align:center;color:#606266;font-size:14px;cursor:pointer;line-height:40px;border-radius:4px}.date-day>div:hover{color:#5175f4;opacity:.8}.date-day>div.active{color:#5175f4;font-weight:700}.date-day>div.disable{color:#c0c4cc}.date-day>div.select{color:#fff;background-color:#5175f4}.time-wrap{display:none;padding:10px;height:286px}.time-wrap ::-webkit-scrollbar{width:0}.time-wrap.active{display:flex}.time-wrap li{list-style:none}.time-wrap>li{width:33.3%;height:100%;text-align:center}.time-wrap>li>span{transform:translateY(-5px);display:inline-block}.time-wrap>li>ol{height:calc(100% - 20px);overflow-y:auto;border:1px solid #e2e2e2;position:relative}.time-wrap>li:first-child>ol{border-right:0}.time-wrap>li:last-child>ol{border-left:0}.time-wrap>li>ol>li{line-height:30px;cursor:pointer;transition:all .3s}.time-wrap>li>ol>li:hover{background-color:#eaeaea}.time-wrap>li>ol>li.active{color:#fff;background:#5175F4}.date-menu{width:100%;height:28px;display:flex;justify-content:flex-end;align-items:center;padding-top:10px;position:relative;border-top:1px solid #e4e7ed}.date-menu button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;appearance:none;text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:500;user-select:none;padding:7px 15px;font-size:12px;border-radius:3px;margin:0 0 0 10px}.date-menu button:hover{color:#5175f4;border-color:#5175f4}.date-menu button.date-menu__time{border:1px solid transparent;position:absolute;left:0;margin-left:0}.date-menu button.date-menu__time:hover{color:#5175f4}.block-item{position:absolute;z-index:0;overflow:hidden;border-radius:8px;background-color:#fff;border:1px solid rgb(235 236 240)}.inputarea{width:0;height:12px;min-width:0;min-height:0;margin:0;padding:0;left:0;right:0;letter-spacing:0;font-size:12px;position:absolute;outline:none;resize:none;border:none;overflow:hidden;color:transparent;user-select:none;background-color:transparent}.cursor{width:1px;height:20px;left:0;right:0;position:absolute;outline:none;background-color:#000;pointer-events:none}.cursor--animation{animation-duration:1s;animation-iteration-count:infinite;animation-name:cursorAnimation}@keyframes cursorAnimation{0%{opacity:1}13%{opacity:0}50%{opacity:0}63%{opacity:1}to{opacity:1}}.resizer-selection{position:absolute;border:1px solid}.resizer-selection>div{position:absolute;width:10px;height:10px;box-shadow:0 1px 4px #0000004d;border-radius:5px;border:2px solid #ffffff;box-sizing:border-box}.resizer-selection .handle-0{cursor:nw-resize}.resizer-selection .handle-1{cursor:n-resize}.resizer-selection .handle-2{cursor:ne-resize}.resizer-selection .handle-3{cursor:e-resize}.resizer-selection .handle-4{cursor:se-resize}.resizer-selection .handle-5{cursor:s-resize}.resizer-selection .handle-6{cursor:sw-resize}.resizer-selection .handle-7{cursor:w-resize}.resizer-image{position:absolute;opacity:.5}.image-previewer{position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;overflow:hidden;background:#f2f4f7;display:flex;align-items:center;justify-content:center;animation:previewerAnimation .3s}@keyframes previewerAnimation{0%{opacity:.1}to{opacity:1}}.image-previewer .image-close{width:24px;height:24px;display:inline-block;position:absolute;right:50px;top:30px;z-index:99;cursor:pointer;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIzLjk3IDdsMS40MTUgMS40MTQtNy43NzkgNy43NzggNy43NzkgNy43NzktMS40MTQgMS40MTQtNy43NzktNy43NzktNy43NzggNy43NzlMNyAyMy45N2w3Ljc3OC03Ljc3OUw3IDguNDE0IDguNDE0IDdsNy43NzggNy43NzhMMjMuOTcxIDd6IiBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=) no-repeat;background-size:100% 100%;transition:all .3s;border-radius:50%}.image-previewer .image-close:hover{background-color:#e2e6ed}.image-previewer .image-container{position:relative}.image-previewer .image-container img{cursor:move;position:relative}.image-previewer .image-menu{height:50px;position:absolute;bottom:50px;z-index:99;display:flex;align-items:center;justify-content:center}.image-previewer .image-menu i{width:32px;height:32px;margin:0 8px;cursor:pointer;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;transition:all .3s;border-radius:50%}.image-previewer .image-menu i:hover{background-color:#e2e6ed}.image-previewer .image-menu i.zoom-in{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0IDE0di00aDJ2NGg0djJoLTR2NGgtMnYtNGgtNHYtMmg0em04Ljc0OSAxMC4xNjNBMTEuOTUyIDExLjk1MiAwIDAxMTUgMjdDOC4zNzMgMjcgMyAyMS42MjcgMyAxNVM4LjM3MyAzIDE1IDNzMTIgNS4zNzMgMTIgMTJjMCAyLjk1NC0xLjA2NyA1LjY1OC0yLjgzNyA3Ljc0OWw0LjkwOCA0LjkwOC0xLjQxNCAxLjQxNC00LjkwOC00LjkwOHpNMTUgMjVjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMyMC41MjMgNSAxNSA1IDUgOS40NzcgNSAxNXM0LjQ3NyAxMCAxMCAxMHoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.image-previewer .image-menu i.zoom-out{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIyLjc0OSAyNC4xNjNBMTEuOTUyIDExLjk1MiAwIDAxMTUgMjdDOC4zNzMgMjcgMyAyMS42MjcgMyAxNVM4LjM3MyAzIDE1IDNzMTIgNS4zNzMgMTIgMTJjMCAyLjk1NC0xLjA2NyA1LjY1OC0yLjgzNyA3Ljc0OWw0LjkwOCA0LjkwOC0xLjQxNCAxLjQxNC00LjkwOC00LjkwOHpNMTUgMjVjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMyMC41MjMgNSAxNSA1IDUgOS40NzcgNSAxNXM0LjQ3NyAxMCAxMCAxMHptLTUtMTFoMTB2MkgxMHYtMnoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.image-previewer .image-menu i.rotate{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTYgNGM2LjYyNyAwIDEyIDUuMzczIDEyIDEyYTExLjk3IDExLjk3IDAgMDEtNCA4Ljk0NFYyM2gtLjg2QTkuOTY4IDkuOTY4IDAgMDAyNiAxNmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEwUzYgMTAuNDc3IDYgMTZjMCA1LjE4NSAzLjk0NyA5LjQ0OSA5IDkuOTV2Mi4wMDlDOC44NCAyNy40NTEgNCAyMi4yOTEgNCAxNiA0IDkuMzczIDkuMzczIDQgMTYgNHoiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik0xOS44NzkgMjcuMzI4bDEuNzY3LTYuNzE3IDQuOTUgNC45NXoiLz48L2c+PC9zdmc+)}.image-previewer .image-menu i.original-size{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgNGgyNHYyNEg0VjR6bTIgMnYyMGgyMFY2SDZ6bTQgNWgydjEwaC0yVjExem01IDJoMnYyaC0ydi0yem0wIDRoMnYyaC0ydi0yem01LTZoMnYxMGgtMlYxMXoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.image-previewer .image-menu i.image-download{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuNSAxNXYzLjVoMTVWMTVIMjF2NUgzdi01aDEuNXptOC4yMzItMTEuMjI2djkuMTk2bDQuMDUtNC4wNSAxLjA2IDEuMDYtNS44MzQgNS44MzQtNS44MzMtNS44MzMgMS4wNi0xLjA2IDMuOTk4IDMuOTk2VjMuNzc0aDEuNXoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.table-tool__row{position:absolute;width:12px;border-radius:6.5px;overflow:hidden;background-color:#e2e6ed}.table-tool__row .table-tool__row__item{width:100%;position:relative}.table-tool__row .table-tool__row__item:after{content:"";position:absolute;bottom:0;left:2px;width:8px;height:1px;background-color:#c0c6cf}.table-tool__row .table-tool__row__item:last-child:after{display:none}.table-tool__col{position:absolute;height:12px;border-radius:6.5px;overflow:hidden;background-color:#e2e6ed;display:flex}.table-tool__col .table-tool__col__item{height:100%;position:relative}.table-tool__col .table-tool__col__item:after{content:"";position:absolute;top:2px;left:-1px;width:1px;height:8px;z-index:1;background-color:#c0c6cf}.table-tool__col .table-tool__col__item:first-child:after{display:none}.table-tool__row .table-tool__row__item.active,.table-tool__col .table-tool__col__item.active{background-color:#c4d7fa}.table-tool__col .table-tool__anchor{right:-5px;width:10px;height:12px;z-index:9;position:absolute;cursor:col-resize}.table-tool__row .table-tool__anchor{bottom:-5px;left:0;width:12px;height:10px;z-index:9;position:absolute;cursor:row-resize}.table-anchor__line{z-index:9;position:absolute;border:1px dotted #000000}.contextmenu-container{z-index:9;position:fixed;display:none;padding:4px;overflow-x:hidden;overflow-y:auto;background:#fff;box-shadow:0 2px 12px #38383833;border:1px solid #e2e6ed;border-radius:2px}.contextmenu-content{display:flex;flex-direction:column}.contextmenu-content .contextmenu-sub-item:after{position:absolute;content:"";width:16px;height:16px;right:12px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PGcgZmlsbD0iIzc2N0M4NSI+PHBhdGggZD0iTTcgMTIuMjQzbC0uNzA3LS43MDcgNC4yNDMtNC4yNDMuNzA3LjcwN3oiLz48cGF0aCBkPSJNNi4yOTMgNC40NjRMNyAzLjc1NyAxMS4yNDMgOGwtLjcwNy43MDd6Ii8+PC9nPjwvZz48L3N2Zz4=)}.contextmenu-content .contextmenu-item{min-width:140px;padding:0 32px 0 16px;height:30px;display:flex;align-items:center;white-space:nowrap;box-sizing:border-box;cursor:pointer}.contextmenu-content .contextmenu-item.hover{background:rgba(25,55,88,.04)}.contextmenu-content .contextmenu-item span{max-width:300px;font-size:12px;color:#3d4757;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.contextmenu-content .contextmenu-item span.shortcut{color:#767c85;height:30px;flex:1;text-align:right;line-height:30px;margin-left:20px}.contextmenu-content .contextmenu-item i{width:16px;height:16px;vertical-align:middle;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;flex-shrink:0;margin-right:8px}.contextmenu-divider{background-color:#e2e6ed;margin:4px 16px;height:1px}.contextmenu-print{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiA0aC0xVjJINXYySDRWMmExIDEgMCAwMTEtMWg2YTEgMSAwIDAxMSAxdjJ6bTAgNXY0YTEgMSAwIDAxLTEgMUg1YTEgMSAwIDAxLTEtMVY5aDF2NGg2VjloMXoiLz48cGF0aCBkPSJNMTIgMTJ2LTFoMlY1SDJ2NmgydjFIMmExIDEgMCAwMS0xLTFWNWExIDEgMCAwMTEtMWgxMmExIDEgMCAwMTEgMXY2YTEgMSAwIDAxLTEgMWgtMnoiLz48cGF0aCBkPSJNMyA4aDEwdjFIM3ptOC0yaDJ2MWgtMnoiLz48L2c+PC9zdmc+)}.contextmenu-image{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZT4uc3Qwe2ZpbGw6IzNkNDc1N308L3N0eWxlPjxnIGlkPSJfeDMwXzAt5YWs5YWxX3gyRl8wMuW3peWFt+agj194MkZf5o+S5YWl5Zu+54mHLTE2cHgtIj48ZyBpZD0iR3JvdXAtMTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxwYXRoIGlkPSJDb21iaW5lZC1TaGFwZSIgY2xhc3M9InN0MCIgZD0iTTEgMGgxMmMuNiAwIDEgLjQgMSAxdjExYzAgLjYtLjQgMS0xIDFIMWMtLjYgMC0xLS40LTEtMVYxYzAtLjYuNC0xIDEtMXptMCAxdjExaDEyVjFIMXoiLz48Y2lyY2xlIGlkPSLmpK3lnIblvaIiIGNsYXNzPSJzdDAiIGN4PSIxMCIgY3k9IjQiIHI9IjEiLz48cGF0aCBpZD0iUGF0aCIgY2xhc3M9InN0MCIgZD0iTTguNSAxMS4ybC00LTQuMUwxIDEwLjdWOS4yYzEuNy0xLjYgMi43LTIuNSAzLTIuOC40LS41LjctLjQgMSAwTDguNSAxMCAxMSA3LjNjLjQtLjUuNi0uNSAxLS4xbDIgMi44djEuNWwtMi41LTMuNC0zIDMuMXoiLz48L2c+PC9nPjwvc3ZnPg==)}.contextmenu-image-change{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDQpIiBmaWxsPSIjM0Q0NzU3Ij48Y2lyY2xlIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjMiIGN5PSIxIiByPSIxIi8+PHBhdGggZD0iTTcuNDczIDguMjIzTDMuNDcgNC4xMDcgMCA3LjY2N3YtMS41QzEuNzE1IDQuNiAyLjcwNyAzLjY2NCAyLjk3NSAzLjM1OGMuNDAyLS40NTcuNjUxLS4zOSAxLjA0MiAwTDcuNDczIDcgOS45NiA0LjM0OWMuNDE0LS40NjIuNjItLjQ2MiAxLjAxMS0uMDcxTDEzIDcuMDZ2MS41bC0yLjUxLTMuNDEtMy4wMTcgMy4wNzJ6Ii8+PC9nPjxwYXRoIGQ9Ik02IDEuNUgxLjV2MTJoMTN2LTRWMTNhLjUuNSAwIDAxLS41LjVIMmEuNS41IDAgMDEtLjUtLjVWMmEuNS41IDAgMDEuNS0uNWg0em04LjUgOFY2bC0uNS41aDFsLS41LS41djMuNXpNNiAxLjVoNEw5LjUgMXYxbC41LS41SDZ6IiBzdHJva2U9IiMzRDQ3NTciLz48cGF0aCBkPSJNMTMuMDg1IDEuMzE2bC0zLjgxNCA0YTEgMSAwIDAwMS40NTggMS4zNjhsMy44MTUtNGExIDEgMCAxMC0xLjQ1OS0xLjM2OHoiIGZpbGw9IiMzRDQ3NTciIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)}.contextmenu-insert-row-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiMzRDQ3NTciIGQ9Ik04LjUgNS41aDZ2NGgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNCA3djFoMlY3em0tMyAuNUw0IDV2NXpNMSAxaDEydjFIMXptMCAxMmgxMnYxSDF6Ii8+PC9nPjwvc3ZnPg==)}.contextmenu-insert-top-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNOCA1SDd2M2gxem0tLjUtM0wxMCA1SDV6Ii8+PHJlY3Qgc3Ryb2tlPSIjM0Q0NzU3IiB4PSIxLjUiIHk9IjEwLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIvPjwvZz48L3N2Zz4=)}.contextmenu-insert-bottom-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNyAxMWgxVjhIN3ptLjUgM0w1IDExaDV6Ii8+PHJlY3Qgc3Ryb2tlPSIjM0Q0NzU3IiB4PSIxLjUiIHk9IjIuNSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjMiIHJ4PSIxIi8+PC9nPjwvc3ZnPg==)}.contextmenu-insert-left-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMTEgN3YxaDNWN3ptLTMgLjVMMTEgNXY1eiIvPjxyZWN0IHN0cm9rZT0iIzNENDc1NyIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNCA3LjUpIiB4PSItMiIgeT0iNiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjMiIHJ4PSIxIi8+PC9nPjwvc3ZnPg==)}.contextmenu-insert-right-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNSA4VjdIMnYxem0zLS41TDUgMTBWNXoiLz48cmVjdCBzdHJva2U9IiMzRDQ3NTciIHRyYW5zZm9ybT0icm90YXRlKDkwIDEyIDcuNSkiIHg9IjYiIHk9IjYiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIvPjwvZz48L3N2Zz4=)}.contextmenu-delete-row-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik04LjUgNi41aDZ2MmgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMiAxMmgxMXYxSDJ6TTIgMmgxMXYxSDJ6bS42MyAzTDcgOS4zNWwtLjYzNS42NUwyIDUuNjN6Ii8+PHBhdGggZmlsbD0iIzNENDc1NyIgZD0iTTIgOS4zNjNMNi4zNTUgNSA3IDUuNzA3IDIuNjk1IDEweiIvPjwvZz48L3N2Zz4=)}.contextmenu-delete-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik04LjUgNS41aDZ2NGgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMSAxM2gxMnYxSDF6TTEgMWgxMnYxSDF6bTAgNGgxdjFIMXptMSAxaDF2MUgyem0xIDFoMXYxSDN6bTEtMWgxdjFINHptMS0xaDF2MUg1ek00IDhoMXYxSDR6TTIgOGgxdjFIMnptMyAxaDF2MUg1ek0xIDloMXYxSDF6Ii8+PC9nPjwvc3ZnPg==)}.contextmenu-delete-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik01LjUgNy41di02aDR2NnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMTMgMTVWM2gxdjEyek0xIDE1VjNoMXYxMnptNCAwdi0xaDF2MXptMS0xdi0xaDF2MXptMS0xdi0xaDF2MXptLTEtMXYtMWgxdjF6bS0xLTF2LTFoMXYxem0zIDF2LTFoMXYxem0wIDJ2LTFoMXYxem0xLTN2LTFoMXYxem0wIDR2LTFoMXYxeiIvPjwvZz48L3N2Zz4=)}.contextmenu-delete-table{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTQgMTNoLTF2LTNIMnYzSDF2LTNhMSAxIDAgMDExLTFoMTFhMSAxIDAgMDExIDF2M3oiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik01LjYyNSAyTDEwIDYuMzc1IDkuMzc1IDcgNSAyLjYyNXoiLz48cGF0aCBkPSJNNSA2LjM3NUw5LjM3NSAybC42MjUuNjI1TDUuNjI1IDd6Ii8+PC9nPjwvc3ZnPg==)}.contextmenu-merge-cell{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNiAxdjFIMnYxMWg0djFIMmExIDEgMCAwMS0xLTFWMmExIDEgMCAwMTEtMWg0em0zIDBoNGExIDEgMCAwMTEgMXYxMWExIDEgMCAwMS0xIDFIOXYtMWg0VjJIOVYxeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTYgMWgxdjRINnptMiAwaDF2NEg4eiIvPjxwYXRoIGQ9Ik04IDcuNUwxMCA2djN6bS0xIDBMNSA2djN6Ii8+PHBhdGggZD0iTTkgN2gzdjFIOXpNMyA3aDN2MUgzeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMTBoMXY0SDh6bS0yIDBoMXY0SDZ6Ii8+PC9nPjwvc3ZnPg==)}.contextmenu-merge-cancel-cell{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNiAxdjFIMnYxMWg0djFIMmExIDEgMCAwMS0xLTFWMmExIDEgMCAwMTEtMWg0em0zIDBoNGExIDEgMCAwMTEgMXYxMWExIDEgMCAwMS0xIDFIOXYtMWg0VjJIOVYxeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTYgMWgxdjRINnptMiAwaDF2NEg4eiIvPjxwYXRoIGQ9Ik0zIDcuNUw1IDZ2M3ptOSAwTDEwIDZ2M3oiLz48cGF0aCBkPSJNNCA3aDN2MUg0em00IDBoM3YxSDh6Ii8+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOCAxMGgxdjRIOHptLTIgMGgxdjRINnoiLz48L2c+PC9zdmc+)}.hyperlink-popup{min-width:100px;font-size:12px;line-height:20px;background:#fff;box-shadow:0 2px 12px #626b8433;border-radius:2px;color:#3d4757;padding:16px;white-space:nowrap;position:absolute;z-index:1;text-align:center;display:none}.hyperlink-popup a{cursor:pointer;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;padding-bottom:2px;color:#00f}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();})();
+(()=>{(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode('.ce-select-control-popup{max-width:160px;min-width:69px;max-height:225px;position:absolute;z-index:1;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px #0000001a;box-sizing:border-box;margin:5px 0;overflow-y:auto}.ce-select-control-popup ul{list-style:none;padding:3px 0;margin:0;box-sizing:border-box}.ce-select-control-popup ul li{font-size:13px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#666;height:36px;line-height:36px;box-sizing:border-box;cursor:pointer}.ce-select-control-popup ul li:hover{background-color:#eef2fd}.ce-select-control-popup ul li.active{color:var(--COLOR-HOVER, #5175f4);font-weight:700}.ce-date-container{display:none;width:300px;overflow:hidden;left:0;right:0;position:absolute;z-index:1;color:#606266;background:#ffffff;border-radius:4px;padding:10px;user-select:none;border:1px solid #e4e7ed;box-shadow:0 2px 12px #0000001a}.ce-date-container.active{display:block}.ce-date-wrap{display:none}.ce-date-wrap.active{display:block}.ce-date-title{display:flex;justify-content:center;align-items:center;text-align:center;color:#606266;font-size:16px}.ce-date-title>span{display:inline-block}.ce-date-title>span:not(.ce-date-title__now){font-family:cursive;cursor:pointer}.ce-date-title>span:not(.ce-date-title__now):hover{color:#5175f4}.ce-date-title .ce-date-title__pre-year,.ce-date-title .ce-date-title__pre-month{width:15%}.ce-date-title .ce-date-title__now{width:40%}.ce-date-title .ce-date-title__next-year,.ce-date-title .ce-date-title__next-month{width:15%}.ce-date-week{width:100%;display:flex;justify-content:center;margin-top:15px;padding-bottom:5px;border-bottom:1px solid #e4e7ed}.ce-date-week>span{list-style:none;width:14.28571%;text-align:center;color:#606266;font-size:14px}.ce-date-day{width:100%;display:flex;flex-wrap:wrap;align-items:center;margin-top:5px}.ce-date-day>div{width:14.28571%;height:40px;text-align:center;color:#606266;font-size:14px;cursor:pointer;line-height:40px;border-radius:4px}.ce-date-day>div:hover{color:#5175f4;opacity:.8}.ce-date-day>div.active{color:#5175f4;font-weight:700}.ce-date-day>div.disable{color:#c0c4cc}.ce-date-day>div.select{color:#fff;background-color:#5175f4}.ce-time-wrap{display:none;padding:10px;height:286px}.ce-time-wrap ::-webkit-scrollbar{width:0}.ce-time-wrap.active{display:flex}.ce-time-wrap li{list-style:none}.ce-time-wrap>li{width:33.3%;height:100%;text-align:center}.ce-time-wrap>li>span{transform:translateY(-5px);display:inline-block}.ce-time-wrap>li>ol{height:calc(100% - 20px);overflow-y:auto;border:1px solid #e2e2e2;position:relative}.ce-time-wrap>li:first-child>ol{border-right:0}.ce-time-wrap>li:last-child>ol{border-left:0}.ce-time-wrap>li>ol>li{line-height:30px;cursor:pointer;transition:all .3s}.ce-time-wrap>li>ol>li:hover{background-color:#eaeaea}.ce-time-wrap>li>ol>li.active{color:#fff;background:#5175F4}.ce-date-menu{width:100%;height:28px;display:flex;justify-content:flex-end;align-items:center;padding-top:10px;position:relative;border-top:1px solid #e4e7ed}.ce-date-menu button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;appearance:none;text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:500;user-select:none;padding:7px 15px;font-size:12px;border-radius:3px;margin:0 0 0 10px}.ce-date-menu button:hover{color:#5175f4;border-color:#5175f4}.ce-date-menu button.ce-date-menu__time{border:1px solid transparent;position:absolute;left:0;margin-left:0}.ce-date-menu button.ce-date-menu__time:hover{color:#5175f4}.ce-block-item{position:absolute;z-index:0;overflow:hidden;border-radius:8px;background-color:#fff;border:1px solid rgb(235 236 240)}.ce-table-tool__row{position:absolute;width:12px;border-radius:6.5px;overflow:hidden;background-color:#e2e6ed}.ce-table-tool__row .ce-table-tool__row__item{width:100%;position:relative}.ce-table-tool__row .ce-table-tool__row__item:after{content:"";position:absolute;bottom:0;left:2px;width:8px;height:1px;background-color:#c0c6cf}.ce-table-tool__row .ce-table-tool__row__item:last-child:after{display:none}.ce-table-tool__col{position:absolute;height:12px;border-radius:6.5px;overflow:hidden;background-color:#e2e6ed;display:flex}.ce-table-tool__col .ce-table-tool__col__item{height:100%;position:relative}.ce-table-tool__col .ce-table-tool__col__item:after{content:"";position:absolute;top:2px;left:-1px;width:1px;height:8px;z-index:1;background-color:#c0c6cf}.ce-table-tool__col .ce-table-tool__col__item:first-child:after{display:none}.ce-table-tool__row .ce-table-tool__row__item.active,.ce-table-tool__col .ce-table-tool__col__item.active{background-color:#c4d7fa}.ce-table-tool__col .ce-table-tool__anchor{right:-5px;width:10px;height:12px;z-index:9;position:absolute;cursor:col-resize}.ce-table-tool__row .ce-table-tool__anchor{bottom:-5px;left:0;width:12px;height:10px;z-index:9;position:absolute;cursor:row-resize}.ce-table-anchor__line{z-index:9;position:absolute;border:1px dotted #000000}.ce-resizer-selection{position:absolute;border:1px solid}.ce-resizer-selection>div{position:absolute;width:10px;height:10px;box-shadow:0 1px 4px #0000004d;border-radius:5px;border:2px solid #ffffff;box-sizing:border-box}.ce-resizer-selection .handle-0{cursor:nw-resize}.ce-resizer-selection .handle-1{cursor:n-resize}.ce-resizer-selection .handle-2{cursor:ne-resize}.ce-resizer-selection .handle-3{cursor:e-resize}.ce-resizer-selection .handle-4{cursor:se-resize}.ce-resizer-selection .handle-5{cursor:s-resize}.ce-resizer-selection .handle-6{cursor:sw-resize}.ce-resizer-selection .handle-7{cursor:w-resize}.ce-resizer-image{position:absolute;opacity:.5}.ce-image-previewer{position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;overflow:hidden;background:#f2f4f7;display:flex;align-items:center;justify-content:center;animation:previewerAnimation .3s}@keyframes previewerAnimation{0%{opacity:.1}to{opacity:1}}.ce-image-previewer .image-close{width:24px;height:24px;display:inline-block;position:absolute;right:50px;top:30px;z-index:99;cursor:pointer;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIzLjk3IDdsMS40MTUgMS40MTQtNy43NzkgNy43NzggNy43NzkgNy43NzktMS40MTQgMS40MTQtNy43NzktNy43NzktNy43NzggNy43NzlMNyAyMy45N2w3Ljc3OC03Ljc3OUw3IDguNDE0IDguNDE0IDdsNy43NzggNy43NzhMMjMuOTcxIDd6IiBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=) no-repeat;background-size:100% 100%;transition:all .3s;border-radius:50%}.ce-image-previewer .image-close:hover{background-color:#e2e6ed}.ce-image-previewer .ce-image-container{position:relative}.ce-image-previewer .ce-image-container img{cursor:move;position:relative}.ce-image-previewer .ce-image-menu{height:50px;position:absolute;bottom:50px;z-index:99;display:flex;align-items:center;justify-content:center}.ce-image-previewer .ce-image-menu i{width:32px;height:32px;margin:0 8px;cursor:pointer;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;transition:all .3s;border-radius:50%}.ce-image-previewer .ce-image-menu i:hover{background-color:#e2e6ed}.ce-image-previewer .ce-image-menu i.zoom-in{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0IDE0di00aDJ2NGg0djJoLTR2NGgtMnYtNGgtNHYtMmg0em04Ljc0OSAxMC4xNjNBMTEuOTUyIDExLjk1MiAwIDAxMTUgMjdDOC4zNzMgMjcgMyAyMS42MjcgMyAxNVM4LjM3MyAzIDE1IDNzMTIgNS4zNzMgMTIgMTJjMCAyLjk1NC0xLjA2NyA1LjY1OC0yLjgzNyA3Ljc0OWw0LjkwOCA0LjkwOC0xLjQxNCAxLjQxNC00LjkwOC00LjkwOHpNMTUgMjVjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMyMC41MjMgNSAxNSA1IDUgOS40NzcgNSAxNXM0LjQ3NyAxMCAxMCAxMHoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-image-previewer .ce-image-menu i.zoom-out{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIyLjc0OSAyNC4xNjNBMTEuOTUyIDExLjk1MiAwIDAxMTUgMjdDOC4zNzMgMjcgMyAyMS42MjcgMyAxNVM4LjM3MyAzIDE1IDNzMTIgNS4zNzMgMTIgMTJjMCAyLjk1NC0xLjA2NyA1LjY1OC0yLjgzNyA3Ljc0OWw0LjkwOCA0LjkwOC0xLjQxNCAxLjQxNC00LjkwOC00LjkwOHpNMTUgMjVjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMyMC41MjMgNSAxNSA1IDUgOS40NzcgNSAxNXM0LjQ3NyAxMCAxMCAxMHptLTUtMTFoMTB2MkgxMHYtMnoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-image-previewer .ce-image-menu i.rotate{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTYgNGM2LjYyNyAwIDEyIDUuMzczIDEyIDEyYTExLjk3IDExLjk3IDAgMDEtNCA4Ljk0NFYyM2gtLjg2QTkuOTY4IDkuOTY4IDAgMDAyNiAxNmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEwUzYgMTAuNDc3IDYgMTZjMCA1LjE4NSAzLjk0NyA5LjQ0OSA5IDkuOTV2Mi4wMDlDOC44NCAyNy40NTEgNCAyMi4yOTEgNCAxNiA0IDkuMzczIDkuMzczIDQgMTYgNHoiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik0xOS44NzkgMjcuMzI4bDEuNzY3LTYuNzE3IDQuOTUgNC45NXoiLz48L2c+PC9zdmc+)}.ce-image-previewer .ce-image-menu i.original-size{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgNGgyNHYyNEg0VjR6bTIgMnYyMGgyMFY2SDZ6bTQgNWgydjEwaC0yVjExem01IDJoMnYyaC0ydi0yem0wIDRoMnYyaC0ydi0yem01LTZoMnYxMGgtMlYxMXoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-image-previewer .ce-image-menu i.image-download{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuNSAxNXYzLjVoMTVWMTVIMjF2NUgzdi01aDEuNXptOC4yMzItMTEuMjI2djkuMTk2bDQuMDUtNC4wNSAxLjA2IDEuMDYtNS44MzQgNS44MzQtNS44MzMtNS44MzMgMS4wNi0xLjA2IDMuOTk4IDMuOTk2VjMuNzc0aDEuNXoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-contextmenu-container{z-index:9;position:fixed;display:none;padding:4px;overflow-x:hidden;overflow-y:auto;background:#fff;box-shadow:0 2px 12px #38383833;border:1px solid #e2e6ed;border-radius:2px}.ce-contextmenu-content{display:flex;flex-direction:column}.ce-contextmenu-content .ce-contextmenu-sub-item:after{position:absolute;content:"";width:16px;height:16px;right:12px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PGcgZmlsbD0iIzc2N0M4NSI+PHBhdGggZD0iTTcgMTIuMjQzbC0uNzA3LS43MDcgNC4yNDMtNC4yNDMuNzA3LjcwN3oiLz48cGF0aCBkPSJNNi4yOTMgNC40NjRMNyAzLjc1NyAxMS4yNDMgOGwtLjcwNy43MDd6Ii8+PC9nPjwvZz48L3N2Zz4=)}.ce-contextmenu-content .ce-contextmenu-item{min-width:140px;padding:0 32px 0 16px;height:30px;display:flex;align-items:center;white-space:nowrap;box-sizing:border-box;cursor:pointer}.ce-contextmenu-content .ce-contextmenu-item.hover{background:rgba(25,55,88,.04)}.ce-contextmenu-content .ce-contextmenu-item span{max-width:300px;font-size:12px;color:#3d4757;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ce-contextmenu-content .ce-contextmenu-item span.ce-shortcut{color:#767c85;height:30px;flex:1;text-align:right;line-height:30px;margin-left:20px}.ce-contextmenu-content .ce-contextmenu-item i{width:16px;height:16px;vertical-align:middle;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;flex-shrink:0;margin-right:8px}.ce-contextmenu-divider{background-color:#e2e6ed;margin:4px 16px;height:1px}.ce-contextmenu-print{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiA0aC0xVjJINXYySDRWMmExIDEgMCAwMTEtMWg2YTEgMSAwIDAxMSAxdjJ6bTAgNXY0YTEgMSAwIDAxLTEgMUg1YTEgMSAwIDAxLTEtMVY5aDF2NGg2VjloMXoiLz48cGF0aCBkPSJNMTIgMTJ2LTFoMlY1SDJ2NmgydjFIMmExIDEgMCAwMS0xLTFWNWExIDEgMCAwMTEtMWgxMmExIDEgMCAwMTEgMXY2YTEgMSAwIDAxLTEgMWgtMnoiLz48cGF0aCBkPSJNMyA4aDEwdjFIM3ptOC0yaDJ2MWgtMnoiLz48L2c+PC9zdmc+)}.ce-contextmenu-image{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZT4uc3Qwe2ZpbGw6IzNkNDc1N308L3N0eWxlPjxnIGlkPSJfeDMwXzAt5YWs5YWxX3gyRl8wMuW3peWFt+agj194MkZf5o+S5YWl5Zu+54mHLTE2cHgtIj48ZyBpZD0iR3JvdXAtMTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxwYXRoIGlkPSJDb21iaW5lZC1TaGFwZSIgY2xhc3M9InN0MCIgZD0iTTEgMGgxMmMuNiAwIDEgLjQgMSAxdjExYzAgLjYtLjQgMS0xIDFIMWMtLjYgMC0xLS40LTEtMVYxYzAtLjYuNC0xIDEtMXptMCAxdjExaDEyVjFIMXoiLz48Y2lyY2xlIGlkPSLmpK3lnIblvaIiIGNsYXNzPSJzdDAiIGN4PSIxMCIgY3k9IjQiIHI9IjEiLz48cGF0aCBpZD0iUGF0aCIgY2xhc3M9InN0MCIgZD0iTTguNSAxMS4ybC00LTQuMUwxIDEwLjdWOS4yYzEuNy0xLjYgMi43LTIuNSAzLTIuOC40LS41LjctLjQgMSAwTDguNSAxMCAxMSA3LjNjLjQtLjUuNi0uNSAxLS4xbDIgMi44djEuNWwtMi41LTMuNC0zIDMuMXoiLz48L2c+PC9nPjwvc3ZnPg==)}.ce-contextmenu-image-change{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDQpIiBmaWxsPSIjM0Q0NzU3Ij48Y2lyY2xlIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjMiIGN5PSIxIiByPSIxIi8+PHBhdGggZD0iTTcuNDczIDguMjIzTDMuNDcgNC4xMDcgMCA3LjY2N3YtMS41QzEuNzE1IDQuNiAyLjcwNyAzLjY2NCAyLjk3NSAzLjM1OGMuNDAyLS40NTcuNjUxLS4zOSAxLjA0MiAwTDcuNDczIDcgOS45NiA0LjM0OWMuNDE0LS40NjIuNjItLjQ2MiAxLjAxMS0uMDcxTDEzIDcuMDZ2MS41bC0yLjUxLTMuNDEtMy4wMTcgMy4wNzJ6Ii8+PC9nPjxwYXRoIGQ9Ik02IDEuNUgxLjV2MTJoMTN2LTRWMTNhLjUuNSAwIDAxLS41LjVIMmEuNS41IDAgMDEtLjUtLjVWMmEuNS41IDAgMDEuNS0uNWg0em04LjUgOFY2bC0uNS41aDFsLS41LS41djMuNXpNNiAxLjVoNEw5LjUgMXYxbC41LS41SDZ6IiBzdHJva2U9IiMzRDQ3NTciLz48cGF0aCBkPSJNMTMuMDg1IDEuMzE2bC0zLjgxNCA0YTEgMSAwIDAwMS40NTggMS4zNjhsMy44MTUtNGExIDEgMCAxMC0xLjQ1OS0xLjM2OHoiIGZpbGw9IiMzRDQ3NTciIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-insert-row-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiMzRDQ3NTciIGQ9Ik04LjUgNS41aDZ2NGgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNCA3djFoMlY3em0tMyAuNUw0IDV2NXpNMSAxaDEydjFIMXptMCAxMmgxMnYxSDF6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-insert-top-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNOCA1SDd2M2gxem0tLjUtM0wxMCA1SDV6Ii8+PHJlY3Qgc3Ryb2tlPSIjM0Q0NzU3IiB4PSIxLjUiIHk9IjEwLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-insert-bottom-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNyAxMWgxVjhIN3ptLjUgM0w1IDExaDV6Ii8+PHJlY3Qgc3Ryb2tlPSIjM0Q0NzU3IiB4PSIxLjUiIHk9IjIuNSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjMiIHJ4PSIxIi8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-insert-left-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMTEgN3YxaDNWN3ptLTMgLjVMMTEgNXY1eiIvPjxyZWN0IHN0cm9rZT0iIzNENDc1NyIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNCA3LjUpIiB4PSItMiIgeT0iNiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjMiIHJ4PSIxIi8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-insert-right-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNSA4VjdIMnYxem0zLS41TDUgMTBWNXoiLz48cmVjdCBzdHJva2U9IiMzRDQ3NTciIHRyYW5zZm9ybT0icm90YXRlKDkwIDEyIDcuNSkiIHg9IjYiIHk9IjYiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-delete-row-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik04LjUgNi41aDZ2MmgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMiAxMmgxMXYxSDJ6TTIgMmgxMXYxSDJ6bS42MyAzTDcgOS4zNWwtLjYzNS42NUwyIDUuNjN6Ii8+PHBhdGggZmlsbD0iIzNENDc1NyIgZD0iTTIgOS4zNjNMNi4zNTUgNSA3IDUuNzA3IDIuNjk1IDEweiIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-delete-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik04LjUgNS41aDZ2NGgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMSAxM2gxMnYxSDF6TTEgMWgxMnYxSDF6bTAgNGgxdjFIMXptMSAxaDF2MUgyem0xIDFoMXYxSDN6bTEtMWgxdjFINHptMS0xaDF2MUg1ek00IDhoMXYxSDR6TTIgOGgxdjFIMnptMyAxaDF2MUg1ek0xIDloMXYxSDF6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-delete-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik01LjUgNy41di02aDR2NnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMTMgMTVWM2gxdjEyek0xIDE1VjNoMXYxMnptNCAwdi0xaDF2MXptMS0xdi0xaDF2MXptMS0xdi0xaDF2MXptLTEtMXYtMWgxdjF6bS0xLTF2LTFoMXYxem0zIDF2LTFoMXYxem0wIDJ2LTFoMXYxem0xLTN2LTFoMXYxem0wIDR2LTFoMXYxeiIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-delete-table{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTQgMTNoLTF2LTNIMnYzSDF2LTNhMSAxIDAgMDExLTFoMTFhMSAxIDAgMDExIDF2M3oiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik01LjYyNSAyTDEwIDYuMzc1IDkuMzc1IDcgNSAyLjYyNXoiLz48cGF0aCBkPSJNNSA2LjM3NUw5LjM3NSAybC42MjUuNjI1TDUuNjI1IDd6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-merge-cell{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNiAxdjFIMnYxMWg0djFIMmExIDEgMCAwMS0xLTFWMmExIDEgMCAwMTEtMWg0em0zIDBoNGExIDEgMCAwMTEgMXYxMWExIDEgMCAwMS0xIDFIOXYtMWg0VjJIOVYxeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTYgMWgxdjRINnptMiAwaDF2NEg4eiIvPjxwYXRoIGQ9Ik04IDcuNUwxMCA2djN6bS0xIDBMNSA2djN6Ii8+PHBhdGggZD0iTTkgN2gzdjFIOXpNMyA3aDN2MUgzeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMTBoMXY0SDh6bS0yIDBoMXY0SDZ6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-merge-cancel-cell{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNiAxdjFIMnYxMWg0djFIMmExIDEgMCAwMS0xLTFWMmExIDEgMCAwMTEtMWg0em0zIDBoNGExIDEgMCAwMTEgMXYxMWExIDEgMCAwMS0xIDFIOXYtMWg0VjJIOVYxeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTYgMWgxdjRINnptMiAwaDF2NEg4eiIvPjxwYXRoIGQ9Ik0zIDcuNUw1IDZ2M3ptOSAwTDEwIDZ2M3oiLz48cGF0aCBkPSJNNCA3aDN2MUg0em00IDBoM3YxSDh6Ii8+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOCAxMGgxdjRIOHptLTIgMGgxdjRINnoiLz48L2c+PC9zdmc+)}.ce-hyperlink-popup{min-width:100px;font-size:12px;line-height:20px;background:#fff;box-shadow:0 2px 12px #626b8433;border-radius:2px;color:#3d4757;padding:16px;white-space:nowrap;position:absolute;z-index:1;text-align:center;display:none}.ce-hyperlink-popup a{cursor:pointer;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;padding-bottom:2px;color:#00f}.ce-inputarea{width:0;height:12px;min-width:0;min-height:0;margin:0;padding:0;left:0;right:0;letter-spacing:0;font-size:12px;position:absolute;outline:none;resize:none;border:none;overflow:hidden;color:transparent;user-select:none;background-color:transparent}.ce-cursor{width:1px;height:20px;left:0;right:0;position:absolute;outline:none;background-color:#000;pointer-events:none}.ce-cursor.ce-cursor--animation{animation-duration:1s;animation-iteration-count:infinite;animation-name:cursorAnimation}@keyframes cursorAnimation{0%{opacity:1}13%{opacity:0}50%{opacity:0}63%{opacity:1}to{opacity:1}}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();})();
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.8";
+const version = "0.9.11";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -92,7 +92,7 @@ function downloadFile(href, fileName) {
   a.download = fileName;
   a.click();
 }
-function threeClick(dom, fn) {
+function threeClick$1(dom, fn) {
   nClickEvent(3, dom, fn);
 }
 function nClickEvent(n, dom, fn) {
@@ -110,6 +110,8 @@ function nClickEvent(n, dom, fn) {
   dom.addEventListener("click", handler);
 }
 const CURSOR_AGENT_HEIGHT = 12;
+const EDITOR_COMPONENT = "editor-component";
+const EDITOR_PREFIX = "ce";
 var ElementType;
 (function(ElementType2) {
   ElementType2["TEXT"] = "text";
@@ -3719,7 +3721,7 @@ class CursorAgent {
     this.canvasEvent = canvasEvent;
     const agentCursorDom = document.createElement("textarea");
     agentCursorDom.autocomplete = "off";
-    agentCursorDom.classList.add("inputarea");
+    agentCursorDom.classList.add(`${EDITOR_PREFIX}-inputarea`);
     agentCursorDom.innerText = "";
     this.container.append(agentCursorDom);
     this.agentCursorDom = agentCursorDom;
@@ -3811,7 +3813,7 @@ class Cursor {
     this.position = draw.getPosition();
     this.options = draw.getOptions();
     this.cursorDom = document.createElement("div");
-    this.cursorDom.classList.add("cursor");
+    this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor`);
     this.container.append(this.cursorDom);
     this.cursorAgent = new CursorAgent(draw, canvasEvent);
   }
@@ -3848,12 +3850,12 @@ class Cursor {
     this.cursorDom.style.display = isReadonly ? "none" : "block";
     this.cursorDom.style.height = `${cursorHeight}px`;
     setTimeout(() => {
-      this.cursorDom.classList.add("cursor--animation");
+      this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor--animation`);
     }, 200);
   }
   recoveryCursor() {
     this.cursorDom.style.display = "none";
-    this.cursorDom.classList.remove("cursor--animation");
+    this.cursorDom.classList.remove(`${EDITOR_PREFIX}-cursor--animation`);
   }
 }
 var MouseEventButton;
@@ -3945,8 +3947,6 @@ var KeyMap;
   KeyMap2["EIGHT"] = "8";
   KeyMap2["NINE"] = "9";
 })(KeyMap || (KeyMap = {}));
-const LETTER_REG = /[a-zA-Z]/;
-const NUMBER_LIKE_REG = /[0-9.]/;
 class CheckboxControl {
   constructor(element, control) {
     __publicField(this, "element");
@@ -4044,442 +4044,550 @@ class CheckboxControl {
     return endIndex;
   }
 }
-class CanvasEvent {
-  constructor(draw) {
-    __publicField(this, "isAllowDrag");
-    __publicField(this, "isCompositing");
-    __publicField(this, "mouseDownStartPosition");
-    __publicField(this, "draw");
-    __publicField(this, "options");
-    __publicField(this, "pageContainer");
-    __publicField(this, "pageList");
-    __publicField(this, "position");
-    __publicField(this, "range");
-    __publicField(this, "cursor");
-    __publicField(this, "historyManager");
-    __publicField(this, "previewer");
-    __publicField(this, "tableTool");
-    __publicField(this, "hyperlinkParticle");
-    __publicField(this, "dateParticle");
-    __publicField(this, "listener");
-    __publicField(this, "control");
-    this.isAllowDrag = false;
-    this.isCompositing = false;
-    this.mouseDownStartPosition = null;
-    this.pageContainer = draw.getPageContainer();
-    this.pageList = draw.getPageList();
-    this.draw = draw;
-    this.options = draw.getOptions();
-    this.cursor = null;
-    this.position = this.draw.getPosition();
-    this.range = this.draw.getRange();
-    this.historyManager = this.draw.getHistoryManager();
-    this.previewer = this.draw.getPreviewer();
-    this.tableTool = this.draw.getTableTool();
-    this.hyperlinkParticle = this.draw.getHyperlinkParticle();
-    this.dateParticle = this.draw.getDateParticle();
-    this.listener = this.draw.getListener();
-    this.control = this.draw.getControl();
-  }
-  register() {
-    this.cursor = this.draw.getCursor();
-    this.pageContainer.addEventListener("mousedown", this.mousedown.bind(this));
-    this.pageContainer.addEventListener("mouseleave", this.mouseleave.bind(this));
-    this.pageContainer.addEventListener("mousemove", this.mousemove.bind(this));
-    this.pageContainer.addEventListener("dblclick", this.dblclick.bind(this));
-    threeClick(this.pageContainer, this.threeClick.bind(this));
-  }
-  setIsAllowDrag(payload) {
-    this.isAllowDrag = payload;
-    if (!payload) {
-      this.applyPainterStyle();
+function mousedown(evt, host) {
+  if (evt.button === MouseEventButton.RIGHT)
+    return;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  const rangeManager = draw.getRange();
+  const position = draw.getPosition();
+  if (!host.isAllowDrag) {
+    const range = rangeManager.getRange();
+    if (!isReadonly && range.startIndex !== range.endIndex) {
+      const isPointInRange = rangeManager.getIsPointInRange(evt.offsetX, evt.offsetY);
+      if (isPointInRange) {
+        host.isAllowDrag = true;
+        host.cacheRange = deepClone(range);
+        host.cacheElementList = draw.getElementList();
+        host.cachePositionList = position.getPositionList();
+        return;
+      }
     }
   }
-  clearPainterStyle() {
-    this.pageList.forEach((p) => {
-      p.style.cursor = "text";
-    });
-    this.draw.setPainterStyle(null);
-  }
-  applyPainterStyle() {
-    const painterStyle = this.draw.getPainterStyle();
-    if (!painterStyle)
-      return;
-    const selection = this.range.getSelection();
-    if (!selection)
-      return;
-    const painterStyleKeys = Object.keys(painterStyle);
-    selection.forEach((s) => {
-      painterStyleKeys.forEach((pKey) => {
-        const key = pKey;
-        s[key] = painterStyle[key];
-      });
-    });
-    this.draw.render({ isSetCursor: false });
-    const painterOptions = this.draw.getPainterOptions();
-    if (!painterOptions || !painterOptions.isDblclick) {
-      this.clearPainterStyle();
-    }
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
   }
-  mousemove(evt) {
-    if (!this.isAllowDrag || !this.mouseDownStartPosition)
-      return;
-    const target = evt.target;
-    const pageIndex = target.dataset.index;
-    if (pageIndex) {
-      this.draw.setPageNo(Number(pageIndex));
-    }
-    const positionResult = this.position.getPositionByXY({
-      x: evt.offsetX,
-      y: evt.offsetY
-    });
-    const { index: index2, isTable, tdValueIndex, tdIndex, trIndex, tableId } = positionResult;
-    const { index: startIndex, isTable: startIsTable, tdIndex: startTdIndex, trIndex: startTrIndex } = this.mouseDownStartPosition;
-    const endIndex = isTable ? tdValueIndex : index2;
-    if (isTable && startIsTable && (tdIndex !== startTdIndex || trIndex !== startTrIndex)) {
-      this.range.setRange(endIndex, endIndex, tableId, startTdIndex, tdIndex, startTrIndex, trIndex);
-    } else {
-      let end = ~endIndex ? endIndex : 0;
-      let start = startIndex;
-      if (start > end) {
-        [start, end] = [end, start];
+  host.isAllowSelection = true;
+  const positionResult = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  const { index: index2, isDirectHit, isCheckbox, isImage, isTable, tdValueIndex } = positionResult;
+  host.mouseDownStartPosition = __spreadProps(__spreadValues({}, positionResult), {
+    index: isTable ? tdValueIndex : index2
+  });
+  const elementList = draw.getElementList();
+  const positionList = position.getPositionList();
+  const curIndex = isTable ? tdValueIndex : index2;
+  const curElement = elementList[curIndex];
+  const isDirectHitImage = !!(isDirectHit && isImage);
+  const isDirectHitCheckbox = !!(isDirectHit && isCheckbox);
+  if (~index2) {
+    rangeManager.setRange(curIndex, curIndex);
+    position.setCursorPosition(positionList[curIndex]);
+    const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
+    if (isSetCheckbox) {
+      const { checkbox } = curElement;
+      if (checkbox) {
+        checkbox.value = !checkbox.value;
+      } else {
+        curElement.checkbox = {
+          value: true
+        };
+      }
+      const control = draw.getControl();
+      const activeControl = control.getActiveControl();
+      if (activeControl instanceof CheckboxControl) {
+        activeControl.setSelect();
       }
-      if (start === end)
-        return;
-      this.range.setRange(start, end);
     }
-    this.draw.render({
-      isSubmitHistory: false,
-      isSetCursor: false,
+    draw.render({
+      curIndex,
+      isSubmitHistory: isSetCheckbox,
+      isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
       isComputeRowList: false
     });
   }
-  mousedown(evt) {
-    if (evt.button === MouseEventButton.RIGHT)
-      return;
-    const isReadonly = this.draw.isReadonly();
-    const target = evt.target;
-    const pageIndex = target.dataset.index;
-    if (pageIndex) {
-      this.draw.setPageNo(Number(pageIndex));
-    }
-    this.isAllowDrag = true;
-    const positionResult = this.position.getPositionByXY({
-      x: evt.offsetX,
-      y: evt.offsetY
-    });
-    if (positionResult.isControl && !isReadonly) {
-      const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex: tdValueIndex2 } = positionResult;
-      const { newIndex } = this.control.moveCursor({
-        index: index22,
-        isTable: isTable2,
-        trIndex: trIndex2,
-        tdIndex: tdIndex2,
-        tdValueIndex: tdValueIndex2
-      });
-      if (isTable2) {
-        positionResult.tdValueIndex = newIndex;
-      } else {
-        positionResult.index = newIndex;
-      }
+  const previewer = draw.getPreviewer();
+  previewer.clearResizer();
+  if (isDirectHitImage && !isReadonly) {
+    previewer.drawResizer(curElement, positionList[curIndex], curElement.type === ElementType.LATEX ? {
+      mime: "svg",
+      srcKey: "laTexSVG"
+    } : {});
+  }
+  const tableTool = draw.getTableTool();
+  tableTool.dispose();
+  if (isTable && !isReadonly) {
+    const originalElementList = draw.getOriginalElementList();
+    const originalPositionList = position.getOriginalPositionList();
+    tableTool.render(originalElementList[index2], originalPositionList[index2]);
+  }
+  const hyperlinkParticle = draw.getHyperlinkParticle();
+  hyperlinkParticle.clearHyperlinkPopup();
+  if (curElement.type === ElementType.HYPERLINK) {
+    hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
+  }
+  const dateParticle = draw.getDateParticle();
+  dateParticle.clearDatePicker();
+  if (curElement.type === ElementType.DATE && !isReadonly) {
+    dateParticle.renderDatePicker(curElement, positionList[curIndex]);
+  }
+}
+function mouseup(evt, host) {
+  if (host.isAllowDrop) {
+    const draw = host.getDraw();
+    const position = draw.getPosition();
+    const rangeManager = draw.getRange();
+    const cacheRange = host.cacheRange;
+    const cacheElementList = host.cacheElementList;
+    const cachePositionList = host.cachePositionList;
+    const range = rangeManager.getRange();
+    const elementList = draw.getElementList();
+    const positionList = position.getPositionList();
+    const startPosition = positionList[range.startIndex];
+    const cacheStartElement = cacheElementList[cacheRange.startIndex];
+    const startElement = elementList[range.startIndex];
+    let curIndex = range.startIndex;
+    if (cacheStartElement.tdId === startElement.tdId && range.startIndex > cacheRange.endIndex) {
+      curIndex -= cacheRange.endIndex - cacheRange.startIndex;
+    }
+    const deleteElementList = cacheElementList.splice(cacheRange.startIndex + 1, cacheRange.endIndex - cacheRange.startIndex);
+    let restArg = {};
+    if (startElement.tableId) {
+      const { tdId, trId, tableId } = startElement;
+      restArg = { tdId, trId, tableId };
     }
-    const { index: index2, isDirectHit, isCheckbox, isControl, isImage, isTable, trIndex, tdIndex, tdValueIndex, tdId, trId, tableId } = positionResult;
-    this.position.setPositionContext({
-      isTable: isTable || false,
-      isCheckbox: isCheckbox || false,
-      isControl: isControl || false,
-      index: index2,
-      trIndex,
-      tdIndex,
-      tdId,
-      trId,
-      tableId
-    });
-    this.mouseDownStartPosition = __spreadProps(__spreadValues({}, positionResult), {
-      index: isTable ? tdValueIndex : index2
-    });
-    const elementList = this.draw.getElementList();
-    const positionList = this.position.getPositionList();
-    const curIndex = isTable ? tdValueIndex : index2;
-    const curElement = elementList[curIndex];
-    const isDirectHitImage = !!(isDirectHit && isImage);
-    const isDirectHitCheckbox = !!(isDirectHit && isCheckbox);
-    if (~index2) {
-      this.range.setRange(curIndex, curIndex);
-      this.position.setCursorPosition(positionList[curIndex]);
-      const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
-      if (isSetCheckbox) {
-        const { checkbox } = curElement;
-        if (checkbox) {
-          checkbox.value = !checkbox.value;
-        } else {
-          curElement.checkbox = {
-            value: true
-          };
-        }
-        const activeControl = this.control.getActiveControl();
-        if (activeControl instanceof CheckboxControl) {
-          activeControl.setSelect();
+    const replaceElementList = deleteElementList.map((el) => {
+      const newElement = __spreadValues({
+        value: el.value
+      }, restArg);
+      EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+        const value = el[attr];
+        if (value !== void 0) {
+          newElement[attr] = value;
         }
-      }
-      this.draw.render({
-        curIndex,
-        isSubmitHistory: isSetCheckbox,
-        isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
-        isComputeRowList: false
       });
+      return newElement;
+    });
+    elementList.splice(curIndex + 1, 0, ...replaceElementList);
+    const cacheStartPosition = cachePositionList[cacheRange.startIndex];
+    const positionContext = position.getPositionContext();
+    let positionContextIndex = positionContext.index;
+    if (positionContextIndex) {
+      if (startElement.tableId && !cacheStartElement.tableId) {
+        if (cacheStartPosition.index < positionContextIndex) {
+          positionContextIndex -= deleteElementList.length;
+        }
+      } else if (!startElement.tableId && cacheStartElement.tableId) {
+        if (startPosition.index < positionContextIndex) {
+          positionContextIndex += deleteElementList.length;
+        }
+      }
+      position.setPositionContext(__spreadProps(__spreadValues({}, positionContext), {
+        index: positionContextIndex
+      }));
     }
-    this.previewer.clearResizer();
-    if (isDirectHitImage && !isReadonly) {
-      this.previewer.drawResizer(curElement, positionList[curIndex], curElement.type === ElementType.LATEX ? {
-        mime: "svg",
-        srcKey: "laTexSVG"
-      } : {});
-    }
-    this.tableTool.dispose();
-    if (isTable && !isReadonly) {
-      const originalElementList = this.draw.getOriginalElementList();
-      const originalPositionList = this.position.getOriginalPositionList();
-      this.tableTool.render(originalElementList[index2], originalPositionList[index2]);
-    }
-    this.hyperlinkParticle.clearHyperlinkPopup();
-    if (curElement.type === ElementType.HYPERLINK) {
-      this.hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
-    }
-    this.dateParticle.clearDatePicker();
-    if (curElement.type === ElementType.DATE && !isReadonly) {
-      this.dateParticle.renderDatePicker(curElement, positionList[curIndex]);
+    rangeManager.setRange(curIndex, curIndex + deleteElementList.length, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
+    draw.render({
+      isSetCursor: false
+    });
+    host.isAllowDrag = false;
+    host.isAllowDrop = false;
+  } else if (host.isAllowDrag) {
+    host.mousedown(evt);
+    host.isAllowDrag = false;
+  }
+}
+function mouseleave(evt, host) {
+  const draw = host.getDraw();
+  const pageContainer = draw.getPageContainer();
+  const { x, y, width, height } = pageContainer.getBoundingClientRect();
+  if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height)
+    return;
+  host.setIsAllowSelection(false);
+}
+function mousemove(evt, host) {
+  const draw = host.getDraw();
+  if (host.isAllowDrag) {
+    const x = evt.offsetX;
+    const y = evt.offsetY;
+    const { startIndex: startIndex2, endIndex: endIndex2 } = host.cacheRange;
+    const positionList = host.cachePositionList;
+    for (let p = startIndex2 + 1; p <= endIndex2; p++) {
+      const { coordinate: { leftTop, rightBottom } } = positionList[p];
+      if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
+        return;
+      }
     }
+    host.dragover(evt);
+    host.isAllowDrop = true;
+    return;
   }
-  mouseleave(evt) {
-    const { x, y, width, height } = this.pageContainer.getBoundingClientRect();
-    if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height)
+  if (!host.isAllowSelection || !host.mouseDownStartPosition)
+    return;
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  const position = draw.getPosition();
+  const positionResult = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  const { index: index2, isTable, tdValueIndex, tdIndex, trIndex, tableId } = positionResult;
+  const { index: startIndex, isTable: startIsTable, tdIndex: startTdIndex, trIndex: startTrIndex } = host.mouseDownStartPosition;
+  const endIndex = isTable ? tdValueIndex : index2;
+  const rangeManager = draw.getRange();
+  if (isTable && startIsTable && (tdIndex !== startTdIndex || trIndex !== startTrIndex)) {
+    rangeManager.setRange(endIndex, endIndex, tableId, startTdIndex, tdIndex, startTrIndex, trIndex);
+  } else {
+    let end = ~endIndex ? endIndex : 0;
+    let start = startIndex;
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+    if (start === end)
       return;
-    this.setIsAllowDrag(false);
+    rangeManager.setRange(start, end);
   }
-  keydown(evt) {
-    var _a;
-    const isReadonly = this.draw.isReadonly();
-    const cursorPosition = this.position.getCursorPosition();
-    if (!cursorPosition)
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isComputeRowList: false
+  });
+}
+function keydown(evt, host) {
+  var _a;
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const isReadonly = draw.isReadonly();
+  const historyManager = draw.getHistoryManager();
+  const elementList = draw.getElementList();
+  const positionList = position.getPositionList();
+  const { index: index2 } = cursorPosition;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = startIndex === endIndex;
+  const control = draw.getControl();
+  const isPartRangeInControlOutside = control.isPartRangeInControlOutside();
+  const activeControl = control.getActiveControl();
+  if (evt.key === KeyMap.Backspace) {
+    if (isReadonly || isPartRangeInControlOutside)
       return;
-    const elementList = this.draw.getElementList();
-    const position = this.position.getPositionList();
-    const { index: index2 } = cursorPosition;
-    const { startIndex, endIndex } = this.range.getRange();
-    const isCollapsed = startIndex === endIndex;
-    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
-    const activeControl = this.control.getActiveControl();
-    if (evt.key === KeyMap.Backspace) {
-      if (isReadonly || isPartRangeInControlOutside)
+    let curIndex;
+    if (activeControl) {
+      curIndex = control.keydown(evt);
+    } else {
+      if (isCollapsed && elementList[index2].value === ZERO && index2 === 0) {
+        evt.preventDefault();
         return;
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.keydown(evt);
-      } else {
-        if (isCollapsed && elementList[index2].value === ZERO && index2 === 0) {
-          evt.preventDefault();
-          return;
-        }
-        if (!isCollapsed) {
-          elementList.splice(startIndex + 1, endIndex - startIndex);
-        } else {
-          elementList.splice(index2, 1);
-        }
-        curIndex = isCollapsed ? index2 - 1 : startIndex;
       }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
-    } else if (evt.key === KeyMap.Delete) {
-      if (isReadonly || isPartRangeInControlOutside)
-        return;
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.keydown(evt);
-      } else if (((_a = elementList[endIndex + 1]) == null ? void 0 : _a.type) === ElementType.CONTROL) {
-        curIndex = this.control.removeControl(endIndex + 1);
+      if (!isCollapsed) {
+        elementList.splice(startIndex + 1, endIndex - startIndex);
       } else {
-        if (!isCollapsed) {
-          elementList.splice(startIndex + 1, endIndex - startIndex);
-        } else {
-          elementList.splice(index2 + 1, 1);
-        }
-        curIndex = isCollapsed ? index2 : startIndex;
+        elementList.splice(index2, 1);
       }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
-    } else if (evt.key === KeyMap.Enter) {
-      if (isReadonly || isPartRangeInControlOutside)
-        return;
-      const positionContext = this.position.getPositionContext();
-      let restArg = {};
-      if (positionContext.isTable) {
-        const { tdId, trId, tableId } = positionContext;
-        restArg = { tdId, trId, tableId };
-      }
-      const enterText = __spreadValues({
-        value: ZERO
-      }, restArg);
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.setValue([enterText]);
+      curIndex = isCollapsed ? index2 - 1 : startIndex;
+    }
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+  } else if (evt.key === KeyMap.Delete) {
+    if (isReadonly || isPartRangeInControlOutside)
+      return;
+    let curIndex;
+    if (activeControl) {
+      curIndex = control.keydown(evt);
+    } else if (((_a = elementList[endIndex + 1]) == null ? void 0 : _a.type) === ElementType.CONTROL) {
+      curIndex = control.removeControl(endIndex + 1);
+    } else {
+      if (!isCollapsed) {
+        elementList.splice(startIndex + 1, endIndex - startIndex);
       } else {
-        if (isCollapsed) {
-          elementList.splice(index2 + 1, 0, enterText);
-        } else {
-          elementList.splice(startIndex + 1, endIndex - startIndex, enterText);
-        }
-        curIndex = index2 + 1;
-      }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
-      evt.preventDefault();
-    } else if (evt.key === KeyMap.Left) {
-      if (isReadonly)
-        return;
-      if (index2 > 0) {
-        const curIndex = index2 - 1;
-        this.range.setRange(curIndex, curIndex);
-        this.draw.render({
-          curIndex,
-          isSubmitHistory: false,
-          isComputeRowList: false
-        });
+        elementList.splice(index2 + 1, 1);
       }
-    } else if (evt.key === KeyMap.Right) {
-      if (isReadonly)
-        return;
-      if (index2 < position.length - 1) {
-        const curIndex = index2 + 1;
-        this.range.setRange(curIndex, curIndex);
-        this.draw.render({
-          curIndex,
-          isSubmitHistory: false,
-          isComputeRowList: false
-        });
+      curIndex = isCollapsed ? index2 : startIndex;
+    }
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+  } else if (evt.key === KeyMap.Enter) {
+    if (isReadonly || isPartRangeInControlOutside)
+      return;
+    const positionContext = position.getPositionContext();
+    let restArg = {};
+    if (positionContext.isTable) {
+      const { tdId, trId, tableId } = positionContext;
+      restArg = { tdId, trId, tableId };
+    }
+    const enterText = __spreadValues({
+      value: ZERO
+    }, restArg);
+    let curIndex;
+    if (activeControl) {
+      curIndex = control.setValue([enterText]);
+    } else {
+      if (isCollapsed) {
+        elementList.splice(index2 + 1, 0, enterText);
+      } else {
+        elementList.splice(startIndex + 1, endIndex - startIndex, enterText);
       }
-    } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
-      if (isReadonly)
-        return;
-      const { rowNo, index: index22, coordinate: { leftTop, rightTop } } = cursorPosition;
-      if (evt.key === KeyMap.Up && rowNo !== 0 || evt.key === KeyMap.Down && rowNo !== this.draw.getRowCount()) {
-        const probablePosition = evt.key === KeyMap.Up ? position.slice(0, index22).filter((p) => p.rowNo === rowNo - 1) : position.slice(index22, position.length - 1).filter((p) => p.rowNo === rowNo + 1);
-        let maxIndex = 0;
-        let maxDistance = 0;
-        for (let p = 0; p < probablePosition.length; p++) {
-          const position2 = probablePosition[p];
-          if (position2.coordinate.leftTop[0] >= leftTop[0] && position2.coordinate.leftTop[0] <= rightTop[0]) {
-            const curDistance = rightTop[0] - position2.coordinate.leftTop[0];
-            if (curDistance > maxDistance) {
-              maxIndex = position2.index;
-              maxDistance = curDistance;
-            }
-          } else if (position2.coordinate.leftTop[0] <= leftTop[0] && position2.coordinate.rightTop[0] >= leftTop[0]) {
-            const curDistance = position2.coordinate.rightTop[0] - leftTop[0];
-            if (curDistance > maxDistance) {
-              maxIndex = position2.index;
-              maxDistance = curDistance;
-            }
+      curIndex = index2 + 1;
+    }
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.Left) {
+    if (isReadonly)
+      return;
+    if (index2 > 0) {
+      const curIndex = index2 - 1;
+      rangeManager.setRange(curIndex, curIndex);
+      draw.render({
+        curIndex,
+        isSubmitHistory: false,
+        isComputeRowList: false
+      });
+    }
+  } else if (evt.key === KeyMap.Right) {
+    if (isReadonly)
+      return;
+    if (index2 < positionList.length - 1) {
+      const curIndex = index2 + 1;
+      rangeManager.setRange(curIndex, curIndex);
+      draw.render({
+        curIndex,
+        isSubmitHistory: false,
+        isComputeRowList: false
+      });
+    }
+  } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
+    if (isReadonly)
+      return;
+    const { rowNo, index: index22, coordinate: { leftTop, rightTop } } = cursorPosition;
+    if (evt.key === KeyMap.Up && rowNo !== 0 || evt.key === KeyMap.Down && rowNo !== draw.getRowCount()) {
+      const probablePosition = evt.key === KeyMap.Up ? positionList.slice(0, index22).filter((p) => p.rowNo === rowNo - 1) : positionList.slice(index22, positionList.length - 1).filter((p) => p.rowNo === rowNo + 1);
+      let maxIndex = 0;
+      let maxDistance = 0;
+      for (let p = 0; p < probablePosition.length; p++) {
+        const position2 = probablePosition[p];
+        if (position2.coordinate.leftTop[0] >= leftTop[0] && position2.coordinate.leftTop[0] <= rightTop[0]) {
+          const curDistance = rightTop[0] - position2.coordinate.leftTop[0];
+          if (curDistance > maxDistance) {
+            maxIndex = position2.index;
+            maxDistance = curDistance;
           }
-          if (p === probablePosition.length - 1 && maxIndex === 0) {
+        } else if (position2.coordinate.leftTop[0] <= leftTop[0] && position2.coordinate.rightTop[0] >= leftTop[0]) {
+          const curDistance = position2.coordinate.rightTop[0] - leftTop[0];
+          if (curDistance > maxDistance) {
             maxIndex = position2.index;
+            maxDistance = curDistance;
           }
         }
-        const curIndex = maxIndex;
-        this.range.setRange(curIndex, curIndex);
-        this.draw.render({
-          curIndex,
-          isSubmitHistory: false,
-          isComputeRowList: false
-        });
-      }
-    } else if (evt.ctrlKey && evt.key === KeyMap.Z) {
-      if (isReadonly)
-        return;
-      this.historyManager.undo();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.Y) {
-      if (isReadonly)
-        return;
-      this.historyManager.redo();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.C) {
-      this.copy();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.X) {
-      this.cut();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.A) {
-      this.selectAll();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.S) {
-      if (isReadonly)
-        return;
-      if (this.listener.saved) {
-        this.listener.saved(this.draw.getValue());
+        if (p === probablePosition.length - 1 && maxIndex === 0) {
+          maxIndex = position2.index;
+        }
       }
-      evt.preventDefault();
-    } else if (evt.key === KeyMap.ESC) {
-      this.clearPainterStyle();
-      evt.preventDefault();
-    } else if (evt.key === KeyMap.TAB) {
-      this.draw.insertElementList([{
-        type: ElementType.TAB,
-        value: ""
-      }]);
-      evt.preventDefault();
+      const curIndex = maxIndex;
+      rangeManager.setRange(curIndex, curIndex);
+      draw.render({
+        curIndex,
+        isSubmitHistory: false,
+        isComputeRowList: false
+      });
     }
-  }
-  dblclick() {
-    const cursorPosition = this.position.getCursorPosition();
-    if (!cursorPosition)
+  } else if (evt.ctrlKey && evt.key === KeyMap.Z) {
+    if (isReadonly)
       return;
-    const { value, index: index2 } = cursorPosition;
-    const elementList = this.draw.getElementList();
-    let upCount = 0;
-    let downCount = 0;
-    const isNumber = NUMBER_LIKE_REG.test(value);
-    if (isNumber || LETTER_REG.test(value)) {
-      let upStartIndex = index2 - 1;
-      while (upStartIndex > 0) {
-        const value2 = elementList[upStartIndex].value;
-        if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
-          upCount++;
-          upStartIndex--;
-        } else {
-          break;
-        }
-      }
-      let downStartIndex = index2 + 1;
-      while (downStartIndex < elementList.length) {
-        const value2 = elementList[downStartIndex].value;
-        if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
-          downCount++;
-          downStartIndex++;
-        } else {
-          break;
+    historyManager.undo();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.Y) {
+    if (isReadonly)
+      return;
+    historyManager.redo();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.C) {
+    host.copy();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.X) {
+    host.cut();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.A) {
+    host.selectAll();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.S) {
+    if (isReadonly)
+      return;
+    const listener = draw.getListener();
+    if (listener.saved) {
+      listener.saved(draw.getValue());
+    }
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.ESC) {
+    host.clearPainterStyle();
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.TAB) {
+    draw.insertElementList([{
+      type: ElementType.TAB,
+      value: ""
+    }]);
+    evt.preventDefault();
+  }
+}
+function input(data2, host) {
+  var _a;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!data2 || !cursorPosition || host.isCompositing)
+    return;
+  const control = draw.getControl();
+  if (control.isPartRangeInControlOutside()) {
+    return;
+  }
+  const activeControl = control.getActiveControl();
+  const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType;
+  const text = data2.replaceAll(`
+`, ZERO);
+  const cursor = draw.getCursor();
+  const agentDom = cursor.getAgentDom();
+  agentDom.value = "";
+  const { index: index2 } = cursorPosition;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = startIndex === endIndex;
+  const positionContext = position.getPositionContext();
+  let restArg = {};
+  if (positionContext.isTable) {
+    const { tdId, trId, tableId } = positionContext;
+    restArg = { tdId, trId, tableId };
+  }
+  const elementList = draw.getElementList();
+  const element = elementList[endIndex];
+  const inputData = splitText(text).map((value) => {
+    const newElement = __spreadValues({
+      value
+    }, restArg);
+    const nextElement = elementList[endIndex + 1];
+    if (element.type === TEXT || !element.type && element.value !== ZERO || element.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || element.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || element.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || element.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
+      EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
+        const value2 = element[attr];
+        if (value2 !== void 0) {
+          newElement[attr] = value2;
         }
+      });
+    }
+    return newElement;
+  });
+  let curIndex;
+  if (activeControl && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) === element.controlId) {
+    curIndex = control.setValue(inputData);
+  } else {
+    let start = 0;
+    if (isCollapsed) {
+      start = index2 + 1;
+    } else {
+      start = startIndex + 1;
+      elementList.splice(startIndex + 1, endIndex - startIndex);
+    }
+    for (let i = 0; i < inputData.length; i++) {
+      elementList.splice(start + i, 0, inputData[i]);
+    }
+    curIndex = (isCollapsed ? index2 : startIndex) + inputData.length;
+  }
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
+function cut(host) {
+  const draw = host.getDraw();
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  if (!~startIndex && !~startIndex)
+    return;
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const control = draw.getControl();
+  const isPartRangeInControlOutside = control.isPartRangeInControlOutside();
+  if (isPartRangeInControlOutside)
+    return;
+  const activeControl = control.getActiveControl();
+  const elementList = draw.getElementList();
+  let start = startIndex;
+  let end = endIndex;
+  if (startIndex === endIndex) {
+    const position = draw.getPosition();
+    const positionList = position.getPositionList();
+    const curRowNo = positionList[startIndex].rowNo;
+    const cutElementIndexList = [];
+    for (let p = 0; p < positionList.length; p++) {
+      const position2 = positionList[p];
+      if (position2.rowNo > curRowNo)
+        break;
+      if (position2.rowNo === curRowNo) {
+        cutElementIndexList.push(p);
       }
     }
-    this.range.setRange(index2 - upCount - 1, index2 + downCount);
-    this.draw.render({
-      isSubmitHistory: false,
-      isSetCursor: false,
-      isComputeRowList: false
-    });
+    const firstElementIndex = cutElementIndexList[0] - 1;
+    start = firstElementIndex < 0 ? 0 : firstElementIndex;
+    end = cutElementIndexList[cutElementIndexList.length - 1];
   }
-  threeClick() {
-    const cursorPosition = this.position.getCursorPosition();
-    if (!cursorPosition)
-      return;
-    const { index: index2 } = cursorPosition;
-    const elementList = this.draw.getElementList();
-    let upCount = 0;
-    let downCount = 0;
+  const options = draw.getOptions();
+  writeElementList(elementList.slice(start + 1, end + 1), options);
+  let curIndex;
+  if (activeControl) {
+    curIndex = control.cut();
+  } else {
+    elementList.splice(start + 1, end - start);
+    curIndex = start;
+  }
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
+function copy(host) {
+  const draw = host.getDraw();
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  if (startIndex !== endIndex) {
+    const options = draw.getOptions();
+    const elementList = draw.getElementList();
+    writeElementList(elementList.slice(startIndex + 1, endIndex + 1), options);
+  }
+}
+function drop(evt, host) {
+  var _a;
+  evt.preventDefault();
+  const data2 = (_a = evt.dataTransfer) == null ? void 0 : _a.getData("text");
+  if (data2) {
+    host.input(data2);
+  }
+}
+const LETTER_REG = /[a-zA-Z]/;
+const NUMBER_LIKE_REG = /[0-9.]/;
+function dblclick(host) {
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { value, index: index2 } = cursorPosition;
+  let upCount = 0;
+  let downCount = 0;
+  const isNumber = NUMBER_LIKE_REG.test(value);
+  if (isNumber || LETTER_REG.test(value)) {
+    const elementList = draw.getElementList();
     let upStartIndex = index2 - 1;
     while (upStartIndex > 0) {
-      const value = elementList[upStartIndex].value;
-      if (value !== ZERO) {
+      const value2 = elementList[upStartIndex].value;
+      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
         upCount++;
         upStartIndex--;
       } else {
@@ -4488,113 +4596,184 @@ class CanvasEvent {
     }
     let downStartIndex = index2 + 1;
     while (downStartIndex < elementList.length) {
-      const value = elementList[downStartIndex].value;
-      if (value !== ZERO) {
+      const value2 = elementList[downStartIndex].value;
+      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
         downCount++;
         downStartIndex++;
       } else {
         break;
       }
     }
-    this.range.setRange(index2 - upCount - 1, index2 + downCount);
-    this.draw.render({
-      isSubmitHistory: false,
-      isSetCursor: false,
-      isComputeRowList: false
-    });
   }
-  input(data2) {
-    var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
-    if (!this.cursor)
-      return;
-    const cursorPosition = this.position.getCursorPosition();
-    if (!data2 || !cursorPosition || this.isCompositing)
-      return;
-    if (this.control.isPartRangeInControlOutside()) {
-      return;
-    }
-    const activeControl = this.control.getActiveControl();
-    const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType;
-    const text = data2.replaceAll(`
-`, ZERO);
-    const elementList = this.draw.getElementList();
-    const agentDom = this.cursor.getAgentDom();
-    agentDom.value = "";
-    const { index: index2 } = cursorPosition;
-    const { startIndex, endIndex } = this.range.getRange();
-    const isCollapsed = startIndex === endIndex;
-    const positionContext = this.position.getPositionContext();
-    let restArg = {};
-    if (positionContext.isTable) {
-      const { tdId, trId, tableId } = positionContext;
-      restArg = { tdId, trId, tableId };
+  const rangeManager = draw.getRange();
+  rangeManager.setRange(index2 - upCount - 1, index2 + downCount);
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isComputeRowList: false
+  });
+}
+function threeClick(host) {
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { index: index2 } = cursorPosition;
+  const elementList = draw.getElementList();
+  let upCount = 0;
+  let downCount = 0;
+  let upStartIndex = index2 - 1;
+  while (upStartIndex > 0) {
+    const value = elementList[upStartIndex].value;
+    if (value !== ZERO) {
+      upCount++;
+      upStartIndex--;
+    } else {
+      break;
+    }
+  }
+  let downStartIndex = index2 + 1;
+  while (downStartIndex < elementList.length) {
+    const value = elementList[downStartIndex].value;
+    if (value !== ZERO) {
+      downCount++;
+      downStartIndex++;
+    } else {
+      break;
+    }
+  }
+  const rangeManager = draw.getRange();
+  rangeManager.setRange(index2 - upCount - 1, index2 + downCount);
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isComputeRowList: false
+  });
+}
+var click = {
+  dblclick,
+  threeClick
+};
+function compositionstart(host) {
+  host.isCompositing = true;
+}
+function compositionend(host) {
+  host.isCompositing = false;
+}
+var composition = {
+  compositionstart,
+  compositionend
+};
+function dragover(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  evt.preventDefault();
+  const pageContainer = draw.getPageContainer();
+  const editorRegion = findParent(evt.target, (node) => node === pageContainer, true);
+  if (!editorRegion)
+    return;
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  const position = draw.getPosition();
+  const { isTable, tdValueIndex, index: index2 } = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  const positionList = position.getPositionList();
+  const curIndex = isTable ? tdValueIndex : index2;
+  if (~index2) {
+    const rangeManager = draw.getRange();
+    rangeManager.setRange(curIndex, curIndex);
+    position.setCursorPosition(positionList[curIndex]);
+  }
+  const cursor = draw.getCursor();
+  cursor.drawCursor();
+}
+var drag = {
+  dragover
+};
+class CanvasEvent {
+  constructor(draw) {
+    __publicField(this, "isAllowSelection");
+    __publicField(this, "isCompositing");
+    __publicField(this, "isAllowDrag");
+    __publicField(this, "isAllowDrop");
+    __publicField(this, "cacheRange");
+    __publicField(this, "cacheElementList");
+    __publicField(this, "cachePositionList");
+    __publicField(this, "mouseDownStartPosition");
+    __publicField(this, "draw");
+    __publicField(this, "pageContainer");
+    __publicField(this, "pageList");
+    __publicField(this, "range");
+    __publicField(this, "position");
+    this.draw = draw;
+    this.pageContainer = draw.getPageContainer();
+    this.pageList = draw.getPageList();
+    this.range = this.draw.getRange();
+    this.position = this.draw.getPosition();
+    this.isAllowSelection = false;
+    this.isCompositing = false;
+    this.isAllowDrag = false;
+    this.isAllowDrop = false;
+    this.cacheRange = null;
+    this.cacheElementList = null;
+    this.cachePositionList = null;
+    this.mouseDownStartPosition = null;
+  }
+  getDraw() {
+    return this.draw;
+  }
+  register() {
+    this.pageContainer.addEventListener("mousedown", this.mousedown.bind(this));
+    this.pageContainer.addEventListener("mouseup", this.mouseup.bind(this));
+    this.pageContainer.addEventListener("mouseleave", this.mouseleave.bind(this));
+    this.pageContainer.addEventListener("mousemove", this.mousemove.bind(this));
+    this.pageContainer.addEventListener("dblclick", this.dblclick.bind(this));
+    this.pageContainer.addEventListener("dragover", this.dragover.bind(this));
+    this.pageContainer.addEventListener("drop", this.drop.bind(this));
+    threeClick$1(this.pageContainer, this.threeClick.bind(this));
+  }
+  setIsAllowSelection(payload) {
+    this.isAllowSelection = payload;
+    if (!payload) {
+      this.applyPainterStyle();
     }
-    const element = elementList[endIndex];
-    const inputData = splitText(text).map((value) => {
-      const newElement = __spreadValues({
-        value
-      }, restArg);
-      const nextElement = elementList[endIndex + 1];
-      if (element.type === TEXT || !element.type && element.value !== ZERO || element.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || element.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || element.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || element.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
-        EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
-          const value2 = element[attr];
-          if (value2 !== void 0) {
-            newElement[attr] = value2;
-          }
-        });
-      }
-      return newElement;
+  }
+  setIsAllowDrag(payload) {
+    this.isAllowDrag = payload;
+    this.isAllowDrop = payload;
+  }
+  clearPainterStyle() {
+    this.pageList.forEach((p) => {
+      p.style.cursor = "text";
     });
-    let curIndex;
-    if (activeControl && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) === element.controlId) {
-      curIndex = this.control.setValue(inputData);
-    } else {
-      let start = 0;
-      if (isCollapsed) {
-        start = index2 + 1;
-      } else {
-        start = startIndex + 1;
-        elementList.splice(startIndex + 1, endIndex - startIndex);
-      }
-      for (let i = 0; i < inputData.length; i++) {
-        elementList.splice(start + i, 0, inputData[i]);
-      }
-      curIndex = (isCollapsed ? index2 : startIndex) + inputData.length;
-    }
-    this.range.setRange(curIndex, curIndex);
-    this.draw.render({ curIndex });
+    this.draw.setPainterStyle(null);
   }
-  cut() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+  applyPainterStyle() {
+    const painterStyle = this.draw.getPainterStyle();
+    if (!painterStyle)
       return;
-    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
-    if (isPartRangeInControlOutside)
+    const selection = this.range.getSelection();
+    if (!selection)
       return;
-    const activeControl = this.control.getActiveControl();
-    const { startIndex, endIndex } = this.range.getRange();
-    const elementList = this.draw.getElementList();
-    if (startIndex !== endIndex) {
-      writeElementList(elementList.slice(startIndex + 1, endIndex + 1), this.options);
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.cut();
-      } else {
-        elementList.splice(startIndex + 1, endIndex - startIndex);
-        curIndex = startIndex;
-      }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
-    }
-  }
-  copy() {
-    const { startIndex, endIndex } = this.range.getRange();
-    const elementList = this.draw.getElementList();
-    if (startIndex !== endIndex) {
-      writeElementList(elementList.slice(startIndex + 1, endIndex + 1), this.options);
+    const painterStyleKeys = Object.keys(painterStyle);
+    selection.forEach((s) => {
+      painterStyleKeys.forEach((pKey) => {
+        const key = pKey;
+        s[key] = painterStyle[key];
+      });
+    });
+    this.draw.render({ isSetCursor: false });
+    const painterOptions = this.draw.getPainterOptions();
+    if (!painterOptions || !painterOptions.isDblclick) {
+      this.clearPainterStyle();
     }
   }
   selectAll() {
@@ -4606,14 +4785,49 @@ class CanvasEvent {
       isComputeRowList: false
     });
   }
+  mousemove(evt) {
+    mousemove(evt, this);
+  }
+  mousedown(evt) {
+    mousedown(evt, this);
+  }
+  mouseup(evt) {
+    mouseup(evt, this);
+  }
+  mouseleave(evt) {
+    mouseleave(evt, this);
+  }
+  keydown(evt) {
+    keydown(evt, this);
+  }
+  dblclick() {
+    click.dblclick(this);
+  }
+  threeClick() {
+    click.threeClick(this);
+  }
+  input(data2) {
+    input(data2, this);
+  }
+  cut() {
+    cut(this);
+  }
+  copy() {
+    copy(this);
+  }
   compositionstart() {
-    this.isCompositing = true;
+    composition.compositionstart(this);
   }
   compositionend() {
-    this.isCompositing = false;
+    composition.compositionend(this);
+  }
+  drop(evt) {
+    drop(evt, this);
+  }
+  dragover(evt) {
+    drag.dragover(evt, this);
   }
 }
-const EDITOR_COMPONENT = "editor-component";
 class GlobalEvent {
   constructor(draw, canvasEvent) {
     __publicField(this, "draw");
@@ -4626,6 +4840,60 @@ class GlobalEvent {
     __publicField(this, "tableTool");
     __publicField(this, "hyperlinkParticle");
     __publicField(this, "control");
+    __publicField(this, "dateParticle");
+    __publicField(this, "recoverEffect", (evt) => {
+      if (!this.cursor)
+        return;
+      const cursorDom = this.cursor.getCursorDom();
+      const agentDom = this.cursor.getAgentDom();
+      const innerDoms = [this.canvas, cursorDom, agentDom, document.body];
+      if (innerDoms.includes(evt.target)) {
+        this.setRangeStyle();
+        return;
+      }
+      const outerEditorDom = findParent(evt.target, (node) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), true);
+      if (outerEditorDom) {
+        this.setRangeStyle();
+        return;
+      }
+      this.cursor.recoveryCursor();
+      this.range.recoveryRangeStyle();
+      this.previewer.clearResizer();
+      this.tableTool.dispose();
+      this.hyperlinkParticle.clearHyperlinkPopup();
+      this.control.destroyControl();
+      this.dateParticle.clearDatePicker();
+    });
+    __publicField(this, "setCanvasEventAbility", () => {
+      this.canvasEvent.setIsAllowDrag(false);
+      this.canvasEvent.setIsAllowSelection(false);
+    });
+    __publicField(this, "setRangeStyle", () => {
+      this.range.setRangeStyle();
+    });
+    __publicField(this, "setPageScale", (evt) => {
+      if (!evt.ctrlKey)
+        return;
+      evt.preventDefault();
+      const { scale } = this.options;
+      if (evt.deltaY < 0) {
+        const nextScale = scale * 10 + 1;
+        if (nextScale <= 30) {
+          this.draw.setPageScale(nextScale / 10);
+        }
+      } else {
+        const nextScale = scale * 10 - 1;
+        if (nextScale >= 5) {
+          this.draw.setPageScale(nextScale / 10);
+        }
+      }
+    });
+    __publicField(this, "_handleVisibilityChange", () => {
+      var _a;
+      if (document.visibilityState) {
+        (_a = this.cursor) == null ? void 0 : _a.drawCursor();
+      }
+    });
     this.draw = draw;
     this.canvas = draw.getPage();
     this.options = draw.getOptions();
@@ -4635,68 +4903,28 @@ class GlobalEvent {
     this.previewer = draw.getPreviewer();
     this.tableTool = draw.getTableTool();
     this.hyperlinkParticle = draw.getHyperlinkParticle();
+    this.dateParticle = draw.getDateParticle();
     this.control = draw.getControl();
   }
   register() {
     this.cursor = this.draw.getCursor();
-    document.addEventListener("keyup", () => {
-      this.setRangeStyle();
-    });
-    document.addEventListener("click", (evt) => {
-      this.recoverEffect(evt);
-    });
-    document.addEventListener("mouseup", () => {
-      this.setDragState();
-    });
-    document.addEventListener("wheel", (evt) => {
-      this.setPageScale(evt);
-    }, { passive: false });
-  }
-  recoverEffect(evt) {
-    if (!this.cursor)
-      return;
-    const cursorDom = this.cursor.getCursorDom();
-    const agentDom = this.cursor.getAgentDom();
-    const innerDoms = [this.canvas, cursorDom, agentDom, document.body];
-    if (innerDoms.includes(evt.target)) {
-      this.setRangeStyle();
-      return;
-    }
-    const outerEditorDom = findParent(evt.target, (node) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), true);
-    if (outerEditorDom) {
-      this.setRangeStyle();
-      return;
-    }
-    this.cursor.recoveryCursor();
-    this.range.recoveryRangeStyle();
-    this.range.setRange(-1, -1);
-    this.previewer.clearResizer();
-    this.tableTool.dispose();
-    this.hyperlinkParticle.clearHyperlinkPopup();
-    this.control.destroyControl();
-  }
-  setDragState() {
-    this.canvasEvent.setIsAllowDrag(false);
-  }
-  setRangeStyle() {
-    this.range.setRangeStyle();
-  }
-  setPageScale(evt) {
-    if (!evt.ctrlKey)
-      return;
-    evt.preventDefault();
-    const { scale } = this.options;
-    if (evt.deltaY < 0) {
-      const nextScale = scale * 10 + 1;
-      if (nextScale <= 30) {
-        this.draw.setPageScale(nextScale / 10);
-      }
-    } else {
-      const nextScale = scale * 10 - 1;
-      if (nextScale >= 5) {
-        this.draw.setPageScale(nextScale / 10);
-      }
-    }
+    this.addEvent();
+  }
+  addEvent() {
+    window.addEventListener("blur", this.recoverEffect);
+    document.addEventListener("keyup", this.setRangeStyle);
+    document.addEventListener("click", this.recoverEffect);
+    document.addEventListener("mouseup", this.setCanvasEventAbility);
+    document.addEventListener("wheel", this.setPageScale, { passive: false });
+    document.addEventListener("visibilitychange", this._handleVisibilityChange);
+  }
+  removeEvent() {
+    window.removeEventListener("blur", this.recoverEffect);
+    document.removeEventListener("keyup", this.setRangeStyle);
+    document.removeEventListener("click", this.recoverEffect);
+    document.removeEventListener("mouseup", this.setCanvasEventAbility);
+    document.removeEventListener("wheel", this.setPageScale);
+    document.removeEventListener("visibilitychange", this._handleVisibilityChange);
   }
 }
 class HistoryManager {
@@ -4901,6 +5129,43 @@ class Position {
       isControl: ((_b = elementList[curPositionIndex]) == null ? void 0 : _b.type) === ElementType.CONTROL
     };
   }
+  adjustPositionContext(payload) {
+    const isReadonly = this.draw.isReadonly();
+    const { x, y } = payload;
+    const positionResult = this.getPositionByXY({
+      x,
+      y
+    });
+    if (positionResult.isControl && !isReadonly) {
+      const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex } = positionResult;
+      const control = this.draw.getControl();
+      const { newIndex } = control.moveCursor({
+        index: index22,
+        isTable: isTable2,
+        trIndex: trIndex2,
+        tdIndex: tdIndex2,
+        tdValueIndex
+      });
+      if (isTable2) {
+        positionResult.tdValueIndex = newIndex;
+      } else {
+        positionResult.index = newIndex;
+      }
+    }
+    const { index: index2, isCheckbox, isControl, isTable, trIndex, tdIndex, tdId, trId, tableId } = positionResult;
+    this.setPositionContext({
+      isTable: isTable || false,
+      isCheckbox: isCheckbox || false,
+      isControl: isControl || false,
+      index: index2,
+      trIndex,
+      tdIndex,
+      tdId,
+      trId,
+      tableId
+    });
+    return positionResult;
+  }
 }
 class RangeManager {
   constructor(draw) {
@@ -4949,6 +5214,17 @@ class RangeManager {
     }
     return rangeRow;
   }
+  getIsPointInRange(x, y) {
+    const { startIndex, endIndex } = this.range;
+    const positionList = this.position.getPositionList();
+    for (let p = startIndex + 1; p <= endIndex; p++) {
+      const { coordinate: { leftTop, rightBottom } } = positionList[p];
+      if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
   setRange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex) {
     this.range.startIndex = startIndex;
     this.range.endIndex = endIndex;
@@ -5611,6 +5887,38 @@ class ScrollObserver {
     __publicField(this, "options");
     __publicField(this, "pageContainer");
     __publicField(this, "pageHeight");
+    __publicField(this, "_observer", debounce(() => {
+      const rect = this.pageContainer.getBoundingClientRect();
+      const top = Math.abs(rect.top);
+      const bottom = top + window.innerHeight;
+      const pageList = this.draw.getPageList();
+      const visiblePageNoList = [];
+      let intersectionPageNo = 0;
+      let intersectionMaxHeight = 0;
+      for (let i = 0; i < pageList.length; i++) {
+        const curTop = i * this.pageHeight;
+        const curBottom = (i + 1) * this.pageHeight;
+        if (curTop > bottom)
+          break;
+        if (curBottom < top)
+          continue;
+        let intersectionHeight = 0;
+        if (curTop < top && curBottom < bottom) {
+          intersectionHeight = curBottom - top;
+        } else if (curTop > top && curBottom > bottom) {
+          intersectionHeight = bottom - curTop;
+        } else {
+          intersectionHeight = rect.height;
+        }
+        if (intersectionHeight > intersectionMaxHeight) {
+          intersectionMaxHeight = intersectionHeight;
+          intersectionPageNo = i;
+        }
+        visiblePageNoList.push(i);
+      }
+      this.draw.setIntersectionPageNo(intersectionPageNo);
+      this.draw.setVisiblePageNoList(visiblePageNoList);
+    }, 150));
     this.draw = draw;
     this.options = draw.getOptions();
     this.pageContainer = draw.getPageContainer();
@@ -5621,39 +5929,13 @@ class ScrollObserver {
         this._observer();
       }
     });
-    document.addEventListener("scroll", debounce(this._observer.bind(this), 150));
-  }
-  _observer() {
-    const rect = this.pageContainer.getBoundingClientRect();
-    const top = Math.abs(rect.top);
-    const bottom = top + window.innerHeight;
-    const pageList = this.draw.getPageList();
-    const visiblePageNoList = [];
-    let intersectionPageNo = 0;
-    let intersectionMaxHeight = 0;
-    for (let i = 0; i < pageList.length; i++) {
-      const curTop = i * this.pageHeight;
-      const curBottom = (i + 1) * this.pageHeight;
-      if (curTop > bottom)
-        break;
-      if (curBottom < top)
-        continue;
-      let intersectionHeight = 0;
-      if (curTop < top && curBottom < bottom) {
-        intersectionHeight = curBottom - top;
-      } else if (curTop > top && curBottom > bottom) {
-        intersectionHeight = bottom - curTop;
-      } else {
-        intersectionHeight = rect.height;
-      }
-      if (intersectionHeight > intersectionMaxHeight) {
-        intersectionMaxHeight = intersectionHeight;
-        intersectionPageNo = i;
-      }
-      visiblePageNoList.push(i);
-    }
-    this.draw.setIntersectionPageNo(intersectionPageNo);
-    this.draw.setVisiblePageNoList(visiblePageNoList);
+    this._addEvent();
+  }
+  _addEvent() {
+    document.addEventListener("scroll", this._observer);
+  }
+  removeEvent() {
+    document.removeEventListener("scroll", this._observer);
   }
 }
 var MoveDirection;
@@ -5672,6 +5954,29 @@ class SelectionObserver {
     __publicField(this, "isMoving");
     __publicField(this, "clientWidth");
     __publicField(this, "clientHeight");
+    __publicField(this, "_mousedown", () => {
+      this.isMousedown = true;
+    });
+    __publicField(this, "_mouseup", () => {
+      this.isMousedown = false;
+      this._stopMove();
+    });
+    __publicField(this, "_mousemove", (evt) => {
+      if (!this.isMousedown)
+        return;
+      const { x, y } = evt;
+      if (y < this.tippingPoints[0]) {
+        this._startMove(MoveDirection.UP);
+      } else if (this.clientHeight - y <= this.tippingPoints[1]) {
+        this._startMove(MoveDirection.DOWN);
+      } else if (x < this.tippingPoints[2]) {
+        this._startMove(MoveDirection.LEFT);
+      } else if (this.clientWidth - x < this.tippingPoints[3]) {
+        this._startMove(MoveDirection.RIGHT);
+      } else {
+        this._stopMove();
+      }
+    });
     this.threshold = 10;
     this.tippingPoints = [70, 40, 10, 20];
     this.requestAnimationFrameId = -1;
@@ -5679,32 +5984,17 @@ class SelectionObserver {
     this.isMoving = false;
     this.clientWidth = 0;
     this.clientHeight = 0;
-    document.addEventListener("mousedown", this._mousedown.bind(this));
-    document.addEventListener("mousemove", this._mousemove.bind(this));
-    document.addEventListener("mouseup", this._mouseup.bind(this));
+    this._addEvent();
   }
-  _mousedown() {
-    this.isMousedown = true;
+  _addEvent() {
+    document.addEventListener("mousedown", this._mousedown);
+    document.addEventListener("mousemove", this._mousemove);
+    document.addEventListener("mouseup", this._mouseup);
   }
-  _mouseup() {
-    this.isMousedown = false;
-    this._stopMove();
-  }
-  _mousemove(evt) {
-    if (!this.isMousedown)
-      return;
-    const { x, y } = evt;
-    if (y < this.tippingPoints[0]) {
-      this._startMove(MoveDirection.UP);
-    } else if (this.clientHeight - y <= this.tippingPoints[1]) {
-      this._startMove(MoveDirection.DOWN);
-    } else if (x < this.tippingPoints[2]) {
-      this._startMove(MoveDirection.LEFT);
-    } else if (this.clientWidth - x < this.tippingPoints[3]) {
-      this._startMove(MoveDirection.RIGHT);
-    } else {
-      this._stopMove();
-    }
+  removeEvent() {
+    document.removeEventListener("mousedown", this._mousedown);
+    document.removeEventListener("mousemove", this._mousemove);
+    document.removeEventListener("mouseup", this._mouseup);
   }
   _move(direction) {
     const x = window.screenX;
@@ -5951,17 +6241,17 @@ class TableTool {
     const rowList = trList.map((tr) => tr.height);
     const colList = colgroup.map((col) => col.width);
     const rowContainer = document.createElement("div");
-    rowContainer.classList.add("table-tool__row");
+    rowContainer.classList.add(`${EDITOR_PREFIX}-table-tool__row`);
     rowContainer.style.transform = `translateX(-${this.translate * scale}px)`;
     for (let r = 0; r < rowList.length; r++) {
       const rowHeight = rowList[r] * scale;
       const rowItem = document.createElement("div");
-      rowItem.classList.add("table-tool__row__item");
+      rowItem.classList.add(`${EDITOR_PREFIX}-table-tool__row__item`);
       if (r === rowIndex) {
         rowItem.classList.add("active");
       }
       const rowItemAnchor = document.createElement("div");
-      rowItemAnchor.classList.add("table-tool__anchor");
+      rowItemAnchor.classList.add(`${EDITOR_PREFIX}-table-tool__anchor`);
       rowItemAnchor.onmousedown = (evt) => {
         this._mousedown({
           evt,
@@ -5980,17 +6270,17 @@ class TableTool {
     this.container.append(rowContainer);
     this.toolRowContainer = rowContainer;
     const colContainer = document.createElement("div");
-    colContainer.classList.add("table-tool__col");
+    colContainer.classList.add(`${EDITOR_PREFIX}-table-tool__col`);
     colContainer.style.transform = `translateY(-${this.translate * scale}px)`;
     for (let c = 0; c < colList.length; c++) {
       const colHeight = colList[c] * scale;
       const colItem = document.createElement("div");
-      colItem.classList.add("table-tool__col__item");
+      colItem.classList.add(`${EDITOR_PREFIX}-table-tool__col__item`);
       if (c === colIndex) {
         colItem.classList.add("active");
       }
       const colItemAnchor = document.createElement("div");
-      colItemAnchor.classList.add("table-tool__anchor");
+      colItemAnchor.classList.add(`${EDITOR_PREFIX}-table-tool__anchor`);
       colItemAnchor.onmousedown = (evt) => {
         this._mousedown({
           evt,
@@ -6027,14 +6317,14 @@ class TableTool {
     let startX = 0;
     let startY = 0;
     const anchorLine = document.createElement("div");
-    anchorLine.classList.add("table-anchor__line");
+    anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line`);
     if (order === TableOrder.ROW) {
-      anchorLine.classList.add("table-anchor__line__row");
+      anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line__row`);
       anchorLine.style.width = `${width}px`;
       startX = 0;
       startY = prePageHeight + this.mousedownY - canvasRect.top;
     } else {
-      anchorLine.classList.add("table-anchor__line__col");
+      anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line__col`);
       anchorLine.style.height = `${height}px`;
       startX = this.mousedownX - canvasRect.left;
       startY = prePageHeight;
@@ -6138,7 +6428,7 @@ class HyperlinkParticle {
   }
   _createHyperlinkPopupDom() {
     const hyperlinkPopupContainer = document.createElement("div");
-    hyperlinkPopupContainer.classList.add("hyperlink-popup");
+    hyperlinkPopupContainer.classList.add(`${EDITOR_PREFIX}-hyperlink-popup`);
     const hyperlinkDom = document.createElement("a");
     hyperlinkDom.target = "_blank";
     hyperlinkPopupContainer.append(hyperlinkDom);
@@ -6448,7 +6738,7 @@ class SelectControl {
     if (!position)
       return;
     const selectPopupContainer = document.createElement("div");
-    selectPopupContainer.classList.add("select-control-popup");
+    selectPopupContainer.classList.add(`${EDITOR_PREFIX}-select-control-popup`);
     selectPopupContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP);
     const ul = document.createElement("ul");
     for (let v = 0; v < valueSets.length; v++) {
@@ -6985,7 +7275,7 @@ class Previewer {
   }
   _createResizerDom() {
     const resizerSelection = document.createElement("div");
-    resizerSelection.classList.add("resizer-selection");
+    resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`);
     resizerSelection.style.display = "none";
     resizerSelection.style.borderColor = this.options.resizerColor;
     const resizerHandleList = [];
@@ -7000,7 +7290,7 @@ class Previewer {
     }
     this.container.append(resizerSelection);
     const resizerImageContainer = document.createElement("div");
-    resizerImageContainer.classList.add("resizer-image");
+    resizerImageContainer.classList.add(`${EDITOR_PREFIX}-resizer-image`);
     resizerImageContainer.style.display = "none";
     const resizerImage = document.createElement("img");
     resizerImageContainer.append(resizerImage);
@@ -7095,7 +7385,7 @@ class Previewer {
   }
   _drawPreviewer() {
     const previewerContainer = document.createElement("div");
-    previewerContainer.classList.add("image-previewer");
+    previewerContainer.classList.add(`${EDITOR_PREFIX}-image-previewer`);
     const closeBtn = document.createElement("i");
     closeBtn.classList.add("image-close");
     closeBtn.onclick = () => {
@@ -7103,7 +7393,7 @@ class Previewer {
     };
     previewerContainer.append(closeBtn);
     const imgContainer = document.createElement("div");
-    imgContainer.classList.add("image-container");
+    imgContainer.classList.add(`${EDITOR_PREFIX}-image-container`);
     const img = document.createElement("img");
     img.src = this.curElementSrc;
     img.draggable = false;
@@ -7115,7 +7405,7 @@ class Previewer {
     let scaleSize = 1;
     let rotateSize = 0;
     const menuContainer = document.createElement("div");
-    menuContainer.classList.add("image-menu");
+    menuContainer.classList.add(`${EDITOR_PREFIX}-image-menu`);
     const zoomIn = document.createElement("i");
     zoomIn.classList.add("zoom-in");
     zoomIn.onclick = () => {
@@ -7258,24 +7548,24 @@ class DatePicker {
   }
   _createDom() {
     const datePickerContainer = document.createElement("div");
-    datePickerContainer.classList.add("date-container");
+    datePickerContainer.classList.add(`${EDITOR_PREFIX}-date-container`);
     const dateWrap = document.createElement("div");
-    dateWrap.classList.add("date-wrap");
+    dateWrap.classList.add(`${EDITOR_PREFIX}-date-wrap`);
     const datePickerTitle = document.createElement("div");
-    datePickerTitle.classList.add("date-title");
+    datePickerTitle.classList.add(`${EDITOR_PREFIX}-date-title`);
     const preYearTitle = document.createElement("span");
-    preYearTitle.classList.add("date-title__pre-year");
+    preYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-year`);
     preYearTitle.innerText = `<<`;
     const preMonthTitle = document.createElement("span");
-    preMonthTitle.classList.add("date-title__pre-month");
+    preMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-month`);
     preMonthTitle.innerText = `<`;
     const nowTitle = document.createElement("span");
-    nowTitle.classList.add("date-title__now");
+    nowTitle.classList.add(`${EDITOR_PREFIX}-date-title__now`);
     const nextMonthTitle = document.createElement("span");
-    nextMonthTitle.classList.add("date-title__next-month");
+    nextMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-month`);
     nextMonthTitle.innerText = `>`;
     const nextYearTitle = document.createElement("span");
-    nextYearTitle.classList.add("date-title__next-year");
+    nextYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-year`);
     nextYearTitle.innerText = `>>`;
     datePickerTitle.append(preYearTitle);
     datePickerTitle.append(preMonthTitle);
@@ -7283,7 +7573,7 @@ class DatePicker {
     datePickerTitle.append(nextMonthTitle);
     datePickerTitle.append(nextYearTitle);
     const datePickerWeek = document.createElement("div");
-    datePickerWeek.classList.add("date-week");
+    datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`);
     const weekList = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
     weekList.forEach((week) => {
       const weekDom = document.createElement("span");
@@ -7291,12 +7581,12 @@ class DatePicker {
       datePickerWeek.append(weekDom);
     });
     const datePickerDay = document.createElement("div");
-    datePickerDay.classList.add("date-day");
+    datePickerDay.classList.add(`${EDITOR_PREFIX}-date-day`);
     dateWrap.append(datePickerTitle);
     dateWrap.append(datePickerWeek);
     dateWrap.append(datePickerDay);
     const timeWrap = document.createElement("ul");
-    timeWrap.classList.add("time-wrap");
+    timeWrap.classList.add(`${EDITOR_PREFIX}-time-wrap`);
     let hourTime;
     let minuteTime;
     let secondTime;
@@ -7327,15 +7617,15 @@ class DatePicker {
       timeWrap.append(li);
     });
     const datePickerMenu = document.createElement("div");
-    datePickerMenu.classList.add("date-menu");
+    datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`);
     const timeMenu = document.createElement("button");
-    timeMenu.classList.add("date-menu__time");
+    timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`);
     timeMenu.innerText = "\u65F6\u95F4\u9009\u62E9";
     const nowMenu = document.createElement("button");
-    nowMenu.classList.add("date-menu__now");
+    nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`);
     nowMenu.innerText = "\u6B64\u523B";
     const submitMenu = document.createElement("button");
-    submitMenu.classList.add("date-menu__submit");
+    submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`);
     submitMenu.innerText = "\u786E\u5B9A";
     datePickerMenu.append(timeMenu);
     datePickerMenu.append(nowMenu);
@@ -7797,7 +8087,7 @@ class BaseBlock {
   }
   _createBlockItem() {
     const blockItem = document.createElement("div");
-    blockItem.classList.add("block-item");
+    blockItem.classList.add(`${EDITOR_PREFIX}-block-item`);
     return blockItem;
   }
   render() {
@@ -7838,7 +8128,7 @@ class BlockParticle {
   }
   _createBlockContainer() {
     const blockContainer = document.createElement("div");
-    blockContainer.classList.add("block-container");
+    blockContainer.classList.add(`${EDITOR_PREFIX}-block-container`);
     return blockContainer;
   }
   getDraw() {
@@ -7880,7 +8170,7 @@ class BlockParticle {
   }
 }
 class Draw {
-  constructor(container, options, elementList, listener) {
+  constructor(rootContainer, options, elementList, listener) {
     __publicField(this, "container");
     __publicField(this, "pageContainer");
     __publicField(this, "pageList");
@@ -7892,6 +8182,7 @@ class Draw {
     __publicField(this, "elementList");
     __publicField(this, "listener");
     __publicField(this, "canvasEvent");
+    __publicField(this, "globalEvent");
     __publicField(this, "cursor");
     __publicField(this, "range");
     __publicField(this, "margin");
@@ -7920,12 +8211,14 @@ class Draw {
     __publicField(this, "blockParticle");
     __publicField(this, "control");
     __publicField(this, "workerManager");
+    __publicField(this, "scrollObserver");
+    __publicField(this, "selectionObserver");
     __publicField(this, "rowList");
     __publicField(this, "painterStyle");
     __publicField(this, "painterOptions");
     __publicField(this, "visiblePageNoList");
     __publicField(this, "intersectionPageNo");
-    this.container = container;
+    this.container = this._wrapContainer(rootContainer);
     this.pageList = [];
     this.ctxList = [];
     this.pageNo = 0;
@@ -7963,13 +8256,13 @@ class Draw {
     this.checkboxParticle = new CheckboxParticle(this);
     this.blockParticle = new BlockParticle(this);
     this.control = new Control(this);
-    new ScrollObserver(this);
-    new SelectionObserver();
+    this.scrollObserver = new ScrollObserver(this);
+    this.selectionObserver = new SelectionObserver();
     this.canvasEvent = new CanvasEvent(this);
     this.cursor = new Cursor(this, this.canvasEvent);
     this.canvasEvent.register();
-    const globalEvent = new GlobalEvent(this, this.canvasEvent);
-    globalEvent.register();
+    this.globalEvent = new GlobalEvent(this, this.canvasEvent);
+    this.globalEvent.register();
     this.workerManager = new WorkerManager(this);
     this.rowList = [];
     this.painterStyle = null;
@@ -8271,6 +8564,11 @@ class Draw {
       data: data2
     };
   }
+  _wrapContainer(rootContainer) {
+    const container = document.createElement("div");
+    rootContainer.append(container);
+    return container;
+  }
   _formatContainer() {
     this.container.style.position = "relative";
     this.container.style.width = `${this.getWidth()}px`;
@@ -8278,7 +8576,7 @@ class Draw {
   }
   _createPageContainer() {
     const pageContainer = document.createElement("div");
-    pageContainer.classList.add("page-container");
+    pageContainer.classList.add(`${EDITOR_PREFIX}-page-container`);
     this.container.append(pageContainer);
     return pageContainer;
   }
@@ -8840,6 +9138,12 @@ class Draw {
       }
     });
   }
+  destroy() {
+    this.container.remove();
+    this.globalEvent.removeEvent();
+    this.scrollObserver.removeEvent();
+    this.selectionObserver.removeEvent();
+  }
 }
 const _Command = class {
   constructor(adapt) {
@@ -10672,7 +10976,7 @@ const globalMenus = [
     name: "\u526A\u5207",
     shortCut: "Ctrl + X",
     when: (payload) => {
-      return !payload.isReadonly && payload.editorHasSelection;
+      return !payload.isReadonly;
     },
     callback: (command) => {
       command.executeCut();
@@ -10925,6 +11229,41 @@ class ContextMenu {
     __publicField(this, "contextMenuContainerList");
     __publicField(this, "contextMenuRelationShip");
     __publicField(this, "context");
+    __publicField(this, "_proxyContextMenuEvent", (evt) => {
+      var _a;
+      this.context = this._getContext();
+      const renderList = [];
+      let isRegisterContextMenu = false;
+      for (let c = 0; c < this.contextMenuList.length; c++) {
+        const menu = this.contextMenuList[c];
+        if (menu.isDivider) {
+          renderList.push(menu);
+        } else {
+          const isMatch = (_a = menu.when) == null ? void 0 : _a.call(menu, this.context);
+          if (isMatch) {
+            renderList.push(menu);
+            isRegisterContextMenu = true;
+          }
+        }
+      }
+      if (isRegisterContextMenu) {
+        this.dispose();
+        this._render({
+          contextMenuList: renderList,
+          left: evt.x,
+          top: evt.y
+        });
+      }
+      evt.preventDefault();
+    });
+    __publicField(this, "_handleEffect", (evt) => {
+      if (this.contextMenuContainerList.length) {
+        const contextMenuDom = findParent(evt.target, (node) => !!node && node.nodeType === 1 && node.getAttribute(EDITOR_COMPONENT) === EditorComponent.CONTEXTMENU, true);
+        if (!contextMenuDom) {
+          this.dispose();
+        }
+      }
+    });
     this.draw = draw;
     this.command = command;
     this.range = draw.getRange();
@@ -10940,43 +11279,15 @@ class ContextMenu {
     ];
     this.contextMenuContainerList = [];
     this.contextMenuRelationShip = new Map();
-    document.addEventListener("contextmenu", this._proxyContextMenuEvent.bind(this));
-    document.addEventListener("mousedown", this._handleEffect.bind(this));
+    this._addEvent();
   }
-  _proxyContextMenuEvent(evt) {
-    var _a;
-    this.context = this._getContext();
-    const renderList = [];
-    let isRegisterContextMenu = false;
-    for (let c = 0; c < this.contextMenuList.length; c++) {
-      const menu = this.contextMenuList[c];
-      if (menu.isDivider) {
-        renderList.push(menu);
-      } else {
-        const isMatch = (_a = menu.when) == null ? void 0 : _a.call(menu, this.context);
-        if (isMatch) {
-          renderList.push(menu);
-          isRegisterContextMenu = true;
-        }
-      }
-    }
-    if (isRegisterContextMenu) {
-      this.dispose();
-      this._render({
-        contextMenuList: renderList,
-        left: evt.x,
-        top: evt.y
-      });
-    }
-    evt.preventDefault();
+  _addEvent() {
+    document.addEventListener("contextmenu", this._proxyContextMenuEvent);
+    document.addEventListener("mousedown", this._handleEffect);
   }
-  _handleEffect(evt) {
-    if (this.contextMenuContainerList.length) {
-      const contextMenuDom = findParent(evt.target, (node) => !!node && node.nodeType === 1 && node.getAttribute(EDITOR_COMPONENT) === EditorComponent.CONTEXTMENU, true);
-      if (!contextMenuDom) {
-        this.dispose();
-      }
-    }
+  removeEvent() {
+    document.removeEventListener("contextmenu", this._proxyContextMenuEvent);
+    document.removeEventListener("mousedown", this._handleEffect);
   }
   _getContext() {
     const isReadonly = this.draw.isReadonly();
@@ -11001,7 +11312,7 @@ class ContextMenu {
   }
   _createContextMenuContainer() {
     const contextMenuContainer = document.createElement("div");
-    contextMenuContainer.classList.add("contextmenu-container");
+    contextMenuContainer.classList.add(`${EDITOR_PREFIX}-contextmenu-container`);
     contextMenuContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.CONTEXTMENU);
     this.container.append(contextMenuContainer);
     return contextMenuContainer;
@@ -11010,7 +11321,7 @@ class ContextMenu {
     const { contextMenuList, left, top, parentMenuContainer } = payload;
     const contextMenuContainer = this._createContextMenuContainer();
     const contextMenuContent = document.createElement("div");
-    contextMenuContent.classList.add("contextmenu-content");
+    contextMenuContent.classList.add(`${EDITOR_PREFIX}-contextmenu-content`);
     let childMenuContainer = null;
     if (parentMenuContainer) {
       this.contextMenuRelationShip.set(parentMenuContainer, contextMenuContainer);
@@ -11020,14 +11331,14 @@ class ContextMenu {
       if (menu.isDivider) {
         if (c !== 0 && c !== contextMenuList.length - 1) {
           const divider = document.createElement("div");
-          divider.classList.add("contextmenu-divider");
+          divider.classList.add(`${EDITOR_PREFIX}-contextmenu-divider`);
           contextMenuContent.append(divider);
         }
       } else {
         const menuItem = document.createElement("div");
-        menuItem.classList.add("contextmenu-item");
+        menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-item`);
         if (menu.childMenus) {
-          menuItem.classList.add("contextmenu-sub-item");
+          menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-sub-item`);
           menuItem.onmouseenter = () => {
             this._setHoverStatus(menuItem, true);
             this._removeSubMenu(contextMenuContainer);
@@ -11064,7 +11375,7 @@ class ContextMenu {
         const icon = document.createElement("i");
         menuItem.append(icon);
         if (menu.icon) {
-          icon.classList.add(`contextmenu-${menu.icon}`);
+          icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`);
         }
         const span = document.createElement("span");
         const name = this._formatName(menu.name);
@@ -11072,7 +11383,7 @@ class ContextMenu {
         menuItem.append(span);
         if (menu.shortCut) {
           const span2 = document.createElement("span");
-          span2.classList.add("shortcut");
+          span2.classList.add(`${EDITOR_PREFIX}-shortcut`);
           span2.append(document.createTextNode(menu.shortCut));
           menuItem.append(span2);
         }
@@ -11100,7 +11411,7 @@ class ContextMenu {
   _setHoverStatus(payload, status) {
     var _a;
     if (status) {
-      (_a = payload.parentNode) == null ? void 0 : _a.querySelectorAll(".contextmenu-item").forEach((child) => child.classList.remove("hover"));
+      (_a = payload.parentNode) == null ? void 0 : _a.querySelectorAll(`${EDITOR_PREFIX}-contextmenu-item`).forEach((child) => child.classList.remove("hover"));
       payload.classList.add("hover");
     } else {
       payload.classList.remove("hover");
@@ -11228,16 +11539,27 @@ class Shortcut {
     __publicField(this, "command");
     __publicField(this, "globalShortcutList");
     __publicField(this, "agentShortcutList");
+    __publicField(this, "_globalKeydown", (evt) => {
+      if (!this.globalShortcutList.length)
+        return;
+      this._execute(evt, this.globalShortcutList);
+    });
     this.command = command;
     this.globalShortcutList = [];
     this.agentShortcutList = [];
     this._addShortcutList([
       ...richtextKeys
     ]);
-    document.addEventListener("keydown", this._globalKeydown.bind(this));
+    this._addEvent();
     const agentDom = draw.getCursor().getAgentDom();
     agentDom.addEventListener("keydown", this._agentKeydown.bind(this));
   }
+  _addEvent() {
+    document.addEventListener("keydown", this._globalKeydown);
+  }
+  removeEvent() {
+    document.removeEventListener("keydown", this._globalKeydown);
+  }
   _addShortcutList(payload) {
     for (let s = 0; s < payload.length; s++) {
       const shortCut = payload[s];
@@ -11251,11 +11573,6 @@ class Shortcut {
   registerShortcutList(payload) {
     this._addShortcutList(payload);
   }
-  _globalKeydown(evt) {
-    if (!this.globalShortcutList.length)
-      return;
-    this._execute(evt, this.globalShortcutList);
-  }
   _agentKeydown(evt) {
     if (!this.agentShortcutList.length)
       return;
@@ -11277,6 +11594,7 @@ class Editor {
     __publicField(this, "command");
     __publicField(this, "listener");
     __publicField(this, "register");
+    __publicField(this, "destroy");
     const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
     const waterMarkOptions = __spreadValues(__spreadValues({}, defaultWatermarkOption), options.watermark);
     const controlOptions = __spreadValues(__spreadValues({}, defaultControlOption), options.control);
@@ -11333,6 +11651,11 @@ class Editor {
       contextMenu,
       shortcut
     });
+    this.destroy = () => {
+      draw.destroy();
+      shortcut.removeEvent();
+      contextMenu.removeEvent();
+    };
   }
 }
 export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, ElementType, ImageDisplay, KeyMap, PageMode, RowFlex, Editor as default };