@schukai/monster 4.23.5 → 4.24.0

package/source/components/content/viewer/message.mjs

@@ -0,0 +1,704 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+	updaterTransformerMethodsSymbol,
+} from "../../../dom/customelement.mjs";
+
+import { sanitizeHtml } from "../../../dom/sanitize-html.mjs";
+import { MessageStyleSheet } from "./stylesheet/message.mjs";
+import { isArray, isObject } from "../../../types/is.mjs";
+import { findTargetElementFromEvent } from "../../../dom/events.mjs";
+import { getLocaleOfDocument } from "../../../dom/locale.mjs";
+
+export { MessageContent };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const containerElementSymbol = Symbol("containerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const contentContainerElementSymbol = Symbol("contentContainerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const embeddedImageUrlsSymbol = Symbol("embeddedImageUrls");
+
+/**
+ * The MessageContent component is used to display arbitrary HTML content within its shadow DOM.
+ * It provides options for sanitization to prevent XSS attacks.
+ *
+ * @copyright schukai GmbH
+ * @summary An HTML content component that can display sanitized HTML.
+ */
+class MessageContent extends CustomElement {
+	constructor() {
+		super();
+		this[embeddedImageUrlsSymbol] = [];
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/content/viewer/message-content@@instance",
+		);
+	}
+
+	/**
+	 * 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}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {string} content The HTML string to be displayed.
+	 * @property {Object} features Features to enable or disable specific functionalities.
+	 * @property {boolean} features.sanitize Whether to sanitize the HTML content (removes scripts, etc.). Defaults to true.
+	 * @property {object} sanitize Sanitization options.
+	 * @property {function} sanitize.callback A callback function to sanitize the HTML content. Defaults to a built-in sanitizer. You can use libraries like DOMPurify for this purpose.
+	 * @property {Object} message The message object containing email details.
+	 * @property {Object} message.from The sender's information.
+	 * @property {string|null} message.from.name The sender's name.
+	 * @property {string|null} message.from.address The sender's email address.
+	 * @property {Object} message.to The recipient's information.
+	 * @property {string|null} message.to.name The recipient's name.
+	 * @property {string|null} message.to.address The recipient's email address.
+	 * @property {Array} message.cc An array of CC recipients.
+	 * @property {string|null} message.subject The subject of the email.
+	 * @property {string|null} message.date The date of the email, formatted as a string.
+	 * @property {string|null} message.messageID The unique identifier of the email message.
+	 * @property {Array} message.parts An array of parts of the email, which can include text, HTML, attachments, etc.
+	 * @property {Array} message.attachments An array of attachments processed from the email parts.
+	 * @property {Object} message.headers Additional headers of the email.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			templateFormatter: {
+				marker: {
+					open: null,
+					close: null,
+				},
+				i18n: true,
+			},
+
+			content: "", // Default content is an empty slot
+
+			features: {
+				sanitize: true, // Enable sanitization by default
+			},
+
+			sanitize: {
+				callback: sanitizeHtml.bind(this),
+			},
+
+			labels: getTranslations(),
+
+			message: {
+				from: {
+					name: null,
+					address: null,
+				},
+				to: {
+					name: null,
+					address: null,
+				},
+				cc: [],
+				subject: null,
+				date: null,
+				messageID: null,
+				parts: [],
+				attachments: [], // Added for processed attachments
+				headers: [],
+			},
+		});
+	}
+
+	/**
+	 * Returns the updater transformer methods for this component.
+	 * @returns {{sanitizeHtml: ((function(*): (*))|*)}}
+	 */
+	[updaterTransformerMethodsSymbol]() {
+		return {
+			sanitizeHtml: (value) => {
+				if (this.getOption("features.sanitize")) {
+					return this.getOption("sanitize.callback")(value);
+				}
+				return value;
+			},
+		};
+	}
+
+	/**
+	 * Sets the content of the MessageContent component.
+	 * @param {Object} message The message object containing parts, headers, etc.
+	 * @returns {MessageContent}
+	 */
+	setMessage(message) {
+		if (!isObject(message)) {
+			throw new Error("message must be an object");
+		}
+
+		this[embeddedImageUrlsSymbol].forEach((url) => URL.revokeObjectURL(url));
+		this[embeddedImageUrlsSymbol] = [];
+
+		this.setOption("message.from.name", message?.from?.name || null);
+		this.setOption("message.from.address", message?.from?.address || null);
+		this.setOption("message.to.name", message?.to?.name || null);
+		this.setOption("message.to.address", message?.to?.address || null);
+
+		const dateTime = message?.date ? new Date(message.date) : null;
+		const localeDateTime = dateTime?.toLocaleString(navigator.language, {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+		});
+
+		this.setOption("message.date", localeDateTime || null);
+		this.setOption("message.cc", message?.cc || []);
+		this.setOption("message.subject", message?.subject || null);
+		this.setOption("message.messageID", message?.messageID || null);
+
+		const headers = [];
+		for (const [key, value] of Object.entries(message?.headers || {})) {
+			if (key && value) {
+				let valueString = value;
+				if (isArray(valueString)) {
+					valueString = "<ul>";
+					for (const item of value) {
+						valueString += `<li>${item}</li>`;
+					}
+					valueString += "</ul>";
+				}
+
+				headers.push({
+					key: key,
+					value: valueString,
+				});
+			}
+		}
+
+		this.setOption("message.headers", headers || []);
+
+		let htmlContent = "";
+		let plainTextContent = "";
+		const attachments = [];
+		const embeddedImages = {};
+
+		const processParts = (parts) => {
+			if (!parts || !Array.isArray(parts)) {
+				return;
+			}
+
+			for (const part of parts) {
+				try {
+					if (part.parts && part.parts.length > 0) {
+						processParts(part.parts);
+					} else if (
+						part.dispositionType === "attachment" &&
+						part.contentType
+					) {
+						part["index"] = attachments.length; // Füge Index hinzu, um die Reihenfolge zu verfolgen
+						part["fileSize"] = part.content ? part.content.length : 0; // Dateigröße in Bytes
+						part["humanReadableSize"] = part.content
+							? `${(part.content.length / 1024).toFixed(2)} KB`
+							: "0 KB"; // Menschlich lesbare Größe
+
+						attachments.push(part);
+					} else if (
+						part.contentType &&
+						part.contentType.startsWith("text/html")
+					) {
+						htmlContent = part.content;
+					} else if (
+						part.contentType &&
+						part.contentType.startsWith("text/plain")
+					) {
+						if (!htmlContent) {
+							plainTextContent = part.content;
+						}
+					} else if (
+						part.dispositionType === "inline" &&
+						part.contentType &&
+						part.contentType.startsWith("image/")
+					) {
+						const cid =
+							part?.["contentId"] ||
+							(part.filename
+								? part.filename.split(".").slice(0, -1).join(".")
+								: null);
+						if (cid) {
+							embeddedImages[cid] = part;
+						} else {
+							console.warn(
+								"Inline image part found without Content-ID or filename:",
+								part,
+							);
+						}
+					}
+				} catch (e) {
+					console.error("Error processing part:", part, e);
+				}
+			}
+		};
+
+		if (message?.parts) {
+			processParts(message.parts);
+		}
+
+		if (!htmlContent && plainTextContent) {
+			htmlContent = plainTextContent.replace(/\n/g, "<br>");
+		}
+
+		for (const cid in embeddedImages) {
+			const imagePart = embeddedImages[cid];
+			if (imagePart.content && imagePart.contentType) {
+				try {
+					const base64ImageContent = imagePart.content.replace(/\s/g, "");
+					const imageContentType = imagePart.contentType;
+					let cleanCid = imagePart.contentId;
+
+					if (cleanCid) {
+						cleanCid = cleanCid.trim();
+						cleanCid = cleanCid.replace(/[\u0000-\u001F\u007F-\u009F]/g, ""); // Steuerzeichen entfernen
+					} else {
+						cleanCid = imagePart.filename
+							? imagePart.filename.split(".").slice(0, -1).join(".")
+							: null;
+						if (!cleanCid) {
+							console.warn(
+								"Content-ID or filename not found for an image part. Cannot replace CID in HTML.",
+							);
+							continue; // Überspringe dieses Bild, wenn CID fehlt
+						}
+					}
+
+					const decodedContent = atob(base64ImageContent);
+					const uint8Array = new Uint8Array(decodedContent.length);
+					for (let i = 0; i < decodedContent.length; i++) {
+						uint8Array[i] = decodedContent.charCodeAt(i);
+					}
+
+					const blob = new Blob([uint8Array], { type: imageContentType });
+					const objectUrl = URL.createObjectURL(blob);
+					this[embeddedImageUrlsSymbol].push(objectUrl); // Speichern zur späteren Widerrufung
+
+					// Den CID für die RegExp escapen, um Sonderzeichen zu behandeln
+					const escapedCid = cleanCid.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+					const cidRegex = new RegExp(
+						`src=["']cid:[^"']*?${escapedCid}[^"']*?["']`,
+						"gi",
+					);
+
+					htmlContent = htmlContent.replace(cidRegex, `src="${objectUrl}"`);
+				} catch (e) {
+					console.error(
+						`Error processing embedded image with CID '${cid}':`,
+						e,
+					);
+					htmlContent = htmlContent.replace(
+						new RegExp(`cid:${cid}`, "g"),
+						"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAA C0lEQVR42mP8Xw8AAo8GgAAAAgA+cQIPQAAAABJRU5ErkJggg==",
+					);
+				}
+			}
+		}
+
+		this[contentContainerElementSymbol].setOption("content", htmlContent);
+		this.setOption("message.attachments", attachments);
+
+		this.setOption("message.parts", message?.parts || []);
+
+		return this;
+	}
+
+	/**
+	 * Handles the click event for an attachment download button.
+	 * @param {Event} event
+	 * @param {Object} part The attachment part data.
+	 */
+	onDownloadAttachmentClick(event, part) {
+		event.preventDefault();
+
+		if (part.content && part.filename && part.contentType) {
+			try {
+				// Assuming part.content is base64 encoded. Adjust if your content is raw binary.
+				const decodedContent = atob(part.content);
+				const uint8Array = new Uint8Array(decodedContent.length);
+				for (let i = 0; i < decodedContent.length; i++) {
+					uint8Array[i] = decodedContent.charCodeAt(i);
+				}
+				const blob = new Blob([uint8Array], { type: part.contentType });
+
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = part.filename;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+				URL.revokeObjectURL(url);
+			} catch (e) {
+				console.error("Error downloading attachment:", e);
+				alert(
+					"Could not download file. Content might not be base64 or is corrupted.",
+				);
+			}
+		} else {
+			alert("Attachment content not available for download.");
+		}
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-message-content";
+	}
+
+	/**
+	 * @return {MessageContent}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		return [MessageStyleSheet];
+	}
+
+	/**
+	 * Cleans up any resources when the element is removed from the DOM.
+	 * Note: This method relies on the CustomElement base class calling it.
+	 * If CustomElement does not have a disconnectedCallback equivalent,
+	 * manual cleanup or a different strategy will be needed.
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback?.(); // Call super's disconnectedCallback if it exists
+		this[embeddedImageUrlsSymbol].forEach((url) => URL.revokeObjectURL(url));
+		this[embeddedImageUrlsSymbol] = [];
+	}
+}
+
+/**
+ * @private
+ * @return {MessageContent}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[containerElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=container]",
+	);
+
+	this[contentContainerElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=content-container]",
+	);
+
+	return this;
+}
+
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				content: "Inhalt",
+				headers: "Kopfzeilen",
+			};
+		case "es":
+			return {
+				content: "Contenido",
+				headers: "Encabezados",
+			};
+		case "zh":
+			return {
+				content: "内容",
+				headers: "标题",
+			};
+
+		case "hi":
+			return {
+				content: "सामग्री",
+				headers: "शीर्षक",
+			};
+
+		case "bn":
+			return {
+				content: "বিষয়বস্তু",
+				headers: "শিরোনাম",
+			};
+
+		case "pt": // Portuguese
+			return {
+				content: "Conteúdo",
+				headers: "Cabeçalhos",
+			};
+
+		case "ru": // Russian
+			return {
+				content: "Содержание",
+				headers: "Заголовки",
+			};
+
+		case "ja": // Japanese
+			return {
+				content: "コンテンツ",
+				headers: "ヘッダー",
+			};
+
+		case "pa": // Western Punjabi
+			return {
+				content: "ਸਮੱਗਰੀ",
+				headers: "ਸਿਰਲੇਖ",
+			};
+
+		case "mr": // Marathi
+			return {
+				content: "सामग्री",
+				headers: "शीर्षके",
+			};
+
+		case "fr": // French
+			return {
+				content: "Contenu",
+				headers: "En-têtes",
+			};
+
+		case "it": // Italian
+			return {
+				content: "Contenuto",
+				headers: "Intestazioni",
+			};
+
+		case "nl": // Dutch
+			return {
+				content: "Inhoud",
+				headers: "Headers",
+			};
+
+		case "sv": // Swedish
+			return {
+				content: "Innehåll",
+				headers: "Rubriker",
+			};
+
+		case "pl": // Polish
+			return {
+				content: "Zawartość",
+				headers: "Nagłówki",
+			};
+
+		case "da": // Danish
+			return {
+				content: "Indhold",
+				headers: "Overskrifter",
+			};
+
+		case "no": // Norwegian
+			return {
+				content: "Innhold",
+				headers: "Overskrifter",
+			};
+
+		case "cs": // Czech
+			return {
+				content: "Obsah",
+				headers: "Hlavičky",
+			};
+
+		default:
+			return {
+				content: "Content",
+				headers: "Headers",
+			};
+	}
+}
+
+/**
+ * @private
+ * @param index
+ * @param attachments
+ */
+function downloadAttachmentByIndex(index, attachments) {
+	const part = attachments[index];
+	if (!part) {
+		console.error(`Attachment mit Index ${index} nicht gefunden.`);
+		return;
+	}
+
+	const { filename, contentType, content } = part;
+
+	try {
+		let decodedContent;
+		if (contentType.startsWith("text/")) {
+			// Check if it's a text type
+			decodedContent = content; // Content is plain text
+		} else {
+			decodedContent = atob(content); // Assume base64 for other types
+		}
+
+		const len = decodedContent.length;
+		const bytes = new Uint8Array(len);
+		for (let i = 0; i < len; i++) {
+			bytes[i] = decodedContent.charCodeAt(i);
+		}
+
+		const blob = new Blob([bytes], { type: contentType });
+		const dataUrl = URL.createObjectURL(blob);
+
+		const a = document.createElement("a");
+		a.style.display = "none";
+		a.href = dataUrl;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+
+		URL.revokeObjectURL(dataUrl);
+	} catch (e) {
+		console.error("Error downloading attachment:", e);
+	}
+}
+
+/**
+ * Initializes the event handler for the MessageContent component.
+ * @private
+ * @returns {initEventHandler}
+ */
+function initEventHandler() {
+	this[containerElementSymbol].addEventListener("click", (event) => {
+		const card = findTargetElementFromEvent(
+			event,
+			"data-monster-role",
+			"attachment",
+		);
+		if (card) {
+			const index = card.getAttribute("data-monster-index");
+			const attachments = this.getOption("message.attachments");
+			if (
+				index !== null &&
+				index !== undefined &&
+				attachments &&
+				Array.isArray(attachments)
+			) {
+				const parsedIndex = parseInt(index, 10);
+				if (
+					!isNaN(parsedIndex) &&
+					parsedIndex >= 0 &&
+					parsedIndex < attachments.length
+				) {
+					downloadAttachmentByIndex(parsedIndex, attachments);
+				} else {
+					this.dispatchEvent(
+						new CustomEvent("error", {
+							detail: {
+								message: `Invalid attachment index: ${index}. Must be a number between 0 and ${attachments.length - 1}.`,
+							},
+						}),
+					);
+				}
+			}
+		}
+	});
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+
+        <template id="attachments">
+            <div class="attachments">
+                <div class="attachment-card"
+                     data-monster-role="attachment"
+                     data-monster-attributes="data-monster-index path:attachments.index">
+                    <div class="attachment-icon downloadIcon" title="Download"></div>
+                    <div class="attachment-info">
+                        <strong class="attachment-filename"
+                                data-monster-attributes="title path:attachments.filename | default:—"
+                                data-monster-replace="path:attachments.filename | default:—"></strong>
+                        <span class="attachment-size"
+                              data-monster-replace="path:attachments.humanReadableSize | default:—"></span>
+                    </div>
+                </div>
+            </div>
+        </template>
+        
+        <template id="headers">
+            <div data-monster-replace="path:headers.key">
+            </div>
+            <div class="header-value" data-monster-replace="path:headers.value | default:—"></div>
+        </template>
+        
+        
+        <div data-monster-role="container" part="container">
+            <div class="emailContainer">
+                <div class="emailHeader">
+                    <div><strong><span data-monster-replace="path:message.from.name | default:—"></span> <span
+                            class="reduced" data-monster-replace="path:message.from.address"></span></strong></div>
+                    <div class="emailDate" data-monster-replace="path:message.date | default:—"></div>
+                    <div class="emailSubject" data-monster-replace="path:message.subject | default:—"></div>
+                </div>
+
+                <monster-tabs>
+                    <div data-monster-button-label="i18n{content}">
+                        <monster-html-content
+                                class="emailContent" data-monster-role="content-container">
+                        </monster-html-content>
+                        <div data-monster-role="attachments"
+                             data-monster-insert="attachments path:message.attachments"></div>
+                    </div>
+                    <div data-monster-button-label="i18n{headers}">
+                        <div data-monster-insert="headers path:message.headers" data-monster-role="headers-container"></div>
+                    </div>
+                </monster-tabs>
+
+            </div>
+        </div>
+    `;
+}
+
+registerCustomElement(MessageContent);

package/source/components/content/viewer/style/html.pcss

@@ -0,0 +1,10 @@
+
+
+div {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}