@schukai/monster 4.20.0 → 4.21.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+## [4.21.0] - 2025-06-22
+
+### Add Features
+
+- Add Markdown parser and HTML converter [#324](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/324)
+
+
+
+## [4.20.1] - 2025-06-12
+
+### Bug Fixes
+
+- update css styles
+- update css collapse
+### Changes
+
+- move issues [#323](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/323)
+
+
+
 ## [4.20.0] - 2025-06-11
 
 ### Add Features

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.20.0"}
+{"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.21.0"}

package/source/components/content/viewer.mjs

@@ -23,6 +23,7 @@ import { instanceSymbol } from "../../constants.mjs";
 import { isString } from "../../types/is.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { MediaType, parseMediaType } from "../../types/mediatype.mjs";
+import { MarkdownToHTML } from "../../text/markdown-parser.mjs";
 
 export { Viewer };
 
@@ -33,7 +34,7 @@ export { Viewer };
 const viewerElementSymbol = Symbol("viewerElement");
 
 /**
- * The Viewer component is used to show a PDF, HTML or Image.
+ * The Viewer component is used to show a PDF, HTML, or Image.
  *
  * @fragments /fragments/components/content/viewer
  *
@@ -42,7 +43,7 @@ const viewerElementSymbol = Symbol("viewerElement");
  * @example /examples/components/content/html-viewer with HTML content
  *
  * @copyright schukai GmbH
- * @summary A simple viewer component for PDF, HTML and images.
+ * @summary A simple viewer component for PDF, HTML, and images.
  */
 class Viewer extends CustomElement {
 	/**
@@ -64,6 +65,12 @@ class Viewer extends CustomElement {
 	 * @property {string} content Content to be displayed in the viewer
 	 * @property {Object} classes Css classes
 	 * @property {string} classes.viewer Css class for the viewer
+	 * @property {Object} renderers Renderers for different media types
+	 * @property {function} renderers.image Function to render image content
+	 * @property {function} renderers.html Function to render HTML content
+	 * @property {function} renderers.pdf Function to render PDF content
+	 * @property {function} renderers.plaintext Function to render plain text content
+	 * @property {function} renderers.markdown Function to render Markdown content
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -74,63 +81,93 @@ class Viewer extends CustomElement {
 			classes: {
 				viewer: "",
 			},
+			renderers : {
+				image: this.setImage,
+				html: this.setHTML,
+				pdf: this.setPDF,
+				plaintext: this.setPlainText,
+				markdown: this.setMarkdown,
+			}
 		});
 	}
 
 	/**
-	 * Sets the content of an element based on the provided content and media type.
+	 * Sets the content of the viewer by processing `data` according to the specified `mediaType`.
+	 * If no `mediaType` is provided, it defaults to "text/plain".
+	 * The method uses an appropriate renderer based on the media type to process and display the content.
 	 *
-	 * @param {string} content - The content to be set.
-	 * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
-	 * @return {void} This method does not return a value.
-	 * @throws {Error} Throws an error if shadowRoot is not defined.
+	 * @param {any} data - The content to be displayed in the viewer.
+	 * @param {string} [mediaType="text/plain"] - The media type of the content to determine the appropriate renderer.
+	 * @return {void} This method does not return a value, but processes the content or throws an exception on failure.
+	 * @throws {Error} Throws an error if there is no shadow root defined or if there is an issue with rendering `data`.
 	 */
-	setContent(content, mediaType = "text/plain") {
+	setContent(data, mediaType = "text/plain") {
 		if (!this.shadowRoot) {
 			throw new Error("no shadow-root is defined");
 		}
 
-		let type;
-		try {
-			const m = new parseMediaType(mediaType);
-			switch (m.type) {
-				case "image":
-					return this.setImage(content);
-			}
 
-			mediaType = m.toString();
-		} catch (error) {
-			type = null;
+		let mt;
+		try {
+			mt = new parseMediaType(mediaType).toString();
+		} catch {
+			mt = "text/plain";
 		}
+		if (!mt) mt = "text/plain";
+
+		const { renderers } = this.options;
+		const primaryType = mt.split("/")[0];
+		const renderer =
+			renderers[mt] ||
+			renderers[primaryType] ||
+			((d) => this.setPlainText(d));
 
-		if (mediaType === undefined || mediaType === null || mediaType === "") {
-			mediaType = "text/plain";
+		try {
+			const result = renderer.call(this, data);
+			if (result && typeof result.then === "function") {
+				result.catch((err) => {
+					this.dispatchEvent(new CustomEvent("viewer-error", { detail: err }));
+				});
+			}
+		} catch (err) {
+			this.dispatchEvent(new CustomEvent("viewer-error", { detail: err }));
+			throw new Error(err);
 		}
+	}
+
+	/**
+	 * Renders Markdown content using built-in or custom Markdown parser.
+	 * Overrideable via `customRenderers['text/markdown']`.
+	 *
+	 * @param {string|Blob} data
+	 */
+	setMarkdown(data) {
+		const render = (markdownText) => {
+			try {
+				const html = MarkdownToHTML.convert(markdownText);
+				this.setHTML(html);
+			} catch (error) {
+				this.setPlainText(markdownText); // Fallback
+			}
+		};
 
-		switch (mediaType) {
-			case "text/html":
-				this.setHTML(content);
-				break;
-			case "text/plain":
-				this.setPlainText(content);
-				break;
-			case "application/pdf":
-				this.setPDF(content);
-				break;
-			case "image/png":
-			case "image/jpeg":
-			case "image/gif":
-				this.setImage(content);
-				break;
-			default:
-				this.setOption("content", content);
+		if (data instanceof Blob) {
+			blobToText(data)
+				.then(render)
+				.catch((err) => {
+					this.setPlainText("[Invalid Markdown]");
+				});
+		} else if (isString(data)) {
+			render(data);
+		} else {
+			this.setPlainText("[Unsupported Markdown input]");
 		}
 	}
 
 	/**
 	 * Configures and embeds a PDF document into the application with customizable display settings.
 	 *
-	 * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL or base64 string.
+	 * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string.
 	 * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
 	 * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
 	 * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
@@ -163,6 +200,7 @@ class Viewer extends CustomElement {
 
 			pdfURL = data;
 		} else {
+			this.dispatchEvent(new CustomEvent("viewer-error", { detail: "Blob or URL expected" }));
 			throw new Error("Blob or URL expected");
 		}
 
@@ -188,16 +226,20 @@ class Viewer extends CustomElement {
 		} else if (isString(data)) {
 			// nothing to do
 		} else {
+			this.dispatchEvent(new CustomEvent("viewer-error", { detail: "Blob or URL expected" }));
 			throw new Error("Blob or URL expected");
 		}
 
-		this.setOption("content", '<img src="' + data + '" alt="image" />');
+		this.setOption(
+			"content",
+			`<img style="max-width: 100%" src="${data}" alt="image" part="image">`
+		);
 	}
 
 	/**
 	 *
 	 * if the data is a string, it is interpreted as HTML.
-	 * if the data is an url, the HTML is loaded from the url and set as content.
+	 * if the data is a URL, the HTML is loaded from the url and set as content.
 	 * if the data is an HTMLElement, the outerHTML is used as content.
 	 *
 	 * @param {HTMLElement|URL|string|Blob} data
@@ -209,6 +251,7 @@ class Viewer extends CustomElement {
 					this.setOption("content", html);
 				})
 				.catch((error) => {
+					this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
 					throw new Error(error);
 				});
 
@@ -228,9 +271,11 @@ class Viewer extends CustomElement {
 					this.setOption("content", html);
 				})
 				.catch((error) => {
+					this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
 					throw new Error(error);
 				});
 		} else {
+			this.dispatchEvent(new CustomEvent("viewer-error", { detail: "HTMLElement or string expected" }));
 			throw new Error("HTMLElement or string expected");
 		}
 
@@ -265,6 +310,7 @@ class Viewer extends CustomElement {
 					this.setOption("content", mkPreSpan(text));
 				})
 				.catch((error) => {
+					this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
 					throw new Error(error);
 				});
 
@@ -289,9 +335,11 @@ class Viewer extends CustomElement {
 					this.setOption("content", mkPreSpan(text));
 				})
 				.catch((error) => {
+					this.dispatchEvent(new CustomEvent("viewer-error", { detail: error }));
 					throw new Error(error);
 				});
 		} else {
+			this.dispatchEvent(new CustomEvent("viewer-error", { detail: "HTMLElement or string expected" }));
 			throw new Error("HTMLElement or string expected");
 		}
 

package/source/components/datatable/columnbar.mjs

@@ -23,9 +23,9 @@ import { clone } from "../../util/clone.mjs";
 import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
 import { createPopper } from "@popperjs/core";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import {hasObjectLink} from "../../dom/attributes.mjs";
-import {customElementUpdaterLinkSymbol} from "../../dom/constants.mjs";
-import {getGlobalObject} from "../../types/global.mjs";
+import { hasObjectLink } from "../../dom/attributes.mjs";
+import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
+import { getGlobalObject } from "../../types/global.mjs";
 
 export { ColumnBar };
 
@@ -89,10 +89,7 @@ class ColumnBar extends CustomElement {
 	 * @returns {Map<unknown, unknown>}
 	 */
 	get customization() {
-		return new Map([
-			...super.customization,
-			["templateFormatter.i18n", true],
-		]);
+		return new Map([...super.customization, ["templateFormatter.i18n", true]]);
 	}
 
 	/**
@@ -130,14 +127,23 @@ class ColumnBar extends CustomElement {
 			const isOutsideElement = !path.includes(this);
 			const isOutsideShadow = !path.includes(this.shadowRoot);
 
-			if (isOutsideElement && isOutsideShadow && this[settingsLayerElementSymbol]) {
+			if (
+				isOutsideElement &&
+				isOutsideShadow &&
+				this[settingsLayerElementSymbol]
+			) {
 				this[settingsLayerElementSymbol].classList.remove("visible");
 			}
-		}
-
-		getGlobalObject("document").addEventListener("click" , this[closeEventHandlerSymbol]);
-		getGlobalObject("document").addEventListener("touch" , this[closeEventHandlerSymbol]);
+		};
 
+		getGlobalObject("document").addEventListener(
+			"click",
+			this[closeEventHandlerSymbol],
+		);
+		getGlobalObject("document").addEventListener(
+			"touch",
+			this[closeEventHandlerSymbol],
+		);
 	}
 
 	/**
@@ -149,12 +155,17 @@ class ColumnBar extends CustomElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		if(this[closeEventHandlerSymbol]) {
-			getGlobalObject("document").removeEventListener("click", this[closeEventHandlerSymbol]);
-			getGlobalObject("document").removeEventListener("touch", this[closeEventHandlerSymbol]);
+		if (this[closeEventHandlerSymbol]) {
+			getGlobalObject("document").removeEventListener(
+				"click",
+				this[closeEventHandlerSymbol],
+			);
+			getGlobalObject("document").removeEventListener(
+				"touch",
+				this[closeEventHandlerSymbol],
+			);
 			this[closeEventHandlerSymbol] = null;
 		}
-
 	}
 
 	/**

package/source/components/datatable/filter.mjs

@@ -1260,8 +1260,8 @@ function collectSearchQueries() {
 								return "";
 							}
 
-							if(!op || !isString(op)) op = "OR";
-							op = " "+op.toUpperCase().trim()+" ";
+							if (!op || !isString(op)) op = "OR";
+							op = " " + op.toUpperCase().trim() + " ";
 
 							let query = "";
 							value.forEach((v) => {
@@ -1282,8 +1282,8 @@ function collectSearchQueries() {
 								return "";
 							}
 
-							if(!op || !isString(op)) op = "OR";
-							op = " "+op.toUpperCase().trim()+" ";
+							if (!op || !isString(op)) op = "OR";
+							op = " " + op.toUpperCase().trim() + " ";
 
 							let query = "";
 							value.forEach((v) => {