@schukai/monster 4.154.4 → 4.154.5

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.154.5] - 2026-10-04
+
+### Bug Fixes
+
+- **image-editor:** load raw SVG markup ([#589](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/589))
+
+
+
 ## [4.154.4] - 2026-10-04
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","exports":{".":"./source/monster.mjs","./CHANGELOG.md":"./CHANGELOG.md","./LICENSE":"./LICENSE","./README.md":"./README.md","./package.json":"./package.json","./source/*":"./source/*","./test/*":"./test/*"},"files":["source","test/cases","test/util","CHANGELOG.md"],"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"},"sideEffects":["./source/monster.mjs","./source/components/**","./source/i18n/**","./test/**"],"type":"module","version":"4.154.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","exports":{".":"./source/monster.mjs","./CHANGELOG.md":"./CHANGELOG.md","./LICENSE":"./LICENSE","./README.md":"./README.md","./package.json":"./package.json","./source/*":"./source/*","./test/*":"./test/*"},"files":["source","test/cases","test/util","CHANGELOG.md"],"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"},"sideEffects":["./source/monster.mjs","./source/components/**","./source/i18n/**","./test/**"],"type":"module","version":"4.154.5"}

package/source/components/content/image-editor.mjs

@@ -1181,6 +1181,25 @@ function setImageFromData(data, options) {
 
 	if (isString(data)) {
 		const trimmed = data.trim();
+		const normalizedContentType = contentType
+			.split(";", 1)[0]
+			.trim()
+			.toLowerCase();
+		const svgMarkup = trimmed.replace(/^<\?xml[\s\S]*?\?>\s*/iu, "");
+		if (
+			normalizedContentType === "image/svg+xml" &&
+			/^<svg(?:\s|>)/iu.test(svgMarkup)
+		) {
+			return loadImageFromSource.call(
+				this,
+				`data:image/svg+xml;charset=utf-8,${encodeURIComponent(trimmed)}`,
+				{
+					storeOriginal,
+					resetAspect: storeOriginal,
+					resetView: storeOriginal,
+				},
+			);
+		}
 		if (trimmed.startsWith("data:") || trimmed.startsWith("blob:")) {
 			return loadImageFromSource.call(this, trimmed, {
 				storeOriginal,

package/test/cases/components/content/image-editor.mjs

@@ -109,4 +109,31 @@ describe('ImageEditor', function () {
             '<monster-button-bar class="grid-span-full monster-margin-top-2">',
         );
     });
+
+    it('loads raw SVG markup with its documented content type issue #589', async function () {
+        const OriginalImage = globalThis.Image;
+        const sources = [];
+
+        class ImageMock {
+            set src(value) {
+                sources.push(value);
+                queueMicrotask(() => this.onerror?.(new Error('test stop')));
+            }
+        }
+
+        globalThis.Image = ImageMock;
+
+        try {
+            const element = document.createElement('monster-image-editor');
+            const markup = '<svg xmlns="http://www.w3.org/2000/svg"><rect width="4" height="3"/></svg>';
+
+            await element.setImage(markup, {contentType: 'image/svg+xml'}).catch(() => {});
+
+            expect(sources).to.have.length(1);
+            expect(sources[0]).to.match(/^data:image\/svg\+xml;charset=utf-8,/);
+            expect(decodeURIComponent(sources[0].split(',', 2)[1])).to.equal(markup);
+        } finally {
+            globalThis.Image = OriginalImage;
+        }
+    });
 });