@flogeez/angular-tiptap-editor 3.1.0 → 3.1.2

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to `@flogeez/angular-tiptap-editor` will be documented in th
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), with the exception that the major version is specifically aligned with the major version of [Tiptap](https://tiptap.dev).
 
+## [3.1.2] - 2026-04-24
+
+### Fixed
+
+- **Image Upload Handler**: `imageUploadHandler` is now invoked for pasted image files, matching toolbar and drag-and-drop upload behavior.
+- **Image Insertion**: Resolved a regression where images failed to insert when the cursor was positioned within existing text.
+
+## [3.1.1] - 2026-02-13
+
+### Fixed
+
+- **Image Resizing**: Resolved a bug where multiple selected images were resized simultaneously. The update now precisely targets the intended node.
+
 ## [3.1.0] - 2026-02-13
 
 ### Added

package/README.md

@@ -137,6 +137,8 @@ angularNodes: [
 
 Avoid base64 by providing a custom uploader (S3, Cloudinary, etc.):
 
+The same handler is used for all file-based image insertions: toolbar picker, drag-and-drop, and clipboard paste.
+
 ```typescript
 uploadHandler: AteImageUploadHandler = ctx => {
   return this.http.post<any>("/api/upload", ctx.file).pipe(map(res => ({ src: res.url })));

package/fesm2022/flogeez-angular-tiptap-editor.mjs

@@ -220,15 +220,17 @@ const AteResizableImage = Node$1.create({
                 const handleMouseUp = () => {
                     isResizing = false;
                     document.body.classList.remove("resizing");
-                    // Update Tiptap node with new dimensions
-                    if (typeof getPos === "function") {
+                    // Update Tiptap node with new dimensions at the specific position
+                    const pos = typeof getPos === "function" ? getPos() : undefined;
+                    if (typeof pos === "number") {
                         const finalWidth = parseInt(img.getAttribute("width") || "0");
                         const finalHeight = parseInt(img.getAttribute("height") || "0");
                         if (finalWidth && finalHeight) {
-                            editor.commands.updateAttributes("resizableImage", {
+                            editor.view.dispatch(editor.view.state.tr.setNodeMarkup(pos, undefined, {
+                                ...node.attrs,
                                 width: finalWidth,
                                 height: finalHeight,
-                            });
+                            }));
                         }
                     }
                     document.removeEventListener("mousemove", handleMouseMove);
@@ -1377,8 +1379,17 @@ class AteImageService {
     }
     /** Insert a new image and ensure it's selected */
     insertImage(editor, imageData) {
-        const { from } = editor.state.selection;
-        editor.chain().focus().setResizableImage(imageData).setNodeSelection(from).run();
+        editor
+            .chain()
+            .focus()
+            .setResizableImage(imageData)
+            .command(({ tr, commands }) => {
+            // Selection is usually after the node. Node is at tr.selection.from - 1.
+            const { from } = tr.selection;
+            // Try to select node at current pos (if it was already selected) or previous pos
+            return commands.setNodeSelection(from) || commands.setNodeSelection(from - 1) || true;
+        })
+            .run();
     }
     /** Update attributes of the currently active image */
     updateImageAttributes(editor, attributes) {
@@ -1706,7 +1717,6 @@ class AteImageService {
     /** Internal helper used by replacement logic */
     async uploadAndReplaceImage(editor, file, options) {
         // Store current position to ensure we can re-select the image even if selection blurs during upload
-        const pos = editor.state.selection.from;
         const wasActive = editor.isActive("resizableImage");
         await this.uploadImageWithProgress(editor, file, (ed, result) => {
             const imageData = {
@@ -1721,7 +1731,11 @@ class AteImageService {
                 ed.chain()
                     .focus()
                     .updateAttributes("resizableImage", imageData)
-                    .setNodeSelection(pos)
+                    .command(({ tr, commands }) => {
+                    const { from } = tr.selection;
+                    // Re-select the node at its mapped position or current selection
+                    return commands.setNodeSelection(from) || commands.setNodeSelection(from - 1) || true;
+                })
                     .run();
                 this.updateSelectedImage(imageData);
             }
@@ -1733,6 +1747,45 @@ class AteImageService {
             this.selectImage(ed);
         }, this.t().replacingImage, options);
     }
+    /**
+     * Handle image drop event.
+     * Calculates the position from coordinates and sets the selection accordingly.
+     */
+    handleDrop(editor, event, options) {
+        const files = event.dataTransfer?.files;
+        if (!files || files.length === 0) {
+            return false;
+        }
+        const file = Array.from(files).find(f => f.type.startsWith("image/"));
+        if (!file) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // Try to find the drop position from coordinates
+        const pos = editor.view.posAtCoords({ left: event.clientX, top: event.clientY });
+        if (pos) {
+            editor.commands.setTextSelection(pos.pos);
+        }
+        void this.uploadAndInsertImage(editor, file, options);
+        return true;
+    }
+    /**
+     * Handle image paste event.
+     */
+    handlePaste(editor, event, options) {
+        const clipboardFiles = event.clipboardData?.files;
+        if (!clipboardFiles || clipboardFiles.length === 0) {
+            return false;
+        }
+        const imageFile = Array.from(clipboardFiles).find(file => file.type.startsWith("image/"));
+        if (!imageFile) {
+            return false;
+        }
+        event.preventDefault();
+        void this.uploadAndInsertImage(editor, imageFile, options);
+        return true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteImageService }); }
 }
@@ -2580,6 +2633,12 @@ class AteEditorCommandsService {
     downloadImage(editor) {
         this.imageService.downloadImage(editor);
     }
+    handleImageDrop(editor, event, options) {
+        return this.imageService.handleDrop(editor, event, options);
+    }
+    handleImagePaste(editor, event, options) {
+        return this.imageService.handlePaste(editor, event, options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteEditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AteEditorCommandsService }); }
 }
@@ -7427,6 +7486,33 @@ class AngularTiptapEditorComponent {
         }
         // Also allow any tiptap user options
         const userOptions = this.finalTiptapOptions();
+        const userEditorProps = userOptions.editorProps;
+        const userHandlePaste = userEditorProps?.handlePaste;
+        const userHandleDOMPaste = userEditorProps?.handleDOMEvents?.paste;
+        const handleDOMPaste = (view, event) => {
+            const currentEditor = this.editor();
+            if (currentEditor &&
+                this.editorCommandsService.handleImagePaste(currentEditor, event, this.getImageUploadOptions())) {
+                return true;
+            }
+            if (!userHandleDOMPaste) {
+                return false;
+            }
+            const userResult = userHandleDOMPaste(view, event);
+            return userResult === true;
+        };
+        const handlePaste = (view, event, slice) => {
+            const currentEditor = this.editor();
+            if (currentEditor &&
+                this.editorCommandsService.handleImagePaste(currentEditor, event, this.getImageUploadOptions())) {
+                return true;
+            }
+            if (!userHandlePaste) {
+                return false;
+            }
+            const userResult = userHandlePaste(view, event, slice);
+            return userResult === true;
+        };
         const newEditor = new Editor({
             ...userOptions,
             element: this.editorElement().nativeElement,
@@ -7435,9 +7521,16 @@ class AngularTiptapEditorComponent {
             editable: this.finalEditable() && !this.mergedDisabled(),
             autofocus: this.finalAutofocus(),
             editorProps: {
+                ...userEditorProps,
                 attributes: {
+                    ...userEditorProps?.attributes,
                     spellcheck: this.finalSpellcheck().toString(),
                 },
+                handleDOMEvents: {
+                    ...userEditorProps?.handleDOMEvents,
+                    paste: handleDOMPaste,
+                },
+                handlePaste,
             },
             onUpdate: ({ editor, transaction }) => {
                 const html = editor.getHTML();
@@ -7496,32 +7589,21 @@ class AngularTiptapEditorComponent {
         this._isDragOver.set(true);
     }
     onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._isDragOver.set(false);
-        const files = event.dataTransfer?.files;
-        if (files && files.length > 0) {
-            const file = files[0];
-            if (file.type.startsWith("image/")) {
-                this.insertImageFromFile(file);
-            }
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.handleImageDrop(editor, event, this.getImageUploadOptions());
+            this._isDragOver.set(false);
         }
     }
-    async insertImageFromFile(file) {
-        const currentEditor = this.editor();
-        if (currentEditor) {
-            try {
-                const config = this.finalImageUploadConfig();
-                await this.editorCommandsService.uploadImage(currentEditor, file, {
-                    quality: config.quality,
-                    maxWidth: config.maxWidth,
-                    maxHeight: config.maxHeight,
-                });
-            }
-            catch (_e) {
-                /* ignore */
-            }
-        }
+    getImageUploadOptions() {
+        const config = this.finalImageUploadConfig();
+        return {
+            quality: config.quality,
+            maxWidth: config.maxWidth,
+            maxHeight: config.maxHeight,
+            maxSize: config.maxSize,
+            allowedTypes: config.allowedTypes,
+        };
     }
     // Public methods
     getHTML() {