@schukai/monster 4.23.5 → 4.24.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 
 
+## [4.24.0] - 2025-06-25
+
+### Add Features
+
+- Add email viewer component and HTML sanitizer [#325](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/325)
+### Changes
+
+- update styles
+- update monster
+- update
+- update webtests
+- update npm
+
+
+
+## [4.23.6] - 2025-06-24
+
+### Bug Fixes
+
+- Clean up event handling by removing preventDefault calls
+
+
+
 ## [4.23.5] - 2025-06-24
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.23.5"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.24.0"}

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

@@ -0,0 +1,171 @@
+/**
+ * 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 { HtmlStyleSheet } from "./stylesheet/html.mjs";
+import { sanitizeHtml } from "../../../dom/sanitize-html.mjs";
+
+export { HtmlContent };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const htmlContentElementSymbol = Symbol("htmlContentElement");
+
+/**
+ * The HtmlContent 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 HtmlContent extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/content/viewer/html-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.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			content: "", // Default content is an empty slot
+
+			features: {
+				sanitize: true,
+			},
+
+			sanitize: {
+				callback: sanitizeHtml.bind(this),
+			},
+		});
+	}
+
+	/**
+	 * 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 HtmlContent component.
+	 * @param content
+	 * @returns {HtmlContent}
+	 */
+	setContent(content) {
+		this.setOption("content", content);
+		return this;
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-html-content";
+	}
+
+	/**
+	 * @return {HtmlContent}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		grabChildren.call(this);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		return [HtmlStyleSheet];
+	}
+}
+
+function grabChildren() {
+	// If there are children, we grab them and set the content
+	if (this.children.length > 0) {
+		const content = Array.from(this.children)
+			.map((child) => child.outerHTML)
+			.join("");
+		this.setContent(content);
+
+		this.innerHTML = "";
+	}
+}
+
+/**
+ * @private
+ * @return {HtmlContent}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[htmlContentElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=content-container]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="content-container" part="content-container"
+             data-monster-replace="path:content | call:sanitizeHtml | default: "
+        ></div>
+    `;
+}
+
+registerCustomElement(HtmlContent);