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

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;
@@ -4915,112 +4915,134 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 .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].list-block {
+  position: relative;
+}
+.editor-root.history .history-inserted-block[data-type=editor-block].list-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 .history-inserted-block[data-type=editor-block] {
+.editor-root.history .history-inserted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true]) {
   position: relative;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block]:hover::after {
-  content: attr(data-op-description);
+.editor-root.history .history-inserted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true])::before {
+  content: "";
   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;
+  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-block[data-type=editor-block].table-block table {
-  border: 4px solid var(--op-selected-color);
+  position: relative;
+}
+.editor-root.history .history-inserted-block[data-type=editor-block].table-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 .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 {
+.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) {
   position: relative;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block:hover::after {
-  content: attr(data-op-description);
+.editor-root.history .history-inserted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block)::before {
+  content: "";
   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;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  background-color: var(--op-selected-color);
   border-radius: 3px;
+  pointer-events: none;
 }
-.editor-root.history .history-inserted-block[data-type=editor-block].table-block:hover::after {
-  top: 0;
+.editor-root.history .history-deleted-block[data-type=editor-block].list-block {
+  position: relative;
 }
-.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=editor-block].list-block::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+  right: 0;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
 }
-.editor-root.history .history-deleted-block [data-type=block-content] {
+.editor-root.history .history-deleted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true]) {
   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: " ";
+.editor-root.history .history-deleted-block[data-type=editor-block]:is(.text-block, [data-style-quoted=true])::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;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
   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[data-type=editor-block].table-block table {
+  position: relative;
 }
-.editor-root.history .history-deleted-block {
+.editor-root.history .history-deleted-block[data-type=editor-block].table-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 .history-deleted-block[data-type=editor-block].table-block table .child {
+  pointer-events: none;
+}
+.editor-root.history .history-deleted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block) {
   position: relative;
 }
-.editor-root.history .history-deleted-block:hover::after {
-  content: attr(data-op-description);
+.editor-root.history .history-deleted-block[data-type=editor-block]:not(.list-block, .text-block, [data-style-quoted=true], .table-block)::after {
+  content: "";
   position: absolute;
-  top: -26px;
-  /* left: var(--op-offset); */
-  left: 0;
-  line-height: 24px;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
   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;
+  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-deleted-box {
   background-color: unset !important;
@@ -5029,55 +5051,65 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 .editor-root.history .history-deleted-block.history-deleted-box:hover::after {
   opacity: 0;
 }
-.editor-root.history .history-inserted-text {
-  line-height: revert !important;
+.editor-root.history .history-deleted-empty-text-block.list-block {
+  position: relative;
+}
+.editor-root.history .history-deleted-empty-text-block.list-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 .history-inserted-text {
+.editor-root.history .history-deleted-empty-text-block:is(.text-block, [data-style-quoted=true]) {
   position: relative;
 }
-.editor-root.history .history-inserted-text:hover::after {
-  content: attr(data-op-description);
+.editor-root.history .history-deleted-empty-text-block:is(.text-block, [data-style-quoted=true])::after {
+  content: "";
   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;
+  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 .history-deleted-box {
+.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 .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 .history-inserted-text, .editor-root.history .history-inserted-box {
+  line-height: revert !important;
   background-color: var(--op-selected-color);
-  text-decoration: line-through;
 }
 .editor-root.history .history-deleted-box {
-  position: relative;
+  text-decoration: line-through;
 }
-.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 .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;
@@ -5437,6 +5469,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 +7918,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;
     }
@@ -11049,7 +11096,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) {
@@ -37969,7 +38016,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 +40371,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 +40720,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 +43765,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 +43900,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 +43939,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 +44860,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 +46443,7 @@ ${codeText}
       return {};
     }
   }
-  const index$b = "";
+  const index$c = "";
   const BlockPaddingShortcuts = {
     "Tab": handleTab$3,
     "Shift+Tab": handleShiftTab$3,
@@ -55505,12 +55552,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 +55566,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 +55624,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 +55656,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 +55954,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 +56374,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 +61190,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 +65125,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 +65641,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 +69792,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 +70315,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 +70485,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 +73068,7 @@ ${content}
   const AutoLinkShortcuts = {
     "Space": autoLink
   };
-  const index$6 = "";
+  const index$7 = "";
   const zhCN$c = {
     version: {
       latest: "\u6700\u65B0\u7248\u672C",
@@ -73040,7 +73100,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 +73213,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");
@@ -73773,10 +73834,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 +74030,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() {
@@ -74080,7 +74143,8 @@ ${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"],
           styles: {
@@ -74089,6 +74153,20 @@ ${content}
           }
         };
       }
+      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
+          }
+        };
+      }
       return {};
     }
     renderText(editor, path, attributes) {
@@ -74098,8 +74176,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,
@@ -74113,11 +74190,18 @@ ${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: ["history-deleted-block"],
+          classes,
           attributes: {
-            "history-deleted-by": user.displayName,
-            "data-op-description": getOpDescription(user, "delete")
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "delete")
           },
           styles: {
             [OpColor]: flag,
@@ -74131,8 +74215,8 @@ ${content}
         return {
           classes: ["history-inserted-block"],
           attributes: {
-            "history-inserted-by": user.displayName,
-            "data-op-description": getOpDescription(user, "insert")
+            "data-op-description": getOpDescription(user, "insert"),
+            [HISTORY_TOOLTIP_IDENTIFIER]: getOpDescription(user, "insert")
           },
           styles: {
             [OpColor]: flag,
@@ -74148,8 +74232,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,8 +74245,7 @@ ${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,
@@ -74181,7 +74263,7 @@ ${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.setAttribute(HISTORY_TOOLTIP_IDENTIFIER, getOpDescription(user, "delete"));
     span.style.setProperty(OpColor, flag);
     span.style.setProperty(OpSelectedColor, selection);
   }
@@ -74463,6 +74545,88 @@ ${content}
       this.dropdown.setCurrentVersion(ver, compareWithVersion);
     }
   }
+  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));
+        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 +74637,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 +74701,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);
@@ -81288,7 +81457,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 +83272,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.7";
+    editor.version = "2.1.8-beta.1";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -83199,7 +83367,7 @@ ${data2.flowchartText}
     if (!clientType.isMobile) {
       OnesEditorToolbar.register(editor);
     }
-    editor.version = "2.1.7";
+    editor.version = "2.1.8-beta.1";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -128988,7 +129156,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;