@elixpo/lixsketch 5.4.6 → 5.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "description": "Open-source SVG whiteboard engine with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/core/CopyPaste.js

@@ -13,6 +13,8 @@ import { Frame } from '../shapes/Frame.js';
 import { TextShape } from '../shapes/TextShape.js';
 import { CodeShape } from '../shapes/CodeShape.js';
 import { ImageShape } from '../shapes/ImageShape.js';
+import { isAllowedImage, isAllowedImageDataUrl } from '../utils/allowedImageTypes.js';
+import { compressImage } from '../utils/imageCompressor.js';
 import { IconShape } from '../shapes/IconShape.js';
 
 // Clipboard storage
@@ -585,10 +587,27 @@ function handlePasteEvent(e) {
             const blob = item.getAsFile();
             if (!blob) return;
 
+            // Validate against the canonical allowlist — clipboard sources
+            // can include animated GIFs / HEIC / TIFF / arbitrary mime types.
+            if (!isAllowedImage(blob)) {
+                console.warn('[CopyPaste] Rejected pasted image type:', blob.type);
+                return;
+            }
+
             const reader = new FileReader();
-            reader.onload = (ev) => {
-                const dataUrl = ev.target.result;
-                placeImageFromDataUrl(dataUrl);
+            reader.onload = async (ev) => {
+                const rawDataUrl = ev.target.result;
+                const isSvg = (blob.type || '').toLowerCase() === 'image/svg+xml';
+                let placedDataUrl = rawDataUrl;
+                if (!isSvg) {
+                    try {
+                        const compressed = await compressImage(rawDataUrl);
+                        if (compressed?.dataUrl) placedDataUrl = compressed.dataUrl;
+                    } catch (err) {
+                        console.warn('[CopyPaste] Pre-placement compression failed, using raw:', err);
+                    }
+                }
+                placeImageFromDataUrl(placedDataUrl);
             };
             reader.readAsDataURL(blob);
             return; // only handle first image

package/src/index.js

@@ -54,6 +54,17 @@ export { saveScene, loadScene } from './core/SceneSerializer.js';
 // shipping them across a postMessage boundary.
 export { compressImage } from './utils/imageCompressor.js';
 
+// Canonical image allowlist. The engine and any embedding host should
+// reject anything outside this set at every entry point (file picker,
+// drag-drop, paste, server boundary).
+export {
+    ALLOWED_IMAGE_MIME_TYPES,
+    ALLOWED_IMAGE_EXTENSIONS,
+    IMAGE_ACCEPT_ATTR,
+    isAllowedImage,
+    isAllowedImageDataUrl,
+} from './utils/allowedImageTypes.js';
+
 // Engine-local keyboard shortcuts (tool switching, delete, group/ungroup,
 // space-to-pan, escape-deselect). App-level shortcuts (cloud save, modal
 // toggles) are intentionally NOT included — those belong to the consumer.

package/src/tools/imageTool.js

@@ -3,6 +3,7 @@
 import { pushCreateAction, pushDeleteAction, pushTransformAction, pushFrameAttachmentAction } from '../core/UndoRedo.js';
 import { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from './arrowTool.js';
 import { compressImage } from '../utils/imageCompressor.js';
+import { isAllowedImage, IMAGE_ACCEPT_ATTR } from '../utils/allowedImageTypes.js';
 
 
 let isDraggingImage = false;
@@ -133,7 +134,7 @@ document.getElementById("importImage")?.addEventListener('click', () => {
     // Create a file input element
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*'; // Accept all image types
+    fileInput.accept = IMAGE_ACCEPT_ATTR; // Static images only — see allowedImageTypes.js
     fileInput.style.display = 'none'; // Hide the input element
     
     // Add the input to the document temporarily
@@ -194,13 +195,16 @@ const loadHardcodedImage = (imagePath) => {
     img.src = imagePath;
 };
 
-const handleImageUpload = (file) => {
+const handleImageUpload = async (file) => {
     if (!file || !isImageToolActive) return;
 
-    // Validate file type
-    if (!file.type.startsWith('image/')) {
-        console.error('Selected file is not an image');
-        alert('Please select a valid image file.');
+    // Validate file type against the canonical allowlist (avif, jpeg, jpg,
+    // png, bmp, svg, webp). Animated GIF, HEIC, TIFF, video, audio, and
+    // arbitrary files are rejected here.
+    if (!isAllowedImage(file)) {
+        console.error('Rejected file type:', file.type, file.name);
+        alert('Unsupported file type. Allowed: AVIF, JPEG, PNG, BMP, SVG, WebP.');
+        isImageToolActive = false;
         return;
     }
 
@@ -222,26 +226,50 @@ const handleImageUpload = (file) => {
 
     console.log('Processing image file:', file.name, 'Size:', file.size, 'Type:', file.type);
 
-    const reader = new FileReader();
-    
-    // Store file size for room limit tracking
-    window.__pendingImageFileSize = file.size;
+    // Read → optionally compress → place. We compress client-side BEFORE
+    // placement so that consumers without an upload pipeline (VS Code
+    // extension, offline npm usage) still embed a compressed data URL
+    // rather than the original. SVGs are passed through unchanged because
+    // rasterizing them would destroy their vector fidelity.
+    try {
+        const rawDataUrl = await readFileAsDataUrl(file);
+        const isSvg = (file.type || '').toLowerCase() === 'image/svg+xml'
+            || (file.name || '').toLowerCase().endsWith('.svg');
+
+        let placedDataUrl = rawDataUrl;
+        let placedSize = file.size;
+        if (!isSvg) {
+            try {
+                const compressed = await compressImage(rawDataUrl);
+                if (compressed?.dataUrl) {
+                    placedDataUrl = compressed.dataUrl;
+                    placedSize = compressed.compressedSize || placedSize;
+                }
+            } catch (err) {
+                console.warn('[ImageTool] Pre-placement compression failed, using raw:', err);
+            }
+        }
 
-    reader.onload = (e) => {
-        imageToPlace = e.target.result;
+        window.__pendingImageFileSize = placedSize;
+        imageToPlace = placedDataUrl;
         isDraggingImage = true;
-        console.log('Image loaded and ready to place');
-    };
-    
-    reader.onerror = (error) => {
-        console.error('Error reading file:', error);
+        console.log('Image loaded and ready to place', { size: placedSize, isSvg });
+    } catch (err) {
+        console.error('Error reading file:', err);
         alert('Error reading the image file. Please try again.');
         isImageToolActive = false;
-    };
-    
-    reader.readAsDataURL(file);
+    }
 };
 
+function readFileAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = (err) => reject(err);
+        reader.readAsDataURL(file);
+    });
+}
+
 // Add coordinate conversion function like in other tools
 function getSVGCoordsFromMouse(e) {
     const viewBox = svg.viewBox.baseVal;
@@ -1286,7 +1314,7 @@ window.openImageFilePicker = function() {
     isImageToolActive = true;
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*';
+    fileInput.accept = IMAGE_ACCEPT_ATTR;
     fileInput.style.display = 'none';
     document.body.appendChild(fileInput);
 

package/src/utils/allowedImageTypes.js

@@ -0,0 +1,53 @@
+/**
+ * Canonical allowlist for image uploads across LixSketch and any embedding
+ * host (e.g. blogs.elixpo). Anything not in this list is rejected at file
+ * pick / paste / drop time and again at the server boundary.
+ *
+ * Static raster + vector formats only. Animated GIF is intentionally excluded
+ * (animation isn't supported by the SVG renderer or the blog reader); HEIC,
+ * TIFF, video, audio, PDF, and arbitrary files are excluded by omission.
+ */
+
+export const ALLOWED_IMAGE_MIME_TYPES = Object.freeze([
+    'image/avif',
+    'image/jpeg',
+    'image/png',
+    'image/bmp',
+    'image/svg+xml',
+    'image/webp',
+]);
+
+export const ALLOWED_IMAGE_EXTENSIONS = Object.freeze([
+    '.avif',
+    '.jpeg',
+    '.jpg',
+    '.png',
+    '.bmp',
+    '.svg',
+    '.webp',
+]);
+
+/** Comma-joined value suitable for an <input accept="…"> attribute. */
+export const IMAGE_ACCEPT_ATTR = ALLOWED_IMAGE_MIME_TYPES.join(',');
+
+/**
+ * Validate a File / Blob against the allowlist by mime type, falling back
+ * to extension matching when the browser doesn't fill in `type` (some
+ * drag-drop sources, some SVGs).
+ */
+export function isAllowedImage(file) {
+    if (!file) return false;
+    const type = (file.type || '').toLowerCase();
+    if (type && ALLOWED_IMAGE_MIME_TYPES.includes(type)) return true;
+    const name = (file.name || '').toLowerCase();
+    if (!name) return false;
+    return ALLOWED_IMAGE_EXTENSIONS.some((ext) => name.endsWith(ext));
+}
+
+/** Same check but for a base64 data URL (e.g. from clipboard paste). */
+export function isAllowedImageDataUrl(dataUrl) {
+    if (typeof dataUrl !== 'string') return false;
+    const m = dataUrl.match(/^data:([^;]+);/i);
+    if (!m) return false;
+    return ALLOWED_IMAGE_MIME_TYPES.includes(m[1].toLowerCase());
+}