@ones-editor/editor 3.0.12-beta.4 → 3.0.14-beta.1

package/dist/custom/image-preview-handler.d.ts

@@ -3,7 +3,18 @@ export declare class ImagePreviewHandler implements OnesEditorCustom {
     private editor;
     private onPreview;
     private lastClickPosition;
+    private lastPreviewCandidates;
+    private lastScrollSnapshots;
     constructor(editor: OnesEditor, onPreview: (editor: OnesEditor, img: HTMLImageElement) => void);
+    getPreviewCandidateElements(e: MouseEvent): HTMLElement[];
+    previewFromImageBox(elem: HTMLElement): boolean;
+    previewFromImageContainer(elem: HTMLElement): boolean;
+    previewFromEmbedBlock(elem: HTMLElement): boolean;
+    isPreviewableImageElement(elem: HTMLElement): boolean;
+    previewFromCandidates: (candidates: HTMLElement[]) => boolean;
+    captureScrollSnapshots: () => void;
+    restoreScrollSnapshots: () => void;
+    scheduleRestoreScrollSnapshots: () => void;
     handleImagePreview: (e: MouseEvent) => void;
     handleMouseUp: (e: MouseEvent) => void;
     handleMouseDown: (e: MouseEvent) => void;

package/dist/index.js

@@ -7798,38 +7798,6 @@ div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container
 }
 div.editor-root.readonly div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=drawio] [data-src] {
   cursor: zoom-in;
-}
-.command-item.menu-item[data-id=insert-drawio] {
-  width: 100%;
-}
-.command-item.menu-item[data-id=insert-drawio] .uml-menu-item {
-  color: #2d2d2e;
-  user-select: none;
-  transition: background 20ms ease-in 0s;
-  width: 100%;
-  height: 32px;
-  padding: 6px 10px;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-}
-.command-item.menu-item[data-id=insert-drawio] .uml-menu-item .menu-item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  width: 24px;
-  margin-right: 5px;
-  margin-top: -2px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.command-item.menu-item[data-id=insert-drawio] .uml-menu-item .menu-item-name {
-  white-space: nowrap;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
 }.embed-block[data-embed-type=mermaid],
 .embed-block[data-embed-type=flowchart],
 .embed-block[data-embed-type=plantuml] {
@@ -41832,9 +41800,7 @@ ${codeText}
           }
         }
         if (item.element) {
-          if (!item.useDefaultClickHandler) {
-            return;
-          }
+          return;
         }
         this.emit("click", this, item, elem);
         if (item.clickToClose === false) {
@@ -83112,6 +83078,9 @@ ${docStr}
       const blocks = this.docObject.blocks[containerId];
       const blockData = blocks[updateIndex];
       assert(logger$C, !blockData.deleted, `block has already deleted: ${containerId}/${blockIndex}`);
+      if (!Array.isArray(blockData.text)) {
+        blockData.text = [];
+      }
       const text2 = blockData.text;
       assert(logger$C, text2, `no text for block: ${JSON.stringify(blockData)}`);
       const newText = updateBlockText(text2, actions2, user);
@@ -88431,12 +88400,7 @@ ${data2.flowchartText}
   function getBlockProperties$3(editor, block) {
     const properties = getStandardEmbedBlockProperties(editor, block, {
       handleExecuteCommand: (editor2, block2, item) => {
-        var _a, _b;
         if (item.id === "edit") {
-          const drawioOptions = getDrawioOptions(editor2);
-          if (((_b = (_a = drawioOptions.callbacks) == null ? void 0 : _a.onBeforeInsertDrawio) == null ? void 0 : _b.call(_a, editor2)) === false) {
-            return true;
-          }
           const data2 = editor2.getBlockData(block2).embedData;
           editGraph(editor2, block2, data2, false);
           return true;
@@ -88624,51 +88588,30 @@ ${data2.flowchartText}
     update(editor, embed, data2);
     return true;
   }
-  function getOptions$3(editor) {
-    var _a;
-    const drawioOptions = getDrawioOptions(editor);
-    const suffixElem = (_a = drawioOptions.menuItemSuffix) == null ? void 0 : _a.call(drawioOptions, editor);
-    const element = suffixElem ? () => {
-      const root2 = createElement("div", ["uml-menu-item"], null);
-      const iconElem = createElement("div", ["menu-item-icon"], root2);
-      iconElem.innerHTML = UmlIcon;
-      createElement("div", ["menu-item-name"], root2, i18n$1.t("drawio.title"));
-      root2.appendChild(suffixElem);
-      return root2;
-    } : void 0;
-    const insertEmbedCommandItems = [];
-    if (drawioOptions.visible !== false) {
-      insertEmbedCommandItems.push({
+  function getOptions$3() {
+    return {
+      name: "UML",
+      insertEmbedCommandItems: [{
         id: "insert-drawio",
         name: i18n$1.t("drawio.title"),
         icon: UmlIcon,
         group: "common",
         order: 600,
-        subText: getShortcutById("insert-drawio"),
-        element,
-        useDefaultClickHandler: true
-      });
-    }
-    return {
-      name: "UML",
-      insertEmbedCommandItems,
-      handleInsertEmptyEmbed: async (editor2, options) => {
-        var _a2, _b;
-        if (((_b = (_a2 = drawioOptions.callbacks) == null ? void 0 : _a2.onBeforeInsertDrawio) == null ? void 0 : _b.call(_a2, editor2)) === false) {
-          return null;
-        }
+        subText: getShortcutById("insert-drawio")
+      }],
+      handleInsertEmptyEmbed: async (editor, options) => {
         const embedData = {
           src: "",
           xml: "",
           xmlSvg: ""
         };
-        const block = editor2.insertEmbed(options.containerId, options.blockIndex, "drawio", embedData);
+        const block = editor.insertEmbed(options.containerId, options.blockIndex, "drawio", embedData);
         setTimeout(() => {
           const blockContent = getBlockContent(block);
           const embed = blockContent.querySelector(":scope > .editor-drawio-content");
           assert(logger$i, embed, "embed should not be null");
-          const blockData = editor2.getBlockData(block);
-          editDrawIO(editor2, block, embed, blockData.embedData);
+          const blockData = editor.getBlockData(block);
+          editDrawIO(editor, block, embed, blockData.embedData);
         }, 100);
         return block;
       }
@@ -93046,58 +92989,138 @@ ${data2.plantumlText}
     StatusBox
   ];
   const safetyOffset = 2;
+  function isPointInElement(elem, x, y) {
+    const rect = elem.getBoundingClientRect();
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+  }
+  function getImagePreviewTarget(elem) {
+    if (elem instanceof HTMLImageElement && elem.classList.contains("editor-image")) {
+      return elem;
+    }
+    const imageContainer = elem.closest(".image-container[data-src]");
+    if (imageContainer instanceof HTMLElement) {
+      const img = imageContainer.querySelector("img.editor-image");
+      return img instanceof HTMLElement ? img : imageContainer;
+    }
+    const imageBox = elem.closest('span[data-type="editor-box"][data-box-type="image"]');
+    if (imageBox instanceof HTMLElement) {
+      const img = imageBox.querySelector("img");
+      return img instanceof HTMLElement ? img : imageBox;
+    }
+    return null;
+  }
+  function getScrollSnapshots(elem) {
+    const snapshots = [{
+      element: null,
+      isWindow: true,
+      scrollTop: window.scrollY,
+      scrollLeft: window.scrollX
+    }];
+    const added = /* @__PURE__ */ new Set();
+    let current = elem;
+    while (current) {
+      const style2 = window.getComputedStyle(current);
+      const overflow = `${style2.overflow}${style2.overflowY}${style2.overflowX}`;
+      const canScroll = current.scrollHeight > current.clientHeight || current.scrollWidth > current.clientWidth;
+      if (canScroll || /(auto|scroll|overlay)/.test(overflow)) {
+        snapshots.push({
+          element: current,
+          isWindow: false,
+          scrollTop: current.scrollTop,
+          scrollLeft: current.scrollLeft
+        });
+        added.add(current);
+      }
+      current = current.parentElement;
+    }
+    const scrollingElement = document.scrollingElement;
+    if (scrollingElement instanceof HTMLElement && !added.has(scrollingElement)) {
+      snapshots.push({
+        element: scrollingElement,
+        isWindow: false,
+        scrollTop: scrollingElement.scrollTop,
+        scrollLeft: scrollingElement.scrollLeft
+      });
+    }
+    return snapshots;
+  }
   class ImagePreviewHandler {
     constructor(editor, onPreview) {
       __publicField(this, "lastClickPosition");
-      __publicField(this, "handleImagePreview", (e2) => {
-        var _a;
-        const elem = e2.target;
-        if (!(elem instanceof HTMLElement)) {
-          return;
+      __publicField(this, "lastPreviewCandidates", []);
+      __publicField(this, "lastScrollSnapshots", []);
+      __publicField(this, "previewFromCandidates", (candidates) => {
+        if (!candidates.length) {
+          return false;
         }
-        const imageBox = getParentBox(elem);
-        const boxType = imageBox && getBoxTypeFromElement(imageBox);
-        if (imageBox && elem instanceof HTMLImageElement && boxType === "image") {
-          const imgData = this.editor.getBoxData(imageBox);
-          if (!imgData.link) {
-            this.onPreview(this.editor, elem);
-            return;
+        for (const elem of candidates) {
+          if (this.previewFromImageBox(elem)) {
+            return true;
+          }
+          if (this.previewFromImageContainer(elem)) {
+            return true;
+          }
+          if (this.previewFromEmbedBlock(elem)) {
+            return true;
           }
         }
-        const block = getParentBlock(elem);
-        if (!block) {
-          return;
-        }
-        if (!isEmbedBlock(block)) {
+        return false;
+      });
+      __publicField(this, "captureScrollSnapshots", () => {
+        this.lastScrollSnapshots = getScrollSnapshots(this.editor.rootElement);
+      });
+      __publicField(this, "restoreScrollSnapshots", () => {
+        if (!this.lastScrollSnapshots.length) {
           return;
         }
-        if (getEmbedType(block) === "image") {
-          const imageData = this.editor.getBlockData(block);
-          if (imageData.link) {
-            return;
-          }
-        }
-        if (elem.hasAttribute("data-src")) {
-          const img = elem.querySelector("img");
-          if (img) {
-            this.onPreview(this.editor, img);
+        this.lastScrollSnapshots.forEach((snapshot2) => {
+          var _a;
+          if (snapshot2.isWindow) {
+            window.scrollTo(snapshot2.scrollLeft, snapshot2.scrollTop);
             return;
           }
-        }
-        if (elem.tagName === "IMG" && ((_a = elem.parentElement) == null ? void 0 : _a.hasAttribute("data-src"))) {
-          this.onPreview(this.editor, elem);
-        }
+          (_a = snapshot2.element) == null ? void 0 : _a.scrollTo(snapshot2.scrollLeft, snapshot2.scrollTop);
+        });
+      });
+      __publicField(this, "scheduleRestoreScrollSnapshots", () => {
+        this.restoreScrollSnapshots();
+        window.requestAnimationFrame(() => {
+          this.restoreScrollSnapshots();
+          window.requestAnimationFrame(this.restoreScrollSnapshots);
+        });
+        window.setTimeout(this.restoreScrollSnapshots, 50);
+        window.setTimeout(this.restoreScrollSnapshots, 200);
+      });
+      __publicField(this, "handleImagePreview", (e2) => {
+        const candidates = this.getPreviewCandidateElements(e2);
+        this.previewFromCandidates(candidates);
       });
       __publicField(this, "handleMouseUp", (e2) => {
-        if (!this.lastClickPosition)
+        if (!this.lastClickPosition) {
           return;
+        }
         const { x, y } = this.lastClickPosition;
         const deltaX = Math.abs(e2.x - x);
         const deltaY = Math.abs(e2.y - y);
+        const previewCandidates = this.lastPreviewCandidates;
         this.lastClickPosition = void 0;
+        this.lastPreviewCandidates = [];
         if (deltaX < safetyOffset && deltaY < safetyOffset) {
+          this.scheduleRestoreScrollSnapshots();
+          if (this.previewFromCandidates(previewCandidates)) {
+            window.setTimeout(() => {
+              this.lastScrollSnapshots = [];
+            }, 250);
+            return;
+          }
           this.handleImagePreview(e2);
+          this.scheduleRestoreScrollSnapshots();
+          window.setTimeout(() => {
+            this.lastScrollSnapshots = [];
+          }, 250);
+          return;
         }
+        this.lastScrollSnapshots = [];
       });
       __publicField(this, "handleMouseDown", (e2) => {
         const { x, y } = e2;
@@ -93114,9 +93137,16 @@ ${data2.plantumlText}
           return;
         }
         this.lastClickPosition = { x, y };
+        this.lastPreviewCandidates = this.getPreviewCandidateElements(e2);
+        if (this.lastPreviewCandidates.some((candidate) => this.isPreviewableImageElement(candidate))) {
+          this.captureScrollSnapshots();
+          e2.preventDefault();
+          e2.stopPropagation();
+          this.scheduleRestoreScrollSnapshots();
+        }
       });
       __publicField(this, "destroy", () => {
-        this.editor.rootElement.removeEventListener("mousedown", this.handleMouseDown);
+        this.editor.rootElement.removeEventListener("mousedown", this.handleMouseDown, { capture: true });
         this.editor.rootElement.removeEventListener("mouseup", this.handleMouseUp);
       });
       this.editor = editor;
@@ -93124,6 +93154,131 @@ ${data2.plantumlText}
       editor.rootElement.addEventListener("mousedown", this.handleMouseDown, { capture: true });
       editor.rootElement.addEventListener("mouseup", this.handleMouseUp);
     }
+    getPreviewCandidateElements(e2) {
+      var _a, _b;
+      const candidates = [];
+      const addCandidate = (target) => {
+        if (!(target instanceof HTMLElement)) {
+          return;
+        }
+        if (!this.editor.rootElement.contains(target)) {
+          return;
+        }
+        if (candidates.includes(target)) {
+          return;
+        }
+        candidates.push(target);
+      };
+      const addElementStackHit = (target) => {
+        if (!(target instanceof HTMLElement)) {
+          return;
+        }
+        if (!this.editor.rootElement.contains(target)) {
+          return;
+        }
+        addCandidate(getImagePreviewTarget(target));
+      };
+      if (typeof document !== "undefined") {
+        (_a = document.elementsFromPoint) == null ? void 0 : _a.call(document, e2.clientX, e2.clientY).forEach(addElementStackHit);
+        addElementStackHit(document.elementFromPoint(e2.clientX, e2.clientY));
+      }
+      this.editor.rootElement.querySelectorAll('img.editor-image, span[data-type="editor-box"][data-box-type="image"] img').forEach((elem) => {
+        if (elem instanceof HTMLElement && isPointInElement(elem, e2.clientX, e2.clientY)) {
+          addCandidate(elem);
+        }
+      });
+      this.editor.rootElement.querySelectorAll(".image-container[data-src]").forEach((elem) => {
+        if (elem instanceof HTMLElement && isPointInElement(elem, e2.clientX, e2.clientY)) {
+          addCandidate(elem);
+        }
+      });
+      addCandidate(e2.target);
+      (_b = e2.composedPath) == null ? void 0 : _b.call(e2).forEach(addCandidate);
+      return candidates;
+    }
+    previewFromImageBox(elem) {
+      const imageBox = getParentBox(elem);
+      const boxType = imageBox && getBoxTypeFromElement(imageBox);
+      const img = elem instanceof HTMLImageElement ? elem : imageBox == null ? void 0 : imageBox.querySelector("img");
+      if (!imageBox || boxType !== "image" || !img) {
+        return false;
+      }
+      const imgData = this.editor.getBoxData(imageBox);
+      if (!imgData.link) {
+        this.onPreview(this.editor, img);
+      }
+      return true;
+    }
+    previewFromImageContainer(elem) {
+      const imageContainer = elem.closest(".image-container[data-src]");
+      if (!(imageContainer instanceof HTMLElement)) {
+        return false;
+      }
+      if (!this.editor.rootElement.contains(imageContainer)) {
+        return false;
+      }
+      const block = getParentBlock(imageContainer);
+      if (block && isEmbedBlock(block) && getEmbedType(block) === "image") {
+        const imageData = this.editor.getBlockData(block);
+        if (imageData.link) {
+          return true;
+        }
+      }
+      const img = elem instanceof HTMLImageElement ? elem : imageContainer.querySelector("img");
+      if (img) {
+        this.onPreview(this.editor, img);
+      }
+      return true;
+    }
+    previewFromEmbedBlock(elem) {
+      var _a;
+      const block = getParentBlock(elem);
+      if (!block) {
+        return false;
+      }
+      if (!isEmbedBlock(block)) {
+        return false;
+      }
+      if (getEmbedType(block) === "image") {
+        const imageData = this.editor.getBlockData(block);
+        if (imageData.link) {
+          return true;
+        }
+      }
+      if (elem.hasAttribute("data-src")) {
+        const img = elem.querySelector("img");
+        if (img) {
+          this.onPreview(this.editor, img);
+        }
+        return true;
+      }
+      if (elem.tagName === "IMG" && ((_a = elem.parentElement) == null ? void 0 : _a.hasAttribute("data-src"))) {
+        this.onPreview(this.editor, elem);
+        return true;
+      }
+      return false;
+    }
+    isPreviewableImageElement(elem) {
+      const imageBox = getParentBox(elem);
+      const boxType = imageBox && getBoxTypeFromElement(imageBox);
+      const imageBoxImg = elem instanceof HTMLImageElement ? elem : imageBox == null ? void 0 : imageBox.querySelector("img");
+      if (imageBox && boxType === "image" && imageBoxImg) {
+        const imgData = this.editor.getBoxData(imageBox);
+        return !imgData.link;
+      }
+      const imageContainer = elem.closest(".image-container[data-src]");
+      if (imageContainer instanceof HTMLElement) {
+        const block = getParentBlock(imageContainer);
+        if (block && isEmbedBlock(block) && getEmbedType(block) === "image") {
+          const imageData = this.editor.getBlockData(block);
+          if (imageData.link) {
+            return false;
+          }
+        }
+        return Boolean(elem instanceof HTMLImageElement ? elem : imageContainer.querySelector("img"));
+      }
+      return false;
+    }
   }
   function createHistoryEditor(root2, doc2, options) {
     var _a, _b, _c, _d, _e;
@@ -96917,7 +97072,7 @@ ${JSON.stringify(error2, null, 2)}`);
         }
       }
     });
-    editor.version = "3.0.12-beta.4";
+    editor.version = "3.0.14-beta.1";
     return editor;
   }
   function isDoc(doc2) {
@@ -97051,7 +97206,7 @@ ${JSON.stringify(error2, null, 2)}`);
     OnesEditorDropTarget.register(editor);
     OnesEditorTocProvider.register(editor);
     OnesEditorExclusiveBlock.register(editor);
-    editor.version = "3.0.12-beta.4";
+    editor.version = "3.0.14-beta.1";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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