@h-k-dev/angular-email-editor 0.0.2 → 0.0.3

package/fesm2022/h-k-dev-angular-email-editor.mjs

@@ -15626,12 +15626,16 @@ const createBubbleMenu = (options) => defineExtension({
                 let mouseSelecting = false;
                 let destroyed = false;
                 let open = false;
+                // Where the open menu stands (`anchor: 'first'`): the range or the
+                // node it opened over, and the box measured there.
+                let pinned = null;
                 // Closed is said once: a caret moving through the text, or a press
                 // elsewhere on the page, is no news to a host that already knows.
                 const close = () => {
                     if (!open)
                         return;
                     open = false;
+                    pinned = null;
                     options.onStateChange({ isOpen: false, boundingBox: null });
                 };
                 // Whether the menu may show: not mid-drag, the host's say-so, and
@@ -15641,40 +15645,16 @@ const createBubbleMenu = (options) => defineExtension({
                     !mouseSelecting &&
                     (options.shouldShow || defaultBubbleShouldShow)(view.state) &&
                     view.hasFocus();
-                // Reports the menu open over the current selection.
-                const show = () => {
-                    // Asked again once the delay is over: in between, the host may
-                    // have opened something of its own there (a click on a button
-                    // opens its link editor) that its `shouldShow` now says no to.
-                    if (!canShow())
-                        return close();
-                    // An image alone, or a button: the menu stands over the node
-                    // itself.
-                    const image = selectedImage(view.state);
-                    const button = image ? null : selectedButton(view.state);
-                    const node = image ?? button;
-                    const dom = node && view.nodeDOM(node.pos);
-                    if (dom && typeof dom.getBoundingClientRect === 'function') {
-                        open = true;
-                        options.onStateChange({
-                            isOpen: true,
-                            boundingBox: dom.getBoundingClientRect(),
-                            kind: image ? 'image' : 'button',
-                        });
-                        return;
-                    }
-                    const { from, to } = view.state.selection;
-                    // Get coordinates of the selection boundaries
+                // The box of a range: from its start to its end, over every line it
+                // takes — the virtual DOMRect the host's overlay anchors to.
+                const rangeBox = (from, to) => {
                     const start = view.coordsAtPos(from);
                     const end = view.coordsAtPos(to, -1);
-                    // Construct a virtual DOMRect representing the text selection.
-                    // Angular CDK uses this to anchor the overlay!
                     const top = Math.min(start.top, end.top);
                     const bottom = Math.max(start.bottom, end.bottom);
                     const left = Math.min(start.left, end.left);
                     const right = Math.max(start.right, end.right);
-                    // Construct a mathematically perfect virtual DOMRect
-                    const boundingBox = {
+                    return {
                         top,
                         bottom,
                         left,
@@ -15685,8 +15665,51 @@ const createBubbleMenu = (options) => defineExtension({
                         y: top,
                         toJSON: () => '',
                     };
+                };
+                // The box of a node: its own element's, while it has one.
+                const nodeBox = (pos) => {
+                    const dom = view.nodeDOM(pos);
+                    return dom && typeof dom.getBoundingClientRect === 'function'
+                        ? dom.getBoundingClientRect()
+                        : null;
+                };
+                // Reports the menu open over the current selection — standing
+                // where it opened (`anchor: 'first'`), or over the selection of
+                // the moment. `remeasure`: the pinned place has moved on screen
+                // (a scroll), so its box is measured again.
+                const show = (remeasure = false) => {
+                    // Asked again once the delay is over: in between, the host may
+                    // have opened something of its own there (a click on a button
+                    // opens its link editor) that its `shouldShow` now says no to.
+                    if (!canShow())
+                        return close();
+                    // An image alone, or a button: the menu is for the node, and
+                    // stands over the node itself — while it has an element to
+                    // stand over; text otherwise.
+                    const image = selectedImage(view.state);
+                    const button = image ? null : selectedButton(view.state);
+                    const node = image ?? button;
+                    const box = node ? nodeBox(node.pos) : null;
+                    const kind = box ? (image ? 'image' : 'button') : 'text';
+                    if (pinned && (options.anchor ?? 'first') === 'first') {
+                        if (remeasure) {
+                            // The same place, where it now is — clamped, in case the
+                            // document shrank under it since.
+                            const size = view.state.doc.content.size;
+                            const from = Math.min(pinned.from, size);
+                            pinned.box =
+                                (pinned.node ? nodeBox(from) : rangeBox(from, Math.min(pinned.to, size))) ??
+                                    pinned.box;
+                        }
+                        options.onStateChange({ isOpen: true, boundingBox: pinned.box, kind });
+                        return;
+                    }
+                    const { from, to } = view.state.selection;
+                    pinned = box
+                        ? { from: node.pos, to: node.pos, node: true, box }
+                        : { from, to, node: false, box: rangeBox(from, to) };
                     open = true;
-                    options.onStateChange({ isOpen: true, boundingBox, kind: 'text' });
+                    options.onStateChange({ isOpen: true, boundingBox: pinned.box, kind });
                 };
                 const refresh = () => {
                     if (destroyed)
@@ -15696,16 +15719,17 @@ const createBubbleMenu = (options) => defineExtension({
                         close();
                         return;
                     }
-                    // Open already: the menu follows the selection *now* — its kind
-                    // and its box change in the same transaction the selection did,
-                    // so what a host renders from the state and what it reads live
-                    // from the editor (an image's alt, an action's enabled) never
-                    // disagree. Delayed, the image's menu stood over a text range
-                    // for the delay, showing the alt of an image no longer selected
-                    // alone — empty — and its image tools disabled, before the
-                    // text's menu replaced it. The delay is for *opening*: a range
-                    // passing through, a drag's intermediate selections, never pop
-                    // a menu of their own.
+                    // Open already: the menu answers the selection *now* — its kind
+                    // (and, following the selection, its box) changes in the same
+                    // transaction the selection did, so what a host renders from the
+                    // state and what it reads live from the editor (an image's alt,
+                    // an action's enabled) never disagree. Delayed, the image's menu
+                    // showed the alt of an image no longer selected alone — empty —
+                    // and its image tools disabled, for the delay, before the text's
+                    // menu replaced it. The delay is for *opening*: a range passing
+                    // through, a drag's intermediate selections, never pop a menu of
+                    // their own. Pinned (`anchor: 'first'`), the box stays where the
+                    // menu opened.
                     if (open)
                         return show();
                     showTimer = setTimeout(show, options.updateDelay ?? 150);
@@ -15742,7 +15766,7 @@ const createBubbleMenu = (options) => defineExtension({
                     close,
                     refresh: () => {
                         if (open)
-                            show();
+                            show(true);
                     },
                 });
                 return {