@schukai/monster 4.150.8 → 4.151.0

package/source/components/content/viewer.mjs

@@ -29,12 +29,16 @@ import "./viewer/message.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { Button } from "../form/button.mjs";
 import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import { sanitizeHtml } from "../../dom/sanitize-html.mjs";
+import { sanitizeViewerHtml } from "./viewer/sanitize-html.mjs";
 
 export { Viewer };
 
-const BLOCKED_HTML_RESOURCE_DATA_URL =
-	"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const SAFE_VIEWER_LINK_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"tel:",
+]);
 
 /**
  * @private
@@ -42,6 +46,24 @@ const BLOCKED_HTML_RESOURCE_DATA_URL =
  */
 const viewerElementSymbol = Symbol("viewerElement");
 
+/** @private @type {symbol} */
+const linkConfirmationElementSymbol = Symbol("linkConfirmationElement");
+
+/** @private @type {symbol} */
+const linkHostElementSymbol = Symbol("linkHostElement");
+
+/** @private @type {symbol} */
+const linkUrlElementSymbol = Symbol("linkUrlElement");
+
+/** @private @type {symbol} */
+const pendingLinkSymbol = Symbol("pendingLink");
+
+/** @private @type {symbol} */
+const linkClickHandlerSymbol = Symbol("linkClickHandler");
+
+/** @private @type {symbol} */
+const linkKeydownHandlerSymbol = Symbol("linkKeydownHandler");
+
 /**
  * @private
  * @type {symbol}
@@ -74,6 +96,16 @@ class Viewer extends CustomElement {
 		return Symbol.for("@schukai/monster/components/content/viewer@@instance");
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		if (this[linkClickHandlerSymbol]) {
+			this.addEventListener("click", this[linkClickHandlerSymbol], true);
+		}
+		if (this[linkKeydownHandlerSymbol]) {
+			this.addEventListener("keydown", this[linkKeydownHandlerSymbol], true);
+		}
+	}
+
 	/**
 	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
 	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
@@ -127,6 +159,14 @@ class Viewer extends CustomElement {
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback?.();
+		if (this[linkClickHandlerSymbol]) {
+			this.removeEventListener("click", this[linkClickHandlerSymbol], true);
+			this[linkClickHandlerSymbol] = null;
+		}
+		if (this[linkKeydownHandlerSymbol]) {
+			this.removeEventListener("keydown", this[linkKeydownHandlerSymbol], true);
+			this[linkKeydownHandlerSymbol] = null;
+		}
 		if (this[downloadHandlerSymbol]) {
 			this.removeEventListener("click", this[downloadHandlerSymbol]);
 			this[downloadHandlerSymbol] = null;
@@ -736,7 +776,7 @@ class Viewer extends CustomElement {
 		if (data instanceof Blob) {
 			blobToText(data)
 				.then((html) => {
-					this.setOption("content", sanitizeViewerHTMLContent(html));
+					this.setOption("content", sanitizeViewerHtml(html));
 				})
 				.catch((error) => {
 					this.dispatchEvent(
@@ -758,7 +798,7 @@ class Viewer extends CustomElement {
 					return response.text();
 				})
 				.then((html) => {
-					this.setOption("content", sanitizeViewerHTMLContent(html));
+					this.setOption("content", sanitizeViewerHtml(html));
 				})
 				.catch((error) => {
 					this.dispatchEvent(
@@ -775,7 +815,7 @@ class Viewer extends CustomElement {
 			throw new Error("HTMLElement or string expected");
 		}
 
-		this.setOption("content", sanitizeViewerHTMLContent(data));
+		this.setOption("content", sanitizeViewerHtml(data));
 	}
 
 	/**
@@ -904,217 +944,203 @@ function blobToText(blob) {
 	});
 }
 
-function sanitizeViewerHTMLContent(html) {
-	const sanitizedHTML = sanitizeHtml(html);
-	const parser = new DOMParser();
-	const doc = parser.parseFromString(sanitizedHTML, "text/html");
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
+	this[linkConfirmationElementSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="external-link-confirmation"]',
+	);
+	this[linkHostElementSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="external-link-host"]',
+	);
+	this[linkUrlElementSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="external-link-url"]',
+	);
+}
 
-	doc.querySelectorAll("*").forEach((element) => {
-		removeCrossOriginResourceAttribute(element, "src");
-		removeCrossOriginResourceAttribute(element, "srcset");
-		removeCrossOriginResourceAttribute(element, "poster");
+/**
+ * @private
+ */
+function initEventHandler() {
+	this[linkClickHandlerSymbol] = (event) => {
+		const path = event.composedPath?.() || [];
+		const actionElement = path.find(
+			(element) =>
+				element instanceof Element &&
+				element.hasAttribute?.("data-monster-link-action"),
+		);
 
-		if (element.hasAttribute("style")) {
-			const safeStyle = sanitizeStyleAttribute(element.getAttribute("style"));
-			if (safeStyle) {
-				element.setAttribute("style", safeStyle);
-			} else {
-				element.removeAttribute("style");
-			}
+		if (actionElement) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleLinkConfirmationAction.call(
+				this,
+				actionElement.getAttribute("data-monster-link-action"),
+			);
+			return;
 		}
-	});
 
-	return doc.body.innerHTML;
-}
+		const link = path.find(
+			(element) => element instanceof Element && element.localName === "a",
+		);
+		if (!link) {
+			return;
+		}
 
-function removeCrossOriginResourceAttribute(element, attributeName) {
-	const value = element.getAttribute(attributeName);
-	if (!value) {
-		return;
-	}
+		const href = link.getAttribute("href")?.trim();
+		if (!href || href.startsWith("#")) {
+			return;
+		}
 
-	if (attributeName === "srcset") {
-		const sameOriginEntries = value
-			.split(",")
-			.map((entry) => entry.trim())
-			.filter(Boolean)
-			.filter((entry) => {
-				const [candidateUrl] = entry.split(/\s+/, 1);
-				return isSameOriginResourceUrl(candidateUrl);
-			});
-
-		if (sameOriginEntries.length > 0) {
-			element.setAttribute(attributeName, sameOriginEntries.join(", "));
+		let url;
+		try {
+			url = new URL(href, document.baseURI);
+		} catch {
+			event.preventDefault();
 			return;
 		}
-	} else if (isSameOriginResourceUrl(value)) {
-		return;
-	}
+		if (!SAFE_VIEWER_LINK_PROTOCOLS.has(url.protocol.toLowerCase())) {
+			event.preventDefault();
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+		showLinkConfirmation.call(this, link, url);
+	};
 
-	if (
-		attributeName === "src" &&
-		element.tagName.toLowerCase() === "img" &&
-		!element.classList.contains("privacyImage")
-	) {
-		element.setAttribute("src", BLOCKED_HTML_RESOURCE_DATA_URL);
-		element.classList.add("privacyImage");
+	this[linkKeydownHandlerSymbol] = (event) => {
+		if (event.key !== "Escape" || this[linkConfirmationElementSymbol]?.hidden) {
+			return;
+		}
+		event.preventDefault();
+		closeLinkConfirmation.call(this, true);
+	};
+
+	this.addEventListener("click", this[linkClickHandlerSymbol], true);
+	this.addEventListener("keydown", this[linkKeydownHandlerSymbol], true);
+	return this;
+}
+
+function showLinkConfirmation(link, url) {
+	const confirmation = this[linkConfirmationElementSymbol];
+	if (!confirmation) {
 		return;
 	}
 
-	element.removeAttribute(attributeName);
-}
+	this[pendingLinkSymbol] = { link, url };
+	this[linkHostElementSymbol].textContent = url.hostname || url.protocol;
+	this[linkUrlElementSymbol].textContent = url.href;
+	confirmation.hidden = false;
 
-function sanitizeStyleAttribute(styleValue) {
-	return styleValue.replace(/url\(([^)]+)\)/gi, (match, rawUrl) => {
-		const cleanedUrl = rawUrl.trim().replace(/^['"]|['"]$/g, "");
-		return isSameOriginResourceUrl(cleanedUrl) ? match : "";
+	queueMicrotask(() => {
+		positionLinkConfirmation(confirmation, link);
+		confirmation.querySelector('[data-monster-link-action="cancel"]')?.focus();
 	});
 }
 
-function isSameOriginResourceUrl(value) {
-	if (!value) {
-		return true;
-	}
-
-	const trimmedValue = value.trim();
-	if (!trimmedValue || trimmedValue.startsWith("#")) {
-		return true;
-	}
+function positionLinkConfirmation(confirmation, link) {
+	const linkRect = link.getBoundingClientRect();
+	const width = confirmation.offsetWidth || 360;
+	const height = confirmation.offsetHeight || 220;
+	const viewportWidth =
+		document.documentElement.clientWidth || window.innerWidth;
+	const viewportHeight =
+		document.documentElement.clientHeight || window.innerHeight;
+	const edge = 16;
+	const gap = 8;
+	const left = Math.max(
+		edge,
+		Math.min(linkRect.left, viewportWidth - width - edge),
+	);
+	const below = linkRect.bottom + gap;
+	const top =
+		below + height <= viewportHeight - edge
+			? below
+			: Math.max(edge, linkRect.top - height - gap);
+
+	confirmation.style.left = `${left}px`;
+	confirmation.style.top = `${top}px`;
+}
 
-	try {
-		const url = new URL(trimmedValue, document.location.href);
-		return (
-			url.origin === document.location.origin ||
-			url.protocol === "data:" ||
-			url.protocol === "blob:"
-		);
-	} catch {
-		return true;
+function handleLinkConfirmationAction(action) {
+	if (action === "cancel") {
+		closeLinkConfirmation.call(this, true);
+		return;
 	}
-}
 
-/**
- * @private
- * @return {Select}
- * @throws {Error} no shadow-root is defined
- */
-function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
+	const pendingLink = this[pendingLinkSymbol];
+	if (!pendingLink || (action !== "open" && action !== "new-window")) {
+		return;
 	}
 
-	this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
+	const target = action === "new-window" ? "_blank" : "_self";
+	window.open(pendingLink.url.href, target, "noopener,noreferrer");
+	closeLinkConfirmation.call(this, false);
 }
 
-/**
- * @private
- */
-function initEventHandler() {
-	return this;
+function closeLinkConfirmation(restoreFocus) {
+	const pendingLink = this[pendingLinkSymbol];
+	this[linkConfirmationElementSymbol].hidden = true;
+	delete this[pendingLinkSymbol];
+	if (restoreFocus) {
+		pendingLink?.link?.focus();
+	}
 }
 
 function getLabels() {
-	switch (getLocaleOfDocument().language) {
-		case "de": // German
-			return {
-				download: "Herunterladen",
-			};
-
-		case "es": // Spanish
-			return {
-				download: "Descargar",
-			};
-
-		case "zh": // Mandarin
-			return {
-				download: "下载",
-			};
-
-		case "hi": // Hindi
-			return {
-				download: "डाउनलोड करें",
-			};
-
-		case "bn": // Bengali
-			return {
-				download: "ডাউনলোড",
-			};
-
-		case "pt": // Portuguese
-			return {
-				download: "Baixar",
-			};
-
-		case "ru": // Russian
-			return {
-				download: "Скачать",
-			};
-
-		case "ja": // Japanese
-			return {
-				download: "ダウンロード",
-			};
-
-		case "pa": // Western Punjabi
-			return {
-				download: "ਡਾਊਨਲੋਡ ਕਰੋ",
-			};
-
-		case "mr": // Marathi
-			return {
-				download: "डाउनलोड करा",
-			};
-
-		case "fr": // French
-			return {
-				download: "Télécharger",
-			};
-
-		case "it": // Italian
-			return {
-				download: "Scarica",
-			};
-
-		case "nl": // Dutch
-			return {
-				download: "Downloaden",
-			};
-
-		case "sv": // Swedish
-			return {
-				download: "Ladda ner",
-			};
-
-		case "pl": // Polish
-			return {
-				download: "Pobierz",
-			};
-
-		case "da": // Danish
-			return {
-				download: "Hent",
-			};
-
-		case "fi": // Finnish
-			return {
-				download: "Lataa",
-			};
-
-		case "no": // Norwegian
-			return {
-				download: "Last ned",
-			};
-
-		case "cs": // Czech
-			return {
-				download: "Stáhnout",
-			};
-
-		default:
-			return {
-				download: "Download",
-			};
-	}
+	const language = getLocaleOfDocument().language;
+	const downloadLabels = {
+		en: "Download",
+		de: "Herunterladen",
+		es: "Descargar",
+		zh: "下载",
+		hi: "डाउनलोड करें",
+		bn: "ডাউনলোড",
+		pt: "Baixar",
+		ru: "Скачать",
+		ja: "ダウンロード",
+		pa: "ਡਾਊਨਲੋਡ ਕਰੋ",
+		mr: "डाउनलोड करा",
+		fr: "Télécharger",
+		it: "Scarica",
+		nl: "Downloaden",
+		sv: "Ladda ner",
+		pl: "Pobierz",
+		da: "Hent",
+		fi: "Lataa",
+		no: "Last ned",
+		cs: "Stáhnout",
+	};
+	const linkLabels =
+		language === "de"
+			? {
+					externalLinkTitle: "Externen Link öffnen?",
+					externalLinkMessage: "Dieser Link führt zu:",
+					externalLinkCancel: "Abbrechen",
+					externalLinkOpen: "Öffnen",
+					externalLinkNewWindow: "In neuem Fenster öffnen",
+				}
+			: {
+					externalLinkTitle: "Open external link?",
+					externalLinkMessage: "This link leads to:",
+					externalLinkCancel: "Cancel",
+					externalLinkOpen: "Open",
+					externalLinkNewWindow: "Open in new window",
+				};
+
+	return {
+		download: downloadLabels[language] || "Download",
+		...linkLabels,
+	};
 }
 
 /**
@@ -1127,7 +1153,26 @@ function getTemplate() {
         <div id="viewer" data-monster-role="viewer" part="viewer"
              data-monster-replace="path:content"
              data-monster-attributes="class path:classes.viewer">
-        </div>`;
+        </div>
+        <section data-monster-role="external-link-confirmation" part="external-link-confirmation"
+                 role="dialog" aria-labelledby="external-link-title"
+                 aria-describedby="external-link-message external-link-url" hidden>
+            <strong id="external-link-title" data-monster-replace="path:labels.externalLinkTitle"></strong>
+            <p id="external-link-message" data-monster-replace="path:labels.externalLinkMessage"></p>
+            <strong data-monster-role="external-link-host"></strong>
+            <code id="external-link-url" data-monster-role="external-link-url"></code>
+            <div data-monster-role="external-link-actions">
+                <button type="button" class="monster-button-outline-secondary"
+                        data-monster-link-action="cancel"
+                        data-monster-replace="path:labels.externalLinkCancel"></button>
+                <button type="button" class="monster-button-primary"
+                        data-monster-link-action="open"
+                        data-monster-replace="path:labels.externalLinkOpen"></button>
+                <button type="button" class="monster-button-outline-primary"
+                        data-monster-link-action="new-window"
+                        data-monster-replace="path:labels.externalLinkNewWindow"></button>
+            </div>
+        </section>`;
 }
 
 registerCustomElement(Viewer);