@ones-editor/editor 2.2.8-beta.5 → 2.2.8-beta.7

package/@ones-editor/ui-base/src/command-bar/command-bar.d.ts

@@ -56,4 +56,5 @@ export default abstract class CommandBar extends TypedEmitter<CommandBarEvents>
     static registerManualCommandBar(type: string, creator: CreateManualCommandBarFunction): void;
     static createSubCommandBar(item: CommandItem, closeable: Closeable, options?: CommandBarOptions): AbstractManualCommandBar;
     static hasExistsCommandBar(): boolean;
+    static hideAll(): void;
 }

package/dist/index.js

@@ -858,10 +858,10 @@ div.tippy-box[data-theme=menu] .tippy-arrow::after {
   transform: rotate(45deg);
 }
 div.tippy-box[data-theme=menu] .tippy-content .editor-command-bar-root, div.tippy-box[data-theme=toolbar] .tippy-content .editor-command-bar-root {
-  box-shadow: 0px 0px 1px rgba(48, 48, 48, 0.25), 0px 12px 24px rgba(48, 48, 48, 0.15);
+  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(45, 45, 46, 0.15) 0px 8px 16px -4px, rgba(45, 45, 46, 0.2) 0px 0px 1px 0px;
 }
 div.tippy-box[data-theme=toolbar] .tippy-content .editor-command-bar-root {
-  overflow: initial;
+  border-radius: 3px;
 }
 div.tippy-box button {
   outline: none;
@@ -901,7 +901,7 @@ div.tippy-box button {
 }
 .editor-command-bar.fixed.mobile .command-item.checked, .editor-command-bar.toolbar.mobile .command-item.checked {
   border-radius: 3px;
-  background: #F0F6FF;
+  background: #f0f6ff;
 }
 .editor-command-bar {
   pointer-events: all;
@@ -1019,8 +1019,6 @@ div.tippy-box button {
   gap: 5px;
   padding: 5px 10px;
   background: #ffffff;
-  box-shadow: 0px 0px 1px rgba(48, 48, 48, 0.2), 0px 8px 16px rgba(48, 48, 48, 0.15);
-  border-radius: 3px;
 }
 .editor-command-bar.toolbar .command-item {
   background: transparent;
@@ -2054,11 +2052,6 @@ div.tippy-box[data-theme=editor-tooltip] > .tippy-content {
   border-radius: 8px;
   background: none;
 }
-[data-command-bar-id=cursor-toolbar].mobile .tippy-box .tippy-content .editor-command-bar-root,
-[data-command-bar-id=paste-special-button].mobile .tippy-box .tippy-content .editor-command-bar-root,
-[data-command-bar-id=editor-toolbar].mobile .tippy-box .tippy-content .editor-command-bar-root {
-  box-shadow: none;
-}
 [data-command-bar-id=cursor-toolbar].mobile .tippy-content,
 [data-command-bar-id=cursor-toolbar].mobile .editor-command-bar-root,
 [data-command-bar-id=cursor-toolbar].mobile .editor-command-bar,
@@ -11563,7 +11556,7 @@ var __publicField = (obj, key, value) => {
           }
           this.editor.selectionHandler.handleMouseDown(event, { autoScroll: true });
         }
-        this.editor.input.focus();
+        this.editor.input.focus({ preventScroll: true });
       });
       __publicField(this, "handleMouseMove", (event) => {
         assert(logger$4p, this.mouseDownEvent, "no mouse down event");
@@ -13111,7 +13104,8 @@ var __publicField = (obj, key, value) => {
       if (pointX < rect.left) {
         x = rect.left;
       } else if (pointX > rect.right) {
-        x = rect.right - 50;
+        const offset = targetBlock && isTextKindBlock(editor, targetBlock) ? 3 : 50;
+        x = rect.right - offset;
       }
     }
     for (let i = 0; i < yOffsets.length; i++) {
@@ -14460,10 +14454,6 @@ var __publicField = (obj, key, value) => {
       }
       if (isTextBlockContentBoxChild(child)) {
         const boxChild = child;
-        const nextChild = children[i + 1];
-        if (!nextChild) {
-          break;
-        }
         const prevChild = children[i - 1];
         if (prevChild) {
           if (endAtNewLine(prevChild, boxChild)) {
@@ -14480,6 +14470,10 @@ var __publicField = (obj, key, value) => {
             });
           }
         }
+        const nextChild = children[i + 1];
+        if (!nextChild) {
+          break;
+        }
         if (nextChildStartsNewLine(boxChild, nextChild)) {
           offset += 1;
           lineBreaks.push({
@@ -27437,7 +27431,7 @@ var __publicField = (obj, key, value) => {
   }
   const logger$3g = getLogger("table-scroll");
   class DomEventHandler {
-    constructor(editor, dom, name, handler, data2) {
+    constructor(editor, dom, name, handler, data2, options) {
       __publicField(this, "handleEvent", (event) => {
         this.handler(this.editor, event, this.data);
       });
@@ -27446,7 +27440,7 @@ var __publicField = (obj, key, value) => {
       this.name = name;
       this.handler = handler;
       this.data = data2;
-      dom.addEventListener(name, this.handleEvent);
+      dom.addEventListener(name, this.handleEvent, options);
     }
     destroy() {
       this.dom.removeEventListener(this.name, this.handleEvent);
@@ -27463,16 +27457,16 @@ var __publicField = (obj, key, value) => {
         this.handlers.delete(element);
       });
     }
-    addEventListener(element, eventName, eventHandler, data2) {
+    addEventListener(element, eventName, eventHandler, data2, options) {
       const existsHandlers = this.handlers.get(element);
       if (existsHandlers) {
         if (existsHandlers.find((handler) => handler.handler === eventHandler && handler.name === eventName)) {
           logger$3g.warn(`event has already registered: ${eventName}`);
           return;
         }
-        existsHandlers.push(new DomEventHandler(this.editor, element, eventName, eventHandler, data2));
+        existsHandlers.push(new DomEventHandler(this.editor, element, eventName, eventHandler, data2, options));
       } else {
-        const handler = new DomEventHandler(this.editor, element, eventName, eventHandler, data2);
+        const handler = new DomEventHandler(this.editor, element, eventName, eventHandler, data2, options);
         this.handlers.set(element, [handler]);
       }
     }
@@ -39905,17 +39899,23 @@ ${codeText}
           return true;
         }
         if (event.key === "ArrowUp") {
-          const prev = this.getPrevItemIndex(this.getSelectedItemIndex());
-          this.startPauseMouseEnter();
-          this.selectItem(this.items[prev].id);
-          event.preventDefault();
-          event.stopPropagation();
+          const curr = this.getSelectedItemIndex();
+          const prev = this.getPrevItemIndex(curr);
+          if (curr !== prev) {
+            this.startPauseMouseEnter();
+            this.selectItem(this.items[prev].id);
+            event.preventDefault();
+            event.stopPropagation();
+          }
         } else if (event.key === "ArrowDown") {
-          const next2 = this.getNextItemIndex(this.getSelectedItemIndex());
-          this.startPauseMouseEnter();
-          this.selectItem(this.items[next2].id);
-          event.preventDefault();
-          event.stopPropagation();
+          const curr = this.getSelectedItemIndex();
+          const next2 = this.getNextItemIndex(curr);
+          if (curr !== next2) {
+            this.startPauseMouseEnter();
+            this.selectItem(this.items[next2].id);
+            event.preventDefault();
+            event.stopPropagation();
+          }
         } else if (event.key === "ArrowRight") {
           const item = this.getSelectedItem();
           if (item && item.children) {
@@ -40121,7 +40121,7 @@ ${codeText}
       this.emit("click", this, item, target);
     }
     createPopperOptions() {
-      var _a, _b;
+      var _a, _b, _c;
       const popperOptions = { modifiers: [] };
       const overflowBoundary = this.options.overflowBoundary;
       const padding = this.options.padding;
@@ -40154,6 +40154,10 @@ ${codeText}
           }
         });
       }
+      (_c = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _c.push({
+        name: "flip",
+        enabled: false
+      });
       return popperOptions;
     }
     destroy() {
@@ -40500,6 +40504,9 @@ ${codeText}
     static hasExistsCommandBar() {
       return !!document.querySelector("[data-command-bar-id]");
     }
+    static hideAll() {
+      tippy$1.hideAll();
+    }
   };
   let CommandBar = _CommandBar;
   __publicField(CommandBar, "commandBarCreators", /* @__PURE__ */ new Map());
@@ -52297,6 +52304,7 @@ ${codeText}
       __publicField(this, "editMathjaxPopup", null);
       __publicField(this, "onChange", null);
       __publicField(this, "tex", "");
+      __publicField(this, "oldTex", "");
       __publicField(this, "observer", null);
       __publicField(this, "handleClose", (commandBar2) => {
         var _a;
@@ -52320,6 +52328,10 @@ ${codeText}
       });
       __publicField(this, "handleChange", debounce__default.default((text2) => {
         var _a;
+        if (text2 === this.oldTex) {
+          return;
+        }
+        this.oldTex = text2;
         (_a = this.onChange) == null ? void 0 : _a.call(this, text2, false);
       }, 300));
     }
@@ -52332,6 +52344,7 @@ ${codeText}
         const textarea2 = this.getTextarea();
         textarea2.value = tex;
       }
+      this.oldTex = tex;
       this.tex = tex;
       this.editMathjaxPopup.manualShow(elem, { theme: "light", placement: options == null ? void 0 : options.placement });
       this.editMathjaxPopup.removeAllListeners("close");
@@ -52627,7 +52640,7 @@ ${codeText}
     }
     const data2 = editor.getBlockData(block);
     const embedData = data2.embedData;
-    editMathjax(editor, elem, embedData.mathjaxText, async (tex) => {
+    editMathjax(editor, block, embedData.mathjaxText, async (tex) => {
       const { resourceId: src, width, height } = await convertAndUploadMathjaxForEmbed(editor, tex);
       const newData = {
         mathjaxText: tex,
@@ -60885,7 +60898,6 @@ $$${mathData.mathjaxText}$$
             editor.selection.setSelection(anchor2, void 0, { noScroll: direction === "next" });
           }
         }
-        editor.focus();
         if (direction === "next") {
           const targetElementRect = targetElement.getBoundingClientRect();
           const clientHeight = editor.scrollContainer.clientHeight;
@@ -62923,6 +62935,7 @@ $$${mathData.mathjaxText}$$
       dropdown2.setSelectedId(codeData.language);
       selectCodeBlock(editor2, block, { focusToEditor: false });
       setTimeout(() => {
+        CommandBar.hideAll();
         dropdown2.show(select2);
       });
       addClass(codeBlock2, "editing-language");
@@ -67742,7 +67755,7 @@ ${codeText}
       this.editor.addListener("selectionChanged", this.handleSelectionChanged);
       this.editor.addListener("resize", this.handleEditorResize);
       this.editor.addListener("docChanged", this.handleDocChanged);
-      this.editor.scrollContainer.addEventListener("wheel", this.handleScroll, { passive: false });
+      this.editor.domEvents.addEventListener(this.editor.scrollContainer, "wheel", (ed, e2) => this.handleScroll(e2), { passive: false });
       this.items.forEach((item) => item.addListener("resize", this.handleItemResize));
       this.groupItemHandlers = new CommentGroupItemHandlers(this, commentsProvider);
       document.addEventListener("click", this.handleDocumentClick);
@@ -67751,7 +67764,6 @@ ${codeText}
       this.editor.removeListener("selectionChanged", this.handleSelectionChanged);
       this.editor.removeListener("resize", this.handleEditorResize);
       this.editor.removeListener("docChanged", this.handleDocChanged);
-      this.editor.scrollContainer.removeEventListener("wheel", this.handleScroll);
       super.destroy();
       this.unbindEvents();
       this.removeAllListeners();
@@ -79569,6 +79581,7 @@ ${content}
     }
     destroy() {
       this.editor.doc.unregisterCallback(this);
+      this.removeAllListeners();
     }
     isHeadingBlock(blockData) {
       return !!blockData.heading;
@@ -80330,22 +80343,22 @@ ${content}
     const image = createElement("img", ["editor-template-thumb"], imageContaniner);
     image.src = imageSrc;
     image.style.display = "none";
-    image.onerror = () => {
+    editor.domEvents.addEventListener(image, "error", () => {
       var _a2;
       const placeholder2 = (_a2 = options == null ? void 0 : options.placeHolderImageSrc) != null ? _a2 : TEMPLATE_PLACEHOLDER;
       if (image.src !== placeholder2) {
         image.src = placeholder2;
       }
-    };
-    image.onload = () => {
+    });
+    editor.domEvents.addEventListener(image, "load", () => {
       image.style.display = "";
-    };
+    });
     const nameDiv = createElement("div", ["editor-template-name"], card);
     const span = createElement("span", [], nameDiv, name);
     if (options == null ? void 0 : options.showTemplateTitleAttr) {
       span.setAttribute("title", name);
     }
-    card.onclick = () => clickHandler(card);
+    editor.domEvents.addEventListener(card, "click", () => clickHandler(card));
     return card;
   }
   function getDocThumbImage(editor, template) {
@@ -88087,20 +88100,32 @@ ${data2.flowchartText}
       return docx.Packer.toBlob(doc2);
     }
   }
+  class ExportImageError extends Error {
+    constructor(message) {
+      super(message);
+      this.name = this.constructor.name;
+    }
+  }
   const logger$1 = getLogger("editor-to-docx");
+  const ERROR_MESSAGE = "editor-to-docx: read image error";
   async function readImage(editor, _appId, _docId, _src) {
-    const url = editor.doc.buildResourceUrl(_src, { withToken: true });
-    let file2 = await downloadImageToFile$1(url);
-    if (!file2)
-      return [void 0, url];
-    if (file2.type.indexOf("/svg") !== -1) {
-      const pngFile = await convertImageFileToPng(file2);
-      if (pngFile) {
-        file2 = new File([pngFile], file2.name);
+    try {
+      const url = editor.doc.buildResourceUrl(_src, { withToken: true });
+      let file2 = await downloadImageToFile$1(url);
+      if (!file2) {
+        throw new Error(ERROR_MESSAGE);
       }
+      if (file2.type.indexOf("/svg") !== -1) {
+        const pngFile = await convertImageFileToPng(file2);
+        if (pngFile) {
+          file2 = new File([pngFile], file2.name);
+        }
+      }
+      const arrayBuffer = await file2.arrayBuffer();
+      return [arrayBuffer, url];
+    } catch (error2) {
+      throw new ExportImageError(error2.message || ERROR_MESSAGE);
     }
-    const arrayBuffer = await file2.arrayBuffer();
-    return [arrayBuffer, url];
   }
   async function getDocByBlock(editor, doc2, block) {
     const blockClass = editor.editorBlocks.getBlockClass(block.type);
@@ -88334,13 +88359,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.2.8-beta.5";
-    if (Logger$2.level === LogLevel.DEBUG) {
-      window.setReauthFail = (fail) => {
-        window.isReauthError = fail;
-      };
-      window.reConnect = (token) => editor.doc.externalDoc.client.connection.reConnect(token);
-    }
+    editor.version = "2.2.8-beta.7";
     return editor;
   }
   function isDoc(doc2) {
@@ -88435,7 +88454,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.2.8-beta.5";
+    editor.version = "2.2.8-beta.7";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -134214,6 +134233,7 @@ ${data2.flowchartText}
   exports2.EmbedBlockResizer = EmbedBlockResizer;
   exports2.EnforceWithDocumentTitleHandler = EnforceWithDocumentTitleHandler;
   exports2.EventCallbacks = EventCallbacks;
+  exports2.ExportImageError = ExportImageError;
   exports2.FILL_CHAR = FILL_CHAR;
   exports2.FileExtError = FileExtError;
   exports2.FixedToolbar = FixedToolbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "2.2.8-beta.5",
+  "version": "2.2.8-beta.7",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,6 +31,7 @@
     "lodash.findlastindex": "^4.6.0",
     "lodash.intersection": "^4.4.0",
     "lodash.isequal": "^4.5.0",
+    "lodash.memoize": "^4.1.2",
     "lodash.merge": "^4.6.2",
     "lodash.pick": "^4.4.0",
     "lodash.throttle": "^4.1.1",