@ones-editor/editor 2.1.8-beta.4 → 2.1.8-beta.6

package/@ones-editor/versions/src/history-doc/history-doc.d.ts

@@ -1,4 +1,4 @@
-import { DocBlock, DocBlockDelta, DocBlockText, DocBlockTextActions, DocObject, EventCallbacks, OnesEditorDoc, OnesEditorDocCallbacks, OnesEditorUser, RemoteUsers, UploadResourceResult, OnesEditorDocServerMeta, OnesEditorDocServer } from '../../../../@ones-editor/core';
+import { DocBlock, DocBlockDelta, DocBlockText, DocBlockTextActions, DocObject, EventCallbacks, OnesEditorDoc, OnesEditorDocCallbacks, OnesEditorUser, UploadResourceResult, OnesEditorDocServerMeta, OnesEditorDocServer } from '../../../../@ones-editor/core';
 import { HistoryUser } from '../types';
 export default class HistoryDoc extends EventCallbacks<OnesEditorDocCallbacks> implements OnesEditorDoc {
     private server;
@@ -23,7 +23,7 @@ export default class HistoryDoc extends EventCallbacks<OnesEditorDocCallbacks> i
     request<T>(): Promise<T>;
     broadcastMessage(): void;
     getUser(): OnesEditorUser;
-    getRemoteUsers(): RemoteUsers;
+    getRemoteUsers(): import("@ones-editor/core").OnesEditorRemoteUsers;
     destroy(): void;
     private transformBlockIndex;
     onDeleteBlock(containerId: string, blockIndex: number, user: HistoryUser): void;

package/@ones-editor/versions/src/utils/index.d.ts

@@ -1,5 +1,4 @@
 import type { OnesEditorRemoteUsers } from '../../../../@ones-editor/core';
 import { HistoryUser, UserColors } from '../types';
 export * from './block-text';
-export declare function removeOpacityFromHexColor(hexColor: string): string;
 export declare function getUserColors(users: OnesEditorRemoteUsers, user: HistoryUser): UserColors;

package/@ones-editor/versions/src/version-dialog/index.d.ts

@@ -12,7 +12,6 @@ export declare class OnesEditorVersionsDialog implements OnesEditorCustom {
     get versionHelper(): import("@ones-editor/core").OnesEditorDocVersionHelper;
     get editor(): OnesEditor | null;
     constructor(server: OnesEditorDocServer, provider: OnesEditorVersionsProvider);
-    private handleBeforeShowTooltip;
     private handleRevert;
     private handleSelectVersion;
     private handleCompareWithVersion;

package/dist/index.js

@@ -267,7 +267,7 @@ div.editor-root div.editor-content div[data-type=editor-container] div[data-type
   width: 3px;
   left: -3px;
   /* overflow: hidden; */
-  border-right: var(--cursor-color) 1px solid;
+  border-right: var(--cursor-color) 2px solid;
   text-overflow: clip;
   display: inline-block;
   /* height: 100%; */
@@ -283,17 +283,16 @@ div.editor-root div.editor-content div[data-type=editor-container] div[data-type
 div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] > span[data-type=editor-insertion].remote-cursor-insertion > span[data-type=insertion-content] span[data-cursor-name]:hover::before, div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] > span[data-type=editor-insertion].remote-cursor-insertion.active > span[data-type=insertion-content] span[data-cursor-name]::before {
   content: attr(data-cursor-name);
   position: absolute;
-  top: -12px;
-  height: 1.1em;
+  top: -32px;
   background-color: var(--cursor-color);
   z-index: 27;
-  left: 0px;
+  left: 2px;
   color: #fff;
   white-space: nowrap;
   font-size: 12px;
-  display: flex;
-  align-items: center;
-  padding: 1px 4px;
+  padding: 0px 5px;
+  border-radius: 3px;
+  line-height: 30px;
 }
 div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] span[data-type=box-content] {
   /* background-color: bisque; */
@@ -4803,10 +4802,28 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 .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 {
+.editor-root.history .table-block.history-inserted-block table {
+  position: relative;
+}
+.editor-root.history .table-block.history-inserted-block table::before {
+  content: var(--history-mask-identifier);
+  color: transparent;
+  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 {
+  pointer-events: none;
+}
+.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 {
+.editor-root.history .table-block.history-updated-block table::before {
   content: var(--history-mask-identifier);
   color: transparent;
   position: absolute;
@@ -4818,7 +4835,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   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 {
+.editor-root.history .table-block.history-updated-block table .child:not(.history-inserted-container) {
   pointer-events: none;
 }
 .editor-root.history .table-block.history-deleted-block table {
@@ -4838,6 +4855,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: auto clamp(20px, 10%, 60px);
+  -webkit-mask-size: auto clamp(20px, 10%, 60px);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
   background-color: var(--op-color);
   z-index: 1;
@@ -4910,6 +4928,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: auto clamp(20px, 10%, 60px);
+  -webkit-mask-size: auto clamp(20px, 10%, 60px);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
   background-color: var(--op-color);
   z-index: 1;
@@ -4944,10 +4963,10 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   border-radius: 3px;
   pointer-events: none;
 }
-.editor-root.history .layout-block .history-inserted-container {
+.editor-root.history .layout-block.history-updated-block .history-inserted-container {
   position: relative;
 }
-.editor-root.history .layout-block .history-inserted-container::before {
+.editor-root.history .layout-block.history-updated-block .history-inserted-container::before {
   content: var(--history-mask-identifier);
   color: transparent;
   position: absolute;
@@ -4956,7 +4975,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   left: 0;
   right: 0;
   background-color: var(--op-selected-color);
-  border-radius: 0px;
+  border-radius: 3px;
   pointer-events: none;
 }
 .editor-root.history [data-block-type=embed][data-embed-type=office].history-inserted-block {
@@ -4992,6 +5011,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: auto clamp(20px, 10%, 60px);
+  -webkit-mask-size: auto clamp(20px, 10%, 60px);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
   background-color: var(--op-color);
   z-index: 1;
@@ -5045,6 +5065,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: auto clamp(20px, 10%, 60px);
+  -webkit-mask-size: auto clamp(20px, 10%, 60px);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
   background-color: var(--op-color);
   z-index: 1;
@@ -5100,6 +5121,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: auto clamp(20px, 10%, 60px);
+  -webkit-mask-size: auto clamp(20px, 10%, 60px);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
   background-color: var(--op-color);
   z-index: 1;
@@ -5153,6 +5175,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: auto clamp(20px, 10%, 60px);
+  -webkit-mask-size: auto clamp(20px, 10%, 60px);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjAzMjggMjkuNjIzMkw0OC41NjE2IDExLjA2MTZNMzAuMDMyOCAyOS42MjMyTDQ4LjU2MTYgNDguMTg0N00zMC4wMzI4IDI5LjYyMzJMMTEuNDM4NCA0OC4xODQ3TTMwLjAzMjggMjkuNjIzMkwxMS40Mzg0IDExLjA2MTYiIHN0cm9rZT0iI0IyMUI1NyIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
   background-color: var(--op-color);
   z-index: 1;
@@ -5239,10 +5262,29 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
   border-radius: 0px;
   pointer-events: none;
 }
-.editor-root.history .history-inserted-box:not(.status-box, .file-box, .math-box) {
+.editor-root.history .mention-box.history-inserted-box {
   position: relative;
 }
-.editor-root.history .history-inserted-box:not(.status-box, .file-box, .math-box)::before {
+.editor-root.history .mention-box.history-inserted-box::before {
+  content: var(--history-mask-identifier);
+  color: transparent;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 4px;
+  right: 4px;
+  background-color: var(--op-selected-color);
+  border-radius: 0px;
+  pointer-events: none;
+}
+.editor-root.history .mention-box.history-deleted-box {
+  text-decoration: line-through;
+  color: var(--primary-color);
+}
+.editor-root.history [data-type=editor-box]:not(.status-box, .file-box, .math-box, .mention-box).history-inserted-box, .editor-root.history [data-type=editor-box]:not(.status-box, .file-box, .math-box, .mention-box).history-deleted-box {
+  position: relative;
+}
+.editor-root.history [data-type=editor-box]:not(.status-box, .file-box, .math-box, .mention-box).history-inserted-box::before, .editor-root.history [data-type=editor-box]:not(.status-box, .file-box, .math-box, .mention-box).history-deleted-box::before {
   content: var(--history-mask-identifier);
   color: transparent;
   position: absolute;
@@ -5283,13 +5325,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 .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 {
+.editor-root.history .history-inserted-block .history-inserted-block {
   background-color: unset;
   pointer-events: none;
 }
@@ -5327,19 +5363,7 @@ div.editor-root:not(.mobile) div.editor-content div[data-type=editor-container]
 .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 {
+.editor-root.history .history-inserted-block .history-inserted-block::after {
   display: none;
 }
 .version-dialog {
@@ -29754,7 +29778,7 @@ ${codeText}
       logger$2O.debug("create editor");
       this.setMaxListeners(100);
       this.options = {
-        colors: (_a = optionalOptions == null ? void 0 : optionalOptions.colors) != null ? _a : ["#0064FF", "#EB3723", "#F59300", "#00A865", "#F25A0A", "#70A310", "#009CAD", "#0990D9", "#8851ED", "#D62069"],
+        colors: (_a = optionalOptions == null ? void 0 : optionalOptions.colors) != null ? _a : ["#B21B57", "#008796", "#7241CC", "#CC4C08", "#5D8F00", "#BD2C1C", "#D17D00"],
         componentsOptions: (_c = (_b = optionalOptions == null ? void 0 : optionalOptions.components) == null ? void 0 : _b.options) != null ? _c : {},
         scrollContainer: optionalOptions == null ? void 0 : optionalOptions.scrollContainer,
         enableComments: (_d = optionalOptions == null ? void 0 : optionalOptions.enableComments) != null ? _d : true,
@@ -30122,18 +30146,7 @@ ${codeText}
     });
     return allCommands;
   }
-  const DefaultColors = [
-    "#0064FF",
-    "#EB3723",
-    "#F59300",
-    "#00A865",
-    "#F25A0A",
-    "#70A310",
-    "#009CAD",
-    "#0990D9",
-    "#8851ED",
-    "#D62069"
-  ];
+  const DefaultColors = ["#B21B57", "#008796", "#7241CC", "#CC4C08", "#5D8F00", "#BD2C1C", "#D17D00"];
   class RemoteUsers extends tinyTypedEmitter.TypedEmitter {
     constructor(colors) {
       super();
@@ -74423,8 +74436,7 @@ ${content}
       };
     }
     getRemoteUsers() {
-      const colors = ["#B21B5733", "#00879633", "#7241CC33", "#CC4C0833", "#5D8F0033", "#BD2C1C33", "#D17D0033"];
-      return new RemoteUsers(colors);
+      return this.server.getRemoteUsers();
     }
     destroy() {
       this.clearCallbacks();
@@ -74538,18 +74550,15 @@ ${content}
       name: user.displayName
     });
   }
-  function removeOpacityFromHexColor(hexColor) {
-    if (hexColor.length === 9) {
-      return hexColor.slice(0, 7);
-    }
-    return hexColor;
+  function addOpacity(color, opacity) {
+    return color + Math.round(opacity * 255).toString(16).padStart(2, "0");
   }
   function getUserColors(users, user) {
     const { userId } = user;
     const types2 = ["flag", "selection"];
     return types2.reduce((acc, cur) => {
       const color = users.getFixedUserColor(userId, cur);
-      acc[cur] = cur === "flag" ? removeOpacityFromHexColor(color) : color;
+      acc[cur] = cur === "selection" ? addOpacity(color, 0.2) : color;
       return acc;
     }, {});
   }
@@ -75218,7 +75227,8 @@ ${content}
         return this.applyGapToRect(maskRect);
       }
       logger$s.warn("unknown tooltip element", reference.tagName, reference.className);
-      return reference.getBoundingClientRect();
+      const rect = reference.getBoundingClientRect();
+      return this.applyGapToRect(rect);
     }
   }
   const logger$r = getLogger("version-dialog");
@@ -75231,10 +75241,6 @@ ${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");
@@ -75315,7 +75321,7 @@ ${content}
       this.server = server;
       this.provider = provider;
       const root2 = createElement("div", ["version-dialog"], null);
-      root2.style.setProperty("--history-mask-identifier", JSON.stringify(HISTORY_MASK_IDENTIFIER));
+      root2.style.setProperty("--history-mask-identifier", `"${HISTORY_MASK_IDENTIFIER}"`);
       const mainContainer = createElement("div", ["version-viewer"], root2);
       const infoHeader = new VersionInfoHeader(mainContainer, {
         onCompareWithVersion: this.handleCompareWithVersion,
@@ -83757,16 +83763,13 @@ ${data2.flowchartText}
         ...options.shortcuts || []
       ],
       colors: [
-        "#0064FF",
-        "#EB3723",
-        "#F59300",
-        "#00A865",
-        "#F25A0A",
-        "#70A310",
-        "#009CAD",
-        "#0990D9",
-        "#8851ED",
-        "#D62069"
+        "#B21B57",
+        "#008796",
+        "#7241CC",
+        "#CC4C08",
+        "#5D8F00",
+        "#BD2C1C",
+        "#D17D00"
       ]
     });
     editor.editorCommandProviders.registerCommandProvider(new TextCommandProvider(editor));
@@ -83867,7 +83870,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.8-beta.4";
+    editor.version = "2.1.8-beta.6";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -83962,7 +83965,7 @@ ${data2.flowchartText}
     if (!clientType.isMobile) {
       OnesEditorToolbar.register(editor);
     }
-    editor.version = "2.1.8-beta.4";
+    editor.version = "2.1.8-beta.6";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "2.1.8-beta.4",
+  "version": "2.1.8-beta.6",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",