fixup! feat(text-editor): add support for pasting inline images

Author: FredrikWallstrom

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

@@ -7,7 +7,7 @@ import {
     ImageInfo,
     ImageState,
 } from '../../../text-editor.types';
-import { Node } from 'prosemirror-model';
+import { Node, Slice, Fragment } 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) => {
-                return processPasteEvent(view, event);
+            handlePaste: (view, event, slice) => {
+                return processPasteEvent(view, event, slice);
             },
             handleDOMEvents: {
                 imagePasted: (_, event) => {
@@ -167,15 +167,74 @@ 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.
+ *
  * @param view - The ProseMirror editor view.
  * @param event - The paste event.
  * @returns A boolean; True if an image file was pasted to prevent default paste behavior, otherwise false.
  */
 const processPasteEvent = (
     view: EditorView,
     event: ClipboardEvent,
+    slice: Slice,
 ): boolean => {
     const clipboardData = event.clipboardData;
     if (!clipboardData) {
@@ -202,5 +261,19 @@ const processPasteEvent = (
         }
     }
 
+    const filteredSlice = new Slice(
+        filterImageNodes(slice.content),
+        slice.openStart,
+        slice.openEnd,
+    );
+
+    if (filteredSlice.content.childCount < slice.content.childCount) {
+        const { state, dispatch } = view;
+        const tr = state.tr.replaceSelection(filteredSlice);
+        dispatch(tr);
+
+        return true;
+    }
+
     return files.length > 0;
 };

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

@@ -119,13 +119,8 @@ function createImageNodeSpec(language: Languages): NodeSpec {
             {
                 tag: 'img',
                 getAttrs: (dom: HTMLElement): Attrs => {
-                    const src = dom.getAttribute('src');
-                    if (!isValidSrc(src)) {
-                        return {};
-                    }
-
                     return {
-                        src: src,
+                        src: dom.getAttribute('src') || '',
                         alt: dom.getAttribute('alt') || 'file',
                         width: dom.style.width || '',
                         maxWidth: '100%',
@@ -138,25 +133,6 @@ function createImageNodeSpec(language: Languages): NodeSpec {
     };
 }
 
-function isValidSrc(src: string): boolean {
-    try {
-        const parsed = new URL(src, document.baseURI);
-
-        if (['http:', 'https:'].includes(parsed.protocol)) {
-            return true;
-        }
-
-        // Allow png, jpeg, jpg, gif images with base64 encoding
-        if (parsed.protocol === 'data:') {
-            return /^data:image\/(png|jpeg|jpg|gif);base64,/.test(src);
-        }
-
-        return false;
-    } catch {
-        return false;
-    }
-}
-
 function createStatusSpan(
     key: string,
     node: Node,