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

package/dist/components/MediaDetailsPopover.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { normalizeLinkInput } from "smartrte-core/legacy";
+const LICENSE_TYPE_PRESETS = ["CC BY", "CC BY-SA", "CC BY-ND", "CC BY-NC", "CC BY-NC-SA", "CC BY-NC-ND", "CC0 (Public Domain)", "All rights reserved"];
+const inputStyle = {
+    width: "100%", height: 34, boxSizing: "border-box", marginTop: 4, padding: "0 9px",
+    border: "1px solid var(--srte-input-border)", borderRadius: 8, outline: "none",
+    background: "var(--srte-input-bg)", color: "var(--srte-input-text)", font: "inherit", fontSize: 13,
+};
+const selectStyle = { ...inputStyle, cursor: "pointer" };
+const labelStyle = { display: "block", fontSize: 12, fontWeight: 600 };
+const buttonStyle = {
+    minHeight: 34, padding: "0 12px", border: "1px solid var(--srte-input-border)", borderRadius: 8,
+    background: "var(--srte-input-bg)", color: "var(--srte-menu-text)", cursor: "pointer", fontWeight: 500, fontSize: 13,
+};
+const sectionHeaderStyle = {
+    fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.7,
+    marginTop: 4, paddingTop: 10, borderTop: "1px solid var(--srte-border)",
+};
+const alignButton = (current, value, label, onClick) => (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": current === value, onClick: onClick, style: {
+        ...buttonStyle,
+        flex: 1,
+        minHeight: 32,
+        padding: 0,
+        background: current === value ? "var(--srte-accent-bg)" : "var(--srte-input-bg)",
+        borderColor: current === value ? "var(--srte-primary)" : "var(--srte-input-border)",
+        color: current === value ? "var(--srte-primary-pressed)" : "var(--srte-menu-text)",
+    }, children: label }, label));
+/**
+ * "Media details" - replaces the crude window.prompt("Alt text") edit path
+ * (docs/bugs/media-details-old-editor-field-parity.md) with a real settings
+ * panel matching the old editor's own field set, following this project's
+ * established compact-popover pattern (position:fixed + JS-measured
+ * placement, Apply/Cancel commit - same shape as TableBorderPopover for a
+ * multi-field dialog like this one, rather than LinkEditorPopover's simpler
+ * live-Enter-to-apply form).
+ *
+ * Opened directly by an image's right-click interaction; the details panel
+ * is the image editing surface, while resize handles remain available
+ * independently around the selected image.
+ */
+export function MediaDetailsPopover({ x, y, initial, onApply, onCancel }) {
+    const [draft, setDraft] = useState(initial);
+    const [licenseTypeCustom, setLicenseTypeCustom] = useState(!!initial.licenseType && !LICENSE_TYPE_PRESETS.includes(initial.licenseType));
+    const [error, setError] = useState("");
+    const rootRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const onCancelRef = useRef(onCancel);
+    onCancelRef.current = onCancel;
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const margin = 8;
+        const { width, height } = el.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const overflowsRight = x + width > viewportWidth - margin;
+        const left = overflowsRight ? x - width : x;
+        const clampedLeft = Math.min(Math.max(margin, left), Math.max(margin, viewportWidth - width - margin));
+        const overflowsBottom = y + height > viewportHeight - margin;
+        const top = overflowsBottom ? Math.max(margin, y - height) : y;
+        const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - height - margin));
+        setPlacement({ left: clampedLeft, top: clampedTop });
+    }, [x, y]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            const target = event.target;
+            const elementTarget = target instanceof Element ? target : target.parentElement;
+            // Resize handles live outside this dialog and must receive their own
+            // pointer gesture without the editor closing on the first pointerdown.
+            if (elementTarget?.closest("[data-srte-media-resize-handle-direction]"))
+                return;
+            if (!rootRef.current?.contains(target))
+                onCancelRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, []);
+    useEffect(() => {
+        const onWindowKeyDown = (event) => { if (event.key === "Escape")
+            onCancelRef.current(); };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+    }, []);
+    const update = (patch) => setDraft((current) => ({ ...current, ...patch }));
+    const apply = () => {
+        if (!draft.alt.trim()) {
+            setError("Enter alt text.");
+            return;
+        }
+        const trimmedHref = draft.href.trim();
+        if (!trimmedHref) {
+            onApply({ ...draft, href: "" });
+            return;
+        }
+        const normalized = normalizeLinkInput(trimmedHref);
+        if (!normalized.href) {
+            setError("Enter a safe, valid web URL, email address, phone number, or page anchor for the link, or clear it.");
+            return;
+        }
+        onApply({ ...draft, href: normalized.href });
+    };
+    return (_jsxs("div", { ref: rootRef, "data-srte-media-details-popover": "true", role: "dialog", "aria-label": "Media details", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 72,
+            width: 320,
+            maxWidth: "calc(100vw - 16px)",
+            maxHeight: "calc(100vh - 16px)",
+            overflowY: "auto",
+            boxSizing: "border-box",
+            background: "var(--srte-menu-bg)",
+            color: "var(--srte-menu-text)",
+            border: "1px solid var(--srte-border)",
+            borderRadius: 12,
+            boxShadow: "var(--srte-menu-shadow)",
+            padding: 14,
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [_jsx("div", { style: { fontWeight: 650 }, children: "Media details" }), _jsx("button", { type: "button", "aria-label": "Close media details", onClick: onCancel, style: { ...buttonStyle, minWidth: 26, minHeight: 26, padding: 0, border: 0, background: "transparent", fontSize: 18 }, children: "\u00D7" })] }), _jsxs("label", { style: labelStyle, children: ["Alt text", _jsx("input", { "data-srte-media-alt-input": "true", value: draft.alt, onChange: (event) => { update({ alt: event.target.value }); setError(""); }, style: { ...inputStyle, borderColor: error ? "var(--srte-danger)" : "var(--srte-input-border)" } })] }), error && _jsx("div", { role: "alert", style: { color: "var(--srte-danger)", fontSize: 12 }, children: error }), _jsxs("label", { style: labelStyle, children: ["Link", _jsx("input", { "data-srte-media-href-input": "true", value: draft.href, placeholder: "Paste a URL", inputMode: "url", autoCapitalize: "none", autoCorrect: "off", spellCheck: false, onChange: (event) => { update({ href: event.target.value }); setError(""); }, style: { ...inputStyle, borderColor: error ? "var(--srte-danger)" : "var(--srte-input-border)" } })] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, cursor: "pointer" }, children: [_jsx("input", { "data-srte-media-new-tab-input": "true", type: "checkbox", checked: draft.openInNewTab, disabled: !draft.href.trim(), onChange: (event) => update({ openInNewTab: event.target.checked }) }), "Open in a new tab"] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs("label", { style: { ...labelStyle, flex: 1 }, children: ["Width (px)", _jsx("input", { "data-srte-media-width-input": "true", type: "number", min: 16, value: draft.width ?? "", onChange: (event) => update({ width: event.target.value === "" ? undefined : Math.max(16, Number(event.target.value)) }), style: inputStyle })] }), _jsxs("label", { style: { ...labelStyle, flex: 1 }, children: ["Corner radius (px)", _jsx("input", { "data-srte-media-radius-input": "true", type: "number", min: 0, value: draft.borderRadius ?? "", onChange: (event) => update({ borderRadius: event.target.value === "" ? undefined : Math.max(0, Number(event.target.value)) }), style: inputStyle })] })] }), _jsxs("div", { style: labelStyle, children: ["Align", _jsxs("div", { style: { display: "flex", gap: 6, marginTop: 4 }, children: [alignButton(draft.align, undefined, "None", () => update({ align: undefined })), alignButton(draft.align, "left", "Left", () => update({ align: "left" })), alignButton(draft.align, "center", "Center", () => update({ align: "center" })), alignButton(draft.align, "right", "Right", () => update({ align: "right" }))] })] }), _jsx("div", { style: sectionHeaderStyle, children: "License" }), _jsxs("label", { style: labelStyle, children: ["Description", _jsx("input", { "data-srte-media-license-description-input": "true", value: draft.licenseDescription, onChange: (event) => update({ licenseDescription: event.target.value }), style: inputStyle })] }), _jsxs("label", { style: labelStyle, children: ["Source URL", _jsx("input", { "data-srte-media-license-source-input": "true", value: draft.licenseSourceUrl, onChange: (event) => update({ licenseSourceUrl: event.target.value }), style: inputStyle })] }), _jsxs("label", { style: labelStyle, children: ["Type", _jsxs("select", { "data-srte-media-license-type-select": "true", value: licenseTypeCustom ? "custom" : draft.licenseType, onChange: (event) => {
+                            if (event.target.value === "custom") {
+                                setLicenseTypeCustom(true);
+                                return;
+                            }
+                            setLicenseTypeCustom(false);
+                            update({ licenseType: event.target.value });
+                        }, style: selectStyle, children: [_jsx("option", { value: "", children: "(none)" }), LICENSE_TYPE_PRESETS.map((preset) => _jsx("option", { value: preset, children: preset }, preset)), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), licenseTypeCustom && (_jsx("input", { "data-srte-media-license-type-custom-input": "true", value: draft.licenseType, placeholder: "License type", onChange: (event) => update({ licenseType: event.target.value }), style: inputStyle }))] }), _jsxs("label", { style: labelStyle, children: ["Version", _jsx("input", { "data-srte-media-license-version-input": "true", value: draft.licenseVersion, onChange: (event) => update({ licenseVersion: event.target.value }), style: inputStyle })] }), _jsxs("label", { style: labelStyle, children: ["Attribution", _jsx("input", { "data-srte-media-license-attribution-input": "true", value: draft.licenseAttribution, onChange: (event) => update({ licenseAttribution: event.target.value }), style: inputStyle })] }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 7, marginTop: 4 }, children: [_jsx("button", { type: "button", onClick: onCancel, style: buttonStyle, children: "Cancel" }), _jsx("button", { type: "button", onClick: apply, style: { ...buttonStyle, borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: "Apply" })] })] }));
+}

package/dist/components/MediaOverlay.d.ts

@@ -4,7 +4,11 @@ export interface MediaOverlayProps {
     width?: number;
     height?: number;
     src?: string;
-    /** False for atoms with no width/height concept (e.g. formula, sized by KaTeX from source/font-size) - hides the Resize +/- buttons and drag handle, keeping Edit/Delete. */
+    x?: number;
+    y?: number;
+    /** Render only the handles when the media details editor owns the interaction surface. */
+    showMenu?: boolean;
+    /** False for atoms with no width/height concept (e.g. formula, sized by KaTeX from source/font-size) - hides resize controls and handles, keeping Edit/Delete. */
     resizable?: boolean;
     onEdit: () => void;
     onResize: (by: number) => void;
@@ -13,24 +17,9 @@ export interface MediaOverlayProps {
     onDismiss: () => void;
 }
 /**
- * Context menu scope reduction: media no longer gets a generic right-click
- * menu - it gets this dedicated overlay, anchored to the atom's own live
- * element rect (the same ResizeObserver/scroll-tracking pattern
- * TableResizeHandles.tsx already uses for anchoring UI to a live element,
- * per §1's investigation) instead of click coordinates, appearing whenever
- * an atom is selected. The caller controls visibility by conditionally
- * rendering this component based on atomSelected - when the selection
- * moves off the atom, the component unmounts on its own, which is the
- * "dismiss when selection moves away" requirement with no extra logic
- * needed here.
- *
- * Post-batch follow-up ("images doesn't have a resizer"): the Resize +/-
- * buttons were the only resize affordance - no direct drag handle existed
- * for atoms, unlike tables. Added a corner drag handle at the atom's own
- * bottom-right corner, reusing TableResizeHandles.tsx's exact live-preview-
- * during-drag / commit-on-release pattern (mutate the real element's style
- * directly while dragging for immediate feedback, commit via a real command
- * only on release) rather than inventing a different interaction model for
- * the second resizable-thing in this codebase.
+ * Media resize handles stay anchored to the selected media element and
+ * preview size changes live, committing one canonical resize operation when
+ * the pointer is released. The quick-action menu is optional because image
+ * right-clicks use MediaDetailsPopover directly.
  */
-export declare function MediaOverlay({ atomElement, alt, width, height, src, resizable, onEdit, onResize, onResizeTo, onDelete, onDismiss }: MediaOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaOverlay({ atomElement, alt, width, height, src, x, y, showMenu, resizable, onEdit, onResize, onResizeTo, onDelete, onDismiss }: MediaOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaOverlay.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
+const RESIZE_DIRECTIONS = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+const HANDLE_SIZE = 10;
+const MIN_ATOM_SIZE = 24;
 const buttonStyle = {
     minHeight: 32,
     padding: "0 10px",
@@ -11,35 +14,75 @@ const buttonStyle = {
     fontWeight: 500,
     fontSize: 13,
 };
-const HANDLE_SIZE = 12;
-const MIN_ATOM_SIZE = 24;
+const cursorFor = (direction) => {
+    if (direction === "n" || direction === "s")
+        return "ns-resize";
+    if (direction === "e" || direction === "w")
+        return "ew-resize";
+    return direction === "ne" || direction === "sw" ? "nesw-resize" : "nwse-resize";
+};
+const isCorner = (direction) => direction.length === 2;
+const visibleBoundsFor = (atomElement, modelWidth, modelHeight) => {
+    const rect = atomElement.getBoundingClientRect();
+    const editorElement = atomElement.closest(".srte-editor");
+    const editorRect = editorElement?.getBoundingClientRect();
+    const inset = HANDLE_SIZE / 2;
+    // Broken or still-loading images can expose only a tiny fallback box.
+    // Use the canonical dimensions for that case, but use the real rendered
+    // dimensions whenever the image has a meaningful layout box.
+    const imageWidth = rect.width >= MIN_ATOM_SIZE ? rect.width : modelWidth && modelWidth >= MIN_ATOM_SIZE ? modelWidth : rect.width;
+    const imageHeight = rect.height >= MIN_ATOM_SIZE ? rect.height : modelHeight && modelHeight >= MIN_ATOM_SIZE ? modelHeight : rect.height;
+    const left = Math.max(rect.left, editorRect ? editorRect.left + inset : rect.left);
+    const top = Math.max(rect.top, editorRect ? editorRect.top + inset : rect.top);
+    const right = Math.min(rect.left + imageWidth, editorRect ? editorRect.right - inset : rect.left + imageWidth);
+    const bottom = Math.min(rect.top + imageHeight, editorRect ? editorRect.bottom - inset : rect.top + imageHeight);
+    if (right <= left || bottom <= top)
+        return null;
+    return { left, top, width: right - left, height: bottom - top };
+};
+const dimensionsForDrag = (drag, clientX, clientY) => {
+    const deltaX = clientX - drag.startClientX;
+    const deltaY = clientY - drag.startClientY;
+    const widthDelta = drag.direction.includes("e") ? deltaX : drag.direction.includes("w") ? -deltaX : 0;
+    const heightDelta = drag.direction.includes("s") ? deltaY : drag.direction.includes("n") ? -deltaY : 0;
+    if (!isCorner(drag.direction)) {
+        return {
+            width: Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + widthDelta)),
+            height: Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + heightDelta)),
+        };
+    }
+    // Corner handles keep the same aspect ratio as the current image. Use the
+    // axis with the larger proportional movement so dragging either diagonal
+    // direction feels natural, including when one pointer axis barely moves.
+    const widthScale = (drag.startWidth + widthDelta) / drag.startWidth;
+    const heightScale = (drag.startHeight + heightDelta) / drag.startHeight;
+    const scale = Math.max(MIN_ATOM_SIZE / drag.startWidth, MIN_ATOM_SIZE / drag.startHeight, Math.abs(widthDelta / drag.startWidth) >= Math.abs(heightDelta / drag.startHeight) ? widthScale : heightScale);
+    return {
+        width: Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth * scale)),
+        height: Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight * scale)),
+    };
+};
+const boundsForDirection = (bounds, direction) => {
+    const half = HANDLE_SIZE / 2;
+    const centerX = bounds.left + bounds.width / 2 - half;
+    const centerY = bounds.top + bounds.height / 2 - half;
+    const right = bounds.left + bounds.width - half;
+    const bottom = bounds.top + bounds.height - half;
+    const left = direction.includes("w") ? bounds.left - half : direction.includes("e") ? right : centerX;
+    const top = direction.includes("n") ? bounds.top - half : direction.includes("s") ? bottom : centerY;
+    return { left, top };
+};
 /**
- * Context menu scope reduction: media no longer gets a generic right-click
- * menu - it gets this dedicated overlay, anchored to the atom's own live
- * element rect (the same ResizeObserver/scroll-tracking pattern
- * TableResizeHandles.tsx already uses for anchoring UI to a live element,
- * per §1's investigation) instead of click coordinates, appearing whenever
- * an atom is selected. The caller controls visibility by conditionally
- * rendering this component based on atomSelected - when the selection
- * moves off the atom, the component unmounts on its own, which is the
- * "dismiss when selection moves away" requirement with no extra logic
- * needed here.
- *
- * Post-batch follow-up ("images doesn't have a resizer"): the Resize +/-
- * buttons were the only resize affordance - no direct drag handle existed
- * for atoms, unlike tables. Added a corner drag handle at the atom's own
- * bottom-right corner, reusing TableResizeHandles.tsx's exact live-preview-
- * during-drag / commit-on-release pattern (mutate the real element's style
- * directly while dragging for immediate feedback, commit via a real command
- * only on release) rather than inventing a different interaction model for
- * the second resizable-thing in this codebase.
+ * Media resize handles stay anchored to the selected media element and
+ * preview size changes live, committing one canonical resize operation when
+ * the pointer is released. The quick-action menu is optional because image
+ * right-clicks use MediaDetailsPopover directly.
  */
-export function MediaOverlay({ atomElement, alt, width, height, src, resizable = true, onEdit, onResize, onResizeTo, onDelete, onDismiss }) {
+export function MediaOverlay({ atomElement, alt, width, height, src, x, y, showMenu = true, resizable = true, onEdit, onResize, onResizeTo, onDelete, onDismiss }) {
     const rootRef = useRef(null);
-    const handleRef = useRef(null);
-    const [placement, setPlacement] = useState(null);
-    const [handlePosition, setHandlePosition] = useState(null);
     const dragRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const [bounds, setBounds] = useState(null);
     const [dragging, setDragging] = useState(false);
     useLayoutEffect(() => {
         const recompute = () => {
@@ -48,22 +91,37 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
             const viewportWidth = atomElement.ownerDocument.defaultView?.innerWidth ?? 0;
             const viewportHeight = atomElement.ownerDocument.defaultView?.innerHeight ?? 0;
             const panelWidth = rootRef.current?.getBoundingClientRect().width ?? 260;
-            const left = Math.min(Math.max(margin, rect.left), Math.max(margin, viewportWidth - panelWidth - margin));
-            const overflowsBottom = rect.bottom + 6 + 120 > viewportHeight - margin;
-            const top = overflowsBottom ? Math.max(margin, rect.top - 6 - 120) : rect.bottom + 6;
-            setPlacement({ left, top });
-            setHandlePosition({ left: rect.right - HANDLE_SIZE / 2, top: rect.bottom - HANDLE_SIZE / 2 });
+            const panelHeight = rootRef.current?.getBoundingClientRect().height ?? 160;
+            const preferredLeft = x ?? rect.left;
+            const preferredTop = y ?? rect.bottom + 6;
+            const left = preferredLeft + panelWidth > viewportWidth - margin ? preferredLeft - panelWidth : preferredLeft;
+            const top = preferredTop + panelHeight > viewportHeight - margin ? preferredTop - panelHeight : preferredTop;
+            setPlacement({
+                left: Math.min(Math.max(margin, left), Math.max(margin, viewportWidth - panelWidth - margin)),
+                top: Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - panelHeight - margin)),
+            });
+            // Handles are fixed siblings of the contenteditable surface, so they
+            // do not inherit the editor's overflow clipping. Use the visible
+            // intersection with the editor viewport to keep every handle inside
+            // that boundary when a tall image extends below the scroll area.
+            setBounds(visibleBoundsFor(atomElement, width, height));
         };
         recompute();
         const observer = new ResizeObserver(recompute);
         observer.observe(atomElement);
         const ownerWindow = atomElement.ownerDocument.defaultView;
         ownerWindow?.addEventListener("scroll", recompute, true);
+        ownerWindow?.addEventListener("resize", recompute);
         return () => {
             observer.disconnect();
             ownerWindow?.removeEventListener("scroll", recompute, true);
+            ownerWindow?.removeEventListener("resize", recompute);
         };
-    }, [atomElement]);
+    }, [atomElement, height, width, x, y]);
+    useEffect(() => {
+        if (showMenu && placement)
+            rootRef.current?.focus();
+    }, [placement, showMenu]);
     useEffect(() => {
         const ownerWindow = atomElement.ownerDocument.defaultView;
         if (!ownerWindow)
@@ -72,46 +130,45 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
             const drag = dragRef.current;
             if (!drag)
                 return;
-            const delta = Math.max(event.clientX - drag.startClientX, event.clientY - drag.startClientY);
-            const liveWidth = Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + delta));
-            const liveHeight = Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + (delta * drag.startHeight) / drag.startWidth));
-            atomElement.style.width = `${liveWidth}px`;
-            atomElement.style.height = `${liveHeight}px`;
-            if (handleRef.current) {
-                const rect = atomElement.getBoundingClientRect();
-                handleRef.current.style.left = `${rect.right - HANDLE_SIZE / 2}px`;
-                handleRef.current.style.top = `${rect.bottom - HANDLE_SIZE / 2}px`;
-            }
+            const dimensions = dimensionsForDrag(drag, event.clientX, event.clientY);
+            atomElement.style.width = `${dimensions.width}px`;
+            atomElement.style.height = `${dimensions.height}px`;
+            setBounds(visibleBoundsFor(atomElement));
         };
         const handleUp = (event) => {
             const drag = dragRef.current;
             if (!drag)
                 return;
-            const delta = Math.max(event.clientX - drag.startClientX, event.clientY - drag.startClientY);
-            const finalWidth = Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + delta));
-            const finalHeight = Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + (delta * drag.startHeight) / drag.startWidth));
+            const dimensions = dimensionsForDrag(drag, event.clientX, event.clientY);
             dragRef.current = null;
             setDragging(false);
-            // Committing triggers the renderer's own re-render from authoritative
-            // model state, which overwrites the live-preview inline style above -
-            // same reasoning as TableResizeHandles.tsx's commit-on-release.
-            onResizeTo(finalWidth, finalHeight);
+            // The model transaction below becomes authoritative. Clear the live
+            // preview first so a stale inline style cannot override later updates.
+            atomElement.style.removeProperty("width");
+            atomElement.style.removeProperty("height");
+            onResizeTo(dimensions.width, dimensions.height);
         };
         ownerWindow.addEventListener("pointermove", handleMove);
         ownerWindow.addEventListener("pointerup", handleUp);
+        ownerWindow.addEventListener("pointercancel", handleUp);
         return () => {
             ownerWindow.removeEventListener("pointermove", handleMove);
             ownerWindow.removeEventListener("pointerup", handleUp);
+            ownerWindow.removeEventListener("pointercancel", handleUp);
         };
     }, [atomElement, onResizeTo]);
     const onDismissRef = useRef(onDismiss);
     onDismissRef.current = onDismiss;
     useEffect(() => {
+        if (!showMenu)
+            return;
         const dismissIfOutside = (event) => {
             const target = event.target;
+            const elementTarget = target instanceof Element ? target : target.parentElement;
+            const isResizeHandle = Boolean(elementTarget?.closest("[data-srte-media-resize-handle-direction]"));
             if (dragRef.current)
                 return;
-            if (rootRef.current && !rootRef.current.contains(target) && !atomElement.contains(target) && target !== handleRef.current)
+            if (rootRef.current && !rootRef.current.contains(target) && !atomElement.contains(target) && !isResizeHandle)
                 onDismissRef.current();
         };
         window.addEventListener("pointerdown", dismissIfOutside, true);
@@ -120,31 +177,39 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
             window.removeEventListener("pointerdown", dismissIfOutside, true);
             window.removeEventListener("mousedown", dismissIfOutside, true);
         };
-    }, [atomElement]);
-    return (_jsxs(_Fragment, { children: [resizable && _jsx("div", { ref: handleRef, "data-srte-media-resize-handle": "true", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize media", onPointerDown: (event) => {
+    }, [atomElement, showMenu]);
+    return (_jsxs(_Fragment, { children: [resizable && bounds && RESIZE_DIRECTIONS.map((direction) => (_jsx("div", { "data-srte-media-resize-handle": "true", "data-srte-media-resize-handle-direction": direction, role: "separator", "aria-label": `Resize media ${direction}`, onPointerDown: (event) => {
                     event.preventDefault();
-                    const rect = atomElement.getBoundingClientRect();
-                    dragRef.current = { startClientX: event.clientX, startClientY: event.clientY, startWidth: rect.width, startHeight: rect.height };
+                    event.stopPropagation();
+                    const startWidth = width && width >= MIN_ATOM_SIZE ? width : bounds.width;
+                    const startHeight = height && height >= MIN_ATOM_SIZE ? height : bounds.height;
+                    dragRef.current = {
+                        direction,
+                        startClientX: event.clientX,
+                        startClientY: event.clientY,
+                        startWidth,
+                        startHeight,
+                    };
                     setDragging(true);
                 }, style: {
+                    ...boundsForDirection(bounds, direction),
                     position: "fixed",
-                    left: handlePosition?.left ?? 0,
-                    top: handlePosition?.top ?? 0,
-                    visibility: handlePosition ? "visible" : "hidden",
+                    visibility: "visible",
                     width: HANDLE_SIZE,
                     height: HANDLE_SIZE,
-                    borderRadius: "50%",
+                    boxSizing: "border-box",
+                    borderRadius: 3,
                     background: dragging ? "var(--srte-primary)" : "var(--srte-menu-bg)",
                     border: "2px solid var(--srte-primary)",
-                    cursor: "nwse-resize",
-                    zIndex: 71,
+                    cursor: cursorFor(direction),
+                    zIndex: 81,
                     touchAction: "none",
-                } }), _jsxs("div", { ref: rootRef, "data-srte-media-overlay": "true", role: "dialog", "aria-label": "Media actions", style: {
+                } }, direction))), showMenu && _jsxs("div", { ref: rootRef, "data-srte-media-overlay": "true", role: "dialog", "aria-label": "Media actions", tabIndex: -1, style: {
                     position: "fixed",
-                    left: placement?.left ?? 0,
-                    top: placement?.top ?? 0,
+                    left: placement?.left ?? x ?? 0,
+                    top: placement?.top ?? y ?? 0,
                     visibility: placement ? "visible" : "hidden",
-                    zIndex: 70,
+                    zIndex: 80,
                     width: 260,
                     maxWidth: "calc(100vw - 16px)",
                     boxSizing: "border-box",

package/dist/components/ToolbarPrimitives.d.ts

@@ -135,6 +135,20 @@ export declare function ToolbarGroup({ priority, children }: {
  * primary row starts shedding groups - this is plain CSS visibility
  * toggling of pre-rendered content, not JS media-query logic, matching how
  * the rest of this responsive system already works.
+ *
+ * The panel itself renders `position: fixed` with JS-measured coordinates,
+ * the same fix and reasoning as `ToolbarDropdown` (docs/bugs/
+ * toolbar-dropdown-clipped-by-host-overflow-hidden.md) - this component was
+ * NOT covered by that fix at the time (incorrectly assumed to be
+ * unaffected since it already had its own separate mobile CSS), but it has
+ * the exact same `position: absolute` vulnerability to a host's own
+ * `overflow: hidden` container, and since this is the ONLY toolbar
+ * overflow affordance on narrow viewports (every ToolbarDropdown hides
+ * entirely below the mobile breakpoint), a clipped host is more likely to
+ * matter here, not less. Confirmed live: a real narrow host wrapping the
+ * editor in `overflow: hidden` computed this panel at `left: -214px` -
+ * mostly off-screen, functionally invisible despite being technically
+ * present in the DOM.
  */
 export declare function MobileMoreMenu({ children }: {
     children: React.ReactNode;

package/dist/components/ToolbarPrimitives.js

@@ -176,9 +176,53 @@ export function ToolbarGroup({ priority, children }) {
  * primary row starts shedding groups - this is plain CSS visibility
  * toggling of pre-rendered content, not JS media-query logic, matching how
  * the rest of this responsive system already works.
+ *
+ * The panel itself renders `position: fixed` with JS-measured coordinates,
+ * the same fix and reasoning as `ToolbarDropdown` (docs/bugs/
+ * toolbar-dropdown-clipped-by-host-overflow-hidden.md) - this component was
+ * NOT covered by that fix at the time (incorrectly assumed to be
+ * unaffected since it already had its own separate mobile CSS), but it has
+ * the exact same `position: absolute` vulnerability to a host's own
+ * `overflow: hidden` container, and since this is the ONLY toolbar
+ * overflow affordance on narrow viewports (every ToolbarDropdown hides
+ * entirely below the mobile breakpoint), a clipped host is more likely to
+ * matter here, not less. Confirmed live: a real narrow host wrapping the
+ * editor in `overflow: hidden` computed this panel at `left: -214px` -
+ * mostly off-screen, functionally invisible despite being technically
+ * present in the DOM.
  */
 export function MobileMoreMenu({ children }) {
     const detailsRef = useRef(null);
     useDismissDetailsOnOutsideClick(detailsRef);
-    return _jsxs("details", { ref: detailsRef, className: "srte-toolbar-menu srte-mobile-more", children: [_jsx("summary", { className: "srte-tool-button srte-menu-trigger", "aria-label": "More tools", onMouseDown: (event) => event.preventDefault(), children: toolbarIcons.more }), _jsx("div", { className: "srte-menu", role: "menu", children: children })] });
+    const [placement, setPlacement] = useState(null);
+    useLayoutEffect(() => {
+        const details = detailsRef.current;
+        if (!details)
+            return;
+        const recompute = () => {
+            if (!details.open) {
+                setPlacement(null);
+                return;
+            }
+            const margin = 8;
+            const triggerRect = details.getBoundingClientRect();
+            const menu = details.querySelector(":scope > .srte-menu");
+            const menuWidth = menu?.offsetWidth ?? Math.min(280, window.innerWidth - 16);
+            const menuHeight = menu?.offsetHeight ?? 0;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // Right-aligned to the trigger, matching this menu's original
+            // CSS-only `right: 0` intent - clamped into the viewport instead of
+            // being allowed to run off it or get clipped by an ancestor.
+            const preferredLeft = triggerRect.right - menuWidth;
+            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 });
+        };
+        recompute();
+        details.addEventListener("toggle", recompute);
+        return () => details.removeEventListener("toggle", recompute);
+    }, []);
+    return _jsxs("details", { ref: detailsRef, className: "srte-toolbar-menu srte-mobile-more", children: [_jsx("summary", { className: "srte-tool-button srte-menu-trigger", "aria-label": "More tools", onMouseDown: (event) => event.preventDefault(), children: toolbarIcons.more }), _jsx("div", { className: "srte-menu", role: "menu", "data-srte-menu-fixed": "true", style: { left: placement?.left ?? 0, top: placement?.top ?? 0, visibility: placement ? "visible" : "hidden" }, children: children })] });
 }

package/dist/index.d.ts

@@ -2,6 +2,9 @@ export { ClassicEditor } from './components/ClassicEditorAuthority.js';
 export type { ClassicEditorProps } from './components/ClassicEditorAuthority.js';
 export { CanonicalAuthorityEditor } from './components/CanonicalAuthorityEditor.js';
 export type { CanonicalAuthorityEditorProps } from './components/CanonicalAuthorityEditor.js';
+export type { EditorCapabilityPreset } from './capabilityPresets.js';
+export type { ToolbarTools } from './toolbarTools.js';
+export { DEFAULT_TOOLBAR_TOOLS, resolveToolbarTools } from './toolbarTools.js';
 export { CanonicalEditorRuntime, createCanonicalEditorRuntime } from './canonicalEditorRuntime.js';
 export type { SmartEditorChange, SmartEditorCheckpoint, SmartEditorHandle } from './canonicalEditorRuntime.js';
 export type { MediaManagerAdapter, MediaItem, MediaSearchQuery } from './components/MediaManager.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { ClassicEditor } from './components/ClassicEditorAuthority.js';
 export { CanonicalAuthorityEditor } from './components/CanonicalAuthorityEditor.js';
+export { DEFAULT_TOOLBAR_TOOLS, resolveToolbarTools } from './toolbarTools.js';
 export { CanonicalEditorRuntime, createCanonicalEditorRuntime } from './canonicalEditorRuntime.js';
 export { DefaultMediaPicker } from './components/MediaPicker.js';
 export { SRTE_DEFAULT_CSS, ensureStyleSheet } from './theme.js';

package/dist/standalone/classic-editor-embed.js

@@ -44,7 +44,7 @@ function ClassicEditorHost(props, ref) {
                     }
                 }
                 catch { }
-            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, showFontSize: props.showFontSize, theme: props.theme, className: props.className }) }));
+            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, showFontSize: props.showFontSize, tools: props.tools, theme: props.theme, className: props.className }) }));
 }
 const ClassicEditorHostWithRef = React.forwardRef(ClassicEditorHost);
 function initClassicEditor(opts) {