temp: inserter - handle image pasting

Author: john-traas

src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts

@@ -7,7 +7,7 @@ import {
     ImageInfo,
     ImageState,
 } from '../../../text-editor.types';
-import { Node, Slice, Fragment } from 'prosemirror-model';
+import { Node } from 'prosemirror-model';
 import { imageCache } from './node';
 
 export const pluginKey = new PluginKey('imageInserterPlugin');
@@ -27,8 +27,8 @@ export const createImageInserterPlugin = (
     return new Plugin({
         key: pluginKey,
         props: {
-            handlePaste: (view, event, slice) => {
-                return processPasteEvent(view, event, slice);
+            handlePaste: (view, event) => {
+                return processPasteEvent(view, event);
             },
             handleDOMEvents: {
                 imagePasted: (_, event) => {
@@ -78,14 +78,16 @@ const findAndHandleRemovedImages = (
 
     for (const removedKey of removedKeys) {
         const removedImage = previousImages[removedKey];
+        const fileInfoId = removedImage.attrs.fileInfoId;
+
         const imageInfo: ImageInfo = {
-            fileInfoId: removedImage.attrs.fileInfoId,
+            fileInfoId: fileInfoId,
             src: removedImage.attrs.src,
             state: removedImage.attrs.state,
         };
         imageRemovedCallback(imageInfo);
 
-        imageCache.delete(removedImage.attrs.fileInfoId);
+        imageCache.delete(fileInfoId);
     }
 };
 
@@ -107,6 +109,8 @@ const createThumbnailInserter =
         const { state, dispatch } = view;
         const { schema } = state;
 
+        // create a blob URL from the base64 data
+
         const placeholderNode = schema.nodes.image.create({
             src: base64Data,
             alt: fileInfo.filename,
@@ -167,62 +171,6 @@ const createFailedThumbnailInserter =
         dispatch(tr);
     };
 
-/**
- * Check if a given ProseMirror node or fragment contains any image nodes.
- * @param node - The ProseMirror node or fragment to check.
- * @returns A boolean indicating whether the node contains any image nodes.
- */
-const isImageNode = (node: Node | Fragment): boolean => {
-    if (node instanceof Node) {
-        if (node.type.name === 'image') {
-            return true;
-        }
-
-        let found = false;
-        node.content.forEach((child) => {
-            if (isImageNode(child)) {
-                found = true;
-            }
-        });
-
-        return found;
-    } else if (node instanceof Fragment) {
-        let found = false;
-        node.forEach((child) => {
-            if (isImageNode(child)) {
-                found = true;
-            }
-        });
-
-        return found;
-    }
-
-    return false;
-};
-
-/**
- * Filter out image nodes from a ProseMirror fragment.
- * @param fragment - The ProseMirror fragment to filter.
- * @returns A new fragment with image nodes removed.
- */
-const filterImageNodes = (fragment: Fragment): Fragment => {
-    const filteredChildren: Node[] = [];
-
-    fragment.forEach((child) => {
-        if (!isImageNode(child)) {
-            if (child.content.size > 0) {
-                const filteredContent = filterImageNodes(child.content);
-                const newNode = child.copy(filteredContent);
-                filteredChildren.push(newNode);
-            } else {
-                filteredChildren.push(child);
-            }
-        }
-    });
-
-    return Fragment.fromArray(filteredChildren);
-};
-
 /**
  * Process a paste event and trigger an imagePasted event if an image file is pasted.
  * If an HTML image element is pasted, this image is filtered out from the slice content.
@@ -234,7 +182,6 @@ const filterImageNodes = (fragment: Fragment): Fragment => {
 const processPasteEvent = (
     view: EditorView,
     event: ClipboardEvent,
-    slice: Slice,
 ): boolean => {
     const clipboardData = event.clipboardData;
     if (!clipboardData) {
@@ -261,19 +208,253 @@ const processPasteEvent = (
         }
     }
 
-    const filteredSlice = new Slice(
-        filterImageNodes(slice.content),
-        slice.openStart,
-        slice.openEnd,
+    const htmlContent = clipboardData.getData('text/html');
+    if (htmlContent) {
+        const imagesSources = extractImagesFromHTML(htmlContent);
+        if (imagesSources.length > 0) {
+            for (const src of imagesSources) {
+                processImageSource(view, src);
+            }
+        }
+    }
+
+    return false;
+};
+
+/**
+ * Extract image sources from HTML content
+ *
+ * @param htmlContent - The HTML content to extract images from
+ * @returns An array of image source URLs
+ */
+const extractImagesFromHTML = (htmlContent: string): string[] => {
+    const sources: string[] = [];
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    const imgElements = tempDiv.querySelectorAll('img');
+    imgElements.forEach((img) => {
+        const src = img.getAttribute('src');
+        if (src) {
+            sources.push(src);
+        }
+    });
+
+    return sources;
+};
+
+/**
+ * Process an image source by detecting its type and handling it accordingly
+ *
+ * @param view - The ProseMirror editor view
+ * @param src - The image source URL or data URL
+ */
+const processImageSource = (view: EditorView, src: string): void => {
+    const sourceType = detectImageSourceType(src);
+
+    switch (sourceType) {
+        case 'data-url':
+            processDataUrlImage(view, src);
+            break;
+        case 'external-url':
+            processExternalUrlImage(view, src);
+            break;
+        case 'unknown':
+        default:
+            console.warn('Unknown image source type:', src);
+            break;
+    }
+};
+
+/**
+ * Detect the type of image source
+ *
+ * @param src - The image source
+ * @returns The detected source type
+ */
+const detectImageSourceType = (
+    src: string,
+): 'data-url' | 'external-url' | 'unknown' => {
+    if (src.startsWith('data:image/')) {
+        return 'data-url';
+    } else if (/^https?:\/\//i.exec(src) || src.startsWith('//')) {
+        return 'external-url';
+    } else {
+        return 'unknown';
+    }
+};
+
+/**
+ * Process a data URL image
+ *
+ * @param view - The editor view
+ * @param dataUrl - The data URL of the image
+ */
+const processDataUrlImage = (view: EditorView, dataUrl: string): void => {
+    // Extract mime type from data URL
+    const mimeMatch = /^data:([^;]+);/.exec(dataUrl);
+    const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
+    const extension = mimeType.split('/')[1] || 'png';
+
+    // Create a blob from the data URL
+    const regex = /^data:([^;]+);base64,(.+)$/;
+    const matches = regex.exec(dataUrl);
+    if (!matches) {
+        console.error('Invalid data URL format');
+
+        return;
+    }
+
+    const base64Data = matches[2];
+    const binaryString = atob(base64Data);
+    const bytes = new Uint8Array(binaryString.length);
+
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+
+    const blob = new Blob([bytes], { type: mimeType });
+    const fileName = `pasted-image-${Date.now()}.${extension}`;
+    const file = new File([blob], fileName, { type: mimeType });
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+        dispatchImagePastedEvent(view, reader.result as string, file);
+    };
+
+    reader.readAsDataURL(blob);
+};
+
+/**
+ * Process an external URL image
+ *
+ * @param view - The editor view
+ * @param url - The URL of the image
+ */
+const processExternalUrlImage = (view: EditorView, url: string): void => {
+    fetch(url)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(
+                    `Failed to fetch image: ${response.statusText}`,
+                );
+            }
+
+            return response.blob();
+        })
+        .then((blob) => {
+            const fileType = blob.type || 'image/png';
+            const extension = fileType.split('/')[1] || 'png';
+            const fileName =
+                url.split('/').pop() ||
+                `external-image-${Date.now()}.${extension}`;
+            const file = new File([blob], fileName, { type: fileType });
+
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                dispatchImagePastedEvent(view, reader.result as string, file);
+            };
+
+            reader.readAsDataURL(blob);
+        })
+        .catch((error) => {
+            console.error('Error processing external image:', error);
+        });
+};
+
+/**
+ * Create and dispatch an imagePasted event
+ *
+ * @param view - The editor view
+ * @param base64Data - The base64 data of the image
+ * @param file - The file object
+ */
+const dispatchImagePastedEvent = (
+    view: EditorView,
+    base64Data: string,
+    file: File,
+): void => {
+    view.dom.dispatchEvent(
+        new CustomEvent('imagePasted', {
+            detail: imageInserterFactory(
+                view,
+                base64Data,
+                createFileInfo(file),
+            ),
+        }),
     );
+};
 
-    if (filteredSlice.content.childCount < slice.content.childCount) {
-        const { state, dispatch } = view;
-        const tr = state.tr.replaceSelection(filteredSlice);
-        dispatch(tr);
+/**
+ * Convert a URL or data URL to a Blob
+ *
+ * @param url - The URL or data URL to convert
+ * @returns A Promise that resolves to a Blob or null if conversion fails
+ */
+const urlToBlob = async (url: string): Promise<Blob | null> => {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            return null;
+        }
+
+        return await response.blob();
+    } catch (error) {
+        console.error('Error converting URL to blob:', error);
 
-        return true;
+        return null;
     }
+};
+
+/**
+ * Creates a smaller thumbnail from an image data URL
+ * @param dataUrl - Original image data URL
+ * @param maxWidth - Maximum width of thumbnail
+ * @param maxHeight - Maximum height of thumbnail
+ * @param quality - JPEG quality (0-1)
+ * @returns Promise resolving to a smaller thumbnail data URL
+ */
+const createOptimizedThumbnail = (
+    dataUrl: string,
+    maxWidth = 300,
+    maxHeight = 300,
+    quality = 0.7,
+): Promise<string> => {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+            // Calculate new dimensions while maintaining aspect ratio
+            let width = img.width;
+            let height = img.height;
+
+            if (width > maxWidth) {
+                height = (height * maxWidth) / width;
+                width = maxWidth;
+            }
+
+            if (height > maxHeight) {
+                width = (width * maxHeight) / height;
+                height = maxHeight;
+            }
 
-    return files.length > 0;
+            // Create canvas and draw resized image
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, width, height);
+
+            // Convert to JPEG for better compression
+            const thumbnailDataUrl = canvas.toDataURL('image/jpeg', quality);
+            resolve(thumbnailDataUrl);
+        };
+
+        // Handle potential loading errors
+        img.onerror = () => {
+            console.warn('Failed to create thumbnail, using original');
+            resolve(dataUrl);
+        };
+
+        img.src = dataUrl;
+    });
 };