@flogeez/angular-tiptap-editor 3.7.0 → 3.8.1

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

@@ -4109,6 +4109,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "ate-separator", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div class="ate-separator"></div>`, styles: [".ate-separator{width:1px;height:24px;background-color:var(--ate-border, #e2e8f0);margin:0 var(--ate-menu-gap, 2px);flex-shrink:0}\n"] }]
         }] });
 
+/** Whether `pos` holds an image node (`NodeSelection.create` throws on an empty position) */
+function isImageAt(doc, pos) {
+    return pos >= 0 && pos < doc.content.size && doc.nodeAt(pos)?.type.name === "resizableImage";
+}
 class AteImageService {
     constructor() {
         /** Signals for image state */
@@ -4155,11 +4159,15 @@ class AteImageService {
             .chain()
             .focus()
             .setResizableImage(imageData)
-            .command(({ tr, commands }) => {
+            .command(({ tr }) => {
             // Selection is usually after the node. Node is at tr.selection.from - 1.
+            // Only select a position that holds an image: NodeSelection throws on an empty position.
             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;
+            const imagePos = [from, from - 1].find(pos => isImageAt(tr.doc, pos));
+            if (imagePos !== undefined) {
+                tr.setSelection(NodeSelection.create(tr.doc, imagePos));
+            }
+            return true;
         })
             .run();
     }
@@ -4523,42 +4531,80 @@ class AteImageService {
     }
     /** Select file and replace currently selected image */
     async selectAndReplaceImage(editor, options) {
-        // No need for complicated backup/restore now that we don't delete prematurely.
-        // The uploadAndReplaceImage will handle the atomic replacement.
-        return this.selectFileAndProcess(editor, this.uploadAndReplaceImage.bind(this), options);
+        // Remember the image now: opening the file picker can move the selection (e.g. on WebKit)
+        const target = this.trackSelectedImage(editor);
+        try {
+            await this.selectFileAndProcess(editor, (ed, file, opts, source) => this.uploadAndReplaceImage(ed, file, opts, source, target), options);
+        }
+        finally {
+            target.stop();
+        }
     }
     /** Internal helper used by replacement logic */
-    async uploadAndReplaceImage(editor, file, options, source = "api") {
-        // Store current position to ensure we can re-select the image even if selection blurs during upload
-        const wasActive = editor.isActive("resizableImage");
-        await this.uploadImageWithProgress(editor, file, (ed, result) => {
-            const imageData = {
-                src: result.src,
-                alt: result.name,
-                title: `${result.name} (${result.width}×${result.height})`,
-                width: result.width,
-                height: result.height,
-            };
-            // If the image was active or is still active, update it atomically
-            if (wasActive || ed.isActive("resizableImage")) {
-                ed.chain()
-                    .focus()
-                    .updateAttributes("resizableImage", imageData)
-                    .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);
+    async uploadAndReplaceImage(editor, file, options, source = "api", target) {
+        // The image to replace is the one selected when the replacement started, wherever the selection is after the upload
+        const tracked = target ?? this.trackSelectedImage(editor);
+        try {
+            await this.uploadImageWithProgress(editor, file, (ed, result) => {
+                const imageData = {
+                    src: result.src,
+                    alt: result.name,
+                    title: `${result.name} (${result.width}×${result.height})`,
+                    width: result.width,
+                    height: result.height,
+                };
+                if (this.replaceImageAt(ed, tracked.pos(), imageData)) {
+                    this.updateSelectedImage(imageData);
+                }
+                else {
+                    // No image to replace (none was selected, or it was removed during the upload): insert at cursor
+                    this.insertImage(ed, imageData);
+                }
+                // After replacement, ensure the image is tracked in our signals
+                this.selectImage(ed);
+            }, this.t().replacingImage, options, source);
+        }
+        finally {
+            if (!target) {
+                tracked.stop();
             }
-            else {
-                // Otherwise replace whatever is selected (or insert at cursor)
-                this.insertImage(ed, imageData);
+        }
+    }
+    /**
+     * Remembers the selected image and follows its position through the transactions
+     * dispatched until `stop()` (e.g. while the file picker is open and the image uploads).
+     */
+    trackSelectedImage(editor) {
+        const { selection } = editor.state;
+        let pos = selection instanceof NodeSelection && isImageAt(editor.state.doc, selection.from)
+            ? selection.from
+            : null;
+        const onTransaction = ({ transaction }) => {
+            if (pos !== null && transaction.docChanged) {
+                pos = transaction.mapping.map(pos);
             }
-            // After replacement, ensure the image is tracked in our signals
-            this.selectImage(ed);
-        }, this.t().replacingImage, options, source);
+        };
+        editor.on("transaction", onTransaction);
+        return {
+            pos: () => pos,
+            stop: () => editor.off("transaction", onTransaction),
+        };
+    }
+    /** Replaces the image at `pos` with `imageData` (keeping its other attributes) and selects it */
+    replaceImageAt(editor, pos, imageData) {
+        if (pos === null || !isImageAt(editor.state.doc, pos)) {
+            return false;
+        }
+        return editor
+            .chain()
+            .focus()
+            .command(({ tr }) => {
+            const node = tr.doc.nodeAt(pos);
+            tr.setNodeMarkup(pos, undefined, { ...node.attrs, ...imageData });
+            tr.setSelection(NodeSelection.create(tr.doc, pos));
+            return true;
+        })
+            .run();
     }
     /**
      * Handle image drop event.
@@ -8816,12 +8862,10 @@ class AteSlashCommandsComponent {
         // Hide menu immediately
         this.hideTippy();
         this.isActive = false;
-        // Give focus back to editor and execute command
-        // Use a micro-delay to ensure ProseMirror DOM is stable after removing "/"
-        setTimeout(() => {
-            ed.commands.focus();
-            command.command(ed);
-        }, 10);
+        // Give focus back to editor and execute command right away: ProseMirror updates the DOM synchronously
+        // on dispatch, and any delay lets keys typed in the meantime land in the paragraph the "/" was typed in
+        ed.commands.focus();
+        command.command(ed);
     }
     addKeyboardPlugin(ed) {
         // Add a ProseMirror plugin to intercept keyboard events
@@ -9958,6 +10002,8 @@ class AngularTiptapEditorComponent {
         this._wordCount = signal(0);
         this._isDragOver = signal(false);
         this._editorFullyInitialized = signal(false);
+        /** Technical config the current editor was created with, see `technicalConfig()` */
+        this.editorTechnicalConfig = null;
         this._hoveredBlock = signal(null);
         // Anti-echo: track last emitted HTML to prevent cursor reset on parent echo
         this.lastEmittedHtml = null;
@@ -10246,22 +10292,19 @@ class AngularTiptapEditorComponent {
         }, { allowSignalWrites: true });
         // Effect to re-initialize editor when technical configuration changes
         effect(() => {
-            // Monitor technical dependencies
-            this.finalTiptapExtensions();
-            this.finalTiptapOptions();
-            this.finalStarterKitOptions();
-            this.finalAngularNodesConfig();
-            this.finalBlockControls();
+            const technicalConfig = this.technicalConfig();
             untracked(() => {
-                // Only if already initialized (post AfterViewInit)
-                if (this.editorFullyInitialized()) {
-                    const currentEditor = this.editor();
-                    if (currentEditor) {
-                        currentEditor.destroy();
-                        this._editorFullyInitialized.set(false);
-                        this.initEditor();
-                    }
+                const currentEditor = this.editor();
+                // Before the first initEditor (AfterViewInit) there is nothing to re-create: it reads the latest config.
+                // Compare with the config the editor was created with, so a change is never missed, however soon it comes.
+                if (!currentEditor ||
+                    !this.editorTechnicalConfig ||
+                    technicalConfig.every((value, index) => value === this.editorTechnicalConfig[index])) {
+                    return;
                 }
+                currentEditor.destroy();
+                this._editorFullyInitialized.set(false);
+                this.initEditor();
             });
         }, { allowSignalWrites: true });
         this.editorCommandsService.onImageUploaded = result => {
@@ -10290,7 +10333,21 @@ class AngularTiptapEditorComponent {
             this.editorRegistry.unregister(id);
         }
     }
+    /**
+     * Settings that require re-creating the editor when they change.
+     * Each computed compares by value, so a new reference means a real change.
+     */
+    technicalConfig() {
+        return [
+            this.finalTiptapExtensions(),
+            this.finalTiptapOptions(),
+            this.finalStarterKitOptions(),
+            this.finalAngularNodesConfig(),
+            this.finalBlockControls(),
+        ];
+    }
     initEditor() {
+        this.editorTechnicalConfig = this.technicalConfig();
         this.editorCommandsService.srcResolver = this.finalImageSrcResolver() ?? null;
         const starterKitOptions = this.finalStarterKitOptions();
         const customExtensions = this.finalTiptapExtensions();
@@ -10528,11 +10585,8 @@ class AngularTiptapEditorComponent {
             onCreate: ({ editor }) => {
                 this.editorCreated.emit(editor);
                 this.updateCharacterCount(editor);
-                // Marquer l'éditeur comme complètement initialisé après un court délai
-                // pour s'assurer que tous les plugins et extensions sont prêts
-                setTimeout(() => {
-                    this._editorFullyInitialized.set(true);
-                }, 100);
+                // Tiptap emits create once every extension and plugin is mounted: the menus can show
+                this._editorFullyInitialized.set(true);
             },
             onFocus: ({ editor, event }) => {
                 const id = this.registeredId();