smartrte-react 1.0.0-beta.8 → 1.0.0-beta.9

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.0-beta.9
+
+- Fix toolbar dropdowns, the mobile "More tools" kebab menu, and the text/background colour and table-border popovers rendering far from their own trigger when the editor is embedded inside a host container that has its own CSS `transform` on an ancestor - e.g. a Radix/shadcn `Dialog`'s own centering transform. These overlays now correctly account for the resulting change of containing block instead of assuming it's always the viewport.
+
 ## 1.0.0-beta.8
 
 - Add a `tools` prop (`ClassicEditor`, `CanonicalAuthorityEditor`, and the standalone embed) letting a host hide any individual toolbar tool — Bold, Video, Version history, Review, and around 40 others — without wrapping or restyling the component. Every tool is visible by default; composes with existing gates (a required provider or capability must still be present). See the README's "Hiding individual toolbar tools" section for the full list and usage.

package/dist/components/ColorPickerPopover.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
 const HEX_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 const normalizeHex = (value) => {
     if (!HEX_PATTERN.test(value))
@@ -138,7 +139,8 @@ export function ColorPickerPopover({ x, y, label, initialValue = "#000000", rece
         const overflowsBottom = y + height > viewportHeight - margin;
         const top = overflowsBottom ? y - height : y;
         const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - margin));
-        setPlacement({ left: clampedLeft, top: clampedTop });
+        const origin = getFixedPositioningOrigin(el);
+        setPlacement({ left: clampedLeft - origin.left, top: clampedTop - origin.top });
     }, [x, y]);
     const stage = (nextHsv) => {
         stagedRef.current = true;

package/dist/components/TableBorderPopover.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ColorPickerPopover } from "./ColorPickerPopover.js";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
 // Widths start at 2px, not 1px - table_cell's border-collapse table (see
 // theme.ts's th/td rule) already renders a 1px ambient default gridline on
 // every cell. A custom border tied at 1px loses CSS border-collapse's
@@ -75,7 +76,8 @@ export function TableBorderPopover({ x, y, initial, recentColors, onPreview, onA
         const overflowsBottom = y + height > viewportHeight - margin;
         const top = overflowsBottom ? y - height : y;
         const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - margin));
-        setPlacement({ left: clampedLeft, top: clampedTop });
+        const origin = getFixedPositioningOrigin(el);
+        setPlacement({ left: clampedLeft - origin.left, top: clampedTop - origin.top });
     }, [x, y]);
     useEffect(() => {
         const dismissIfOutside = (event) => {

package/dist/components/ToolbarPrimitives.d.ts

@@ -110,9 +110,12 @@ export declare function ToolbarMenuItem({ icon, label, ariaLabel, pressed, disab
  * anchored inside that container gets visually clipped the moment it needs
  * to extend past the container's own bounds, which is exactly when a
  * narrow host is most likely to need the dropdown in the first place.
- * `position: fixed`'s containing block is the viewport (barring an
- * ancestor with its own transform/filter, not the case here), so it always
- * escapes ANY ancestor's overflow clipping regardless of DOM depth.
+ * `position: fixed`'s containing block is normally the viewport, so this
+ * escapes ANY ancestor's overflow clipping regardless of DOM depth - unless
+ * an ancestor has its own transform/perspective/filter, which becomes the
+ * containing block instead (see fixedPositioning.ts, and
+ * docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md); the
+ * placement math below accounts for that case too.
  */
 export declare function ToolbarDropdown({ icon, label, priority, children }: {
     icon?: ToolbarIconKey;

package/dist/components/ToolbarPrimitives.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ALargeSmall, Baseline, Bold, CheckSquare, ChevronDown, Code, Columns3, Download, Eye, FileJson, History, Image as ImageIcon, IndentDecrease, IndentIncrease, Italic, Link2, ListChecks, ListOrdered, ListRestart, List as ListIcon, MessageSquare, MessageSquarePlus, MoreHorizontal, MoveDown, MoveLeft, MoveRight, MoveUp, Music, Omega, PanelTop, PenLine, Pilcrow, Quote, Redo2, Rows3, Square, Sigma, Strikethrough, Subscript, Superscript, Table2, Trash2, Type, Underline, Undo2, Unlink2, Upload, Video, Pencil, ZoomIn, ZoomOut, } from "lucide-react";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
 /**
  * The toolbar's icon set (Phase: Direction B toolbar redesign, 2026-08-29).
  * Lucide, per the design proposal's §11 recommendation - MIT-licensed,
@@ -128,9 +129,12 @@ const useDismissDetailsOnOutsideClick = (ref) => {
  * anchored inside that container gets visually clipped the moment it needs
  * to extend past the container's own bounds, which is exactly when a
  * narrow host is most likely to need the dropdown in the first place.
- * `position: fixed`'s containing block is the viewport (barring an
- * ancestor with its own transform/filter, not the case here), so it always
- * escapes ANY ancestor's overflow clipping regardless of DOM depth.
+ * `position: fixed`'s containing block is normally the viewport, so this
+ * escapes ANY ancestor's overflow clipping regardless of DOM depth - unless
+ * an ancestor has its own transform/perspective/filter, which becomes the
+ * containing block instead (see fixedPositioning.ts, and
+ * docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md); the
+ * placement math below accounts for that case too.
  */
 export function ToolbarDropdown({ icon, label, priority, children }) {
     const detailsRef = useRef(null);
@@ -155,7 +159,8 @@ export function ToolbarDropdown({ icon, label, priority, children }) {
             const left = Math.min(Math.max(margin, triggerRect.left), Math.max(margin, viewportWidth - menuWidth - margin));
             const overflowsBottom = triggerRect.bottom + 6 + menuHeight > viewportHeight - margin;
             const top = overflowsBottom ? Math.max(margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
-            setPlacement({ left, top });
+            const origin = getFixedPositioningOrigin(details);
+            setPlacement({ left: left - origin.left, top: top - origin.top });
         };
         recompute();
         details.addEventListener("toggle", recompute);
@@ -218,7 +223,8 @@ export function MobileMoreMenu({ children }) {
             const left = Math.min(Math.max(margin, preferredLeft), Math.max(margin, viewportWidth - menuWidth - margin));
             const overflowsBottom = triggerRect.bottom + 6 + menuHeight > viewportHeight - margin;
             const top = overflowsBottom ? Math.max(margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
-            setPlacement({ left, top });
+            const origin = getFixedPositioningOrigin(details);
+            setPlacement({ left: left - origin.left, top: top - origin.top });
         };
         recompute();
         details.addEventListener("toggle", recompute);

package/dist/components/fixedPositioning.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A CSS `transform`, `perspective`, `filter`, `backdrop-filter`, or a
+ * `will-change` naming one of those, on an ancestor makes that ancestor the
+ * containing block for `position: fixed` descendants instead of the
+ * viewport (CSS Transforms spec's rendering model) - most commonly a
+ * Radix/shadcn `Dialog`'s centering transform (`translate-x-[-50%]
+ * translate-y-[-50%]`), which any host may legitimately wrap this editor
+ * in. When that happens, `left`/`top` set on a fixed-positioned menu/popover
+ * are resolved against that ancestor's border box (as rendered,
+ * post-transform) instead of the viewport, silently producing coordinates
+ * that are internally consistent but land far from the trigger with no
+ * error - confirmed live via a Sootr host rendering the editor inside such
+ * a dialog.
+ *
+ * `getBoundingClientRect()` always returns viewport-relative coordinates
+ * regardless of transforms, so every placement calculation in this codebase
+ * computes coordinates in viewport space first, then subtracts this
+ * origin - the real containing block's own viewport-relative top-left - so
+ * the applied `left`/`top` land correctly under either containing block.
+ */
+export declare function findFixedPositioningContainer(el: HTMLElement): HTMLElement | null;
+export declare function getFixedPositioningOrigin(el: HTMLElement): {
+    left: number;
+    top: number;
+};

package/dist/components/fixedPositioning.js

@@ -0,0 +1,42 @@
+/**
+ * A CSS `transform`, `perspective`, `filter`, `backdrop-filter`, or a
+ * `will-change` naming one of those, on an ancestor makes that ancestor the
+ * containing block for `position: fixed` descendants instead of the
+ * viewport (CSS Transforms spec's rendering model) - most commonly a
+ * Radix/shadcn `Dialog`'s centering transform (`translate-x-[-50%]
+ * translate-y-[-50%]`), which any host may legitimately wrap this editor
+ * in. When that happens, `left`/`top` set on a fixed-positioned menu/popover
+ * are resolved against that ancestor's border box (as rendered,
+ * post-transform) instead of the viewport, silently producing coordinates
+ * that are internally consistent but land far from the trigger with no
+ * error - confirmed live via a Sootr host rendering the editor inside such
+ * a dialog.
+ *
+ * `getBoundingClientRect()` always returns viewport-relative coordinates
+ * regardless of transforms, so every placement calculation in this codebase
+ * computes coordinates in viewport space first, then subtracts this
+ * origin - the real containing block's own viewport-relative top-left - so
+ * the applied `left`/`top` land correctly under either containing block.
+ */
+export function findFixedPositioningContainer(el) {
+    let node = el.parentElement;
+    while (node) {
+        const style = window.getComputedStyle(node);
+        if ((style.transform && style.transform !== "none") ||
+            (style.perspective && style.perspective !== "none") ||
+            (style.filter && style.filter !== "none") ||
+            (style.backdropFilter && style.backdropFilter !== "none") ||
+            (style.willChange && /transform|perspective|filter/.test(style.willChange))) {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return null;
+}
+export function getFixedPositioningOrigin(el) {
+    const container = findFixedPositioningContainer(el);
+    if (!container)
+        return { left: 0, top: 0 };
+    const rect = container.getBoundingClientRect();
+    return { left: rect.left, top: rect.top };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",