@flogeez/angular-tiptap-editor 3.8.1 → 3.9.0

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

@@ -8988,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).
  */
@@ -9002,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;
@@ -9042,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: [
@@ -9071,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(),
             });
@@ -9086,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);
     }
@@ -9112,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);
         }
@@ -9151,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 }); }
@@ -9206,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,
@@ -9236,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: () => [] });
 
 /**
@@ -9597,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]));
 }