feat: register images from paste + HTML insertion, fixes #790

Author: johanneswilm

.ackrc

@@ -0,0 +1,2 @@
+--ignore-dir=packages/superdoc/dist
+--ignore-dir=packages/super-editor/dist/

package-lock.json

@@ -148,8 +148,8 @@ img.ProseMirror-separator {
   margin-bottom: 1.5px;
 }
 
-/* 
-Tables 
+/*
+Tables
 https://github.com/ProseMirror/prosemirror-tables/blob/master/style/tables.css
 https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 */
@@ -166,8 +166,8 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   scrollbar-width: thin;
   overflow: hidden;
 
-  /* 
-  The border width does not need to be multiplied by two, 
+  /*
+  The border width does not need to be multiplied by two,
   for tables it works differently. */
   width: calc(100% + (var(--table-border-width) + var(--offset)));
 }
@@ -292,19 +292,25 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 /* Collaboration cursors - end */
 
 /* Image placeholder */
-.ProseMirror placeholder {
+.ProseMirror placeholder,
+.ProseMirror img.placeholder {
   display: inline;
   border: 1px solid #ccc;
   color: #ccc;
 }
 
-.ProseMirror placeholder:after {
+.ProseMirror placeholder:after,
+.ProseMirror img.placeholder:after {
   content: '☁';
   font-size: 200%;
   line-height: 0.1;
   font-weight: bold;
 }
 
+.ProseMirror placeholder img {
+  display: none !important;
+}
+
 /* Gapcursor */
 .ProseMirror-gapcursor {
   display: none;

packages/super-editor/src/assets/styles/elements/prosemirror.css

@@ -5,7 +5,12 @@ import { makeDefaultItems } from './defaultItems';
 import { getActiveFormatting } from '@core/helpers/getActiveFormatting.js';
 import { vClickOutside } from '@harbour-enterprises/common';
 import Toolbar from './Toolbar.vue';
-import { startImageUpload, getFileOpener } from '../../extensions/image/imageHelpers/index.js';
+import {
+  checkAndProcessImage,
+  replaceSelectionWithImagePlaceholder,
+  uploadAndInsertImage,
+  getFileOpener,
+} from '../../extensions/image/imageHelpers/index.js';
 import { findParentNode } from '@helpers/index.js';
 import { toolbarIcons } from './toolbarIcons.js';
 import { toolbarTexts } from './toolbarTexts.js';
@@ -366,10 +371,30 @@ export class SuperToolbar extends EventEmitter {
         return;
       }
 
-      startImageUpload({
-        editor: this.activeEditor,
+      const { size, file } = await checkAndProcessImage({
         view: this.activeEditor.view,
         file: result.file,
+        getMaxContentSize: () => this.activeEditor.getMaxContentSize(),
+      });
+
+      if (!file) {
+        return;
+      }
+
+      const id = {};
+
+      replaceSelectionWithImagePlaceholder({
+        view: this.activeEditor.view,
+        editorOptions: this.activeEditor.options,
+        id,
+      });
+
+      await uploadAndInsertImage({
+        editor: this.activeEditor,
+        view: this.activeEditor.view,
+        file,
+        size,
+        id,
       });
     },
 

packages/super-editor/src/components/toolbar/super-toolbar.js

@@ -1546,6 +1546,7 @@ function getScaledSize(originalWidth, originalHeight, maxWidth, maxHeight) {
 }
 
 function translateImageNode(params, imageSize) {
+  console.log('translateImageNode', { params, imageSize });
   const {
     node: { attrs = {} },
     tableCell,

packages/super-editor/src/core/super-converter/exporter.js

@@ -1,5 +1,5 @@
 import { Attribute, Node } from '@core/index.js';
-import { ImagePlaceholderPlugin } from './imageHelpers/imagePlaceholderPlugin.js';
+import { ImageRegistrationPlugin } from './imageHelpers/imageRegistrationPlugin.js';
 import { ImagePositionPlugin } from './imageHelpers/imagePositionPlugin.js';
 
 export const Image = Node.create({
@@ -147,6 +147,6 @@ export const Image = Node.create({
   },
 
   addPmPlugins() {
-    return [ImagePlaceholderPlugin(), ImagePositionPlugin({ editor: this.editor })];
+    return [ImageRegistrationPlugin({ editor: this.editor }), ImagePositionPlugin({ editor: this.editor })];
   },
 });

packages/super-editor/src/extensions/image/image.js

@@ -0,0 +1,34 @@
+const simpleHash = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString();
+};
+
+export const base64ToFile = (base64String) => {
+  const arr = base64String.split(',');
+  const mimeMatch = arr[0].match(/:(.*?);/);
+  const mimeType = mimeMatch ? mimeMatch[1] : '';
+  const data = arr[1];
+
+  // Decode the base64 string
+  const binaryString = atob(data);
+
+  // Generate filename using a hash of the binary data
+  const hash = simpleHash(binaryString);
+  const extension = mimeType.split('/')[1] || 'bin'; // Simple way to get extension
+  const filename = `image-${hash}.${extension}`;
+
+  // Create a typed array from the binary string
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  // Create a Blob and then a File
+  const blob = new Blob([bytes], { type: mimeType });
+  return new File([blob], filename, { type: mimeType });
+};

packages/super-editor/src/extensions/image/imageHelpers/handleBase64.js

@@ -0,0 +1,106 @@
+/**
+ * Handles URL to File conversion with comprehensive CORS error handling
+ */
+
+/**
+ * Converts a URL to a File object with proper CORS error handling
+ * @param {string} url - The image URL to fetch
+ * @param {string} [filename] - Optional filename for the resulting file
+ * @param {string} [mimeType] - Optional MIME type for the resulting file
+ * @returns {Promise<File|null>} File object or null if CORS prevents access
+ */
+export const urlToFile = async (url, filename, mimeType) => {
+  try {
+    // Try to fetch the image with credentials mode set to 'omit' to avoid CORS preflight
+    const response = await fetch(url, {
+      mode: 'cors',
+      credentials: 'omit',
+      headers: {
+        // Add common headers that might help with CORS
+        Accept: 'image/*,*/*;q=0.8',
+      },
+    });
+
+    if (!response.ok) {
+      console.warn(`Failed to fetch image from ${url}: ${response.status} ${response.statusText}`);
+      return null;
+    }
+
+    const blob = await response.blob();
+
+    // Extract filename from URL if not provided
+    const finalFilename = filename || extractFilenameFromUrl(url);
+
+    // Determine MIME type from response if not provided
+    const finalMimeType = mimeType || response.headers.get('content-type') || blob.type || 'image/jpeg';
+
+    return new File([blob], finalFilename, { type: finalMimeType });
+  } catch (error) {
+    if (isCorsError(error)) {
+      console.warn(`CORS policy prevents accessing image from ${url}:`, error.message);
+      return null;
+    }
+
+    console.error(`Error fetching image from ${url}:`, error);
+    return null;
+  }
+};
+
+/**
+ * Checks if an error is likely a CORS-related error
+ * @param {Error} error - The error to check
+ * @returns {boolean} True if the error appears to be CORS-related
+ */
+const isCorsError = (error) => {
+  const errorMessage = error.message.toLowerCase();
+  const errorName = error.name.toLowerCase();
+
+  return (
+    errorName.includes('cors') ||
+    errorMessage.includes('cors') ||
+    errorMessage.includes('cross-origin') ||
+    errorMessage.includes('access-control') ||
+    errorMessage.includes('network error') || // Often indicates CORS in browsers
+    errorMessage.includes('failed to fetch') // Common CORS error message
+  );
+};
+
+/**
+ * Extracts a filename from a URL
+ * @param {string} url - The URL to extract filename from
+ * @returns {string} The extracted filename
+ */
+const extractFilenameFromUrl = (url) => {
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const filename = pathname.split('/').pop();
+
+    // If no extension, add a default one
+    if (filename && !filename.includes('.')) {
+      return `${filename}.jpg`;
+    }
+
+    return filename || 'image.jpg';
+  } catch {
+    return 'image.jpg';
+  }
+};
+
+/**
+ * Validates if a URL can be accessed without CORS issues
+ * @param {string} url - The URL to validate
+ * @returns {Promise<boolean>} True if the URL is accessible without CORS issues
+ */
+export const validateUrlAccessibility = async (url) => {
+  try {
+    const response = await fetch(url, {
+      method: 'HEAD',
+      mode: 'cors',
+      credentials: 'omit',
+    });
+    return response.ok;
+  } catch (error) {
+    return false;
+  }
+};