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

package/dist/index.js

@@ -37,7 +37,7 @@ div.editor-root {
   --text-color: #303030;
   --primary-color: #0064ff;
   --background-selection: #0064ff1A;
-  --background-code: #cdcdcd40;
+  --background-code: #F8F8F8;
 }
 div.editor-root {
   color: #2d2d2e;
@@ -4795,7 +4795,373 @@ 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;
+}
+.editor-root.history .root-container .editor-block .text-element .inline-plugin.editor-box-loading {
+  display: none;
+}
+.editor-root.history .editor-content {
+  padding: 30px 75px;
+}
+.editor-root.history .table-block.history-inserted-block table, .editor-root.history .table-block.history-updated-block table {
+  position: relative;
+}
+.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;
+  pointer-events: none;
+}
+.editor-root.history .table-block.history-inserted-block table .child, .editor-root.history .table-block.history-updated-block table .child {
+  pointer-events: none;
+}
+.editor-root.history .table-block.history-deleted-block table {
+  position: relative;
+}
+.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 .table-block.history-deleted-block table .child {
+  pointer-events: none;
+}
+.editor-root.history .table-block .history-inserted-container {
+  position: relative;
+}
+.editor-root.history .table-block .history-inserted-container::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
+}
+.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 .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 .layout-block.history-deleted-block {
+  position: relative;
+}
+.editor-root.history .layout-block.history-deleted-block::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 .layout-block.history-updated-block {
+  position: relative;
+}
+.editor-root.history .layout-block.history-updated-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 .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 .list-block.history-deleted-block::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+  right: 0;
+  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 .text-block.history-inserted-block,
+.editor-root.history [data-style-quoted=true].history-inserted-block {
+  position: relative;
+}
+.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;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
+}
+.editor-root.history .text-block.history-deleted-block,
+.editor-root.history [data-style-quoted=true].history-deleted-block {
+  position: relative;
+}
+.editor-root.history .text-block.history-deleted-block::after,
+.editor-root.history [data-style-quoted=true].history-deleted-block::after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  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 [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 [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 [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-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 .status-box.history-inserted-box {
+  background-color: unset;
+}
+.editor-root.history .status-box.history-inserted-box [data-type=box-content] {
+  position: relative;
+}
+.editor-root.history .status-box.history-inserted-box [data-type=box-content]::before {
+  content: "";
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 2.5px;
+  right: 2.5px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
+}
+.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 .math-box.history-inserted-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 .math-box.history-deleted-box {
+  text-decoration: 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;
+  background-color: var(--op-selected-color);
+}
+.editor-root.history .history-deleted-box {
+  text-decoration: line-through;
+}
+.editor-root.history .history-deleted-box[class=history-deleted-box] {
+  color: var(--op-color);
+}
+.editor-root.history [data-box-type=history-deleted-box] > span[data-type=box-content] {
+  border: none !important;
+  margin: 0 !important;
+}
+.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;
@@ -4908,183 +5274,6 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 }
 .version-dialog .version-viewer .dialog-text-button .dialog-button-icon svg {
   fill: currentColor;
-}
-.editor-root.history .root-container .editor-block .text-element .inline-plugin.editor-box-loading {
-  display: none;
-}
-.editor-root.history .editor-content {
-  padding: 30px 75px;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block] [data-type=block-content] {
-  border: 4px solid var(--op-selected-color);
-}
-.editor-root.history .history-inserted-block[data-type=editor-block] {
-  position: relative;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block]:hover::after {
-  content: attr(data-op-description);
-  position: absolute;
-  top: -26px;
-  /* left: var(--op-offset); */
-  left: 0;
-  line-height: 24px;
-  background-color: var(--op-color);
-  min-width: 20px;
-  opacity: 1;
-  color: white;
-  padding: 0 8px;
-  z-index: 10;
-  font-size: 14px;
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block table {
-  border: 4px solid var(--op-selected-color);
-}
-.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 {
-  position: relative;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block:hover::after {
-  content: attr(data-op-description);
-  position: absolute;
-  top: -26px;
-  /* left: var(--op-offset); */
-  left: 0;
-  line-height: 24px;
-  background-color: var(--op-color);
-  min-width: 20px;
-  opacity: 1;
-  color: white;
-  padding: 0 8px;
-  z-index: 10;
-  font-size: 14px;
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block:hover::after {
-  top: 0;
-}
-.editor-root.history .history-deleted-block [data-type=block-content] {
-  border: 4px solid var(--op-selected-color);
-}
-.editor-root.history .history-deleted-block [data-type=block-content] {
-  position: relative;
-}
-.editor-root.history .history-deleted-block [data-type=block-content]::after, .editor-root.history .history-deleted-block [data-type=block-content]::before {
-  content: " ";
-  position: absolute;
-  display: flex;
-  z-index: 2000;
-  color: var(--op-color);
-  justify-items: center;
-  align-items: center;
-  justify-content: center;
-  align-content: center;
-  pointer-events: none;
-  overflow: visible;
-  max-width: 100%;
-  max-height: 100%;
-  /* border: 4px solid var(--op-color); */
-  left: calc(50% - 16px);
-  top: calc(50% - 2px);
-  width: 32px;
-  height: 4px;
-  background-color: var(--op-color);
-  transform: rotate(45deg);
-  opacity: 1;
-}
-.editor-root.history .history-deleted-block [data-type=block-content]::before {
-  transform: rotate(135deg);
-}
-.editor-root.history .history-deleted-block {
-  position: relative;
-}
-.editor-root.history .history-deleted-block:hover::after {
-  content: attr(data-op-description);
-  position: absolute;
-  top: -26px;
-  /* left: var(--op-offset); */
-  left: 0;
-  line-height: 24px;
-  background-color: var(--op-color);
-  min-width: 20px;
-  opacity: 1;
-  color: white;
-  padding: 0 8px;
-  z-index: 10;
-  font-size: 14px;
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.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 .history-inserted-text {
-  line-height: revert !important;
-  background-color: var(--op-selected-color);
-}
-.editor-root.history .history-inserted-text {
-  position: relative;
-}
-.editor-root.history .history-inserted-text:hover::after {
-  content: attr(data-op-description);
-  position: absolute;
-  top: -26px;
-  /* left: var(--op-offset); */
-  left: 0;
-  line-height: 24px;
-  background-color: var(--op-color);
-  min-width: 20px;
-  opacity: 1;
-  color: white;
-  padding: 0 8px;
-  z-index: 10;
-  font-size: 14px;
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.editor-root.history .history-deleted-box {
-  background-color: var(--op-selected-color);
-  text-decoration: line-through;
-}
-.editor-root.history .history-deleted-box {
-  position: relative;
-}
-.editor-root.history .history-deleted-box:hover::after {
-  content: attr(data-op-description);
-  position: absolute;
-  top: -26px;
-  /* left: var(--op-offset); */
-  left: 0;
-  line-height: 24px;
-  background-color: var(--op-color);
-  min-width: 20px;
-  opacity: 1;
-  color: white;
-  padding: 0 8px;
-  z-index: 10;
-  font-size: 14px;
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.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-dialog-root {
   position: absolute;
   left: 0;
@@ -5437,6 +5626,21 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 }
 [data-command-bar-id=versions-dropdown-popup] .command-item .filter-memoed-version-item .filter-item-input-container:hover .editor-checkbox-wrapper:not(.checked) > span.editor-checkbox > span.editor-checkbox-inner {
   border-color: #0064ff;
+}:root div.tippy-box[data-theme=editor-history-tooltip] {
+  background-color: unset;
+}
+:root div.tippy-box[data-theme=editor-history-tooltip] > .tippy-content {
+  color: unset;
+  line-height: initial;
+  padding: 0;
+}
+:root div.tippy-box[data-theme=editor-history-tooltip] > .tippy-content .editor-history-tooltip-content {
+  line-height: 30px;
+  font-size: 14px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background-color: var(--op-selected-color);
+  color: white;
 }.editor-root.readonly .editor-content div[data-type=editor-block].focused div[data-type=block-tools] .block-helper .heading-marker, .editor-root.readonly .editor-content div[data-type=editor-block].highlighted div[data-type=block-tools] .block-helper .heading-marker {
   display: flex;
 }
@@ -7871,7 +8075,7 @@ var __publicField = (obj, key, value) => {
       return (_a = observers.get(this))[method].apply(_a, arguments);
     };
   });
-  var index$g = function() {
+  var index$h = function() {
     if (typeof global$1.ResizeObserver !== "undefined") {
       return global$1.ResizeObserver;
     }
@@ -9973,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) {
@@ -11049,7 +11281,7 @@ var __publicField = (obj, key, value) => {
       this.editor = editor;
       this.rootContainer = rootContainer;
       this.editor = editor;
-      this.resizeObserver = new index$g(this.handleResize);
+      this.resizeObserver = new index$h(this.handleResize);
       this.bindEvents(rootContainer);
     }
     bindEvents(rootContainer) {
@@ -11102,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;
   }
@@ -37454,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) {
@@ -37587,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);
@@ -37969,7 +38224,7 @@ ${codeText}
   const TreeIcon = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.80894 1.37566L9.19382 1.05649V1.05649L8.80894 1.37566ZM7.26945 1.37566L6.88457 1.05649V1.05649L7.26945 1.37566ZM12.7147 6.08541L13.0996 5.76623V5.76623L12.7147 6.08541ZM11.4874 7.72375V7.22375H10.1891L11.152 8.09459L11.4874 7.72375ZM14.159 10.1399L14.4944 9.76908L14.159 10.1399ZM10.0508 11.8816V11.3816H9.55085V11.8816H10.0508ZM10.0508 15V15.5H10.5508V15H10.0508ZM6.02806 15H5.52806V15.5H6.02806V15ZM6.02806 11.8816H6.52806V11.3816H6.02806V11.8816ZM1.91945 10.1399L2.25483 10.5108H2.25483L1.91945 10.1399ZM4.59108 7.72375L4.92646 8.09459L5.88936 7.22375H4.59108V7.72375ZM3.36368 6.0854L3.74855 6.40458L3.36368 6.0854ZM9.19382 1.05649C8.59399 0.333182 7.48441 0.333182 6.88457 1.05649L7.65432 1.69483C7.85427 1.45373 8.22413 1.45373 8.42407 1.69483L9.19382 1.05649ZM13.0996 5.76623L9.19382 1.05649L8.42407 1.69483L12.3298 6.40458L13.0996 5.76623ZM11.945 8.22375C13.215 8.22375 13.9103 6.74387 13.0996 5.76623L12.3298 6.40458C12.6001 6.73046 12.3683 7.22375 11.945 7.22375V8.22375ZM11.4874 8.22375H11.945V7.22375H11.4874V8.22375ZM14.4944 9.76908L11.8227 7.35292L11.152 8.09459L13.8236 10.5108L14.4944 9.76908ZM13.4882 12.3816C14.8612 12.3816 15.5126 10.69 14.4944 9.76908L13.8236 10.5108C14.163 10.8177 13.9459 11.3816 13.4882 11.3816V12.3816ZM10.0508 12.3816H13.4882V11.3816H10.0508V12.3816ZM9.55085 11.8816V15H10.5508V11.8816H9.55085ZM10.0508 14.5H6.02806V15.5H10.0508V14.5ZM6.52806 15V11.8816H5.52806V15H6.52806ZM2.59021 12.3816H6.02806V11.3816H2.59021V12.3816ZM1.58407 9.76909C0.565789 10.69 1.21726 12.3816 2.59021 12.3816V11.3816C2.13256 11.3816 1.9154 10.8177 2.25483 10.5108L1.58407 9.76909ZM4.2557 7.35292L1.58407 9.76909L2.25483 10.5108L4.92646 8.09459L4.2557 7.35292ZM4.13343 8.22375H4.59108V7.22375H4.13343V8.22375ZM2.97881 5.76623C2.16805 6.74387 2.86334 8.22375 4.13343 8.22375V7.22375C3.71007 7.22375 3.4783 6.73046 3.74855 6.40458L2.97881 5.76623ZM6.88457 1.05649L2.97881 5.76623L3.74855 6.40458L7.65432 1.69483L6.88457 1.05649Z" fill="currentColor"/>\n</svg>\n';
   const TimeIcon = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8C1.5 4.41023 4.41023 1.5 8 1.5C11.5898 1.5 14.5 4.41023 14.5 8C14.5 11.5898 11.5898 14.5 8 14.5C4.41023 14.5 1.5 11.5898 1.5 8ZM8 0.5C3.85794 0.5 0.5 3.85794 0.5 8C0.5 12.1421 3.85794 15.5 8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85794 12.1421 0.5 8 0.5ZM7.5 3V8V8.5H8H12V7.5H8.5V3H7.5Z" fill="currentColor"/>\n</svg>\n';
   const SearchIcon = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10.8597 11.4183L14.0962 14.8891M12.5 7.5C12.5 10.5376 10.0376 13 7 13C3.96243 13 1.5 10.5376 1.5 7.5C1.5 4.46243 3.96243 2 7 2C10.0376 2 12.5 4.46243 12.5 7.5Z" stroke="#87888A" stroke-width="2"/>\n</svg>\n';
-  const index$f = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const index$g = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     DownloadIcon: DownloadIcon$1,
     AddEmojiIcon,
@@ -40324,7 +40579,7 @@ ${codeText}
     var _a;
     return (_a = item.subText) != null ? _a : "";
   }
-  const index$e = "";
+  const index$f = "";
   class EmojiSearch {
     constructor(parent, options) {
       __publicField(this, "input");
@@ -40673,7 +40928,7 @@ ${codeText}
       (_a = this.observer) == null ? void 0 : _a.disconnect();
     }
   }
-  const index$d = "";
+  const index$e = "";
   class EmojiPalette extends tinyTypedEmitter.TypedEmitter {
     constructor() {
       super();
@@ -43718,7 +43973,7 @@ ${codeText}
       });
       this.scrollCore = scrollCore;
       this.callback = callback;
-      this.resizeObserver = new index$g(this.handleContentResize);
+      this.resizeObserver = new index$h(this.handleContentResize);
     }
     get containers() {
       return this.scrollCore.containers;
@@ -43853,7 +44108,7 @@ ${codeText}
         calcScrollbarPos(this.scrollCore, scrollContainer);
       });
       this.scrollCore = scrollCore;
-      this.resizeObserver = new index$g(this.handleScrollWrapResize);
+      this.resizeObserver = new index$h(this.handleScrollWrapResize);
     }
     get containers() {
       return this.scrollCore.containers;
@@ -43892,7 +44147,7 @@ ${codeText}
       });
       this.scrollCore = scrollCore;
       this.callback = callback;
-      this.resizeObserver = new index$g(this.handleResize);
+      this.resizeObserver = new index$h(this.handleResize);
     }
     bind(scrollContainer) {
       var _a, _b;
@@ -44813,7 +45068,7 @@ ${codeText}
   function getToolbar(editor) {
     return editor.findCustom("toolbar-handler");
   }
-  const index$c = "";
+  const index$d = "";
   class LinkEditor {
     constructor() {
       __publicField(this, "linkPopup", null);
@@ -46396,7 +46651,7 @@ ${codeText}
       return {};
     }
   }
-  const index$b = "";
+  const index$c = "";
   const BlockPaddingShortcuts = {
     "Tab": handleTab$3,
     "Shift+Tab": handleShiftTab$3,
@@ -55505,12 +55760,13 @@ $$${mathData.mathjaxText}$$
       }
     }
   }
-  class OnesEditorTooltip {
-    constructor(editor) {
+  class OnesEditorTooltip extends EventCallbacks {
+    constructor(editor, options) {
+      super();
       __publicField(this, "instance");
       __publicField(this, "mousedown", false);
       __publicField(this, "currentInstance", null);
-      __publicField(this, "attributeName", []);
+      __publicField(this, "attributeNames", []);
       __publicField(this, "attributeDesc", "");
       __publicField(this, "_lastClickButtonId", "");
       __publicField(this, "observer", null);
@@ -55518,9 +55774,9 @@ $$${mathData.mathjaxText}$$
       __publicField(this, "createContent", (reference) => {
         let name = "";
         let times = 0;
-        while (times < this.attributeName.length && !name) {
-          if (reference.hasAttribute(this.attributeName[times])) {
-            name = reference.getAttribute(this.attributeName[times]) || "";
+        while (times < this.attributeNames.length && !name) {
+          if (reference.hasAttribute(this.attributeNames[times])) {
+            name = reference.getAttribute(this.attributeNames[times]) || "";
           }
           times++;
         }
@@ -55576,7 +55832,7 @@ $$${mathData.mathjaxText}$$
           this._lastClickButtonId = "";
           return false;
         }
-        if (this.attributeName.every((attribute) => !reference.hasAttribute(attribute))) {
+        if (this.attributeNames.every((attribute) => !reference.hasAttribute(attribute))) {
           return false;
         }
         if (instance.reference) {
@@ -55608,24 +55864,36 @@ $$${mathData.mathjaxText}$$
             instance.setContent(newContent || "");
           }
         }
+        this.callbacks.forEach((c) => {
+          var _a2;
+          return (_a2 = c.onBeforeShow) == null ? void 0 : _a2.call(c, instance);
+        });
         return true;
       });
       this.editor = editor;
+      const { onBeforeTooltipInitialize } = options != null ? options : {};
       const clientId = editor.clientId;
-      this.attributeName = [`data-editor-tooltip-${clientId}`, `data-editor-tooltip-${clientId}-dynamic`, "data-editor-tooltip-common"];
       this.attributeDesc = `data-editor-tooltip-desc-${clientId}`;
-      this.instance = tippy$1.delegate(document.body, {
+      const defaultProps = {
         theme: "editor-tooltip",
         maxWidth: 400,
         delay: 200,
-        target: this.attributeName.map((attribute) => `[${attribute}]`).join(","),
+        hideOnClick: false,
+        attributeNames: [`data-editor-tooltip-${clientId}`, `data-editor-tooltip-${clientId}-dynamic`, "data-editor-tooltip-common"]
+      };
+      const finalProps = onBeforeTooltipInitialize ? onBeforeTooltipInitialize(defaultProps) : defaultProps;
+      const { attributeNames } = finalProps;
+      const target = attributeNames.map((name) => `[${name}]`).join(",");
+      this.instance = tippy$1.delegate(document.body, {
+        ...finalProps,
+        target,
         content: this.createContent,
         onShow: this.handleShow,
         onShown: this.handleShown,
-        onHide: this.handleHidden,
-        hideOnClick: false
+        onHide: this.handleHidden
       });
       editor.domEvents.addEventListener(document, "mousedown", this.handleDocumentMouseDown);
+      this.attributeNames = attributeNames;
     }
     set lastClickButtonId(value) {
       this._lastClickButtonId = value;
@@ -55894,7 +56162,7 @@ $$${mathData.mathjaxText}$$
     "en-US": enUS$s,
     "ja-JP": jaJP$s
   });
-  const index$a = "";
+  const index$b = "";
   function createTextButton(parent, ...args) {
     const button2 = createButton$1(...args);
     button2.classList.remove("editor-button");
@@ -56314,7 +56582,7 @@ $$${mathData.mathjaxText}$$
       assert(logger$1E, this.tableBlock, "no table block");
       logger$1E.debug("create table border bar");
       updateTableBorderBar(this.editor, this.tableBlock);
-      this.resizeObserver = new index$g(this.handleTableResize);
+      this.resizeObserver = new index$h(this.handleTableResize);
       this.resizeObserver.observe(getBlockTable(this.tableBlock));
       const options = editor.getComponentOptions("table");
       if (!(options == null ? void 0 : options.hideToolbar)) {
@@ -61130,7 +61398,7 @@ ${codeText}
         const handleChildContainerResize = () => {
           this.handleEditorResize(parentContainer);
         };
-        this.parentContainerResizerObserver = new index$g(handleChildContainerResize);
+        this.parentContainerResizerObserver = new index$h(handleChildContainerResize);
         this.parentContainerResizerObserver.observe(parentContainer);
       }
       const isEmptyImage2 = () => {
@@ -65065,7 +65333,7 @@ ${codeText}
       return `<span class="${CLASS_NAME}">${token.formula}</span>`;
     }
   });
-  var index$9 = (options = {}) => {
+  var index$a = (options = {}) => {
     if (options.lazy && options.env !== "test") {
       new IntersectionObserver((entries, self2) => {
         for (const entry of entries) {
@@ -65581,7 +65849,7 @@ ${codeText}
   const latexOptions = {
     render: (formula, displayMode) => ""
   };
-  marked.marked.use(index$9(latexOptions));
+  marked.marked.use(index$a(latexOptions));
   marked.marked.use({
     mangle: false
   });
@@ -69732,7 +70000,7 @@ ${content}
       }
     }
   }
-  const index$8 = "";
+  const index$9 = "";
   getLogger("comment-editor");
   const { t: t$5 } = i18n$1;
   const EDITOR_READONLY_CLS = "comment-editor-readonly";
@@ -70255,7 +70523,7 @@ ${content}
   }
   const switchUpIcon = '<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M2.00218 11.0005L8.00341 4.99923L14.0046 11.0005" stroke="currentColor" fill="transparent" stroke-width="1.5" stroke-linejoin="bevel"/>\n</svg>';
   const switchDownIcon = '<svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.0029 4.99933L8.00172 11.0006L2.00049 4.99933" stroke="currentColor" fill="transparent" stroke-width="1.5" stroke-linejoin="bevel"/>\n</svg>';
-  const index$7 = "";
+  const index$8 = "";
   const REPLY_EDITOR_EDITING_CLS = "reply-editor-editing";
   const { t: t$3 } = i18n$1;
   class CommentQuickReply {
@@ -70425,7 +70693,7 @@ ${content}
       this.childrenList = this.createChildrenList();
       this.quickReply = this.createQuickReply();
       this.editor.on("readonlyChanged", this.handleReadonlyChanged);
-      this.resizeObserver = new index$g(this.handleResize);
+      this.resizeObserver = new index$h(this.handleResize);
       this.resizeObserver.observe(this.root);
       this.updateLastCommentItem();
     }
@@ -73008,7 +73276,7 @@ ${content}
   const AutoLinkShortcuts = {
     "Space": autoLink
   };
-  const index$6 = "";
+  const index$7 = "";
   const zhCN$c = {
     version: {
       latest: "\u6700\u65B0\u7248\u672C",
@@ -73040,7 +73308,7 @@ ${content}
       },
       tooltip: {
         help: "1. \u56DE\u6EDA\u7248\u672C\u4E0D\u652F\u6301\u4E0E\u56DE\u6EDA\u524D\u7248\u672C\u8FDB\u884C\u5BF9\u6BD4\uFF1B\n2. \u82E5\u4E24\u4E2A\u7248\u672C\u4E4B\u95F4\u5B58\u5728\u56DE\u6EDA\u7248\u672C\uFF0C\u5219\u4E0D\u652F\u6301\u5BF9\u6BD4\u3002",
-        user: "\u7248\u672C\u53D1\u5E03\u8005\uFF1A{name}",
+        user: "\u7248\u672C\u7F16\u8F91\u8005\uFF1A{name}",
         auth: "\u6682\u65E0\u9875\u9762\u7F16\u8F91\u6743\u9650\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458"
       },
       dropdownHeader: "\u4EC5\u5C55\u793A\u53EF\u4E0E\u5F53\u524D\u7248\u672C\u8FDB\u884C\u5BF9\u6BD4\u7684\u5386\u53F2\u7248\u672C",
@@ -73153,7 +73421,8 @@ ${content}
   })(HistoryClass || {});
   const OpColor = "--op-color";
   const OpSelectedColor = "--op-selected-color";
-  const index$5 = "";
+  const HISTORY_TOOLTIP_IDENTIFIER = "data-history-editor-tooltip";
+  const index$6 = "";
   class Dialog$1 {
     constructor(content) {
       __publicField(this, "root");
@@ -73300,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;
@@ -73319,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;
@@ -73773,10 +74043,12 @@ ${content}
     const attributes = ops.length === 1 ? ops[0].attributes : ops[1].attributes;
     const insertedRichText = [{
       insert: insertedPlainText,
-      attributes
+      attributes: {
+        ...attributes,
+        insertedBy: user
+      }
     }];
-    const newRichText = addAttribute(insertedRichText, "insertedBy", user);
-    const newText = insertText(text2, offset, newRichText, null);
+    const newText = insertText(text2, offset, insertedRichText, null);
     return newText;
   }
   function applyActionsToText(text2, ops, user) {
@@ -73967,7 +74239,7 @@ ${content}
       };
     }
     getRemoteUsers() {
-      const colors = ["#0064FF4D", "#00A8654D", "#F593004D", "#EB37234D", "#8851ED4D", "#009CAD4D", "#F25A0A4D", "#70A3104D"];
+      const colors = ["#B21B5733", "#00879633", "#7241CC33", "#CC4C0833", "#5D8F0033", "#BD2C1C33", "#D17D0033"];
       return new RemoteUsers(colors);
     }
     destroy() {
@@ -74051,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);
@@ -74059,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
@@ -74068,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"];
@@ -74080,9 +74372,27 @@ ${content}
   class OnesEditorHistoryRender {
     renderBox(editor, path, attributes) {
       if (attributes.deletedBy) {
-        const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), attributes.deletedBy);
+        const user = attributes.deletedBy;
+        const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
         return {
           classes: ["history-deleted-box"],
+          attributes: {
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "delete")
+          },
+          styles: {
+            [OpColor]: removeOpacityFromHexColor(flag),
+            [OpSelectedColor]: selection
+          }
+        };
+      }
+      if (attributes.insertedBy) {
+        const user = attributes.insertedBy;
+        const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
+        return {
+          classes: ["history-inserted-box"],
+          attributes: {
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
+          },
           styles: {
             [OpColor]: flag,
             [OpSelectedColor]: selection
@@ -74098,8 +74408,7 @@ ${content}
         return {
           classes: ["history-inserted-text"],
           attributes: {
-            "history-inserted-by": user.displayName,
-            "data-op-description": getOpDescription(user, "insert")
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
           },
           styles: {
             [OpColor]: flag,
@@ -74116,8 +74425,7 @@ ${content}
         return {
           classes: ["history-deleted-block"],
           attributes: {
-            "history-deleted-by": user.displayName,
-            "data-op-description": getOpDescription(user, "delete")
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "delete")
           },
           styles: {
             [OpColor]: flag,
@@ -74131,8 +74439,21 @@ ${content}
         return {
           classes: ["history-inserted-block"],
           attributes: {
-            "history-inserted-by": user.displayName,
-            "data-op-description": getOpDescription(user, "insert")
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
+          },
+          styles: {
+            [OpColor]: flag,
+            [OpSelectedColor]: selection
+          }
+        };
+      }
+      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,
@@ -74148,8 +74469,7 @@ ${content}
         const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
         addClass(blockElement, "history-deleted-block");
         setAttributes(blockElement, {
-          "history-inserted-by": user.displayName,
-          "data-op-description": getOpDescription(user, "delete")
+          [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "delete")
         });
         setStyles(blockElement, {
           [OpColor]: flag,
@@ -74162,14 +74482,48 @@ ${content}
         const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
         addClass(blockElement, "history-inserted-block");
         setAttributes(blockElement, {
-          "history-inserted-by": user.displayName,
-          "data-op-description": getOpDescription(user, "insert")
+          [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
         });
         setStyles(blockElement, {
           [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");
@@ -74181,8 +74535,8 @@ ${content}
     const user = data2.user;
     const { flag, selection } = getUserColors(editor.doc.getRemoteUsers(), user);
     span.setAttribute("history-deleted-by", user.displayName);
-    span.setAttribute("data-op-description", getOpDescription(user, "delete"));
-    span.style.setProperty(OpColor, flag);
+    span.setAttribute(HISTORY_TOOLTIP_IDENTIFIER, getOpDescription(user, "delete"));
+    span.style.setProperty(OpColor, removeOpacityFromHexColor(flag));
     span.style.setProperty(OpSelectedColor, selection);
   }
   function convertTo$9(editor, boxData, doc2, type) {
@@ -74463,6 +74817,83 @@ ${content}
       this.dropdown.setCurrentVersion(ver, compareWithVersion);
     }
   }
+  const index$5 = "";
+  class OnesEditorHistoryTooltip {
+    constructor() {
+      __publicField(this, "createContent", (reference) => {
+        var _a;
+        const style2 = getComputedStyle(reference);
+        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(OpSelectedColor, removeOpacityFromHexColor(selectedColor));
+        return contentEl;
+      });
+      __publicField(this, "getPropsFromDifferentBlock", (reference) => {
+        if (isBlock$1(reference)) {
+          const blockElement = reference;
+          const blockType = getBlockType(blockElement);
+          if (blockType === "table") {
+            return {
+              offset: [-4, 6]
+            };
+          }
+          if (blockType === "layout") {
+            return {
+              offset: [-4, 8]
+            };
+          }
+        }
+        return {};
+      });
+      __publicField(this, "onBeforeShow", (instance) => {
+        const reference = instance.reference;
+        if (reference.hasAttribute(HISTORY_TOOLTIP_IDENTIFIER)) {
+          const props = this.getPropsFromDifferentBlock(reference);
+          const getReferenceClientRect2 = () => this.getReferenceClientRect(reference);
+          instance.setProps({
+            ...props,
+            getReferenceClientRect: getReferenceClientRect2,
+            content: this.createContent(reference)
+          });
+        }
+      });
+    }
+    static register(editor) {
+      editor.addCustom("editor-tooltip", () => {
+        const editorTooltip = new OnesEditorTooltip(editor, {
+          onBeforeTooltipInitialize(props) {
+            const { attributeNames = [] } = props;
+            return {
+              ...props,
+              attributeNames: attributeNames.concat(HISTORY_TOOLTIP_IDENTIFIER),
+              theme: "editor-history-tooltip",
+              arrow: false,
+              delay: 50,
+              placement: "top-start",
+              offset: [0, 2]
+            };
+          }
+        });
+        editorTooltip.registerCallback(new OnesEditorHistoryTooltip());
+        return editorTooltip;
+      });
+    }
+    getReferenceClientRect(reference) {
+      if (isBlock$1(reference)) {
+        const blockElement = reference;
+        const blockType = getBlockType(blockElement);
+        if (blockType === "table") {
+          const table = blockElement.querySelector("table");
+          return table.getBoundingClientRect();
+        }
+      }
+      const referenceClientRects = reference.getClientRects();
+      const [targetClientRect] = Array.from(referenceClientRects);
+      return targetClientRect;
+    }
+  }
   const logger$r = getLogger("version-dialog");
   class OnesEditorVersionsDialog {
     constructor(server, provider) {
@@ -74473,6 +74904,10 @@ ${content}
       __publicField(this, "provider");
       __publicField(this, "versions", []);
       __publicField(this, "components");
+      __publicField(this, "handleBeforeShowTooltip", (instance) => {
+        console.log(instance);
+        return false;
+      });
       __publicField(this, "handleRevert", async (ver) => {
         var _a, _b, _c;
         assert(logger$r, this.versionList, "The versionList did not render");
@@ -74533,6 +74968,7 @@ ${content}
         viewer.editorBlockRenders.registerRender(new OnesEditorHistoryRender());
         viewer.editorBoxes.registerBoxClass(HistoryDeletedTextBox);
         (_c = (_b = this.versionOptions) == null ? void 0 : _b.textRenders) == null ? void 0 : _c.forEach((render) => viewer.editorBlockRenders.registerRender(render));
+        OnesEditorHistoryTooltip.register(viewer);
         addClass(viewer.rootElement, HistoryClass.HISTORY);
         try {
           await playHistoryData(historyDoc, this.versionHelper, historyData);
@@ -74647,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);
@@ -81288,7 +81724,6 @@ ${data2.flowchartText}
     });
     editor.readonly = true;
     editor.addCustom("heading-collapse", () => new HeadingBlockCollapseButton(editor));
-    editor.addCustom("editor-tooltip", () => new OnesEditorTooltip(editor));
     editor.addListener("clickLink", (editor2, event, link2) => {
       var _a2;
       if ((_a2 = options == null ? void 0 : options.events) == null ? void 0 : _a2.onClickLink) {
@@ -83104,7 +83539,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.7";
+    editor.version = "2.1.8-beta.2";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -83199,7 +83634,7 @@ ${data2.flowchartText}
     if (!clientType.isMobile) {
       OnesEditorToolbar.register(editor);
     }
-    editor.version = "2.1.7";
+    editor.version = "2.1.8-beta.2";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -128988,7 +129423,7 @@ ${data2.flowchartText}
   exports2.OnesEditorCustomDataWrapper = OnesEditorCustomDataWrapper;
   exports2.OnesEditorExclusiveBlock = OnesEditorExclusiveBlock;
   exports2.OnesEditorHoveringBlock = OnesEditorHoveringBlock;
-  exports2.OnesEditorIcons = index$f;
+  exports2.OnesEditorIcons = index$g;
   exports2.OnesEditorQuickMenu = OnesEditorQuickMenu;
   exports2.OnesEditorToc = OnesEditorToc;
   exports2.OnesEditorTocProvider = OnesEditorTocProvider;