feat:add style namespace

cypress/integration/control/select.spec.ts

@@ -45,7 +45,7 @@ describe('控件-列举型', () => {
 
       cy.get('@canvas').type(`{leftArrow}`)
 
-      cy.get('.select-control-popup li').eq(0).click()
+      cy.get('.ce-select-control-popup li').eq(0).click()
 
       cy.get('@canvas').type('{ctrl}s')
     })

cypress/integration/control/text.spec.ts

@@ -36,7 +36,7 @@ describe('控件-文本型', () => {
 
       cy.get('@canvas').type(`{leftArrow}`)
 
-      cy.get('.inputarea').type(text)
+      cy.get('.ce-inputarea').type(text)
 
       cy.get('@canvas').type('{ctrl}s')
     })

cypress/integration/editor.spec.ts

@@ -29,7 +29,7 @@ describe('基础功能', () => {
   it('模式切换', () => {
     cy.get('@canvas').click()
 
-    cy.get('.cursor').should('have.css', 'display', 'block')
+    cy.get('.ce-cursor').should('have.css', 'display', 'block')
 
     cy.get('.editor-mode').click().click()
 
@@ -37,7 +37,7 @@ describe('基础功能', () => {
 
     cy.get('@canvas').click()
 
-    cy.get('.cursor').should('have.css', 'display', 'none')
+    cy.get('.ce-cursor').should('have.css', 'display', 'none')
   })
 
   it('页面缩放', () => {

index.html

@@ -219,7 +219,7 @@
         </div>
       </div>
     </div>
-    <div class="editor" editor-component="main"></div>
+    <div class="editor"></div>
     <div class="footer" editor-component="footer">
       <div>
         <div class="page-mode">

src/editor/assets/css/block/block.css

@@ -1,4 +1,4 @@
-.block-item {
+.ce-block-item {
   position: absolute;
   z-index: 0;
   overflow: hidden;

src/editor/assets/css/contextmenu/contextmenu.css

@@ -0,0 +1,132 @@
+.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 0 rgb(56 56 56 / 20%);
+  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(../../images/submenu-dropdown.svg);
+}
+
+.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(../../../assets/images/print.svg);
+}
+
+.ce-contextmenu-image {
+  background-image: url(../../../assets/images/image.svg);
+}
+
+.ce-contextmenu-image-change {
+  background-image: url(../../../assets/images/image-change.svg);
+}
+
+.ce-contextmenu-insert-row-col {
+  background-image: url(../../../assets/images/insert-row-col.svg);
+}
+
+.ce-contextmenu-insert-top-row {
+  background-image: url(../../../assets/images/insert-top-row.svg);
+}
+
+.ce-contextmenu-insert-bottom-row {
+  background-image: url(../../../assets/images/insert-bottom-row.svg);
+}
+
+.ce-contextmenu-insert-left-col {
+  background-image: url(../../../assets/images/insert-left-col.svg);
+}
+
+.ce-contextmenu-insert-right-col {
+  background-image: url(../../../assets/images/insert-right-col.svg);
+}
+
+.ce-contextmenu-delete-row-col {
+  background-image: url(../../../assets/images/delete-row-col.svg);
+}
+
+.ce-contextmenu-delete-row {
+  background-image: url(../../../assets/images/delete-row.svg);
+}
+
+.ce-contextmenu-delete-col {
+  background-image: url(../../../assets/images/delete-col.svg);
+}
+
+.ce-contextmenu-delete-table {
+  background-image: url(../../../assets/images/delete-table.svg);
+}
+
+.ce-contextmenu-merge-cell {
+  background-image: url(../../../assets/images/merge-cell.svg);
+}
+
+.ce-contextmenu-merge-cancel-cell {
+  background-image: url(../../../assets/images/merge-cancel-cell.svg);
+}

src/editor/assets/css/control/select.css

@@ -1,4 +1,4 @@
-.select-control-popup {
+.ce-select-control-popup {
   max-width: 160px;
   min-width: 69px;
   max-height: 225px;
@@ -13,14 +13,14 @@
   overflow-y: auto;
 }
 
-.select-control-popup ul {
+.ce-select-control-popup ul {
   list-style: none;
   padding: 3px 0;
   margin: 0;
   box-sizing: border-box;
 }
 
-.select-control-popup ul li {
+.ce-select-control-popup ul li {
   font-size: 13px;
   padding: 0 20px;
   position: relative;
@@ -34,11 +34,11 @@
   cursor: pointer;
 }
 
-.select-control-popup ul li:hover {
+.ce-select-control-popup ul li:hover {
   background-color: #EEF2FD;
 }
 
-.select-control-popup ul li.active {
+.ce-select-control-popup ul li.active {
   color: var(--COLOR-HOVER, #5175f4);
   font-weight: 700;
 }

src/editor/assets/css/date/datePicker.css

@@ -1,4 +1,4 @@
-.date-container {
+.ce-date-container {
   display: none;
   width: 300px;
   overflow: hidden;
@@ -15,19 +15,19 @@
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }
 
-.date-container.active {
+.ce-date-container.active {
   display: block;
 }
 
-.date-wrap {
+.ce-date-wrap {
   display: none;
 }
 
-.date-wrap.active {
+.ce-date-wrap.active {
   display: block;
 }
 
-.date-title {
+.ce-date-title {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -36,40 +36,40 @@
   font-size: 16px;
 }
 
-.date-title>span {
+.ce-date-title>span {
   display: inline-block;
 }
 
-.date-title>span:not(.date-title__now) {
+.ce-date-title>span:not(.ce-date-title__now) {
   font-family: cursive;
   cursor: pointer;
 }
 
-.date-title>span:not(.date-title__now):hover {
+.ce-date-title>span:not(.ce-date-title__now):hover {
   color: #5175F4;
 }
 
-.date-title .date-title__pre-year {
+.ce-date-title .ce-date-title__pre-year {
   width: 15%;
 }
 
-.date-title .date-title__pre-month {
+.ce-date-title .ce-date-title__pre-month {
   width: 15%;
 }
 
-.date-title .date-title__now {
+.ce-date-title .ce-date-title__now {
   width: 40%;
 }
 
-.date-title .date-title__next-year {
+.ce-date-title .ce-date-title__next-year {
   width: 15%;
 }
 
-.date-title .date-title__next-month {
+.ce-date-title .ce-date-title__next-month {
   width: 15%;
 }
 
-.date-week {
+.ce-date-week {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -78,7 +78,7 @@
   border-bottom: 1px solid #e4e7ed;
 }
 
-.date-week>span {
+.ce-date-week>span {
   list-style: none;
   width: calc(100%/7);
   text-align: center;
@@ -86,7 +86,7 @@
   font-size: 14px;
 }
 
-.date-day {
+.ce-date-day {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -94,7 +94,7 @@
   margin-top: 5px;
 }
 
-.date-day>div {
+.ce-date-day>div {
   width: calc(100%/7);
   height: 40px;
   text-align: center;
@@ -105,85 +105,85 @@
   border-radius: 4px;
 }
 
-.date-day>div:hover {
+.ce-date-day>div:hover {
   color: #5175F4;
   opacity: .8;
 }
 
-.date-day>div.active {
+.ce-date-day>div.active {
   color: #5175F4;
   font-weight: 700;
 }
 
-.date-day>div.disable {
+.ce-date-day>div.disable {
   color: #c0c4cc;
 }
 
-.date-day>div.select {
+.ce-date-day>div.select {
   color: #fff;
   background-color: #5175F4;
 }
 
-.time-wrap {
+.ce-time-wrap {
   display: none;
   padding: 10px;
   height: 286px;
 }
 
-.time-wrap ::-webkit-scrollbar {
+.ce-time-wrap ::-webkit-scrollbar {
   width: 0;
 }
 
-.time-wrap.active {
+.ce-time-wrap.active {
   display: flex;
 }
 
-.time-wrap li {
+.ce-time-wrap li {
   list-style: none;
 }
 
-.time-wrap>li {
+.ce-time-wrap>li {
   width: 33.3%;
   height: 100%;
   text-align: center;
 }
 
-.time-wrap>li>span {
+.ce-time-wrap>li>span {
   transform: translateY(-5px);
   display: inline-block;
 }
 
-.time-wrap>li>ol {
+.ce-time-wrap>li>ol {
   height: calc(100% - 20px);
   overflow-y: auto;
   border: 1px solid #e2e2e2;
   position: relative;
 }
 
-.time-wrap>li:first-child>ol {
+.ce-time-wrap>li:first-child>ol {
   border-right: 0;
 }
 
-.time-wrap>li:last-child>ol {
+.ce-time-wrap>li:last-child>ol {
   border-left: 0;
 }
 
-.time-wrap>li>ol>li {
+.ce-time-wrap>li>ol>li {
   line-height: 30px;
   cursor: pointer;
   transition: all .3s;
 }
 
-.time-wrap>li>ol>li:hover {
+.ce-time-wrap>li>ol>li:hover {
   background-color: #eaeaea;
 }
 
-.time-wrap>li>ol>li.active {
+.ce-time-wrap>li>ol>li.active {
   color: #ffffff;
   background: #5175F4;
 }
 
-.date-menu {
+.ce-date-menu {
   width: 100%;
   height: 28px;
   display: flex;
@@ -194,7 +194,7 @@
   border-top: 1px solid #e4e7ed;
 }
 
-.date-menu button {
+.ce-date-menu button {
   display: inline-block;
   line-height: 1;
   white-space: nowrap;
@@ -216,18 +216,18 @@
   margin-left: 10px;
 }
 
-.date-menu button:hover {
+.ce-date-menu button:hover {
   color: #5175F4;
   border-color: #5175F4;
 }
 
-.date-menu button.date-menu__time {
+.ce-date-menu button.ce-date-menu__time {
   border: 1px solid transparent;
   position: absolute;
   left: 0;
   margin-left: 0;
 }
 
-.date-menu button.date-menu__time:hover {
+.ce-date-menu button.ce-date-menu__time:hover {
   color: #5175F4;
 }

src/editor/assets/css/hyperlink/hyperlink.css

@@ -0,0 +1,24 @@
+.ce-hyperlink-popup {
+  min-width: 100px;
+  font-size: 12px;
+  line-height: 20px;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgb(98 107 132 / 20%);
+  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: #0000ff;
+}

src/editor/assets/css/index.css

@@ -1,8 +1,13 @@
 @import './control/select.css';
 @import './date/datePicker.css';
 @import './block/block.css';
+@import './table/table.css';
+@import './resizer/resizer.css';
+@import './previewer/previewer.css';
+@import './contextmenu/contextmenu.css';
+@import './hyperlink/hyperlink.css';
 
-.inputarea {
+.ce-inputarea {
   width: 0;
   height: 12px;
   min-width: 0;
@@ -23,7 +28,7 @@
   background-color: transparent;
 }
 
-.cursor {
+.ce-cursor {
   width: 1px;
   height: 20px;
   left: 0;
@@ -34,7 +39,7 @@
   pointer-events: none;
 }
 
-.cursor--animation {
+.ce-cursor.ce-cursor--animation {
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-name: cursorAnimation;
@@ -61,398 +66,3 @@
     opacity: 1
   }
 }
-
-.resizer-selection {
-  position: absolute;
-  border: 1px solid;
-}
-
-.resizer-selection>div {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
-  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: 0.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: 0.1;
-  }
-
-  100% {
-    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(../images/close.svg) 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(../images/zoom-in.svg);
-}
-
-.image-previewer .image-menu i.zoom-out {
-  background-image: url(../images/zoom-out.svg);
-}
-
-.image-previewer .image-menu i.rotate {
-  background-image: url(../images/rotate.svg);
-}
-
-.image-previewer .image-menu i.original-size {
-  background-image: url(../images/original-size.svg);
-}
-
-.image-previewer .image-menu i.image-download {
-  background-image: url(../images/image-download.svg);
-}
-
-.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 0 rgb(56 56 56 / 20%);
-  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(../images/submenu-dropdown.svg);
-}
-
-.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(../../assets/images/print.svg);
-}
-
-.contextmenu-image {
-  background-image: url(../../assets/images/image.svg);
-}
-
-.contextmenu-image-change {
-  background-image: url(../../assets/images/image-change.svg);
-}
-
-.contextmenu-insert-row-col {
-  background-image: url(../../assets/images/insert-row-col.svg);
-}
-
-.contextmenu-insert-top-row {
-  background-image: url(../../assets/images/insert-top-row.svg);
-}
-
-.contextmenu-insert-bottom-row {
-  background-image: url(../../assets/images/insert-bottom-row.svg);
-}
-
-.contextmenu-insert-left-col {
-  background-image: url(../../assets/images/insert-left-col.svg);
-}
-
-.contextmenu-insert-right-col {
-  background-image: url(../../assets/images/insert-right-col.svg);
-}
-
-.contextmenu-delete-row-col {
-  background-image: url(../../assets/images/delete-row-col.svg);
-}
-
-.contextmenu-delete-row {
-  background-image: url(../../assets/images/delete-row.svg);
-}
-
-.contextmenu-delete-col {
-  background-image: url(../../assets/images/delete-col.svg);
-}
-
-.contextmenu-delete-table {
-  background-image: url(../../assets/images/delete-table.svg);
-}
-
-.contextmenu-merge-cell {
-  background-image: url(../../assets/images/merge-cell.svg);
-}
-
-.contextmenu-merge-cancel-cell {
-  background-image: url(../../assets/images/merge-cancel-cell.svg);
-}
-
-.hyperlink-popup {
-  min-width: 100px;
-  font-size: 12px;
-  line-height: 20px;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgb(98 107 132 / 20%);
-  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: #0000ff;
-}

src/editor/assets/css/previewer/previewer.css

@@ -0,0 +1,98 @@
+.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: 0.1;
+  }
+
+  100% {
+    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(../../images/close.svg) 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(../../images/zoom-in.svg);
+}
+
+.ce-image-previewer .ce-image-menu i.zoom-out {
+  background-image: url(../../images/zoom-out.svg);
+}
+
+.ce-image-previewer .ce-image-menu i.rotate {
+  background-image: url(../../images/rotate.svg);
+}
+
+.ce-image-previewer .ce-image-menu i.original-size {
+  background-image: url(../../images/original-size.svg);
+}
+
+.ce-image-previewer .ce-image-menu i.image-download {
+  background-image: url(../../images/image-download.svg);
+}

src/editor/assets/css/resizer/resizer.css

@@ -0,0 +1,51 @@
+.ce-resizer-selection {
+  position: absolute;
+  border: 1px solid;
+}
+
+.ce-resizer-selection>div {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
+  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: 0.5;
+}

src/editor/assets/css/table/table.css

@@ -0,0 +1,85 @@
+.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;
+}

src/editor/core/contextmenu/ContextMenu.ts

@@ -1,5 +1,5 @@
 import { NAME_PLACEHOLDER } from '../../dataset/constant/ContextMenu'
-import { EDITOR_COMPONENT } from '../../dataset/constant/Editor'
+import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor'
 import { EditorComponent } from '../../dataset/enum/Editor'
 import { IContextMenuContext, IRegisterContextMenu } from '../../interface/contextmenu/ContextMenu'
 import { findParent } from '../../utils'
@@ -137,7 +137,7 @@ export class ContextMenu {
 
   private _createContextMenuContainer(): HTMLDivElement {
     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
@@ -147,7 +147,7 @@ export 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: HTMLDivElement | null = null
     // 父菜单添加子菜单映射关系
@@ -160,15 +160,15 @@ export class ContextMenu {
         // 首尾分隔符不渲染
         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)
@@ -208,7 +208,7 @@ export 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')
@@ -218,7 +218,7 @@ export class ContextMenu {
         // 快捷方式提示
         if (menu.shortCut) {
           const span = document.createElement('span')
-          span.classList.add('shortcut')
+          span.classList.add(`${EDITOR_PREFIX}-shortcut`)
           span.append(document.createTextNode(menu.shortCut))
           menuItem.append(span)
         }
@@ -250,7 +250,7 @@ export class ContextMenu {
 
   private _setHoverStatus(payload: HTMLDivElement, status: boolean) {
     if (status) {
-      payload.parentNode?.querySelectorAll('.contextmenu-item')
+      payload.parentNode?.querySelectorAll(`${EDITOR_PREFIX}-contextmenu-item`)
         .forEach(child => child.classList.remove('hover'))
       payload.classList.add('hover')
     } else {

src/editor/core/cursor/Cursor.ts

@@ -1,4 +1,5 @@
 import { CURSOR_AGENT_HEIGHT } from '../../dataset/constant/Cursor'
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
 import { IEditorOption } from '../../interface/Editor'
 import { Draw } from '../draw/Draw'
 import { CanvasEvent } from '../event/CanvasEvent'
@@ -21,7 +22,7 @@ export class Cursor {
     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)
   }
@@ -64,13 +65,13 @@ export 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)
   }
 
   public recoveryCursor() {
     this.cursorDom.style.display = 'none'
-    this.cursorDom.classList.remove('cursor--animation')
+    this.cursorDom.classList.remove(`${EDITOR_PREFIX}-cursor--animation`)
   }
 
 }

src/editor/core/cursor/CursorAgent.ts

@@ -1,3 +1,4 @@
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
 import { ElementType } from '../../dataset/enum/Element'
 import { debounce } from '../../utils'
 import { getElementListByHTML } from '../../utils/clipboard'
@@ -18,7 +19,7 @@ export class CursorAgent {
     // 代理光标绘制
     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

src/editor/core/draw/Draw.ts

@@ -47,7 +47,7 @@ import { Previewer } from './particle/previewer/Previewer'
 import { DateParticle } from './particle/date/DateParticle'
 import { IMargin } from '../../interface/Margin'
 import { BlockParticle } from './particle/block/BlockParticle'
-import { EDITOR_COMPONENT } from '../../dataset/constant/Editor'
+import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor'
 
 export class Draw {
 
@@ -531,7 +531,7 @@ export class Draw {
 
   private _createPageContainer(): HTMLDivElement {
     const pageContainer = document.createElement('div')
-    pageContainer.classList.add('page-container')
+    pageContainer.classList.add(`${EDITOR_PREFIX}-page-container`)
     this.container.append(pageContainer)
     return pageContainer
   }

src/editor/core/draw/control/select/SelectControl.ts

@@ -1,4 +1,4 @@
-import { EDITOR_COMPONENT } from '../../../../dataset/constant/Editor'
+import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { ControlComponent } from '../../../../dataset/enum/Control'
 import { EditorComponent } from '../../../../dataset/enum/Editor'
 import { KeyMap } from '../../../../dataset/enum/KeyMap'
@@ -210,7 +210,7 @@ export class SelectControl implements IControlInstance {
     if (!position) return
     // dom树：<div><ul><li>item</li></ul></div>
     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++) {

src/editor/core/draw/particle/HyperlinkParticle.ts

@@ -1,4 +1,5 @@
 import { IElement } from '../../..'
+import { EDITOR_PREFIX } from '../../../dataset/constant/Editor'
 import { IEditorOption } from '../../../interface/Editor'
 import { IElementPosition } from '../../../interface/Element'
 import { IRowElement } from '../../../interface/Row'
@@ -23,7 +24,7 @@ export class HyperlinkParticle {
 
   private _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)

src/editor/core/draw/particle/block/BlockParticle.ts

@@ -1,3 +1,4 @@
+import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { ElementType } from '../../../../dataset/enum/Element'
 import { IRowElement } from '../../../../interface/Row'
 import { Draw } from '../../Draw'
@@ -20,7 +21,7 @@ export class BlockParticle {
 
   private _createBlockContainer(): HTMLDivElement {
     const blockContainer = document.createElement('div')
-    blockContainer.classList.add('block-container')
+    blockContainer.classList.add(`${EDITOR_PREFIX}-block-container`)
     return blockContainer
   }
 

src/editor/core/draw/particle/block/modules/BaseBlock.ts

@@ -1,3 +1,4 @@
+import { EDITOR_PREFIX } from '../../../../../dataset/constant/Editor'
 import { BlockType } from '../../../../../dataset/enum/Block'
 import { IRowElement } from '../../../../../interface/Row'
 import { Draw } from '../../../Draw'
@@ -28,7 +29,7 @@ export class BaseBlock {
 
   private _createBlockItem(): HTMLDivElement {
     const blockItem = document.createElement('div')
-    blockItem.classList.add('block-item')
+    blockItem.classList.add(`${EDITOR_PREFIX}-block-item`)
     return blockItem
   }
 

src/editor/core/draw/particle/date/DatePicker.ts

@@ -1,3 +1,4 @@
+import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { IElement, IElementPosition } from '../../../../interface/Element'
 
 export interface IDatePickerOption {
@@ -60,25 +61,25 @@ export class DatePicker {
 
   private _createDom(): IDatePickerDom {
     const datePickerContainer = document.createElement('div')
-    datePickerContainer.classList.add('date-container')
+    datePickerContainer.classList.add(`${EDITOR_PREFIX}-date-container`)
     // title-切换年月、年月显示
     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)
@@ -87,7 +88,7 @@ export class DatePicker {
     datePickerTitle.append(nextYearTitle)
     // week-星期显示
     const datePickerWeek = document.createElement('div')
-    datePickerWeek.classList.add('date-week')
+    datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`)
     const weekList = ['日', '一', '二', '三', '四', '五', '六']
     weekList.forEach(week => {
       const weekDom = document.createElement('span')
@@ -96,14 +97,14 @@ export class DatePicker {
     })
     // day-天数显示
     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)
     // time-时间选择
     const timeWrap = document.createElement('ul')
-    timeWrap.classList.add('time-wrap')
+    timeWrap.classList.add(`${EDITOR_PREFIX}-time-wrap`)
     let hourTime: HTMLOListElement
     let minuteTime: HTMLOListElement
     let secondTime: HTMLOListElement
@@ -135,15 +136,15 @@ export class DatePicker {
     })
     // menu-选择时间、现在、确定
     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 = '时间选择'
     const nowMenu = document.createElement('button')
-    nowMenu.classList.add('date-menu__now')
+    nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`)
     nowMenu.innerText = '此刻'
     const submitMenu = document.createElement('button')
-    submitMenu.classList.add('date-menu__submit')
+    submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`)
     submitMenu.innerText = '确定'
     datePickerMenu.append(timeMenu)
     datePickerMenu.append(nowMenu)

src/editor/core/draw/particle/previewer/Previewer.ts

@@ -1,3 +1,4 @@
+import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { IEditorOption } from '../../../../interface/Editor'
 import { IElement, IElementPosition } from '../../../../interface/Element'
 import { IPreviewerCreateResult, IPreviewerDrawOption } from '../../../../interface/Previewer'
@@ -57,7 +58,7 @@ export class Previewer {
   private _createResizerDom(): IPreviewerCreateResult {
     // 拖拽边框
     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: HTMLDivElement[] = []
@@ -73,7 +74,7 @@ export 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)
@@ -175,7 +176,7 @@ export class Previewer {
 
   private _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')
@@ -185,7 +186,7 @@ export 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
@@ -198,7 +199,7 @@ export 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 = () => {

src/editor/core/draw/particle/table/TableTool.ts

@@ -1,4 +1,5 @@
 import { IElement } from '../../../..'
+import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { TableOrder } from '../../../../dataset/enum/table/TableTool'
 import { IEditorOption } from '../../../../interface/Editor'
 import { IElementPosition } from '../../../../interface/Element'
@@ -65,17 +66,17 @@ export class TableTool {
     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,
@@ -96,17 +97,17 @@ export class TableTool {
 
     // 渲染列
     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,
@@ -146,14 +147,14 @@ export 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

src/editor/core/event/GlobalEvent.ts

@@ -5,6 +5,7 @@ import { Cursor } from '../cursor/Cursor'
 import { Control } from '../draw/control/Control'
 import { Draw } from '../draw/Draw'
 import { HyperlinkParticle } from '../draw/particle/HyperlinkParticle'
+import { DateParticle } from '../draw/particle/date/DateParticle'
 import { Previewer } from '../draw/particle/previewer/Previewer'
 import { TableTool } from '../draw/particle/table/TableTool'
 import { RangeManager } from '../range/RangeManager'
@@ -22,6 +23,7 @@ export class GlobalEvent {
   private tableTool: TableTool
   private hyperlinkParticle: HyperlinkParticle
   private control: Control
+  private dateParticle: DateParticle
 
   constructor(draw: Draw, canvasEvent: CanvasEvent) {
     this.draw = draw
@@ -33,6 +35,7 @@ export class GlobalEvent {
     this.previewer = draw.getPreviewer()
     this.tableTool = draw.getTableTool()
     this.hyperlinkParticle = draw.getHyperlinkParticle()
+    this.dateParticle = draw.getDateParticle()
     this.control = draw.getControl()
   }
 
@@ -81,6 +84,7 @@ export class GlobalEvent {
     this.tableTool.dispose()
     this.hyperlinkParticle.clearHyperlinkPopup()
     this.control.destroyControl()
+    this.dateParticle.clearDatePicker()
   }
 
   public setDragState = () => {

src/editor/dataset/constant/Editor.ts

@@ -1 +1,2 @@
 export const EDITOR_COMPONENT = 'editor-component'
+export const EDITOR_PREFIX = 'ce'

src/style.css

@@ -609,11 +609,8 @@ ul {
   margin: 80px auto;
 }
 
-.page-container {
-  width: 100%;
-}
 
-.page-container canvas {
+.ce-page-container canvas {
   box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px;
 }
 
@@ -761,6 +758,6 @@ ul {
   left: unset;
 }
 
-.contextmenu-signature {
+.ce-contextmenu-signature {
   background-image: url('./assets/images/signature.svg');
 }