@schukai/monster 4.32.1 → 4.33.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.33.0] - 2025-07-12
+
+### Add Features
+
+- Add image error handling and improve styles
+### Changes
+
+- update tests
+
+
+
+## [4.32.2] - 2025-07-12
+
+### Bug Fixes
+
+- Update Message Viewer - fetch URL and improve error handling
+
+
+
 ## [4.32.1] - 2025-07-08
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@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.32.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@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.33.0"}

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

@@ -14,10 +14,10 @@
 
 import { instanceSymbol } from "../../../constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
-	updaterTransformerMethodsSymbol,
+  assembleMethodSymbol,
+  CustomElement,
+  registerCustomElement,
+  updaterTransformerMethodsSymbol,
 } from "../../../dom/customelement.mjs";
 import { HtmlStyleSheet } from "./stylesheet/html.mjs";
 import { sanitizeHtml } from "../../../dom/sanitize-html.mjs";
@@ -38,106 +38,133 @@ const htmlContentElementSymbol = Symbol("htmlContentElement");
  * @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];
-	}
+  /**
+   * 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;
+      },
+      addErrorHandler: (value) => {
+        // Add error handling for images
+        if (typeof value === "string") {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(value, "text/html");
+          const images = doc.querySelectorAll("img");
+          images.forEach((img) => {
+            img.setAttribute(
+              "onerror",
+              "this.classList.add('notFoundImage'); this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';",
+            );
+            img.classList.add("notFoundError");
+          });
+
+          return doc.body.innerHTML;
+        }
+        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);
+    initEventHandler.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 = "";
-	}
+  // 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 initEventHandler() {
+  return this;
 }
 
 /**
@@ -145,14 +172,14 @@ function grabChildren() {
  * @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;
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+
+  this[htmlContentElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=content-container]",
+  );
+  return this;
 }
 
 /**
@@ -160,10 +187,10 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <div data-monster-role="content-container" part="content-container"
-             data-monster-replace="path:content | call:sanitizeHtml | default: "
+             data-monster-replace="path:content | call:sanitizeHtml | call:addErrorHandler | default: "
         ></div>
     `;
 }