@flogeez/angular-tiptap-editor 3.8.0 → 3.9.0

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
@@ -8944,6 +8988,382 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: [".slash-commands-menu{background:var(--ate-menu-bg);border:1px solid var(--ate-menu-border);border-radius:var(--ate-menu-border-radius, 12px);box-shadow:var(--ate-menu-shadow);padding:var(--ate-menu-padding);max-height:320px;overflow-y:auto;min-width:280px;outline:none;animation:slashMenuFadeIn .2s cubic-bezier(0,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--ate-scrollbar-thumb) var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar{width:var(--ate-scrollbar-width)}.slash-commands-menu::-webkit-scrollbar-track{background:var(--ate-scrollbar-track)}.slash-commands-menu::-webkit-scrollbar-thumb{background:var(--ate-scrollbar-thumb);border:3px solid transparent;background-clip:content-box;border-radius:10px}.slash-commands-menu::-webkit-scrollbar-thumb:hover{background:var(--ate-scrollbar-thumb-hover);background-clip:content-box}@keyframes slashMenuFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.slash-command-item{display:flex;align-items:center;gap:12px;padding:var(--ate-menu-padding);border-radius:var(--ate-menu-border-radius, 8px);cursor:pointer;transition:all .15s ease;border:var(--ate-border-width, 1px) solid transparent;outline:none;margin-bottom:2px}.slash-command-item:last-child{margin-bottom:0}.slash-command-item:hover{background:var(--ate-surface-secondary)}.slash-command-item.selected{background:var(--ate-primary-light);border-color:var(--ate-primary-light-alpha)}.slash-command-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ate-surface-tertiary);border-radius:var(--ate-sub-border-radius, 8px);color:var(--ate-primary);flex-shrink:0;transition:all .15s ease}.slash-command-item.selected .slash-command-icon{background:var(--ate-primary);color:var(--ate-primary-contrast, #ffffff)}.slash-command-icon .ate-icon{font-size:18px}.slash-command-content{flex:1;min-width:0}.slash-command-title{font-weight:500;color:var(--ate-text);font-size:14px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slash-command-description{color:var(--ate-text-secondary);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [] });
 
+const ATE_BLOCK_DRAG_MIME = "application/x-ate-block-drag";
+const DRAGGING_CLASS = "ate-block-dragging";
+const DROP_BEFORE_CLASS = "ate-block-drop-before";
+const DROP_AFTER_CLASS = "ate-block-drop-after";
+const blockDragKey = new PluginKey("ateBlockDrag");
+const blockDragResetters = new WeakMap();
+function endAteBlockDrag(view) {
+    blockDragResetters.get(view)?.();
+}
+function ateMultiBlockSelection(state, blockPos) {
+    const covered = coveredTopLevelRange(state.doc, state.selection);
+    return covered && blockPos >= covered.from && blockPos < covered.to ? covered : null;
+}
+function coveredTopLevelRange(doc, selection) {
+    const blocks = [];
+    doc.forEach((node, offset) => {
+        const end = offset + node.nodeSize;
+        if (offset < selection.to && end > selection.from) {
+            blocks.push({ from: offset, to: end });
+        }
+    });
+    const last = blocks.at(-1);
+    if (blocks.length < 2 || !last) {
+        return null;
+    }
+    return { from: blocks[0].from, to: last.to };
+}
+function topLevelDropPos(view, point) {
+    const hit = view.posAtCoords({ left: point.clientX, top: point.clientY });
+    if (!hit) {
+        return null;
+    }
+    const $pos = view.state.doc.resolve(hit.pos);
+    if ($pos.depth === 0) {
+        return hit.pos;
+    }
+    const start = $pos.before(1);
+    const dom = view.nodeDOM(start);
+    if (!(dom instanceof Element)) {
+        return $pos.after(1);
+    }
+    const rect = dom.getBoundingClientRect();
+    return point.clientY < rect.top + (rect.bottom - rect.top) / 2 ? start : $pos.after(1);
+}
+function dropIndicatorDecoration(doc, pos) {
+    if (pos > doc.content.size || doc.resolve(pos).depth !== 0) {
+        return null;
+    }
+    if (pos < doc.content.size) {
+        const next = doc.nodeAt(pos);
+        return next ? Decoration.node(pos, pos + next.nodeSize, { class: DROP_BEFORE_CLASS }) : null;
+    }
+    const last = doc.lastChild;
+    return last ? Decoration.node(pos - last.nodeSize, pos, { class: DROP_AFTER_CLASS }) : null;
+}
+// Helper to get the DOM element properly
+function getDomElement(view, pos) {
+    const dom = view.nodeDOM(pos);
+    if (!dom) {
+        return null;
+    }
+    if (dom instanceof HTMLElement) {
+        return dom;
+    }
+    return dom.parentElement;
+}
+// VERTICAL SCAN (For the empty margin)
+function findBlockElementAtY(view, y) {
+    const editorDom = view.dom;
+    const children = Array.from(editorDom.children);
+    // We look for the direct child of the editor (Level 1) that intercepts the Y line
+    return (children.find(child => {
+        if (getComputedStyle(child).position === "absolute") {
+            return false;
+        }
+        const rect = child.getBoundingClientRect();
+        // Tolérance de 5px
+        return y >= rect.top - 5 && y <= rect.bottom + 5;
+    }) || null);
+}
+function resolveBlockData(view, y, targetElement) {
+    let blockEl = null;
+    // 1. FAST PATH : Direct target
+    // LEVEL 1: We look for the first parent element that is a direct child of the editor
+    if (targetElement && !targetElement.classList.contains("ProseMirror")) {
+        blockEl = targetElement.closest(".ProseMirror > *");
+    }
+    // 2. GUTTER PATH : Vertical scan
+    if (!blockEl) {
+        blockEl = findBlockElementAtY(view, y);
+    }
+    if (!blockEl) {
+        return null;
+    }
+    // 3. PROSEMIRROR NODE RESOLUTION
+    try {
+        // We ask for the position at the beginning of this root block
+        const pos = view.posAtDOM(blockEl, 0);
+        const $pos = view.state.doc.resolve(pos);
+        // CASE A : STANDARD BLOCKS (H1, P, Lists, Blockquotes...)
+        // We make sure to take the node of depth 1 (Direct child of the Doc)
+        if ($pos.depth >= 1) {
+            const rootNode = $pos.node(1);
+            const rootPos = $pos.before(1);
+            const rootElement = getDomElement(view, rootPos);
+            // Sécurité : on vérifie que l'élément DOM correspond bien
+            if (rootNode && (rootElement || blockEl)) {
+                return { node: rootNode, element: rootElement || blockEl, pos: rootPos };
+            }
+        }
+        // CASE B : IMAGES / ATOMS (Depth 0)
+        // Sometimes a root image is seen as Depth 0 by resolve()
+        // We look at the node right after the position
+        if ($pos.depth === 0) {
+            const nodeAfter = $pos.nodeAfter;
+            if (nodeAfter && (nodeAfter.isBlock || nodeAfter.isAtom)) {
+                return { node: nodeAfter, element: blockEl, pos: pos };
+            }
+        }
+    }
+    catch (_e) {
+        // console.warn(_e);
+    }
+    return null;
+}
+function createBlockDragPlugin() {
+    let active = null;
+    let marked = null;
+    let stopListening = null;
+    const setIndicator = (view, pos) => {
+        if (blockDragKey.getState(view.state)?.pos !== pos) {
+            view.dispatch(view.state.tr.setMeta(blockDragKey, pos));
+        }
+    };
+    const reset = (view) => {
+        if (active && view.dragging?.slice === active.slice) {
+            view.dragging = null;
+        }
+        active = null;
+        stopListening?.();
+        stopListening = null;
+        marked?.classList.remove(DRAGGING_CLASS);
+        marked = null;
+        if (!view.isDestroyed) {
+            setIndicator(view, null);
+        }
+    };
+    const listenForDragEnd = (view) => {
+        stopListening?.();
+        const onEnd = () => reset(view);
+        const events = ["dragend", "drop"];
+        events.forEach(name => window.addEventListener(name, onEnd));
+        stopListening = () => events.forEach(name => window.removeEventListener(name, onEnd));
+    };
+    const resetOnForeignDrag = (view, event) => {
+        if (active && !Array.from(event.dataTransfer?.types ?? []).includes(ATE_BLOCK_DRAG_MIME)) {
+            reset(view);
+        }
+    };
+    return new Plugin({
+        key: blockDragKey,
+        state: {
+            init: () => ({ pos: null }),
+            apply: (tr, value) => {
+                const meta = tr.getMeta(blockDragKey);
+                if (meta !== undefined) {
+                    return { pos: meta };
+                }
+                return tr.docChanged ? { pos: null } : value;
+            },
+        },
+        view: view => {
+            blockDragResetters.set(view, () => reset(view));
+            return {
+                destroy: () => {
+                    reset(view);
+                    blockDragResetters.delete(view);
+                },
+            };
+        },
+        props: {
+            decorations: state => {
+                const pos = blockDragKey.getState(state)?.pos;
+                if (pos === null || pos === undefined) {
+                    return null;
+                }
+                const decoration = dropIndicatorDecoration(state.doc, pos);
+                return decoration ? DecorationSet.create(state.doc, [decoration]) : null;
+            },
+            handleDOMEvents: {
+                dragstart: (view, event) => {
+                    const transfer = event.dataTransfer;
+                    if (!view.editable ||
+                        !transfer ||
+                        !Array.from(transfer.types).includes(ATE_BLOCK_DRAG_MIME)) {
+                        return false;
+                    }
+                    reset(view);
+                    const { selection, doc } = view.state;
+                    const range = coveredTopLevelRange(doc, selection) ?? {
+                        from: selection.from,
+                        to: selection.to,
+                    };
+                    if (range.from === range.to) {
+                        return false;
+                    }
+                    const slice = doc.slice(range.from, range.to);
+                    active = { ...range, doc, slice };
+                    view.dragging = { slice, move: true };
+                    marked =
+                        view.dom.offsetParent instanceof HTMLElement
+                            ? view.dom.offsetParent
+                            : view.dom.parentElement;
+                    marked?.classList.add(DRAGGING_CLASS);
+                    listenForDragEnd(view);
+                    const { dom, text } = view.serializeForClipboard(slice);
+                    transfer.clearData();
+                    transfer.setData("text/html", dom.innerHTML);
+                    transfer.setData("text/plain", text);
+                    transfer.setData(ATE_BLOCK_DRAG_MIME, "1");
+                    return true;
+                },
+                dragleave: (view, event) => {
+                    const related = event.relatedTarget;
+                    if (active && !(related instanceof globalThis.Node && view.dom.contains(related))) {
+                        setIndicator(view, null);
+                    }
+                    return false;
+                },
+                dragenter: (view, event) => {
+                    resetOnForeignDrag(view, event);
+                    return false;
+                },
+                dragover: (view, event) => {
+                    resetOnForeignDrag(view, event);
+                    if (active && !event.dataTransfer?.files?.length) {
+                        setIndicator(view, topLevelDropPos(view, event));
+                    }
+                    return false;
+                },
+            },
+            handleDrop: (view, event) => {
+                const drag = active;
+                if (!drag || event.dataTransfer?.files?.length) {
+                    return false;
+                }
+                if (drag.doc !== view.state.doc) {
+                    event.preventDefault();
+                    reset(view);
+                    return true;
+                }
+                const target = topLevelDropPos(view, event);
+                if (target === null) {
+                    return false;
+                }
+                event.preventDefault();
+                if (target >= drag.from && target <= drag.to) {
+                    reset(view);
+                    return true;
+                }
+                const tr = view.state.tr.delete(drag.from, drag.to);
+                const at = tr.mapping.map(target);
+                tr.insert(at, drag.slice.content);
+                const { content } = drag.slice;
+                const only = content.childCount === 1 ? content.firstChild : null;
+                tr.setSelection(only && NodeSelection.isSelectable(only)
+                    ? NodeSelection.create(tr.doc, at)
+                    : TextSelection.between(tr.doc.resolve(at), tr.doc.resolve(at + content.size)));
+                tr.setMeta(blockDragKey, null).setMeta("uiEvent", "drop");
+                view.dispatch(tr.scrollIntoView());
+                reset(view);
+                return true;
+            },
+        },
+    });
+}
+const AteBlockControlsExtension = Extension.create({
+    name: "ateBlockControls",
+    addOptions() {
+        return { onHover: undefined };
+    },
+    addProseMirrorPlugins() {
+        let lastHoveredElement = null;
+        let lastHoveredPos = null;
+        let rafId = null;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        // `force` re-resolves the hovered block even if the pointer is still over the last one (after a document change)
+        const update = (view, force = false) => {
+            if (!this.editor.isEditable) {
+                return;
+            }
+            const editorRect = view.dom.getBoundingClientRect();
+            const gutterWidth = 80;
+            // Check Limites (Marge Gauche + Editeur)
+            if (lastMouseY < editorRect.top ||
+                lastMouseY > editorRect.bottom ||
+                lastMouseX > editorRect.right ||
+                lastMouseX < editorRect.left - gutterWidth) {
+                if (lastHoveredElement) {
+                    reset();
+                }
+                return;
+            }
+            // STICKY ANTI-FLICKER
+            // On garde le bloc tant qu'on est dans sa hauteur
+            if (!force && lastHoveredElement && lastHoveredElement.isConnected) {
+                const rect = lastHoveredElement.getBoundingClientRect();
+                if (lastMouseY >= rect.top && lastMouseY <= rect.bottom) {
+                    return;
+                }
+            }
+            const target = document.elementFromPoint(lastMouseX, lastMouseY);
+            const data = resolveBlockData(view, lastMouseY, target);
+            if (data && (data.element !== lastHoveredElement || data.pos !== lastHoveredPos)) {
+                lastHoveredElement = data.element;
+                lastHoveredPos = data.pos;
+                this.options.onHover?.(data);
+            }
+            else if (!data) {
+                if (!lastHoveredElement || !lastHoveredElement.isConnected) {
+                    reset();
+                }
+            }
+        };
+        const reset = () => {
+            this.options.onHover?.(null);
+            lastHoveredElement = null;
+            lastHoveredPos = null;
+        };
+        return [
+            new Plugin({
+                key: new PluginKey("ateBlockControls"),
+                // The hovered block can be removed, replaced or moved by an edit while the pointer stays still:
+                // resolve it again so the controls never point at a detached element or a stale position
+                view: () => ({
+                    update: (view, prevState) => {
+                        if (lastHoveredElement && !view.state.doc.eq(prevState.doc)) {
+                            update(view, true);
+                        }
+                    },
+                }),
+                props: {
+                    handleDOMEvents: {
+                        mousemove: (view, event) => {
+                            lastMouseX = event.clientX;
+                            lastMouseY = event.clientY;
+                            if (rafId === null) {
+                                rafId = requestAnimationFrame(() => {
+                                    update(view);
+                                    rafId = null;
+                                });
+                            }
+                            return false;
+                        },
+                        mouseleave: () => {
+                            if (rafId) {
+                                cancelAnimationFrame(rafId);
+                                rafId = null;
+                            }
+                            reset();
+                            return false;
+                        },
+                    },
+                },
+            }),
+            createBlockDragPlugin(),
+        ];
+    },
+});
+
+// Glides from block to block; the strong ease-out covers most of the way at once, so it never trails the pointer
+const BLOCK_CONTROLS_MOVE_TRANSITION = "transform 200ms cubic-bezier(0.23, 1, 0.32, 1)";
+function prefersReducedMotion() {
+    return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 /**
  * Component providing Notion-like block controls (Plus button and Drag Handle).
  */
@@ -8958,23 +9378,37 @@ class AteBlockControlsComponent {
         this.lastValidRect = null;
         this.tippyInstance = null;
         this.updateTimeout = null;
+        this.glideFrame = null;
+        /** While scrolling, the controls follow their block every frame: a glide would make them trail behind it */
+        this.onScroll = () => {
+            if (this.tippyInstance?.state.isVisible) {
+                this.withoutGlide();
+            }
+        };
         effect(() => {
             const data = this.hoveredData();
             const interacting = this.isInteracting();
             if (data) {
                 this.lastValidData = data;
-                this.lastValidRect = data.element.getBoundingClientRect();
+                if (data.element.isConnected) {
+                    this.lastValidRect = data.element.getBoundingClientRect();
+                }
             }
             this.updateMenu(!!data || interacting);
         });
     }
     ngAfterViewInit() {
         this.initTippy();
+        window.addEventListener("scroll", this.onScroll, { capture: true, passive: true });
     }
     ngOnDestroy() {
+        window.removeEventListener("scroll", this.onScroll, { capture: true });
         if (this.updateTimeout) {
             clearTimeout(this.updateTimeout);
         }
+        if (this.glideFrame !== null) {
+            cancelAnimationFrame(this.glideFrame);
+        }
         if (this.tippyInstance) {
             this.tippyInstance.destroy();
             this.tippyInstance = null;
@@ -8998,7 +9432,8 @@ class AteBlockControlsComponent {
             zIndex: 99,
             plugins: [sticky],
             sticky: "reference",
-            moveTransition: "transform 0.2s ease-out",
+            // The glide keeps the handle visibly the same one moving with the pointer (see withoutGlide for when it is skipped)
+            moveTransition: prefersReducedMotion() ? "" : BLOCK_CONTROLS_MOVE_TRANSITION,
             getReferenceClientRect: () => this.getSelectionRect(),
             popperOptions: {
                 modifiers: [
@@ -9027,8 +9462,33 @@ class AteBlockControlsComponent {
             }
         }, delay);
     }
+    /**
+     * Moves the controls without gliding until the position settles (two frames after the last call).
+     * Tippy only skips the move transition on its very first show: the controls are never unmounted
+     * afterwards, so they would otherwise glide in from wherever they were last shown.
+     */
+    withoutGlide() {
+        const popper = this.tippyInstance?.popper;
+        if (!popper) {
+            return;
+        }
+        popper.style.transition = "none";
+        if (this.glideFrame !== null) {
+            cancelAnimationFrame(this.glideFrame);
+        }
+        this.glideFrame = requestAnimationFrame(() => {
+            this.glideFrame = requestAnimationFrame(() => {
+                this.glideFrame = null;
+                popper.style.transition = this.tippyInstance?.props.moveTransition ?? "";
+            });
+        });
+    }
     showTippy() {
         if (this.tippyInstance) {
+            // Appearing: show the controls in place, the glide is only for moving between blocks
+            if (!this.tippyInstance.state.isVisible) {
+                this.withoutGlide();
+            }
             this.tippyInstance.setProps({
                 getReferenceClientRect: () => this.getSelectionRect(),
             });
@@ -9042,8 +9502,10 @@ class AteBlockControlsComponent {
     }
     getSelectionRect() {
         const data = this.hoveredData();
-        if (data && data.element) {
-            return data.element.getBoundingClientRect();
+        // A block removed by an edit is detached: its rect is (0, 0), which would send the controls to the editor's corner
+        if (data?.element?.isConnected) {
+            this.lastValidRect = data.element.getBoundingClientRect();
+            return this.lastValidRect;
         }
         return this.lastValidRect || new DOMRect(-9999, -9999, 0, 0);
     }
@@ -9068,7 +9530,7 @@ class AteBlockControlsComponent {
         event.stopPropagation();
         const ed = this.editor();
         const data = this.hoveredData() || this.lastValidData;
-        if (ed && data) {
+        if (ed && data && !ateMultiBlockSelection(ed.state, data.pos)) {
             // Force whole-node selection. This is crucial for atomic nodes like tables and images.
             ed.commands.setNodeSelection(data.pos);
         }
@@ -9107,32 +9569,33 @@ class AteBlockControlsComponent {
         }
         const { element, pos } = data;
         const view = ed.view;
-        // 1. Force the editor to focus and select the ENTIRE node
+        // 1. Select the grabbed block, unless it belongs to a multi-block selection that is dragged as a whole
         view.focus();
-        ed.commands.setNodeSelection(pos);
+        if (!ateMultiBlockSelection(ed.state, pos)) {
+            ed.commands.setNodeSelection(pos);
+        }
         // 2. Browser Drag Image & metadata
         event.dataTransfer.setDragImage(element, 0, 10);
         event.dataTransfer.effectAllowed = "move";
-        event.dataTransfer.setData("text/plain", "");
-        // 3. PRO-HACK: Indicate this is a move of the current selection (the whole node)
-        view.dragging = {
-            slice: ed.state.selection.content(),
-            move: true,
-        };
-        // 4. Dispatch virtual dragstart
+        event.dataTransfer.setData(ATE_BLOCK_DRAG_MIME, "1");
+        // 3. Dispatch virtual dragstart, handled by the block drag plugin of AteBlockControlsExtension
         const pmEvent = new DragEvent("dragstart", {
             dataTransfer: event.dataTransfer,
             bubbles: true,
             cancelable: true,
         });
         element.dispatchEvent(pmEvent);
-        // 5. Cleanup UI
+        // 4. Cleanup UI
         setTimeout(() => {
             this.hideTippy();
             this.isInteracting.set(false);
         }, 0);
     }
     onDragEnd() {
+        const ed = this.editor();
+        if (!ed.isDestroyed) {
+            endAteBlockDrag(ed.view);
+        }
         this.isInteracting.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBlockControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -9162,7 +9625,7 @@ class AteBlockControlsComponent {
         <ate-icon name="blockDrag" />
       </div>
     </div>
-  `, isInline: true, styles: [".ate-block-controls{display:flex;align-items:center;gap:2px;padding:4px;pointer-events:auto;will-change:transform}.ate-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:var(--ate-text-secondary);cursor:pointer;transition:all .15s ease}.ate-control-btn:hover{background:var(--ate-surface-tertiary);color:var(--ate-text)}.ate-control-btn .ate-icon{font-size:18px}@media (max-width: 768px){:host{display:none!important}}\n"], dependencies: [{ kind: "directive", type: AteTooltipDirective, selector: "[ateTooltip]", inputs: ["ateTooltip", "ateTooltipPlacement", "ateTooltipDelay", "ateTooltipDisabled"] }, { kind: "component", type: AteIconComponent, selector: "ate-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".ate-block-controls{display:flex;align-items:center;gap:2px;padding:4px;pointer-events:auto;will-change:transform}.ate-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:var(--ate-text-secondary);cursor:pointer}@media (hover: hover) and (pointer: fine){.ate-control-btn{transition:background-color .12s ease-out,color .12s ease-out}.ate-control-btn:hover{background:var(--ate-surface-tertiary);color:var(--ate-text)}}.ate-control-btn .ate-icon{font-size:18px}@media (max-width: 768px){:host{display:none!important}}\n"], dependencies: [{ kind: "directive", type: AteTooltipDirective, selector: "[ateTooltip]", inputs: ["ateTooltip", "ateTooltipPlacement", "ateTooltipDelay", "ateTooltipDisabled"] }, { kind: "component", type: AteIconComponent, selector: "ate-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteBlockControlsComponent, decorators: [{
             type: Component,
@@ -9192,7 +9655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ate-icon name="blockDrag" />
       </div>
     </div>
-  `, styles: [".ate-block-controls{display:flex;align-items:center;gap:2px;padding:4px;pointer-events:auto;will-change:transform}.ate-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:var(--ate-text-secondary);cursor:pointer;transition:all .15s ease}.ate-control-btn:hover{background:var(--ate-surface-tertiary);color:var(--ate-text)}.ate-control-btn .ate-icon{font-size:18px}@media (max-width: 768px){:host{display:none!important}}\n"] }]
+  `, styles: [".ate-block-controls{display:flex;align-items:center;gap:2px;padding:4px;pointer-events:auto;will-change:transform}.ate-control-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:var(--ate-text-secondary);cursor:pointer}@media (hover: hover) and (pointer: fine){.ate-control-btn{transition:background-color .12s ease-out,color .12s ease-out}.ate-control-btn:hover{background:var(--ate-surface-tertiary);color:var(--ate-text)}}.ate-control-btn .ate-icon{font-size:18px}@media (max-width: 768px){:host{display:none!important}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -9553,160 +10016,6 @@ const AteLinkClickBehavior = Extension.create({
     },
 });
 
-// Helper to get the DOM element properly
-function getDomElement(view, pos) {
-    const dom = view.nodeDOM(pos);
-    if (!dom) {
-        return null;
-    }
-    if (dom instanceof HTMLElement) {
-        return dom;
-    }
-    return dom.parentElement;
-}
-// VERTICAL SCAN (For the empty margin)
-function findBlockElementAtY(view, y) {
-    const editorDom = view.dom;
-    const children = Array.from(editorDom.children);
-    // We look for the direct child of the editor (Level 1) that intercepts the Y line
-    return (children.find(child => {
-        if (getComputedStyle(child).position === "absolute") {
-            return false;
-        }
-        const rect = child.getBoundingClientRect();
-        // Tolérance de 5px
-        return y >= rect.top - 5 && y <= rect.bottom + 5;
-    }) || null);
-}
-function resolveBlockData(view, y, targetElement) {
-    let blockEl = null;
-    // 1. FAST PATH : Direct target
-    // LEVEL 1: We look for the first parent element that is a direct child of the editor
-    if (targetElement && !targetElement.classList.contains("ProseMirror")) {
-        blockEl = targetElement.closest(".ProseMirror > *");
-    }
-    // 2. GUTTER PATH : Vertical scan
-    if (!blockEl) {
-        blockEl = findBlockElementAtY(view, y);
-    }
-    if (!blockEl) {
-        return null;
-    }
-    // 3. PROSEMIRROR NODE RESOLUTION
-    try {
-        // We ask for the position at the beginning of this root block
-        const pos = view.posAtDOM(blockEl, 0);
-        const $pos = view.state.doc.resolve(pos);
-        // CASE A : STANDARD BLOCKS (H1, P, Lists, Blockquotes...)
-        // We make sure to take the node of depth 1 (Direct child of the Doc)
-        if ($pos.depth >= 1) {
-            const rootNode = $pos.node(1);
-            const rootPos = $pos.before(1);
-            const rootElement = getDomElement(view, rootPos);
-            // Sécurité : on vérifie que l'élément DOM correspond bien
-            if (rootNode && (rootElement || blockEl)) {
-                return { node: rootNode, element: rootElement || blockEl, pos: rootPos };
-            }
-        }
-        // CASE B : IMAGES / ATOMS (Depth 0)
-        // Sometimes a root image is seen as Depth 0 by resolve()
-        // We look at the node right after the position
-        if ($pos.depth === 0) {
-            const nodeAfter = $pos.nodeAfter;
-            if (nodeAfter && (nodeAfter.isBlock || nodeAfter.isAtom)) {
-                return { node: nodeAfter, element: blockEl, pos: pos };
-            }
-        }
-    }
-    catch (_e) {
-        // console.warn(_e);
-    }
-    return null;
-}
-const AteBlockControlsExtension = Extension.create({
-    name: "ateBlockControls",
-    addOptions() {
-        return { onHover: undefined };
-    },
-    addProseMirrorPlugins() {
-        let lastHoveredElement = null;
-        let lastHoveredPos = null;
-        let rafId = null;
-        let lastMouseX = 0;
-        let lastMouseY = 0;
-        const update = (view) => {
-            if (!this.editor.isEditable) {
-                return;
-            }
-            const editorRect = view.dom.getBoundingClientRect();
-            const gutterWidth = 80;
-            // Check Limites (Marge Gauche + Editeur)
-            if (lastMouseY < editorRect.top ||
-                lastMouseY > editorRect.bottom ||
-                lastMouseX > editorRect.right ||
-                lastMouseX < editorRect.left - gutterWidth) {
-                if (lastHoveredElement) {
-                    reset();
-                }
-                return;
-            }
-            // STICKY ANTI-FLICKER
-            // On garde le bloc tant qu'on est dans sa hauteur
-            if (lastHoveredElement && lastHoveredElement.isConnected) {
-                const rect = lastHoveredElement.getBoundingClientRect();
-                if (lastMouseY >= rect.top && lastMouseY <= rect.bottom) {
-                    return;
-                }
-            }
-            const target = document.elementFromPoint(lastMouseX, lastMouseY);
-            const data = resolveBlockData(view, lastMouseY, target);
-            if (data && (data.element !== lastHoveredElement || data.pos !== lastHoveredPos)) {
-                lastHoveredElement = data.element;
-                lastHoveredPos = data.pos;
-                this.options.onHover?.(data);
-            }
-            else if (!data) {
-                if (!lastHoveredElement || !lastHoveredElement.isConnected) {
-                    reset();
-                }
-            }
-        };
-        const reset = () => {
-            this.options.onHover?.(null);
-            lastHoveredElement = null;
-            lastHoveredPos = null;
-        };
-        return [
-            new Plugin({
-                key: new PluginKey("ateBlockControls"),
-                props: {
-                    handleDOMEvents: {
-                        mousemove: (view, event) => {
-                            lastMouseX = event.clientX;
-                            lastMouseY = event.clientY;
-                            if (rafId === null) {
-                                rafId = requestAnimationFrame(() => {
-                                    update(view);
-                                    rafId = null;
-                                });
-                            }
-                            return false;
-                        },
-                        mouseleave: () => {
-                            if (rafId) {
-                                cancelAnimationFrame(rafId);
-                                rafId = null;
-                            }
-                            reset();
-                            return false;
-                        },
-                    },
-                },
-            }),
-        ];
-    },
-});
-
 function shallowArrayEqual(a, b) {
     return a === b || (a.length === b.length && a.every((item, i) => item === b[i]));
 }
@@ -9958,6 +10267,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 +10557,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 +10598,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 +10850,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();