@foxycape/core 1.1.5 → 1.1.7

package/dist/mediaTypes/html/renderer/image/HtmlImageLoader.mjs

@@ -1,109 +1,67 @@
-import { BrowserCapabilities as e } from "../../../../kernal/web/BrowserCapabilities.mjs";
-import { EventNames as t } from "../../../../kernal/EventNames.mjs";
-import { isNullOrWhiteSpace as n, startsWith as r } from "../../../../kernal/common/text.mjs";
+import { EventNames as e } from "../../../../kernal/EventNames.mjs";
+import { convertArrayBufferToString as t } from "../../../../kernal/common/encoding.mjs";
+import { BrowserCapabilities as n } from "../../../../kernal/web/BrowserCapabilities.mjs";
+import { isNullOrWhiteSpace as r } from "../../../../kernal/common/text.mjs";
 import { checkIsAbsoluteUrl as i, checkIsBlobUrl as a } from "../../../../kernal/common/url.mjs";
 import { ElementInitialNumberName as o } from "../../../../kernal/Constants.mjs";
 import { parseNumber as s } from "../../../../kernal/common/number.mjs";
 import { compareTagName as c, getDocumentBody as l } from "../../../../kernal/html/finder.mjs";
 import { injectCssContent as u } from "../../../../kernal/html/injector.mjs";
-import { asyncDebounce as d } from "../../../../kernal/Debounce.mjs";
-import { getFormatDocument as f } from "../../../../kernal/html/parser.mjs";
-import { getImageSize as p } from "../../../../kernal/html/image.mjs";
-import { convertArrayBufferToString as m } from "../../../../kernal/common/encoding.mjs";
+import { yieldToMain as d } from "../../../../kernal/web/scheduler.mjs";
+import { asyncDebounce as f } from "../../../../kernal/web/debounce.mjs";
+import { getFormatDocument as p } from "../../../../kernal/html/parser.mjs";
+import { getImageSize as m } from "../../../../kernal/html/image.mjs";
 import { HtmlSettings as h } from "../../HtmlSettings.mjs";
 import { ContentLayoutCssVariableNames as g } from "../style/ContentLayoutCssVariableNames.mjs";
 import _ from "./error-image.mjs";
+import { createHtmlPlaceholderImageUrl as v, isHtmlPlaceholderImageUrl as y } from "./htmlImagePlaceholderUrl.mjs";
+import { getImageFitStyles as b, getImageForcedHeightCss as x, getImageHeightRatioExpr as S } from "./htmlImageFitStyles.mjs";
 //#region mediaTypes/html/renderer/image/HtmlImageLoader.ts
-var v = "lhx-svg", y = "imageSizes-", b = 5, x = class {
-	constructor(n, r, i) {
-		this.documentsProvider = n, this.rendererViewport = r, this.htmlOptions = i, this.documentImageSizesSummaries = /* @__PURE__ */ new Map(), this.blobUrls = /* @__PURE__ */ new Map(), this.isDisposed = !1, this.resetImageSizeTasks = [], this.onDocumentDisposing = (e) => {
-			this.revokeDocumentBlobUrls(e);
+var C = "lhx-svg", w = 5, T = `.${C} {max-width: var(${g.ColumnBoxWidth}) !important; width: auto !important; height: auto !important; }`, E = "*,p,div{text-align:center;margin-block:0 !important;margin-inline:auto !important;text-indent:0 !important;padding:0 !important;line-height:0 !important}", D = (e) => r(e) ? !0 : y(e), O = (e) => {
+	let t = e.querySelectorAll("img, image");
+	return t.length > 0 ? [...t] : [...e.getElementsByTagName("img"), ...e.getElementsByTagName("image")];
+}, k = (e) => c(e.tagName, "IMAGE"), A = (e, t, n = !1) => {
+	let r = e.style;
+	if (!r) {
+		let r = Object.entries(t).map(([e, t]) => n ? `${e}:${t} !important` : `${e}:${t}`).join(";");
+		e.setAttribute("style", r);
+		return;
+	}
+	for (let [e, i] of Object.entries(t)) r.setProperty(e, i, n ? "important" : "");
+}, j = class {
+	constructor(e, t, n) {
+		this.documentsProvider = e, this.rendererViewport = t, this.htmlOptions = n, this.documentImageSizeMaps = /* @__PURE__ */ new Map(), this.blobUrls = /* @__PURE__ */ new Map(), this.isDisposed = !1, this.onDocumentDisposing = (e) => {
+			this.revokeDocumentBlobUrls(e), this.documentImageSizeMaps.delete(e);
 		}, this.onImageElementsVisible = async (e) => {
-			for (let [t, n] of e.entries()) await this.loadImages(t, n);
-		}, this.delayLoadOnImageElementsVisible = d(this.onImageElementsVisible, 100), this.onLayoutChange = async () => {
+			if (!this.isDisposed) for (let [t, n] of e.entries()) {
+				if (this.isDisposed) return;
+				await this.loadImages(t, n);
+			}
+		}, this.delayLoadOnImageElementsVisible = f(this.onImageElementsVisible, 100), this.onLayoutChange = async () => {
 			await this.delayResetAllImageSize();
+		}, this.onDocumentLoad = async (e) => {
+			this.isDisposed || await this.resetImageSize(e);
 		}, this.resetAllImageSize = async () => {
-			for (let e of this.documentsProvider.getLoadedDocuments()) await this.resetImageSize(e);
-		}, this.delayResetAllImageSize = d(this.resetAllImageSize, 100), this.prepareImageSize = async (n, r) => {
-			u(r, `.${v} {width: 100% !important; height: auto !important; }`, !1, "lhx-svg-style");
-			let i = [...r.getElementsByTagName("img"), ...r.getElementsByTagName("image")], a = this.getImageSizesSummary(r);
-			a.total = i.length;
-			let o = this.documentsProvider.getDocuments().indexOf(n), s = this.getResourceId(), l = await this.getStorage(), d = null;
-			o >= 0 && l && s && (d = await l.get(y + s, o.toString()));
-			let f = i.length > 100;
-			for (let r = 0; r < i.length; r++) {
+			if (!this.isDisposed) for (let e of this.documentsProvider.getLoadedDocuments()) {
 				if (this.isDisposed) return;
-				try {
-					let a = i[r];
-					a.parentElement && c(a.parentElement.tagName, "SVG") && a.parentElement.classList.add(v);
-					let o = this.getImageUrl(a), s = d?.find((e) => e.url == o);
-					s ||= await this.prefetchImageSize(n, a, !0), s && (this.resetImageStyles(a, s.width, s.height), this.resetInlineImageSize(a)), f && r % 10 == 0 && (this.events.emit(t.ProcessedImageCount, {
-						doc: n,
-						totalImageCount: i.length,
-						processedImageCount: r
-					}), await e.yieldToMain());
-				} catch (e) {
-					this.logger.error(e);
-				}
-			}
-			o >= 0 && l && s && await this.persistImageSizes(l, s, o.toString(), d, a);
-		}, this.getImageUrl = (e) => {
-			let t = e.getAttribute("data-preset-preview-url") == "true";
-			return c(e.tagName, "IMAGE") ? t ? e.getAttribute("data-src") ?? e.getAttribute("xlink:href") ?? e.getAttribute("href") : e.getAttribute("xlink:href") ?? e.getAttribute("href") : t ? e.getAttribute("data-src") : e.getAttribute("src");
-		}, this.resetImageStyles = (t, n, r) => {
-			if (n <= 0 || r <= 0 || !e.supportCssAspectRatio()) return;
-			this.setWidthAndHeight(t, n, r);
-			let i = t;
-			if (c(t.tagName, "IMAGE") && (i = t.parentElement), !i) return;
-			i.setAttribute("width", `${n}`), i.setAttribute("height", `${r}`);
-			let a = n / r, { columnWidth: o, columnHeight: s } = this.getColumnMetrics(), l = r;
-			o > 0 && n > o && (l = o / n * r);
-			let u = s > 0 ? `min(${l}px,${s}px)` : `${l}px`, d = `calc(100% * var(${g.MaxImageWidthRatio}))`;
-			i.getAttribute("style") ? (i.style.width = d, i.style.height = "auto", i.style.maxWidth = d, i.style.maxHeight = u, i.style.aspectRatio = `${a}`) : i.setAttribute("style", `max-width:${d};height:auto;max-height:${u};aspect-ratio:${a};width:${d}`);
-		}, this.resetImageWidthHeight = (e) => {
-			e.image.style ? (e.image.style.setProperty("width", "auto", "important"), e.image.style.setProperty("max-width", "100%", "important"), e.image.style.setProperty("max-height", "100%", "important")) : e.image.setAttribute("style", "width:auto !important;max-width:100% !important;max-height:100% !important"), this.resetImageHeight(e.image, e.columnWidth, e.columnHeight, this.htmlOptions.maxImageHeightRatio);
-		}, this.flushResetImageSizeTasks = async () => {
-			if (e.supportCssAspectRatio()) {
-				this.resetImageSizeTasks = [];
-				return;
+				await this.resetImageSize(e);
 			}
-			for (; this.resetImageSizeTasks.length > 0;) {
-				if (this.isDisposed) {
-					this.resetImageSizeTasks = [];
-					return;
-				}
-				let t = this.resetImageSizeTasks.shift();
-				if (!t) break;
-				this.resetImageWidthHeight(t), await e.yieldToMain();
-			}
-		}, this.resetImageSize = async (e) => {
-			let t = e.getContentContainer()?.ownerDocument;
-			if (!t || !l(t)) return;
-			let { columnWidth: n, columnHeight: r } = this.getColumnMetrics(), i = [...t.getElementsByTagName("img"), ...t.getElementsByTagName("image")];
-			if (this.checkIsOnlyOneImageInDocument(t)) {
-				let t = i[0];
-				this.handleOnlyOneImageInDocument(n, r, t), await this.loadSingleImage(e, t);
-				return;
-			}
-			for (let e of i) this.resetImageSizeTasks.push({
-				image: e,
-				columnWidth: n,
-				columnHeight: r
-			});
-			await this.flushResetImageSizeTasks();
-			for (let t = 0; t < Math.min(b, i.length); t++) await this.loadSingleImage(e, i[t]);
-		}, this.events = this.documentsProvider.owner.events, this.logger = this.documentsProvider.owner.loggerFactory.getLogger(this.constructor.name), this.bindEvents();
+		}, this.delayResetAllImageSize = f(this.resetAllImageSize, 100), this.events = this.documentsProvider.owner.events, this.logger = this.documentsProvider.owner.loggerFactory.getLogger(this.constructor.name), this.bindEvents();
 	}
 	bindEvents() {
-		this.events.on(t.LayoutChange, this.onLayoutChange), this.events.on(t.DocumentDisposing, this.onDocumentDisposing), this.events.on(t.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
+		this.events.on(e.LayoutChange, this.onLayoutChange), this.events.on(e.DocumentLoad, this.onDocumentLoad), this.events.on(e.DocumentDisposing, this.onDocumentDisposing), this.events.on(e.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
 	}
 	unbindEvents() {
-		this.events.off(t.LayoutChange, this.onLayoutChange), this.events.off(t.DocumentDisposing, this.onDocumentDisposing), this.events.off(t.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
+		this.events.off(e.LayoutChange, this.onLayoutChange), this.events.off(e.DocumentLoad, this.onDocumentLoad), this.events.off(e.DocumentDisposing, this.onDocumentDisposing), this.events.off(e.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
 	}
 	addBlobUrl(e, t) {
 		if (!a(t)) return;
 		let n = this.blobUrls.get(e);
-		n ? n.push(t) : this.blobUrls.set(e, [t]);
+		if (!n) {
+			this.blobUrls.set(e, [t]);
+			return;
+		}
+		n.indexOf(t) < 0 && n.push(t);
 	}
 	revokeDocumentBlobUrls(e) {
 		let t = this.blobUrls.get(e);
@@ -112,89 +70,131 @@ var v = "lhx-svg", y = "imageSizes-", b = 5, x = class {
 			this.blobUrls.delete(e);
 		}
 	}
+	removeTrackedBlobUrl(e, t) {
+		let n = this.blobUrls.get(e);
+		if (!n) return;
+		let r = n.filter((e) => e != t);
+		if (r.length == 0) {
+			this.blobUrls.delete(e);
+			return;
+		}
+		this.blobUrls.set(e, r);
+	}
 	async preprocessImages(e) {
 		let t = e, n = (await t.getVirtualContentContainer())?.ownerDocument;
-		n && (await this.prepareImageSize(t, n), await this.setImagePreviewUrl(n));
-	}
-	async setImagePreviewUrl(e) {
-		let { default: t } = await import("./placeholder.mjs"), n = e.getElementsByTagName("img"), r = e.getElementsByTagName("image");
-		for (let e = 0; e < n.length; e++) this.applyPreviewUrl(n[e], n[e].getAttribute("src"), t, !1);
-		for (let e = 0; e < r.length; e++) {
-			let n = r[e], i = n.getAttribute("xlink:href") ?? n.getAttribute("href");
-			this.applyPreviewUrl(n, i, t, !0);
+		n && (await this.prepareImageSize(t, n), this.setImagePreviewUrl(n), this.applyOnlyOneImageStyles(n));
+	}
+	setImagePreviewUrl(e) {
+		let t = O(e);
+		for (let e of t) this.applyPreviewUrl(e, this.getImageUrl(e));
+	}
+	applyPreviewUrl(e, t) {
+		let n = s(e.getAttribute("data-width"), 0), i = s(e.getAttribute("data-height"), 0), a = v(n, i), o = e.getAttribute("data-preview-src");
+		if (D(o) && (o = a, e.setAttribute("data-preview-src", a)), !r(t) && !D(t)) {
+			let n = e.getAttribute("data-src");
+			(r(n) || !D(n)) && e.setAttribute("data-src", t);
+		}
+		this.setImageSource(e, o), e.setAttribute("data-preset-preview-url", "true"), this.setImageStyle(e);
+	}
+	setImageSource(e, t) {
+		if (c(e.tagName, "IMG")) {
+			e.src = t;
+			return;
+		}
+		if (n.isSafari()) {
+			e.href.baseVal = t;
+			return;
 		}
+		e.setAttribute("xlink:href", t);
+	}
+	setImageStyle(e) {
+		let t = e.parentElement;
+		t && t.children.length == 1 && r(t.innerText) && (n.supportCssHas() || t.classList.add(h.BreakInsideAvoid), t.style.removeProperty("width"), t.style.removeProperty("height"));
+	}
+	async prepareImageSize(t, n) {
+		u(n, T, !1, "lhx-svg-style"), this.checkIsOnlyOneImageInDocument(n) && u(n, E, !1, "only-one-image");
+		let i = O(n), a = this.getImageSizeMap(t), o = await this.loadImageSizes(t);
+		if (o) for (let e of o) !r(e.url) && e.width > 0 && a.set(e.url, e);
+		let s = i.length > 100;
+		for (let n = 0; n < i.length; n++) {
+			if (this.isDisposed) return;
+			try {
+				let r = i[n];
+				r.parentElement && c(r.parentElement.tagName, "SVG") && r.parentElement.classList.add(C);
+				let o = this.getImageUrl(r), l = o ? a.get(o) : void 0;
+				l ||= await this.prefetchImageSize(t, r), l && (this.resetImageStyles(r, l.width, l.height), this.resetInlineImageSize(r)), s && (n % 10 == 0 || n === i.length - 1) && (this.events.emit(e.ProcessedImageCount, {
+					doc: t,
+					totalImageCount: i.length,
+					processedImageCount: n === i.length - 1 ? i.length : n
+				}), await d());
+			} catch (e) {
+				this.logger.error(e);
+			}
+		}
+		let l = Array.from(a.values()).filter((e) => e.width > 0 && !r(e.url));
+		if (l.length > 0) {
+			if (o && o.length > 0) {
+				let e = new Set(o.map((e) => e.url)), n = l.filter((t) => !e.has(t.url));
+				n.length > 0 && await this.persistImageSizes(t, n);
+				return;
+			}
+			await this.persistImageSizes(t, l);
+		}
+	}
+	async loadImageSizes(e) {
+		return [];
+	}
+	async persistImageSizes(e, t) {}
+	getImageSizeMap(e) {
+		let t = this.documentImageSizeMaps.get(e);
+		return t || (t = /* @__PURE__ */ new Map(), this.documentImageSizeMaps.set(e, t)), t;
 	}
-	applyPreviewUrl(e, t, r, i) {
-		let a = e.getAttribute("data-preview-src");
-		n(a) && (a = r, e.setAttribute("data-preview-src", r)), t == r ? e.removeAttribute("data-loaded") : e.getAttribute("data-src") != r && e.setAttribute("data-src", t ?? ""), i ? e.setAttribute("xlink:href", a) : e.src = a, e.setAttribute("data-preset-preview-url", "true"), this.setImageStyle(e);
-	}
-	setImageStyle(t) {
-		let r = t.parentElement;
-		r && r.children.length == 1 && n(r.innerText) && (e.supportCssHas() || r.classList.add(h.BreakInsideAvoid), r.style.removeProperty("width"), r.style.removeProperty("height"));
-	}
-	async persistImageSizes(e, t, n, r, i) {
-		let a = Array.from(i.descriptors.values()).filter((e) => e.width > 0);
-		if (a.length == 0) return;
-		let o = y + t;
-		if (r && r.length > 0) {
-			let t = new Set(r.map((e) => e.url)), i = a.filter((e) => !t.has(e.url));
-			i.length > 0 && (r.push(...i), await e.set(o, n, r));
-		} else await e.set(o, n, a);
-	}
-	getResourceId() {
-		let e = this.documentsProvider.owner.context;
-		return n(e.simpleId) ? e.id : e.simpleId;
-	}
-	async getStorage() {
-		return await this.documentsProvider.owner.services.get("storage");
-	}
-	getImageSizesSummary(e) {
-		let t = this.documentImageSizesSummaries.get(e);
-		return t || (t = {
-			total: 0,
-			checkedCount: 0,
-			descriptors: /* @__PURE__ */ new Map()
-		}, this.documentImageSizesSummaries.set(e, t)), t;
-	}
-	async prefetchImageSize(e, t, n) {
-		let r = this.getImageUrl(t), a = t.getAttribute("data-width");
+	getImageUrl(e) {
+		let t = e.getAttribute("data-preset-preview-url") == "true";
+		return k(e) ? t ? e.getAttribute("data-src") ?? e.getAttribute("xlink:href") ?? e.getAttribute("href") ?? "" : e.getAttribute("xlink:href") ?? e.getAttribute("href") ?? "" : t ? e.getAttribute("data-src") ?? "" : e.getAttribute("src") ?? "";
+	}
+	async prefetchImageSize(e, t) {
+		let n = this.getImageUrl(t);
+		if (r(n)) return;
+		let a = t.getAttribute("data-width");
 		if (a != null) {
-			let e = s(t.getAttribute("data-height"), 0);
-			return this.addImageDescriptor(t, r, s(a, 0), e, !0);
+			let r = s(a, 0), i = s(t.getAttribute("data-height"), 0);
+			return this.addImageDescriptor(e, n, r, i);
 		}
-		if (!n) return this.addImageDescriptor(t, r, 0, 0, !1);
-		let o = this.getImageSizesSummary(t.ownerDocument).descriptors.get(r);
+		let o = this.getImageSizeMap(e).get(n);
 		if (o) return o;
 		let c = 0, l = 0;
 		try {
-			if (i(r)) {
-				let e = await p(r);
+			if (i(n)) {
+				let e = await m(n);
 				c = e.width, l = e.height;
 			} else {
-				let t = await e.fileParser.getFile(r, e.url, "blob"), n = t && t.size > 0 ? t : _;
+				let t = await e.fileParser.getFile(n, e.url, "blob"), r = t && t.size > 0 ? t : _;
 				try {
-					let e = await p(n);
+					let e = await m(r);
 					c = e.width, l = e.height;
 				} catch {}
 			}
 		} catch (e) {
 			this.logger.error(e);
 		}
-		return this.addImageDescriptor(t, r, c, l, c <= 0);
-	}
-	revokeObjectURL(e) {
-		if (!(!e || !r(e, "blob:", !0))) try {
-			URL.revokeObjectURL(e);
-		} catch {}
+		return this.addImageDescriptor(e, n, c, l);
+	}
+	revokeObjectURL(e, t) {
+		if (a(e)) {
+			try {
+				URL.revokeObjectURL(e);
+			} catch {}
+			t && this.removeTrackedBlobUrl(t, e);
+		}
 	}
-	addImageDescriptor(e, t, n, r, i) {
-		let a = this.getImageSizesSummary(e.ownerDocument), o = a.descriptors.get(t);
-		return o ? (!o.checked && i && (a.checkedCount += 1), o.width = n, o.height = r, o.url = t, o.checked = i, o) : (o = {
+	addImageDescriptor(e, t, n, r) {
+		let i = this.getImageSizeMap(e), a = i.get(t) ?? {
 			url: t,
 			width: n,
-			height: r,
-			checked: i
-		}, i && (a.checkedCount += 1), a.descriptors.set(t, o), o);
+			height: r
+		};
+		return a.url = t, a.width = n, a.height = r, i.set(t, a), a;
 	}
 	setWidthAndHeight(e, t, n) {
 		t > 0 && n > 0 && s(e.getAttribute("data-width"), 0, "parseInt") <= 0 && (e.setAttribute("data-width", `${t}`), e.setAttribute("data-height", `${n}`));
@@ -206,167 +206,277 @@ var v = "lhx-svg", y = "imageSizes-", b = 5, x = class {
 			columnHeight: e.columnHeight
 		};
 	}
+	resetImageStyles(e, t, r) {
+		if (t <= 0 || r <= 0 || !n.supportCssAspectRatio()) return;
+		this.setWidthAndHeight(e, t, r);
+		let i = k(e) ? e.parentElement : e;
+		i && (i.setAttribute("width", `${t}`), i.setAttribute("height", `${r}`), A(i, b(t, r)));
+	}
+	resetImageWidthHeight(e, t, n) {
+		A(e, {
+			width: "auto",
+			"max-width": `var(${g.ColumnBoxWidth})`,
+			"max-height": `var(${g.ColumnBoxHeight})`
+		}, !0), this.resetImageHeight(e, t, n, this.htmlOptions.maxImageHeightRatio);
+	}
+	async resetImageSize(e) {
+		let t = e.getContentContainer()?.ownerDocument;
+		if (!t || !l(t)) return;
+		let { columnWidth: r, columnHeight: i } = this.getColumnMetrics(), a = this.getOnlyImageInDocument(t);
+		if (a) {
+			this.handleOnlyOneImageInDocument(r, i, a), await this.loadSingleImage(e, a);
+			return;
+		}
+		let o = O(t);
+		if (!n.supportCssAspectRatio()) for (let e of o) {
+			if (this.isDisposed) return;
+			this.resetImageWidthHeight(e, r, i), await d();
+		}
+		for (let t = 0; t < Math.min(w, o.length); t++) {
+			if (this.isDisposed) return;
+			await this.loadSingleImage(e, o[t]);
+		}
+	}
 	resetInlineImageSize(e) {
 		let t = s(e.getAttribute("data-width"), 0), n = s(e.getAttribute("data-height"), 0);
-		if (t <= 0 || n <= 0) return;
-		let r = !1;
-		(n <= 200 || e.previousSibling?.nodeType == Node.TEXT_NODE && e.previousSibling.textContent?.trim()?.length > 0 || e.nextSibling?.nodeType == Node.TEXT_NODE && e.nextSibling.textContent?.trim()?.length > 0) && (r = this.checkIsInlineImage(e, t, n).foundInlineImage);
-		let i = c(e.tagName, "IMG") ? e : e.parentElement;
-		!r || !i || (e.getAttribute("style") ? (e.style.setProperty("width", "auto", "important"), e.style.setProperty("max-width", "100%", "important"), e.style.setProperty("height", "1em", "important"), e.style.setProperty("margin-block-start", "0", "important"), e.style.setProperty("margin-block-end", "0", "important")) : e.setAttribute("style", "width:auto !important;max-width:100% !important;height:1em !important;margin-block-start:0 !important;margin-block-end:0 !important;"), i.style.setProperty("vertical-align", "-0.2em", "important"), i.setAttribute("data-inline-image", "true"));
-	}
-	handleOnlyOneImageInDocument(e, t, r) {
-		let i = r.ownerDocument, a = l(i);
-		if (!n(a.getAttribute("data-handled-one-image"))) return;
-		a.setAttribute("data-handled-one-image", "true"), a.style.setProperty("display", "flex", "important"), a.style.setProperty("height", "100%", "important"), a.style.setProperty("justify-content", "center", "important"), a.style.setProperty("align-items", "center", "important");
-		let o = r;
-		c(r.parentElement?.tagName, "SVG") && (o = r.parentElement, r.style.setProperty("width", "auto", "important"), r.style.setProperty("max-width", "100%", "important"), r.style.setProperty("max-height", t + "px", "important"), r.style.setProperty("display", "block", "important")), o.style.setProperty("width", "auto", "important"), o.style.setProperty("max-width", "100%", "important"), o.style.setProperty("display", "block", "important"), o.parentElement && (o.parentElement.style.textAlign = "center"), this.resetImageHeight(r, e, t, .95, !0);
+		if (t <= 0 || n <= 0 || n > 200 && !(e.previousSibling?.nodeType == Node.TEXT_NODE && (e.previousSibling.textContent?.trim()?.length ?? 0) > 0 || e.nextSibling?.nodeType == Node.TEXT_NODE && (e.nextSibling.textContent?.trim()?.length ?? 0) > 0) || !this.isInlineImage(e)) return;
+		let r = c(e.tagName, "IMG") ? e : e.parentElement;
+		r && (A(e, {
+			width: "auto",
+			"max-width": "100%",
+			height: "1em",
+			"margin-block-start": "0",
+			"margin-block-end": "0"
+		}, !0), r.style.setProperty("vertical-align", "-0.2em", "important"), r.setAttribute("data-inline-image", "true"));
+	}
+	applyOnlyOneImageStyles(e) {
+		let t = this.getOnlyImageInDocument(e);
+		if (!t) return;
+		let { columnWidth: n, columnHeight: r } = this.getColumnMetrics();
+		this.handleOnlyOneImageInDocument(n, r, t);
+	}
+	handleOnlyOneImageInDocument(e, t, n) {
+		let r = n.ownerDocument, i = l(r);
+		if (!i) return;
+		u(r, E, !1, "only-one-image"), i.setAttribute("data-handled-one-image", "true"), A(i, {
+			display: "flex",
+			height: "100%",
+			"justify-content": "center",
+			"align-items": "center"
+		}, !0), this.clearPercentageSizeAttributes(n);
+		let a = n;
+		c(n.parentElement?.tagName, "SVG") && (a = n.parentElement, this.clearPercentageSizeAttributes(a), A(n, {
+			width: "auto",
+			"max-width": `var(${g.ColumnBoxWidth})`,
+			"max-height": t + "px",
+			display: "block"
+		}, !0)), A(a, {
+			width: "auto",
+			"max-width": `var(${g.ColumnBoxWidth})`,
+			display: "block"
+		}, !0), a.parentElement && (a.parentElement.style.textAlign = "center"), this.resetImageHeight(n, e, t, .95, !0);
+	}
+	clearPercentageSizeAttributes(e) {
+		for (let t of ["width", "height"]) {
+			let n = e.getAttribute(t);
+			n && n.includes("%") && e.removeAttribute(t);
+		}
 	}
 	resetImageHeight(e, t, n, r, i) {
-		let a = c(e.tagName, "IMAGE") ? e.parentElement : e;
+		let a = k(e) ? e.parentElement : e;
 		if (!a) return;
-		let o = s(e.getAttribute("data-width"), 0), l = s(e.getAttribute("data-height"), 0);
-		o <= 0 || l <= 0 || this.forceSetImageHeight(a, t, n, o, l, r, i);
-	}
-	forceSetImageHeight(t, n, r, i, a, o, s) {
-		if (e.supportCssMinMaxFunction()) {
-			let e;
-			e = o && s ? `min(calc(${a}px * ${o}),calc(var(${g.ColumnHeight}) * ${o}),calc(var(${g.ColumnWidth}) / ${i} * ${a} * ${o}))` : `min(calc(${a}px * var(${g.MaxImageHeightRatio})),calc(var(${g.ColumnHeight}) * var(${g.MaxImageHeightRatio})),calc(var(${g.ColumnWidth}) / ${i} * ${a} * var(${g.MaxImageHeightRatio})))`, t.style.setProperty("height", e, "important");
-		} else {
-			let e = this.calcImageHeight(n, r, i, a) * o;
-			t.style.setProperty("height", e + "px", "important");
+		let { width: o, height: s } = this.getImageIntrinsicSize(e);
+		o <= 0 || s <= 0 || (this.setWidthAndHeight(e, o, s), this.forceSetImageHeight(a, t, n, o, s, r, i));
+	}
+	forceSetImageHeight(e, t, r, i, a, o, s) {
+		if (n.supportCssMinMaxFunction()) {
+			let t = S(o, s);
+			e.style.setProperty("height", x(i, a, t), "important");
+			return;
 		}
+		let c = this.calcImageHeight(t, r, i, a) * o;
+		e.style.setProperty("height", c + "px", "important");
 	}
 	calcImageHeight(e, t, n, r) {
 		return t >= r && e >= n ? r : e / t <= n / r ? e / n * r : t;
 	}
-	checkIsOnlyOneImageInDocument(e) {
+	getImageIntrinsicSize(e) {
+		let t = s(e.getAttribute("data-width"), 0), n = s(e.getAttribute("data-height"), 0);
+		if (t > 0 && n > 0) return {
+			width: t,
+			height: n
+		};
+		if (!k(e)) {
+			let t = e;
+			if (t.naturalWidth > 0 && t.naturalHeight > 0) return {
+				width: t.naturalWidth,
+				height: t.naturalHeight
+			};
+		}
+		return {
+			width: 0,
+			height: 0
+		};
+	}
+	hasNonImageText(e) {
+		let t = e.ownerDocument;
+		if (!t) return !!e.textContent?.trim();
+		let n = t.createTreeWalker(e, NodeFilter.SHOW_TEXT), r = n.nextNode();
+		for (; r;) {
+			if (r.textContent?.trim()) return !0;
+			r = n.nextNode();
+		}
+		return !1;
+	}
+	getOnlyImageInDocument(e) {
 		let t = l(e);
-		return !t || t.textContent.trim() ? !1 : t.getElementsByTagName("img").length == 1 || t.getElementsByTagName("image").length == 1;
+		if (!t) return;
+		let n = O(t);
+		if (n.length == 1 && !(!t.classList.contains("lhx-text-empty") && this.hasNonImageText(t))) return n[0];
+	}
+	checkIsOnlyOneImageInDocument(e) {
+		return !!this.getOnlyImageInDocument(e);
 	}
 	checkIsInlineTag(e) {
 		let t = e.nodeName;
-		return !n(t) && this.htmlOptions.htmlInlineTags.indexOf(t.toLowerCase()) >= 0;
-	}
-	checkIsInlineImage(e, t, n) {
-		let { foundInlineImage: r, imageHeight: i } = this.getInlineImageProperties(e, n);
-		if (r) return {
-			foundInlineImage: r,
-			imageHeight: i
-		};
-		let a = e.parentElement, o = e;
-		for (; a && !c(a.tagName, "BODY");) {
-			if (a.children.length > 1 || a.children.length == 1 && a.textContent.trim().length > 0) return this.getInlineImageProperties(o, n);
-			o = a, a = a.parentElement;
+		if (r(t)) return !1;
+		let n = t.toLowerCase();
+		return n == "img" || n == "image" || this.htmlOptions.htmlInlineTags.indexOf(n) >= 0;
+	}
+	isInlineImage(e) {
+		if (this.hasInlineSiblings(e)) return !0;
+		let t = e.parentElement, n = e;
+		for (; t && !c(t.tagName, "BODY");) {
+			if (t.children.length > 1 || t.children.length == 1 && t.textContent.trim().length > 0) return this.hasInlineSiblings(n);
+			n = t, t = t.parentElement;
 		}
-		return {
-			foundInlineImage: r,
-			imageHeight: i
-		};
+		return !1;
 	}
 	findSiblingNodes(e) {
-		let t = e.previousSibling, r = e.nextSibling;
-		for (; t != null && !(!n(t.textContent) || t.nodeType == Node.ELEMENT_NODE);) t = t.previousSibling;
-		for (; r != null && !(!n(r.textContent) || r.nodeType == Node.ELEMENT_NODE);) r = r.nextSibling;
+		let t = e.previousSibling, n = e.nextSibling;
+		for (; t != null && !(!r(t.textContent) || t.nodeType == Node.ELEMENT_NODE);) t = t.previousSibling;
+		for (; n != null && !(!r(n.textContent) || n.nodeType == Node.ELEMENT_NODE);) n = n.nextSibling;
 		return {
 			previousSiblingNode: t,
-			nextSiblingNode: r
+			nextSiblingNode: n
 		};
 	}
-	getInlineImageProperties(e, t) {
-		let { previousSiblingNode: r, nextSiblingNode: i } = this.findSiblingNodes(e), a = !1, o;
-		if (!r && !i) return {
-			foundInlineImage: a,
-			imageHeight: o
-		};
-		let s = r?.ownerDocument?.defaultView ?? i?.ownerDocument?.defaultView, l;
-		if (r?.nodeType == Node.TEXT_NODE && !n(r.nodeValue) ? l = r.parentElement : i?.nodeType == Node.TEXT_NODE && !n(i.nodeValue) ? l = i.parentElement : r && this.checkIsInlineTag(r) ? l = r : i && this.checkIsInlineTag(i) && (l = i), !l) return {
-			foundInlineImage: a,
-			imageHeight: o
-		};
-		let u = 1.25, d = s?.getComputedStyle(l), f, p, m;
-		d ? (f = parseFloat(d.fontSize), p = parseFloat(d.lineHeight), m = parseFloat(d.height)) : (f = 20, p = f * u, m = p);
-		let h = p > f * u ? f * u : p;
-		return o = this.checkElementIsFootnote(e) || c(e.parentElement?.tagName, "A") && (c(e.parentElement?.parentElement?.tagName, "SUB") || c(e.parentElement?.parentElement?.tagName, "SUP")) ? f : m && m <= h ? m : h, t && t < o && (o = t), a = !0, {
-			foundInlineImage: a,
-			imageHeight: o
-		};
-	}
-	checkElementIsFootnote(e) {
-		return e.getAttribute("class")?.indexOf("footnote") >= 0 || e.getAttribute("epub:type") == "noteref" || c(e.tagName, "SUB") || c(e.tagName, "SUP") ? !0 : e.children.length > 0 && this.checkElementIsFootnote(e.children[0]);
+	hasInlineSiblings(e) {
+		let { previousSiblingNode: t, nextSiblingNode: n } = this.findSiblingNodes(e);
+		return !t && !n ? !1 : t?.nodeType == Node.TEXT_NODE && !r(t.nodeValue) || n?.nodeType == Node.TEXT_NODE && !r(n.nodeValue) || t && this.checkIsInlineTag(t) || n && this.checkIsInlineTag(n);
 	}
 	async loadImages(e, t) {
 		let n = e;
 		if (!(!n || !t?.length)) for (let r of t) {
 			if (this.isDisposed || !r) return;
 			let t = r.ownerDocument.defaultView;
-			if (t) {
-				if (r instanceof t.HTMLImageElement || r instanceof t.SVGImageElement) {
-					let e = r.getAttribute(o), t = r.ownerDocument.querySelector(`[${o}='${e}']`);
-					t && await this.loadSingleImage(n, t);
-				} else {
-					let t = r.getElementsByTagName("img");
-					for (let e = 0; e < t.length; e++) await this.loadSingleImage(n, t[e]);
-					let i = r.getAttribute(o), a = e.getContentContainer()?.querySelector(`[${o}='${i}']`), s = a && a != r ? a.getElementsByTagName("image") : r.getElementsByTagName("image");
-					for (let e = 0; e < s.length; e++) await this.loadSingleImage(n, s[e]);
-				}
+			if (!t) continue;
+			if (r instanceof t.window.HTMLImageElement || r instanceof t.window.SVGImageElement) {
+				let e = this.queryOriginElement(r.ownerDocument, r);
+				e && await this.loadSingleImage(n, e);
+				continue;
 			}
+			let i = r.getElementsByTagName("img");
+			for (let e = 0; e < i.length; e++) await this.loadSingleImage(n, i[e]);
+			let a = this.queryOriginElement(e.getContentContainer(), r) ?? r, o = a == r ? r.getElementsByTagName("image") : a.getElementsByTagName("image");
+			for (let e = 0; e < o.length; e++) await this.loadSingleImage(n, o[e]);
 		}
 	}
-	async loadSingleImage(t, r) {
-		if (!r || !t) return;
-		let a = r.getAttribute("data-load-state");
-		if (a == "loaded" || a == "loading" || a == "fail") return;
-		r.setAttribute("data-load-state", "loading"), r.onload = () => {
-			r.setAttribute("data-load-state", "loaded");
-		}, r.onerror = () => {
-			r.setAttribute("data-load-state", "fail");
+	queryOriginElement(e, t) {
+		let n = t.getAttribute(o);
+		return !e || r(n) ? t : e.querySelector(`[data-initial-index='${n}']`) ?? t;
+	}
+	async loadSingleImage(e, t) {
+		if (!t || !e || this.isDisposed) return;
+		let n = t.getAttribute("data-load-state");
+		if (n == "loaded" || n == "loading" || n == "fail") return;
+		let i = this.getImageUrl(t);
+		if (r(i)) {
+			t.setAttribute("data-load-state", "fail");
+			return;
+		}
+		t.setAttribute("data-load-state", "loading"), t.onload = () => {
+			t.setAttribute("data-load-state", "loaded"), this.applyOnlyOneImageStyles(t.ownerDocument);
+		}, t.onerror = () => {
+			t.setAttribute("data-load-state", "fail");
 		};
-		let o = r.getAttribute("src") ?? "", s = r.getAttribute("data-src") ?? "";
-		n(s) || (o = s);
-		let l = o;
-		if (!i(l)) {
-			let e = await t.fileParser.getFile(l, t.url, "blob");
-			if (e && e.size > 0) {
-				if (e.type?.toLowerCase() == "image/svg+xml") {
-					let t = m(await e.arrayBuffer()), n = f(t).querySelector("image");
-					if (n) {
-						l = n.getAttribute("xlink:href") ?? n.getAttribute("href");
-						try {
-							let e = await p(l), t = e.width, n = e.height;
-							r.setAttribute("data-width", t.toString()), r.setAttribute("data-height", n.toString());
-							let { columnWidth: i, columnHeight: a } = this.getColumnMetrics();
-							this.forceSetImageHeight(r, i, a, t, n, this.htmlOptions.maxImageHeightRatio);
-						} catch (e) {
-							this.logger.error(e);
-						}
-					} else l = "data:image/svg+xml," + encodeURIComponent(t);
-				} else l = URL.createObjectURL(e), this.addBlobUrl(t, l);
-			} else l = _;
+		let a = await this.resolveLoadUrl(e, i, t);
+		if (this.isDisposed) {
+			this.revokeObjectURL(a, e);
+			return;
 		}
-		if (c(r.tagName, "IMG")) {
-			let e = r;
-			if (e.src = l, e.decode) try {
-				await e.decode();
-			} catch (n) {
-				this.logger.error("image decode failed", "imageUrl", l, n), this.revokeObjectURL(l), setTimeout(async () => {
-					try {
-						let n = await t.fileParser.getFile(o, t.url, "blob");
-						if (n && n.size > 0) {
-							let r = URL.createObjectURL(n);
-							this.addBlobUrl(t, r), e.src = r;
-						} else e.src = _;
-					} catch (t) {
-						this.logger.error(t), e.src = _;
-					}
-				}, 500);
+		if (c(t.tagName, "IMG")) {
+			let n = t;
+			if (n.src = a, !await this.waitForImageReady(n)) {
+				this.revokeObjectURL(a, e), this.retryLoadAfterDecodeFailure(e, n, i);
+				return;
+			}
+			this.applyOnlyOneImageStyles(t.ownerDocument);
+			return;
+		}
+		this.setImageSource(t, a), this.applyOnlyOneImageStyles(t.ownerDocument);
+	}
+	waitForImageReady(e) {
+		return e.complete ? Promise.resolve(this.isImageUsable(e)) : new Promise((t) => {
+			let n = !1, r = (r) => {
+				n || (n = !0, e.removeEventListener("load", i), e.removeEventListener("error", a), t(r));
+			}, i = () => r(!0), a = () => r(this.isImageUsable(e));
+			e.addEventListener("load", i), e.addEventListener("error", a), typeof e.decode == "function" && e.decode().then(() => r(!0)).catch(() => {
+				this.isImageUsable(e) && r(!0);
+			});
+		});
+	}
+	isImageUsable(e) {
+		return e.complete && e.naturalWidth > 0;
+	}
+	retryLoadAfterDecodeFailure(e, t, n) {
+		setTimeout(async () => {
+			if (!this.isDisposed) try {
+				let r = await e.fileParser.getFile(n, e.url, "blob");
+				if (this.isDisposed) return;
+				if (r && r.size > 0) {
+					let n = URL.createObjectURL(r);
+					this.addBlobUrl(e, n), t.src = n;
+				} else t.src = _;
+			} catch (e) {
+				this.logger.error(e), this.isDisposed || (t.src = _);
 			}
-		} else e.isSafari() ? r.href.baseVal = l : r.setAttribute("xlink:href", l);
+		}, 500);
+	}
+	async resolveLoadUrl(e, t, n) {
+		if (i(t)) return t;
+		let r = await e.fileParser.getFile(t, e.url, "blob");
+		if (!r || r.size <= 0) return _;
+		if (r.type?.toLowerCase() == "image/svg+xml") return await this.resolveSvgBlobUrl(e, r, n);
+		let a = URL.createObjectURL(r);
+		return this.addBlobUrl(e, a), a;
+	}
+	async resolveSvgBlobUrl(e, n, a) {
+		let o = t(await n.arrayBuffer()), s = p(o).querySelector("image");
+		if (!s) return "data:image/svg+xml," + encodeURIComponent(o);
+		let c = s.getAttribute("xlink:href") ?? s.getAttribute("href") ?? "";
+		if (r(c)) return "data:image/svg+xml," + encodeURIComponent(o);
+		let l = c, u = c;
+		if (!i(c)) {
+			let t = await e.fileParser.getFile(c, e.url, "blob");
+			if (!t || t.size <= 0) return _;
+			u = URL.createObjectURL(t), this.addBlobUrl(e, u), l = t;
+		}
+		try {
+			let e = await m(l);
+			a.setAttribute("data-width", e.width.toString()), a.setAttribute("data-height", e.height.toString());
+			let { columnWidth: t, columnHeight: n } = this.getColumnMetrics();
+			this.forceSetImageHeight(a, t, n, e.width, e.height, this.htmlOptions.maxImageHeightRatio);
+		} catch (e) {
+			this.logger.error(e);
+		}
+		return u;
 	}
 	async dispose() {
-		this.isDisposed = !0, this.unbindEvents(), this.documentImageSizesSummaries.clear(), this.resetImageSizeTasks = [];
+		this.isDisposed = !0, this.delayLoadOnImageElementsVisible.cancel(), this.delayResetAllImageSize.cancel(), this.unbindEvents(), this.documentImageSizeMaps.clear();
 		for (let e of [...this.blobUrls.keys()]) this.revokeDocumentBlobUrls(e);
 		this.blobUrls.clear();
 	}
 };
 //#endregion
-export { x as HtmlImageLoader };
+export { j as HtmlImageLoader };