@ones-editor/editor 2.1.8-beta.1 → 2.1.8-beta.2

package/dist/index.js

@@ -4795,158 +4795,87 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   --editor-version-button-border: black;
   --editor-bg-color: #ffffff;
   --editor-version-list-bg-color: white;
-  --editor-version-select-bg-color: #F0F6FF;
+  --editor-version-select-bg-color: #f0f6ff;
 }
-.version-dialog {
-  display: flex;
-  background-color: var(--editor-bg-color);
-  width: 100%;
-  height: 100%;
-  color: var(--editor-color);
-}
-.version-dialog * {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  box-sizing: border-box;
-}
-.version-dialog.loading .version-viewer .version-info-container {
+.editor-root.history .root-container .editor-block .text-element .inline-plugin.editor-box-loading {
   display: none;
 }
-.version-dialog .version-loading {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
+.editor-root.history .editor-content {
+  padding: 30px 75px;
 }
-.version-dialog .version-loading svg {
-  width: 28px;
-  height: 28px;
+.editor-root.history .table-block.history-inserted-block table, .editor-root.history .table-block.history-updated-block table {
+  position: relative;
 }
-.version-dialog .version-item-latest {
-  border-radius: 3px;
-  color: #0064ff;
-  background-color: #e3eeff;
-  height: 20px;
-  padding: 0 5px;
+.editor-root.history .table-block.history-inserted-block table::before, .editor-root.history .table-block.history-updated-block table::before {
+  content: "";
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  background-color: var(--op-selected-color);
   border-radius: 3px;
-  display: inline-flex;
-  align-items: center;
-  font-size: 12px;
-  font-weight: normal;
-  margin-left: 10px;
-}
-.version-dialog .version-viewer {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  width: 0;
-  padding: 0;
-  min-width: 0;
-}
-.version-dialog .version-viewer .version-dialog-editor {
-  overflow-y: auto;
-}
-.version-dialog .version-viewer .version-info-container {
-  height: 50px;
-  border-bottom: #e8e8e8 1px solid;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding-left: 20px;
-  font-size: 14px;
-  color: #303030;
-}
-.version-dialog .version-viewer .version-info-container .version-info-right .text-3 {
-  color: #909090;
-}
-.version-dialog .version-viewer .version-info-container .version-info-left {
-  display: flex;
-  align-items: center;
-}
-.version-dialog .version-viewer .version-info-container .version-info-left .text-1,
-.version-dialog .version-viewer .version-info-container .version-info-left .text-2 {
-  color: #909090;
-}
-.version-dialog .version-viewer .version-info-container .version-info-left .name {
-  padding-left: 5px;
-  padding-right: 10px;
-  font-weight: 500;
-}
-.version-dialog .version-viewer .version-info-container .version-info-left .name .version-item-latest {
-  margin-left: 5px;
-}
-.version-dialog .version-viewer .version-info-container .editor-dropdown {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-.version-dialog .version-viewer .version-info-container .command-item[data-id=current-version] {
-  min-width: 200px;
-  border: 1px solid #f0f0f0;
-}
-.version-dialog .version-viewer .version-info-container .command-item[data-id=current-version] .toolbar-item-name-container {
-  flex-grow: 1;
-}
-.version-dialog .version-viewer .dialog-button-text {
-  margin-top: 1px;
-  margin-left: -4px;
-}
-.version-dialog .version-viewer .dialog-text-button {
-  outline: none;
-  background: transparent;
-  border: none;
-  display: flex;
-  align-items: center;
-  color: var(--editor-color);
-  font-size: 16px;
-  font-weight: 500;
-  padding: 4px 0px;
-  cursor: pointer;
+  pointer-events: none;
 }
-.version-dialog .version-viewer .dialog-text-button .dialog-button-icon {
-  margin-right: 0;
-  width: 24px;
-  height: 24px;
+.editor-root.history .table-block.history-inserted-block table .child, .editor-root.history .table-block.history-updated-block table .child {
+  pointer-events: none;
 }
-.version-dialog .version-viewer .dialog-text-button .dialog-button-icon svg {
-  fill: currentColor;
+.editor-root.history .table-block.history-deleted-block table {
+  position: relative;
 }
-.editor-root.history .root-container .editor-block .text-element .inline-plugin.editor-box-loading {
-  display: none;
+.editor-root.history .table-block.history-deleted-block table::after {
+  content: "";
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  background-color: var(--op-selected-color);
+  border-radius: 3px;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto clamp(20px, 10%, 60px);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .editor-content {
-  padding: 30px 75px;
+.editor-root.history .table-block.history-deleted-block table .child {
+  pointer-events: none;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].list-block {
+.editor-root.history .table-block .history-inserted-container {
   position: relative;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].list-block::before {
+.editor-root.history .table-block .history-inserted-container::before {
   content: "";
   position: absolute;
-  top: 2px;
-  bottom: 2px;
-  left: 0px;
-  right: 0px;
+  top: 8px;
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
   background-color: var(--op-selected-color);
   border-radius: 0px;
   pointer-events: none;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true]) {
+.editor-root.history .table-block div[data-type=block-content] {
+  overflow-x: revert;
+}
+.editor-root.history .layout-block.history-inserted-block {
   position: relative;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true])::before {
+.editor-root.history .layout-block.history-inserted-block::before {
   content: "";
   position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
   background-color: var(--op-selected-color);
-  border-radius: 0px;
+  border-radius: 3px;
   pointer-events: none;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block table {
+.editor-root.history .layout-block.history-deleted-block {
   position: relative;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block table::before {
+.editor-root.history .layout-block.history-deleted-block::after {
   content: "";
   position: absolute;
   top: -5px;
@@ -4956,17 +4885,15 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   background-color: var(--op-selected-color);
   border-radius: 3px;
   pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto clamp(20px, 10%, 60px);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block table .child {
-  pointer-events: none;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block:hover::after {
-  top: 0;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block) {
+.editor-root.history .layout-block.history-updated-block {
   position: relative;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block)::before {
+.editor-root.history .layout-block.history-updated-block::before {
   content: "";
   position: absolute;
   top: -5px;
@@ -4977,10 +4904,38 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   border-radius: 3px;
   pointer-events: none;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block].list-block {
+.editor-root.history .layout-block .history-inserted-container {
+  position: relative;
+}
+.editor-root.history .layout-block .history-inserted-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
+}
+.editor-root.history .list-block.history-inserted-block {
+  position: relative;
+}
+.editor-root.history .list-block.history-inserted-block::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0px;
+  right: 0px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
+}
+.editor-root.history .list-block.history-deleted-block {
   position: relative;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block].list-block::before {
+.editor-root.history .list-block.history-deleted-block::after {
   content: "";
   position: absolute;
   top: 2px;
@@ -4990,11 +4945,17 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   background-color: var(--op-selected-color);
   border-radius: 0px;
   pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto clamp(20px, 10%, 60px);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .history-deleted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true]) {
+.editor-root.history .text-block.history-inserted-block,
+.editor-root.history [data-style-quoted=true].history-inserted-block {
   position: relative;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true])::before {
+.editor-root.history .text-block.history-inserted-block::before,
+.editor-root.history [data-style-quoted=true].history-inserted-block::before {
   content: "";
   position: absolute;
   top: 0px;
@@ -5005,38 +4966,51 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   border-radius: 0px;
   pointer-events: none;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block].table-block table {
+.editor-root.history .text-block.history-deleted-block,
+.editor-root.history [data-style-quoted=true].history-deleted-block {
   position: relative;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block].table-block table::after {
+.editor-root.history .text-block.history-deleted-block::after,
+.editor-root.history [data-style-quoted=true].history-deleted-block::after {
   content: "";
   position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
   background-color: var(--op-selected-color);
-  border-radius: 3px;
+  border-radius: 0px;
   pointer-events: none;
   background-repeat: no-repeat;
   background-position: center;
   background-size: auto clamp(20px, 10%, 60px);
   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .history-deleted-block[data-type=editor-block].table-block table .child {
+.editor-root.history [data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block, .layout-block).history-inserted-block {
+  position: relative;
+}
+.editor-root.history [data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block, .layout-block).history-inserted-block::before {
+  content: "";
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  background-color: var(--op-selected-color);
+  border-radius: 3px;
   pointer-events: none;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block) {
+.editor-root.history [data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block, .layout-block).history-deleted-block {
   position: relative;
 }
-.editor-root.history .history-deleted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block)::after {
+.editor-root.history [data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block, .layout-block).history-deleted-block::after {
   content: "";
   position: absolute;
   top: -5px;
   bottom: -5px;
   left: -5px;
   right: -5px;
-  background-color: var(--op-color);
+  background-color: var(--op-selected-color);
   border-radius: 3px;
   pointer-events: none;
   background-repeat: no-repeat;
@@ -5044,35 +5018,34 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   background-size: auto clamp(20px, 10%, 60px);
   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .history-deleted-block.history-deleted-box {
-  background-color: unset !important;
-  text-decoration: unset !important;
-}
-.editor-root.history .history-deleted-block.history-deleted-box:hover::after {
-  opacity: 0;
+.editor-root.history .status-box.history-inserted-box {
+  background-color: unset;
 }
-.editor-root.history .history-deleted-empty-text-block.list-block {
+.editor-root.history .status-box.history-inserted-box [data-type=box-content] {
   position: relative;
 }
-.editor-root.history .history-deleted-empty-text-block.list-block::after {
+.editor-root.history .status-box.history-inserted-box [data-type=box-content]::before {
   content: "";
   position: absolute;
-  top: 2px;
-  bottom: 2px;
-  left: 0;
-  right: 0;
+  top: 0px;
+  bottom: 0px;
+  left: 2.5px;
+  right: 2.5px;
   background-color: var(--op-selected-color);
   border-radius: 0px;
   pointer-events: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto clamp(20px, 10%, 60px);
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .history-deleted-empty-text-block:is(.text-block, [data-style-quoted=true]) {
+.editor-root.history .file-box.history-deleted-box {
+  text-decoration: line-through;
+  color: var(--primary-color);
+}
+.editor-root.history .math-box.history-inserted-box {
+  background-color: unset;
+}
+.editor-root.history .math-box.history-inserted-box [data-type=box-content] {
   position: relative;
 }
-.editor-root.history .history-deleted-empty-text-block:is(.text-block, [data-style-quoted=true])::after {
+.editor-root.history .math-box.history-inserted-box [data-type=box-content]::before {
   content: "";
   position: absolute;
   top: 0px;
@@ -5082,17 +5055,23 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   background-color: var(--op-selected-color);
   border-radius: 0px;
   pointer-events: none;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto clamp(20px, 10%, 60px);
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
 }
-.editor-root.history .history-deleted-block .history-inserted-text, .editor-root.history .history-deleted-block .history-inserted-box, .editor-root.history .history-deleted-block .history-deleted-box, .editor-root.history .history-deleted-block .history-deleted-block, .editor-root.history .history-deleted-block .history-inserted-block, .editor-root.history .history-inserted-block .history-inserted-text, .editor-root.history .history-inserted-block .history-inserted-box, .editor-root.history .history-inserted-block .history-deleted-box, .editor-root.history .history-inserted-block .history-deleted-block, .editor-root.history .history-inserted-block .history-inserted-block {
-  background-color: unset;
-  pointer-events: none;
+.editor-root.history .math-box.history-deleted-box {
+  text-decoration: none;
 }
-.editor-root.history .history-deleted-block .history-inserted-text::before, .editor-root.history .history-deleted-block .history-inserted-text::after, .editor-root.history .history-deleted-block .history-inserted-box::before, .editor-root.history .history-deleted-block .history-inserted-box::after, .editor-root.history .history-deleted-block .history-deleted-box::before, .editor-root.history .history-deleted-block .history-deleted-box::after, .editor-root.history .history-deleted-block .history-deleted-block::before, .editor-root.history .history-deleted-block .history-deleted-block::after, .editor-root.history .history-deleted-block .history-inserted-block::before, .editor-root.history .history-deleted-block .history-inserted-block::after, .editor-root.history .history-inserted-block .history-inserted-text::before, .editor-root.history .history-inserted-block .history-inserted-text::after, .editor-root.history .history-inserted-block .history-inserted-box::before, .editor-root.history .history-inserted-block .history-inserted-box::after, .editor-root.history .history-inserted-block .history-deleted-box::before, .editor-root.history .history-inserted-block .history-deleted-box::after, .editor-root.history .history-inserted-block .history-deleted-block::before, .editor-root.history .history-inserted-block .history-deleted-block::after, .editor-root.history .history-inserted-block .history-inserted-block::before, .editor-root.history .history-inserted-block .history-inserted-block::after {
-  display: none;
+.editor-root.history .math-box.history-deleted-box [data-type=box-content] {
+  position: relative;
+}
+.editor-root.history .math-box.history-deleted-box [data-type=box-content]::before {
+  content: "";
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
 }
 .editor-root.history .history-inserted-text, .editor-root.history .history-inserted-box {
   line-height: revert !important;
@@ -5104,19 +5083,197 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 .editor-root.history .history-deleted-box[class=history-deleted-box] {
   color: var(--op-color);
 }
-.editor-root.history .history-deleted-box.math-box {
-  text-decoration: none;
-  background-color: var(--op-selected-color);
-}
-.editor-root.history .history-deleted-box.file-box {
-  color: var(--primary-color);
-}
 .editor-root.history [data-box-type=history-deleted-box] > span[data-type=box-content] {
   border: none !important;
   margin: 0 !important;
 }
-.editor-root.history [data-type=editor-block].table-block div[data-type=block-content] {
-  overflow-x: revert;
+.editor-root.history .history-inserted-container .history-inserted-container,
+.editor-root.history .history-inserted-container .history-inserted-text,
+.editor-root.history .history-inserted-container .history-inserted-box,
+.editor-root.history .history-inserted-container .history-deleted-box,
+.editor-root.history .history-inserted-container .history-deleted-block,
+.editor-root.history .history-inserted-container .history-inserted-block,
+.editor-root.history .history-deleted-block .history-inserted-container,
+.editor-root.history .history-deleted-block .history-inserted-text,
+.editor-root.history .history-deleted-block .history-inserted-box,
+.editor-root.history .history-deleted-block .history-deleted-box,
+.editor-root.history .history-deleted-block .history-deleted-block,
+.editor-root.history .history-deleted-block .history-inserted-block,
+.editor-root.history .history-inserted-block .history-inserted-container,
+.editor-root.history .history-inserted-block .history-inserted-text,
+.editor-root.history .history-inserted-block .history-inserted-box,
+.editor-root.history .history-inserted-block .history-deleted-box,
+.editor-root.history .history-inserted-block .history-deleted-block,
+.editor-root.history .history-inserted-block .history-inserted-block,
+.editor-root.history .history-updated-block .history-inserted-container,
+.editor-root.history .history-updated-block .history-inserted-text,
+.editor-root.history .history-updated-block .history-inserted-box,
+.editor-root.history .history-updated-block .history-deleted-box,
+.editor-root.history .history-updated-block .history-deleted-block,
+.editor-root.history .history-updated-block .history-inserted-block {
+  background-color: unset;
+  pointer-events: none;
+}
+.editor-root.history .history-inserted-container .history-inserted-container::before, .editor-root.history .history-inserted-container .history-inserted-container::after,
+.editor-root.history .history-inserted-container .history-inserted-text::before,
+.editor-root.history .history-inserted-container .history-inserted-text::after,
+.editor-root.history .history-inserted-container .history-inserted-box::before,
+.editor-root.history .history-inserted-container .history-inserted-box::after,
+.editor-root.history .history-inserted-container .history-deleted-box::before,
+.editor-root.history .history-inserted-container .history-deleted-box::after,
+.editor-root.history .history-inserted-container .history-deleted-block::before,
+.editor-root.history .history-inserted-container .history-deleted-block::after,
+.editor-root.history .history-inserted-container .history-inserted-block::before,
+.editor-root.history .history-inserted-container .history-inserted-block::after,
+.editor-root.history .history-deleted-block .history-inserted-container::before,
+.editor-root.history .history-deleted-block .history-inserted-container::after,
+.editor-root.history .history-deleted-block .history-inserted-text::before,
+.editor-root.history .history-deleted-block .history-inserted-text::after,
+.editor-root.history .history-deleted-block .history-inserted-box::before,
+.editor-root.history .history-deleted-block .history-inserted-box::after,
+.editor-root.history .history-deleted-block .history-deleted-box::before,
+.editor-root.history .history-deleted-block .history-deleted-box::after,
+.editor-root.history .history-deleted-block .history-deleted-block::before,
+.editor-root.history .history-deleted-block .history-deleted-block::after,
+.editor-root.history .history-deleted-block .history-inserted-block::before,
+.editor-root.history .history-deleted-block .history-inserted-block::after,
+.editor-root.history .history-inserted-block .history-inserted-container::before,
+.editor-root.history .history-inserted-block .history-inserted-container::after,
+.editor-root.history .history-inserted-block .history-inserted-text::before,
+.editor-root.history .history-inserted-block .history-inserted-text::after,
+.editor-root.history .history-inserted-block .history-inserted-box::before,
+.editor-root.history .history-inserted-block .history-inserted-box::after,
+.editor-root.history .history-inserted-block .history-deleted-box::before,
+.editor-root.history .history-inserted-block .history-deleted-box::after,
+.editor-root.history .history-inserted-block .history-deleted-block::before,
+.editor-root.history .history-inserted-block .history-deleted-block::after,
+.editor-root.history .history-inserted-block .history-inserted-block::before,
+.editor-root.history .history-inserted-block .history-inserted-block::after,
+.editor-root.history .history-updated-block .history-inserted-container::before,
+.editor-root.history .history-updated-block .history-inserted-container::after,
+.editor-root.history .history-updated-block .history-inserted-text::before,
+.editor-root.history .history-updated-block .history-inserted-text::after,
+.editor-root.history .history-updated-block .history-inserted-box::before,
+.editor-root.history .history-updated-block .history-inserted-box::after,
+.editor-root.history .history-updated-block .history-deleted-box::before,
+.editor-root.history .history-updated-block .history-deleted-box::after,
+.editor-root.history .history-updated-block .history-deleted-block::before,
+.editor-root.history .history-updated-block .history-deleted-block::after,
+.editor-root.history .history-updated-block .history-inserted-block::before,
+.editor-root.history .history-updated-block .history-inserted-block::after {
+  display: none;
+}
+.version-dialog {
+  display: flex;
+  background-color: var(--editor-bg-color);
+  width: 100%;
+  height: 100%;
+  color: var(--editor-color);
+}
+.version-dialog * {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  box-sizing: border-box;
+}
+.version-dialog.loading .version-viewer .version-info-container {
+  display: none;
+}
+.version-dialog .version-loading {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.version-dialog .version-loading svg {
+  width: 28px;
+  height: 28px;
+}
+.version-dialog .version-item-latest {
+  border-radius: 3px;
+  color: #0064ff;
+  background-color: #e3eeff;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: normal;
+  margin-left: 10px;
+}
+.version-dialog .version-viewer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 0;
+  padding: 0;
+  min-width: 0;
+}
+.version-dialog .version-viewer .version-dialog-editor {
+  overflow-y: auto;
+}
+.version-dialog .version-viewer .version-info-container {
+  height: 50px;
+  border-bottom: #e8e8e8 1px solid;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-left: 20px;
+  font-size: 14px;
+  color: #303030;
+}
+.version-dialog .version-viewer .version-info-container .version-info-right .text-3 {
+  color: #909090;
+}
+.version-dialog .version-viewer .version-info-container .version-info-left {
+  display: flex;
+  align-items: center;
+}
+.version-dialog .version-viewer .version-info-container .version-info-left .text-1,
+.version-dialog .version-viewer .version-info-container .version-info-left .text-2 {
+  color: #909090;
+}
+.version-dialog .version-viewer .version-info-container .version-info-left .name {
+  padding-left: 5px;
+  padding-right: 10px;
+  font-weight: 500;
+}
+.version-dialog .version-viewer .version-info-container .version-info-left .name .version-item-latest {
+  margin-left: 5px;
+}
+.version-dialog .version-viewer .version-info-container .editor-dropdown {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.version-dialog .version-viewer .version-info-container .command-item[data-id=current-version] {
+  min-width: 200px;
+  border: 1px solid #f0f0f0;
+}
+.version-dialog .version-viewer .version-info-container .command-item[data-id=current-version] .toolbar-item-name-container {
+  flex-grow: 1;
+}
+.version-dialog .version-viewer .dialog-button-text {
+  margin-top: 1px;
+  margin-left: -4px;
+}
+.version-dialog .version-viewer .dialog-text-button {
+  outline: none;
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  color: var(--editor-color);
+  font-size: 16px;
+  font-weight: 500;
+  padding: 4px 0px;
+  cursor: pointer;
+}
+.version-dialog .version-viewer .dialog-text-button .dialog-button-icon {
+  margin-right: 0;
+  width: 24px;
+  height: 24px;
+}
+.version-dialog .version-viewer .dialog-text-button .dialog-button-icon svg {
+  fill: currentColor;
 }.editor-dialog-root {
   position: absolute;
   left: 0;
@@ -10020,6 +10177,34 @@ var __publicField = (obj, key, value) => {
         (_a = render.updateBlock) == null ? void 0 : _a.call(render, editor, path, blockElement, blockData);
       });
     }
+    renderChildContainer(editor, path, containerId) {
+      const result = {
+        classes: [],
+        attributes: {},
+        styles: {}
+      };
+      this.renders.forEach((render) => {
+        if (render.renderChildContainer) {
+          const ret = render.renderChildContainer(editor, path, containerId);
+          if (ret.classes) {
+            result.classes.push(...ret.classes);
+          }
+          if (ret.attributes) {
+            result.attributes = {
+              ...result.attributes,
+              ...ret.attributes
+            };
+          }
+          if (ret.styles) {
+            result.styles = {
+              ...result.styles,
+              ...ret.styles
+            };
+          }
+        }
+      });
+      return result;
+    }
   }
   const logger$4l = getLogger("block-class");
   function getBlockClass(editor, block) {
@@ -11149,6 +11334,20 @@ var __publicField = (obj, key, value) => {
       return exists;
     }
     const container = createContainerElement(parent, "child", containerId);
+    const ret = editor.editorBlockRenders.renderChildContainer(editor, path, containerId);
+    if (ret.classes) {
+      addClass(container, ...ret.classes);
+    }
+    if (ret.attributes) {
+      Object.entries(ret.attributes).forEach(([key, value]) => {
+        container.setAttribute(key, value);
+      });
+    }
+    if (ret.styles) {
+      Object.entries(ret.styles).forEach(([key, value]) => {
+        container.style.setProperty(key, value);
+      });
+    }
     loadBlocks(editor, container, path);
     return container;
   }
@@ -37501,10 +37700,19 @@ ${codeText}
         throw err;
       }
     }
-    async getVersions() {
+    async getVersions(showPublished) {
       const server = this.apiServer();
-      const api = `${server}/versions?withExtra=true`;
-      const ret = await this.request(api);
+      const api = `${server}/versions`;
+      const params = {
+        withExtra: true,
+        published: void 0
+      };
+      if (showPublished) {
+        params.published = true;
+      }
+      const ret = await this.request(api, {
+        params
+      });
       const versions = ret.data.versions;
       versions.forEach((v) => {
         if (v.extra) {
@@ -37634,8 +37842,8 @@ ${codeText}
     getVersionHelper() {
       return this;
     }
-    getVersions() {
-      return this.client.getVersions();
+    getVersions(showPublished = false) {
+      return this.client.getVersions(showPublished);
     }
     async getVersion(ver) {
       const data2 = await this.client.getVersion(ver);
@@ -73361,14 +73569,15 @@ ${content}
         onSelectVersion(version);
       });
       __publicField(this, "handleEndEditItemMemo", (value, isCancel) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const versionItem = (_a = this.memoInput) == null ? void 0 : _a.root.closest(".version-item");
         if (this.isVersionElement(versionItem)) {
           removeClass(versionItem, "editing");
           if (!isCancel) {
             const version = this.getVersionFromElement(versionItem);
             const filterValue2 = value.replace(/[\n\r]+/g, " ");
-            if (((_b = version.extra) == null ? void 0 : _b.memo) !== filterValue2) {
+            const hasChanged = typeof ((_b = version.extra) == null ? void 0 : _b.memo) !== "undefined" && ((_c = version.extra) == null ? void 0 : _c.memo) !== filterValue2;
+            if (hasChanged) {
               version.extra = { memo: filterValue2 };
               this.options.versionHelper.updateVersionExtra(version.version, version.tagId, version.extra).then(() => {
                 var _a2, _b2;
@@ -73380,7 +73589,7 @@ ${content}
             }
           }
         }
-        (_c = this.memoInput) == null ? void 0 : _c.root.remove();
+        (_d = this.memoInput) == null ? void 0 : _d.root.remove();
       });
       __publicField(this, "handleRevert", (version, versionItem) => {
         const { onRevert } = this.options;
@@ -74114,6 +74323,15 @@ ${content}
     }
     onCreateContainer(containerId, data2, user) {
       this.docObject.blocks[containerId] = cloneDeep__default.default(data2);
+      const { meta } = this.docObject;
+      if (typeof meta.containerId === "undefined") {
+        meta[containerId] = {
+          createBy: user
+        };
+      } else {
+        const existHistoryDocMeta = meta[containerId];
+        existHistoryDocMeta.createBy = user;
+      }
       this.callbacks.forEach((cb) => {
         var _a;
         return (_a = cb.onInsertChildContainer) == null ? void 0 : _a.call(cb, containerId, data2, true);
@@ -74122,6 +74340,11 @@ ${content}
   }
   const { t } = i18n$1;
   function getOpDescription(user, type) {
+    if (type === "update") {
+      return t("version.update", {
+        name: user.displayName
+      });
+    }
     if (type === "insert") {
       return t("version.insert", {
         name: user.displayName
@@ -74131,6 +74354,12 @@ ${content}
       name: user.displayName
     });
   }
+  function removeOpacityFromHexColor(hexColor) {
+    if (hexColor.length === 9) {
+      return hexColor.slice(0, 7);
+    }
+    return hexColor;
+  }
   function getUserColors(users, user) {
     const { userId } = user;
     const types2 = ["flag", "selection"];
@@ -74147,8 +74376,11 @@ ${content}
         const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
         return {
           classes: ["history-deleted-box"],
+          attributes: {
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "delete")
+          },
           styles: {
-            [OpColor]: flag,
+            [OpColor]: removeOpacityFromHexColor(flag),
             [OpSelectedColor]: selection
           }
         };
@@ -74190,16 +74422,8 @@ ${content}
       if (blockData.deletedBy) {
         const user = blockData.deletedBy;
         const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
-        const blockType = blockData.type;
-        let classes = ["history-deleted-block"];
-        if (isTextKindBlockType(editor, blockType)) {
-          const blockText = blockData.text;
-          if (blockText.length === 0) {
-            classes = ["history-deleted-empty-text-block"];
-          }
-        }
         return {
-          classes,
+          classes: ["history-deleted-block"],
           attributes: {
             [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "delete")
           },
@@ -74215,7 +74439,6 @@ ${content}
         return {
           classes: ["history-inserted-block"],
           attributes: {
-            "data-op-description": getOpDescription(user, "insert"),
             [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
           },
           styles: {
@@ -74224,6 +74447,20 @@ ${content}
           }
         };
       }
+      if (blockData.updatedBy) {
+        const user = blockData.updatedBy;
+        const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
+        return {
+          classes: ["history-updated-block"],
+          attributes: {
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "update")
+          },
+          styles: {
+            [OpColor]: flag,
+            [OpSelectedColor]: selection
+          }
+        };
+      }
       return {};
     }
     updateBlock(editor, path, blockElement, blockData) {
@@ -74251,7 +74488,42 @@ ${content}
           [OpColor]: flag,
           [OpSelectedColor]: selection
         });
+        return;
+      }
+      if (blockData.updatedBy) {
+        const user = blockData.updatedBy;
+        const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
+        addClass(blockElement, "history-updated-block");
+        setAttributes(blockElement, {
+          [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "update")
+        });
+        setStyles(blockElement, {
+          [OpColor]: flag,
+          [OpSelectedColor]: selection
+        });
+      }
+    }
+    renderChildContainer(editor, path, containerId) {
+      const meta = editor.doc.toJSON().meta;
+      const historyDocMeta = meta[containerId];
+      if (historyDocMeta) {
+        const { createBy } = historyDocMeta;
+        if (createBy) {
+          const user = createBy;
+          const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
+          return {
+            classes: ["history-inserted-container"],
+            attributes: {
+              [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
+            },
+            styles: {
+              [OpColor]: flag,
+              [OpSelectedColor]: selection
+            }
+          };
+        }
       }
+      return {};
     }
   }
   const logger$t = getLogger("history-deleted-box");
@@ -74264,7 +74536,7 @@ ${content}
     const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
     span.setAttribute("history-deleted-by", user.displayName);
     span.setAttribute(HISTORY_TOOLTIP_IDENTIFIER, getOpDescription(user, "delete"));
-    span.style.setProperty(OpColor, flag);
+    span.style.setProperty(OpColor, removeOpacityFromHexColor(flag));
     span.style.setProperty(OpSelectedColor, selection);
   }
   function convertTo$9(editor, boxData, doc2, type) {
@@ -74546,21 +74818,16 @@ ${content}
     }
   }
   const index$5 = "";
-  function removeHexColorOpacity(color) {
-    return color.slice(0, -2);
-  }
   class OnesEditorHistoryTooltip {
     constructor() {
       __publicField(this, "createContent", (reference) => {
         var _a;
         const style2 = getComputedStyle(reference);
-        const color = style2.getPropertyValue(OpColor);
         const selectedColor = style2.getPropertyValue(OpSelectedColor);
         const text2 = (_a = reference.getAttribute(HISTORY_TOOLTIP_IDENTIFIER)) != null ? _a : "";
         const contentEl = createElement("div", ["editor-history-tooltip-content"], null);
         contentEl.textContent = text2;
-        contentEl.style.setProperty(OpColor, removeHexColorOpacity(color));
-        contentEl.style.setProperty(OpSelectedColor, removeHexColorOpacity(selectedColor));
+        contentEl.style.setProperty(OpSelectedColor, removeOpacityFromHexColor(selectedColor));
         return contentEl;
       });
       __publicField(this, "getPropsFromDifferentBlock", (reference) => {
@@ -74816,7 +75083,7 @@ ${content}
         this.dialog = new Dialog$1(root2);
       }
       this.dialog.show(options.container);
-      this.versions = await this.versionHelper.getVersions();
+      this.versions = await this.versionHelper.getVersions(options.showPublishedVersions);
       removeClass(this.components.root, "loading");
       if (this.versionOptions.onVersionsLoaded) {
         this.versionOptions.onVersionsLoaded(this, this.versions);
@@ -83272,7 +83539,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.8-beta.1";
+    editor.version = "2.1.8-beta.2";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -83367,7 +83634,7 @@ ${data2.flowchartText}
     if (!clientType.isMobile) {
       OnesEditorToolbar.register(editor);
     }
-    editor.version = "2.1.8-beta.1";
+    editor.version = "2.1.8-beta.2";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {