@jxsuite/studio 0.33.0 → 0.34.0

package/src/panels/block-action-bar.ts

@@ -8,11 +8,12 @@ import { html, render as litRender, nothing } from "lit-html";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
 
 import {
+  canvasWrap,
   childIndex,
   childList,
-  elToScope,
   getNodeAtPath,
   nodeLabel,
   parentElementPath,
@@ -20,21 +21,27 @@ import {
 import { activeTab } from "../workspace/workspace";
 import { mutateMoveNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
-import { getActiveElement, getInlineActions, isEditing } from "../editor/inline-edit";
+import { getInlineActions } from "../editor/inline-edit";
 import type { InlineAction } from "../editor/inline-edit";
-import { isTagActiveInSelection, toggleInlineFormat } from "../editor/inline-format";
-import { buildMergeTags } from "../editor/merge-tags";
+import { buildMergeTags, buildRepeaterTagsFromFields } from "../editor/merge-tags";
+import { findEnclosingRepeater, resolveRepeaterItemFields } from "../editor/repeater-scope";
+import { projectState } from "../state";
 import { componentRegistry } from "../files/components";
 import { convertToComponent } from "../editor/convert-to-component";
-import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
+import { getEditBarAnchorRect, getEditSnapshot, postApplyFormat } from "../canvas/iframe-host";
 import { getLayerSlot } from "../ui/layers";
 import { showSlashMenu } from "../editor/slash-menu";
 import { getConvertTargets } from "../editor/convert-targets";
+import { rectOf } from "../utils/geometry";
 
+import type { ApplyFormatIntent } from "../canvas/iframe-protocol";
 import type { JxPath } from "../state";
 import type { TemplateResult } from "lit-html";
 import type { SlashCommand } from "../editor/convert-targets.js";
 
+/** The plain format commands (everything an action button posts except link/insertData). */
+type FormatCommand = Extract<ApplyFormatIntent, { command: "bold" }>["command"];
+
 /**
  * @type {{
  *   getCanvasMode: () => string;
@@ -59,6 +66,149 @@ export function initBlockActionBar(ctx: {
   navigateToComponent: (path: string) => void;
 }) {
   _ctx = ctx;
+  if (!_formatShortcutBound) {
+    document.addEventListener("keydown", handleParentFormatShortcut);
+    // `scroll` doesn't bubble but IS deliverable capture-phase at the document — one app-lifetime
+    // Listener covers .content-edit-canvas (edit mode), window scrolls, and any future scroll
+    // Container, keeping the position:fixed bar tracking its (scrolling) anchor.
+    document.addEventListener("scroll", onCanvasScroll, { capture: true, passive: true });
+    _formatShortcutBound = true;
+  }
+}
+
+/** Register the parent-document format-shortcut + scroll handlers exactly once. */
+let _formatShortcutBound = false;
+
+/** One reposition per frame, no matter how many scroll events land in it. */
+let _scrollRafPending = false;
+
+/**
+ * Reposition the bar on a canvas-area scroll — rAF-throttled and via the style fast path ({@link
+ * repositionBlockActionBar}), NOT a full lit re-render (which would tear down and re-create the
+ * drag-handle's pragmatic-dnd registration every frame). Exported for tests.
+ *
+ * @param {Event} e
+ */
+export function onCanvasScroll(e: Event): void {
+  if (!_ctx || _linkPopoverOpen) {
+    return;
+  }
+  if (!activeTab.value?.session.selection) {
+    return;
+  }
+  const mode = _ctx.getCanvasMode();
+  if (mode !== "design" && mode !== "edit") {
+    return;
+  }
+  // Only canvas-area scrolls (or the window itself) move the anchor; left/right panel scrolling
+  // Never does.
+  const isCanvasScroll =
+    e.target === document ||
+    (canvasWrap != null && e.target instanceof Node && canvasWrap.contains(e.target));
+  if (!isCanvasScroll || _scrollRafPending) {
+    return;
+  }
+  _scrollRafPending = true;
+  requestAnimationFrame(() => {
+    _scrollRafPending = false;
+    repositionBlockActionBar();
+  });
+}
+
+/**
+ * Style-only fast path: move the existing bar to the anchor's current position (fresh
+ * {@link getEditBarAnchorRect} — the iframe's GBCR moves with the scroll). Hides via `visibility`
+ * when the anchor left the canvas area so the lit tree (and the drag handle's dnd registration)
+ * survives; a bar hidden by the full render path (`nothing`) is resurrected with a full render.
+ */
+function repositionBlockActionBar(): void {
+  const bar = view.blockActionBarEl?.firstElementChild as HTMLElement | null;
+  if (!bar) {
+    renderBlockActionBar();
+    return;
+  }
+  const anchor = getEditBarAnchorRect();
+  const pos = anchor ? barPosition(anchor) : null;
+  if (!pos) {
+    bar.style.visibility = "hidden";
+    return;
+  }
+  bar.style.visibility = "";
+  bar.style.left = `${pos.left}px`;
+  bar.style.top = `${pos.top}px`;
+  clampBarToWindow(bar);
+}
+
+/**
+ * The bar's position for `anchor` (flipping below the element near the top edge), or null when the
+ * anchor's vertical extent has left the canvas area — the popover layer has no clipping, so a
+ * clamped bar would float detached over the app toolbar / panel headers.
+ *
+ * @param {{ left: number; top: number; height: number }} anchor
+ */
+function barPosition(anchor: {
+  left: number;
+  top: number;
+  height: number;
+}): { left: number; top: number } | null {
+  if (canvasWrap) {
+    const wrap = rectOf(canvasWrap);
+    if (anchor.top + anchor.height < wrap.top || anchor.top > wrap.bottom) {
+      return null;
+    }
+  }
+  return {
+    left: anchor.left,
+    top: anchor.top < 80 ? anchor.top + anchor.height + 4 : anchor.top - 38,
+  };
+}
+
+/**
+ * Pull the bar back inside the window's right edge.
+ *
+ * @param {HTMLElement} bar
+ */
+function clampBarToWindow(bar: HTMLElement): void {
+  const barRect = rectOf(bar);
+  if (barRect.right > window.innerWidth) {
+    bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
+  }
+}
+
+/**
+ * Route Ctrl/Cmd+B/I/`/K to the iframe while an inline-edit session is live but focus is on the
+ * PARENT (the format toolbar or its link popover) — the keystroke never reaches the iframe's own
+ * contenteditable handler. When focus is inside the canvas iframe, do nothing (the iframe handles
+ * it and forwards globals via `forwardKey`). Exported so the unit test can dispatch it directly.
+ *
+ * @param {KeyboardEvent} e
+ */
+export function handleParentFormatShortcut(e: KeyboardEvent): void {
+  if (!(e.ctrlKey || e.metaKey) || e.altKey) {
+    return;
+  }
+  if (!getEditSnapshot().editing) {
+    return;
+  }
+  // Focus inside the cross-origin canvas iframe surfaces as the <iframe> element being active.
+  const active = document.activeElement;
+  if (active instanceof HTMLIFrameElement && active.classList.contains("jx-canvas-iframe")) {
+    return;
+  }
+  const key = e.key.toLowerCase();
+  if (key === "b") {
+    e.preventDefault();
+    postApplyFormat({ command: "bold" });
+  } else if (key === "i") {
+    e.preventDefault();
+    postApplyFormat({ command: "italic" });
+  } else if (key === "`") {
+    e.preventDefault();
+    postApplyFormat({ command: "code" });
+  } else if (key === "k") {
+    e.preventDefault();
+    openLinkPopoverFromShortcut();
+  }
 }
 
 /** Pre-built icon templates for inline format buttons (avoids unsafeStatic) */
@@ -114,15 +264,10 @@ function onTagBadgeClick(e: MouseEvent, targets: SlashCommand[], selection: JxPa
   });
 }
 
-/** Saved selection range for format button mousedown→click flow */
-function captureSelectionRange() {
-  const sel = window.getSelection();
-  if (sel && sel.rangeCount) {
-    view.savedRange = sel.getRangeAt(0).cloneRange();
-  }
-}
-
 /**
+ * Handle a format-button click. The iframe owns the Selection — link opens the parent popover;
+ * every other command posts an `applyFormat` intent across the bridge.
+ *
  * @param {MouseEvent} e
  * @param {InlineAction} action
  */
@@ -130,18 +275,8 @@ function onFormatClick(e: MouseEvent, action: InlineAction) {
   e.stopPropagation();
   if (action.command === "link") {
     showLinkPopover((e.target as HTMLElement).closest("sp-action-button") as HTMLElement);
-  } else if (view.savedRange) {
-    const sel = window.getSelection();
-    const anchor = view.savedRange.startContainer;
-    const editableRoot = (
-      anchor?.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor?.parentElement
-    )?.closest("[contenteditable]");
-    if (editableRoot) {
-      (editableRoot as HTMLElement).focus();
-      sel?.removeAllRanges();
-      sel?.addRange(view.savedRange);
-      applyInlineFormat(action);
-    }
+  } else if (action.command) {
+    postApplyFormat({ command: action.command as FormatCommand });
   }
 }
 
@@ -208,33 +343,10 @@ function renderMoveArrows() {
   `;
 }
 
-/**
- * Apply an inline format action.
- *
- * @param {InlineAction} action
- */
-function applyInlineFormat(action: InlineAction) {
-  const cmdToTag: Record<string, string> = {
-    bold: "strong",
-    code: "code",
-    italic: "em",
-    strikethrough: "del",
-    subscript: "sub",
-    superscript: "sup",
-    underline: "u",
-  };
-
-  const tag = action.command ? cmdToTag[action.command] : undefined;
-  if (tag) {
-    const editableRoot = getActiveElement();
-    toggleInlineFormat(tag, editableRoot);
-  }
-  requestAnimationFrame(() => renderBlockActionBar());
-}
-
 /**
  * Open the merge-tag menu — a searchable list of `${…}` template tokens for the data available in
  * the current state. Reuses the shared slash-menu popover (filter + keyboard nav + dismiss).
+ * Selecting a token posts an `insertData` intent the iframe applies at its caret.
  *
  * @param {MouseEvent} e
  */
@@ -242,12 +354,26 @@ function onMergeTagClick(e: MouseEvent) {
   e.stopPropagation();
   const anchorEl = e.currentTarget as HTMLElement;
   const tab = activeTab.value;
-  const editable = getActiveElement();
   const state = (tab?.doc.document.state ?? {}) as Record<string, unknown>;
-  const scope = getActivePanel()?.liveCtx?.scope ?? null;
-  const localScope = editable ? (elToScope.get(editable) ?? null) : null;
+  // The live resolved scope lives inside the iframe realm and is not threaded out, so the parent
+  // Offers only top-level `state.*` tokens (buildMergeTags tolerates the null scopes).
+  const tags = buildMergeTags(state, null, null);
+
+  // When the caret sits inside a repeater, offer its local scope (item/index + item fields). There is
+  // No live `$map` in edit mode — the perimeter renders one glyph template — so fields resolve
+  // Parent-side from schema, keyed off the selected element's doc path (which carries a `map` segment).
+  const selPath = getEditSnapshot().snapshot?.path ?? tab?.session.selection;
+  const arrayNode = tab && selPath ? findEnclosingRepeater(tab.doc.document, selPath) : null;
+  if (arrayNode) {
+    const tokens = resolveRepeaterItemFields(
+      arrayNode,
+      tab!.doc.document.state as Record<string, unknown>,
+      projectState?.projectConfig,
+    );
+    tags.push(...buildRepeaterTagsFromFields(tokens));
+  }
 
-  const commands = buildMergeTags(state, scope, localScope).map((t) => ({
+  const commands = tags.map((t) => ({
     description: t.hint,
     label: t.label,
     tag: t.token,
@@ -255,39 +381,14 @@ function onMergeTagClick(e: MouseEvent) {
 
   showSlashMenu(anchorEl, "", {
     commands,
-    onSelect: (cmd) => insertMergeTag(cmd.tag),
+    onSelect: (cmd) => postApplyFormat({ command: "insertData", token: cmd.tag }),
     showFilter: true,
   });
 }
 
-/**
- * Insert a `${token}` template expression at the saved selection inside the active contenteditable.
- * Mirrors onFormatClick's range-restore flow and inserts via execCommand so it joins the
- * contenteditable's native undo stack (like paste).
- *
- * @param {string} token
- */
-function insertMergeTag(token: string) {
-  if (!view.savedRange) {
-    return;
-  }
-  const anchor = view.savedRange.startContainer;
-  const editableRoot = (
-    anchor?.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor?.parentElement
-  )?.closest("[contenteditable]");
-  if (!editableRoot) {
-    return;
-  }
-  const sel = window.getSelection();
-  (editableRoot as HTMLElement).focus();
-  sel?.removeAllRanges();
-  sel?.addRange(view.savedRange);
-  document.execCommand("insertText", false, `\${${token}}`);
-  requestAnimationFrame(() => renderBlockActionBar());
-}
-
 /** Dismiss the link popover if open. */
 export function dismissLinkPopover() {
+  _linkPopoverOpen = false;
   const host = getLayerSlot("popover", "link-popover");
   litRender(nothing, host);
 }
@@ -299,60 +400,81 @@ export function dismissBlockActionBar() {
   }
 }
 
-/** @param {HTMLElement} anchorBtn */
+/**
+ * Whether the link popover is open. A snapshot-driven {@link renderBlockActionBar} must NOT
+ * re-render (and so re-mount) the open popover — typing the URL would re-create the field and lose
+ * focus/caret. Guarded around the toolbar re-render.
+ */
+let _linkPopoverOpen = false;
+
+/** True while the link URL popover is open (so the toolbar refresh skips a disruptive re-render). */
+export function isLinkPopoverOpen(): boolean {
+  return _linkPopoverOpen;
+}
+
+/**
+ * Whether `target` sits inside the edit-session chrome — the block action bar, its link popover, or
+ * the slash menu. The parent's pointerdown commit-guard must NOT end the inline-edit session for
+ * clicks on these (they operate ON the session); any other parent-chrome press commits it. This
+ * module owns those popover roots, hence the helper lives here.
+ *
+ * @param {EventTarget | null} target
+ */
+export function isEditChromeTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Node)) {
+    return false;
+  }
+  const roots = [
+    view.blockActionBarEl,
+    getLayerSlot("popover", "link-popover"),
+    getLayerSlot("popover", "slash-menu"),
+  ];
+  return roots.some((root) => root != null && root.contains(target));
+}
+
+/**
+ * Show the link URL popover. The iframe owns the Selection, so the existing-link state comes from
+ * the latest selection snapshot; Apply/Remove post `applyFormat` link intents the iframe applies.
+ *
+ * @param {HTMLElement} anchorBtn
+ */
 function showLinkPopover(anchorBtn: HTMLElement) {
   const host = getLayerSlot("popover", "link-popover");
   litRender(nothing, host);
 
-  const sel = window.getSelection();
-  let existingLink: HTMLAnchorElement | null = null;
-  if (sel?.rangeCount) {
-    let node: Node | null = sel.anchorNode;
-    while (node && node !== document.body) {
-      if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "a") {
-        existingLink = node as HTMLAnchorElement;
-        break;
-      }
-      node = node.parentNode;
-    }
-  }
+  const link = getEditSnapshot().snapshot?.link ?? { active: false, href: null };
+  const existing = link.active;
 
-  const rect = anchorBtn.getBoundingClientRect();
+  const rect = rectOf(anchorBtn);
 
   let _linkField: HTMLInputElement | null = null;
 
+  const close = () => {
+    _linkPopoverOpen = false;
+    litRender(nothing, host);
+  };
+
   const onApply = () => {
     const url = _linkField?.value || "";
-    if (existingLink) {
-      existingLink.setAttribute("href", url);
-    } else if (url) {
-      document.execCommand("createLink", false, url);
-    }
-    litRender(nothing, host);
-    renderBlockActionBar();
+    // Apply then let the popover close itself (do not steal focus back into the iframe here).
+    postApplyFormat({ command: "link", href: url || "" });
+    close();
   };
 
   const onRemove = () => {
-    if (!existingLink?.parentNode) {
-      return;
-    }
-    const frag = document.createDocumentFragment();
-    while (existingLink.firstChild) {
-      frag.append(existingLink.firstChild);
-    }
-    existingLink.parentNode.replaceChild(frag, existingLink);
-    litRender(nothing, host);
-    renderBlockActionBar();
+    postApplyFormat({ command: "link", href: null });
+    close();
   };
 
   const onKeydown = (e: KeyboardEvent) => {
     if (e.key === "Enter") {
       onApply();
     } else if (e.key === "Escape") {
-      litRender(nothing, host);
+      close();
     }
   };
 
+  _linkPopoverOpen = true;
   litRender(
     html`
       <sp-popover
@@ -369,7 +491,7 @@ function showLinkPopover(anchorBtn: HTMLElement) {
           placeholder="https://..."
           size="s"
           style="width:200px"
-          value=${existingLink?.getAttribute("href") || ""}
+          value=${link.href || ""}
           @keydown=${onKeydown}
           ${ref((el) => {
             _linkField = (el as HTMLInputElement | null) || null;
@@ -379,9 +501,9 @@ function showLinkPopover(anchorBtn: HTMLElement) {
           })}
         ></sp-textfield>
         <sp-action-button size="xs" @click=${onApply}>
-          ${existingLink ? "Update" : "Apply"}
+          ${existing ? "Update" : "Apply"}
         </sp-action-button>
-        ${existingLink
+        ${existing
           ? html` <sp-action-button size="xs" @click=${onRemove}>Remove</sp-action-button> `
           : nothing}
       </sp-popover>
@@ -390,6 +512,19 @@ function showLinkPopover(anchorBtn: HTMLElement) {
   );
 }
 
+/**
+ * Open the link popover from the Ctrl/Cmd+K shortcut (anchored to the toolbar's Link button if it
+ * is on screen, else the bar itself). Used by the parent-focus format-shortcut handler.
+ */
+export function openLinkPopoverFromShortcut(): void {
+  const bar = view.blockActionBarEl?.querySelector(".block-action-bar") as HTMLElement | null;
+  const linkBtn =
+    (bar?.querySelector('sp-action-button[title^="Link"]') as HTMLElement | null) ?? bar;
+  if (linkBtn) {
+    showLinkPopover(linkBtn);
+  }
+}
+
 /** Move the selected node up (swap with previous sibling). */
 function moveSelectionUp() {
   const tab = activeTab.value;
@@ -446,30 +581,41 @@ export function renderBlockActionBar() {
     return;
   }
 
+  // A snapshot-driven refresh must not re-mount an open link popover (it would re-create the URL
+  // Field and lose the caret) — preserve it by skipping this render pass.
+  if (_linkPopoverOpen) {
+    return;
+  }
+
   const { selection } = tab.session;
-  const activePanel = getActivePanel();
-  if (!activePanel) {
+  const node = getNodeAtPath(tab.doc.document, selection);
+  if (!node) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
-  const el = findCanvasElement(selection, activePanel.canvas);
-  const node = el && getNodeAtPath(tab.doc.document, selection);
-  if (!el || !node) {
+
+  // Position from the iframe-host's viewport-space anchor (the bar is position:fixed). The parent
+  // Never reads the iframe DOM, so geometry crosses the bridge as the selection snapshot's rect.
+  const anchor = getEditBarAnchorRect();
+  const pos = anchor ? barPosition(anchor) : null;
+  if (!pos) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
 
   const tag = (node.tagName ?? "div").toLowerCase();
-  const elRect = el.getBoundingClientRect();
-  const topPos = elRect.top < 80 ? elRect.bottom + 4 : elRect.top - 38;
 
-  // Inline format state
-  const inlineEditing = isEditing() || el.contentEditable === "true";
+  // Inline format state, sourced from the iframe's selection snapshot.
+  const { editing, snapshot } = getEditSnapshot();
+  const inlineEditing = editing;
   const actions = getInlineActions(tag) || [];
   const showFormat = inlineEditing && actions.length > 0;
-  const activeValues = showFormat
-    ? actions.filter((a) => isTagActiveInSelection(a.tag, el)).map((a) => a.tag)
-    : [];
+  const activeValues =
+    showFormat && snapshot
+      ? actions.filter((a) => snapshot.activeTags.includes(a.tag)).map((a) => a.tag)
+      : [];
+  // A collapsed caret can't format a range — disable format buttons (link/insertData stay enabled).
+  const formatDisabled = snapshot?.collapsed ?? false;
 
   // Conversion targets for badge click
   const isComponent =
@@ -480,14 +626,17 @@ export function renderBlockActionBar() {
     !node.textContent &&
     (children.length === 0 ||
       (children.length === 1 && typeof children[0] === "object" && children[0]?.tagName === "br"));
-  const convertTargets = !isComponent ? getConvertTargets(tag, isEmpty) : [];
+  // Repeater ($prototype:"Array") pseudo-elements have no tagName — show the "Repeater → items" label
+  // (not a bare "div") and don't offer tag-conversion targets, which are meaningless for a repeater.
+  const isRepeater = node.$prototype === "Array";
+  const convertTargets = !isComponent && !isRepeater ? getConvertTargets(tag, isEmpty) : [];
   const badgeInteractive = convertTargets.length > 0;
 
   litRender(
     html`
       <div
         class="block-action-bar"
-        style=${styleMap({ left: `${elRect.left}px`, top: `${topPos}px` })}
+        style=${styleMap({ left: `${pos.left}px`, top: `${pos.top}px` })}
         @mousedown=${onBarMousedown}
       >
         ${selection.length >= 2 ? renderParentSelector() : nothing}
@@ -497,7 +646,7 @@ export function renderBlockActionBar() {
           @click=${badgeInteractive
             ? (e: MouseEvent) => onTagBadgeClick(e, convertTargets, selection)
             : nothing}
-          >${node.$id || (node.tagName ?? "div")}</span
+          >${isRepeater ? nodeLabel(node) : node.$id || (node.tagName ?? "div")}</span
         >
 
         ${selection.length >= 2
@@ -515,9 +664,21 @@ export function renderBlockActionBar() {
                 view.selDragCleanup = draggable({
                   element: handleEl as HTMLElement,
                   getInitialData: () => ({
-                    path: activeTab.value?.session.selection,
+                    // Snapshot the selection: the live array is a Vue reactive proxy, which
+                    // Structured clone rejects when the src crosses postMessage (DataCloneError
+                    // Killed the whole handle drag), and a live reference would also mutate the
+                    // Retained srcData if the selection changed mid-drag.
+                    path: [...(activeTab.value?.session.selection ?? [])],
                     type: "tree-node",
                   }),
+                  onGenerateDragPreview: ({
+                    nativeSetDragImage,
+                  }: {
+                    nativeSetDragImage: ((image: Element, x: number, y: number) => void) | null;
+                  }) => {
+                    // Suppress the native drag image; the cross-frame ghost is the drag affordance.
+                    disableNativeDragPreview({ nativeSetDragImage });
+                  },
                 });
               })}
               >⠿</span
@@ -569,7 +730,8 @@ export function renderBlockActionBar() {
                       size="xs"
                       value=${action.tag}
                       title="${action.label}${action.shortcut ? ` (${action.shortcut})` : ""}"
-                      @mousedown=${captureSelectionRange}
+                      ?disabled=${formatDisabled && action.command !== "link"}
+                      @mousedown=${(e: MouseEvent) => e.preventDefault()}
                       @click=${(e: MouseEvent) => onFormatClick(e, action)}
                     >
                       ${action.icon ? (formatIconMap[action.icon] ?? nothing) : nothing}
@@ -581,7 +743,7 @@ export function renderBlockActionBar() {
                 size="xs"
                 quiet
                 title="Insert data"
-                @mousedown=${captureSelectionRange}
+                @mousedown=${(e: MouseEvent) => e.preventDefault()}
                 @click=${onMergeTagClick}
               >
                 <sp-icon-data slot="icon"></sp-icon-data>
@@ -599,10 +761,6 @@ export function renderBlockActionBar() {
     if (!bar) {
       return;
     }
-    // Clamp to window
-    const barRect = bar.getBoundingClientRect();
-    if (barRect.right > window.innerWidth) {
-      bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
-    }
+    clampBarToWindow(bar);
   });
 }