@schukai/monster 4.68.0 → 4.69.1

package/source/components/files/file-manager.mjs

@@ -39,6 +39,7 @@ import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { CommonStyleSheet } from "../stylesheet/common.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { FileManagerStyleSheet } from "./stylesheet/file-manager.mjs";
+import "../content/image-editor.mjs";
 import { ATTRIBUTE_BUTTON_LABEL } from "../form/constants.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 
@@ -235,13 +236,13 @@ class FileManager extends CustomElement {
 				readOnly: false,
 				defaultTag: "textarea",
 				byMimeType: {
-					"image/png": "canvas",
-					"image/jpeg": "canvas",
-					"image/gif": "canvas",
-					"image/svg+xml": "canvas",
-					"image/webp": "canvas",
-					"image/bmp": "canvas",
-					"image/x-icon": "canvas",
+					"image/png": "monster-image-editor",
+					"image/jpeg": "monster-image-editor",
+					"image/gif": "monster-image-editor",
+					"image/svg+xml": "monster-image-editor",
+					"image/webp": "monster-image-editor",
+					"image/bmp": "monster-image-editor",
+					"image/x-icon": "monster-image-editor",
 					"text/plain": "textarea",
 					"text/markdown": "textarea",
 					"text/css": "textarea",
@@ -1348,11 +1349,18 @@ function updateEditorSizes() {
 
 	for (const tabData of this[tabsByReferenceSymbol].values()) {
 		const editor = tabData?.editor;
+		const tabElement = tabData?.tabElement;
+		if (tabElement instanceof HTMLElement) {
+			tabElement.style.height = `${available}px`;
+			tabElement.style.minHeight = `${available}px`;
+		}
 		if (!(editor instanceof HTMLElement)) {
 			continue;
 		}
-		editor.style.height = `${available}px`;
-		editor.style.minHeight = `${available}px`;
+		if (!isCanvasElement(editor)) {
+			editor.style.height = "100%";
+			editor.style.minHeight = "0";
+		}
 		if (isCanvasElement(editor)) {
 			editor.width = Math.max(1, Math.floor(containerRect.width));
 			editor.height = Math.max(1, Math.floor(available));
@@ -1652,6 +1660,14 @@ function getEditorAdapter() {
 	const custom = this.getOption("editor.adapter");
 	const base = {
 		getValue: (element) => {
+			if (isImageEditorElement(element)) {
+				if (typeof element.getImageDataUrl === "function") {
+					return element.getImageDataUrl(
+						element.dataset.monsterOutputType || undefined,
+					);
+				}
+				return element.dataset.monsterValue || "";
+			}
 			if (isCanvasElement(element)) {
 				return element.dataset.monsterValue || "";
 			}
@@ -1662,6 +1678,16 @@ function getEditorAdapter() {
 		},
 		setValue: (element, value) => {
 			const next = value ?? "";
+			if (isImageEditorElement(element)) {
+				element.dataset.monsterValue = next;
+				if (typeof element.setImage === "function") {
+					element.setImage(next, {
+						contentType: element.dataset.monsterContentType,
+						storeOriginal: true,
+					});
+				}
+				return;
+			}
 			if (isCanvasElement(element)) {
 				renderCanvasFromValue(element, next);
 				return;
@@ -1678,6 +1704,17 @@ function getEditorAdapter() {
 			if (!element || typeof callback !== "function") {
 				return () => {};
 			}
+			if (isCanvasElement(element)) {
+				return () => {};
+			}
+			if (isImageEditorElement(element)) {
+				const handler = () => callback();
+				element.addEventListener("monster-image-editor-changed", handler);
+				return () => {
+					element.removeEventListener("monster-image-editor-changed", handler);
+				};
+			}
+
 			if (isCanvasElement(element)) {
 				return () => {};
 			}
@@ -1694,6 +1731,14 @@ function getEditorAdapter() {
 			if (!element) {
 				return;
 			}
+			if (isImageEditorElement(element)) {
+				if (readOnly === true) {
+					element.setAttribute("data-monster-readonly", "");
+				} else {
+					element.removeAttribute("data-monster-readonly");
+				}
+				return;
+			}
 			if (isCanvasElement(element)) {
 				return;
 			}
@@ -1737,7 +1782,17 @@ function getEditorAdapter() {
  */
 function createEditorElement(entry) {
 	const tag = resolveEditorTag.call(this, entry);
-	return getDocument().createElement(tag);
+	const editor = getDocument().createElement(tag);
+	const mimeType = getMimeTypeForEntry(entry);
+	if (isImageEditorElement(editor) && isString(mimeType)) {
+		editor.dataset.monsterContentType = mimeType;
+		editor.dataset.monsterOutputType = mimeType;
+		if (typeof editor.setOption === "function") {
+			editor.setOption("source.contentType", mimeType);
+			editor.setOption("output.type", mimeType);
+		}
+	}
+	return editor;
 }
 
 /**
@@ -1768,6 +1823,18 @@ function isCanvasElement(element) {
 	return element instanceof HTMLCanvasElement;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isImageEditorElement(element) {
+	return (
+		element instanceof HTMLElement &&
+		element.tagName.toLowerCase() === "monster-image-editor"
+	);
+}
+
 /**
  * @private
  * @param {HTMLCanvasElement} canvas

package/source/components/files/stylesheet/file-manager.mjs

@@ -39,7 +39,7 @@ monster-split-panel::part(endPanel){overflow:hidden}
 [data-monster-role=tabs-container]{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 monster-tabs{flex:1;min-height:0;height:100%}
 [data-monster-role=empty]{align-items:center;display:flex;inset:0;justify-content:center;padding:var(--monster-space-4);position:absolute;text-align:center}
-[data-monster-role=tab-content]{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
+[data-monster-role=tab-content]{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:auto}
 [data-monster-role=tab-content]:not(.active){display:none}
 [data-monster-role=editor]{flex:1;font-family:var(--monster-font-family-monospace);height:100%;min-height:0;overflow:auto;resize:none;width:100%}
 }

package/source/components/layout/panel.mjs

@@ -141,11 +141,18 @@ class Panel extends CustomElement {
 function calcHeight() {
 	this.style.boxSizing = "border-box";
 
-	const height = calculateMaximumHeight.call(this, this);
+	let height = calculateMaximumHeight.call(this, this);
 	if (height < 0) {
 		return;
 	}
 
+	const parent =
+		this.parentNode instanceof HTMLElement ? this.parentNode : null;
+	const parentHeight = parent?.clientHeight || 0;
+	if (parentHeight > 0) {
+		height = Math.min(height, parentHeight);
+	}
+
 	this.style.height = `${height}px`;
 }
 

package/source/dom/customcontrol.mjs

@@ -379,11 +379,11 @@ function initValueAttributeObserver() {
 
 		self[debounceValueSymbol] = new DeadMansSwitch(10, () => {
 			const oldValue = self.getAttribute("value");
-			const newValue = self.getOption("value");
+			const newValue = self.value;
 
 			if (oldValue !== newValue) {
 				setTimeout(() => {
-					this.setOption("value", this.getAttribute("value"));
+					self.value = self.getAttribute("value");
 				}, 0);
 			}
 		});

package/source/monster.mjs

@@ -34,6 +34,7 @@ export * from "./components/content/fetch-box.mjs";
 export * from "./components/content/viewer.mjs";
 export * from "./components/content/camera-capture.mjs";
 export * from "./components/content/copy.mjs";
+export * from "./components/content/image-editor.mjs";
 export * from "./components/content/viewer/html.mjs";
 export * from "./components/content/viewer/message.mjs";
 export * from "./components/files/file-manager.mjs";

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.67.0");
+	monsterVersion = new Version("4.68.0");
 
 	return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.67.0")
+        monsterVersion = new Version("4.68.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.67.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Do 1. Jan 21:29:16 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.68.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Fr 2. Jan 17:20:55 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>