@ones-editor/editor 3.0.16 → 3.0.17-beta.4

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

@@ -93228,58 +93228,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;
@@ -93296,9 +93376,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;
@@ -93306,6 +93393,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;
@@ -97125,7 +97337,7 @@ ${JSON.stringify(error2, null, 2)}`);
         }
       }
     });
-    editor.version = "3.0.16";
+    editor.version = "3.0.17-beta.4";
     return editor;
   }
   function isDoc(doc2) {
@@ -97259,7 +97471,7 @@ ${JSON.stringify(error2, null, 2)}`);
     OnesEditorDropTarget.register(editor);
     OnesEditorTocProvider.register(editor);
     OnesEditorExclusiveBlock.register(editor);
-    editor.version = "3.0.16";
+    editor.version = "3.0.17-beta.4";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -97394,7 +97606,7 @@ ${JSON.stringify(error2, null, 2)}`);
         }
       }
     });
-    editor.version = "3.0.16";
+    editor.version = "3.0.17-beta.4";
     return editor;
   }
   const emojis$1 = {

package/package.json

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