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

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.0-beta.6
+
+- Replace the media Edit overlay's plain alt-text prompt with a full "Media details" panel: link (with open-in-new-tab), corner radius, alignment, and license fields (description, source URL, type, version, attribution), matching the pre-canonical editor's own edit-panel field set. A library-picked image's existing license metadata is now carried onto the inserted atom instead of being discarded. Depends on `smartrte-core@1.0.0-beta.3`.
+
 ## 1.0.0-beta.5
 
 - Add an opt-in `renderFormulaHtml` prop (on `ClassicEditor`/`CanonicalAuthorityEditor`) that bakes real KaTeX-rendered HTML into the formula elements of `onChange`'s exported HTML, instead of an empty placeholder — for hosts that display saved content directly (e.g. a read-only preview panel) without also running KaTeX against it. Depends on `smartrte-core@1.0.0-beta.2`.

package/dist/components/CanonicalAuthorityEditor.js

@@ -19,6 +19,7 @@ import { SpecialCharacterPopover } from "./SpecialCharacterPopover.js";
 import { TableBorderPopover, BORDER_WIDTH_PRESETS } from "./TableBorderPopover.js";
 import { TableResizeHandles } from "./TableResizeHandles.js";
 import { MediaOverlay } from "./MediaOverlay.js";
+import { MediaDetailsPopover } from "./MediaDetailsPopover.js";
 import { ContextMenu } from "./ContextMenu.js";
 import { ToolbarButton, ToolbarDropdown, ToolbarGroup, ToolbarMenuItem, MobileMoreMenu } from "./ToolbarPrimitives.js";
 import { exportDocxDocument, importStyledDocxDocument, importPdfDocument } from "smartrte-core/foundation";
@@ -129,6 +130,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const [recentColors, setRecentColors] = useState({ text: [], background: [], border: [] });
     const [tableSizePopover, setTableSizePopover] = useState(null);
     const [tableBorderPopover, setTableBorderPopover] = useState(null);
+    const [mediaDetailsPopover, setMediaDetailsPopover] = useState(null);
     const borderPreviewCheckpointRef = useRef(null);
     const [formulaLibraryPopover, setFormulaLibraryPopover] = useState(null);
     const [specialCharPopover, setSpecialCharPopover] = useState(null);
@@ -140,6 +142,8 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // since nothing was ever applied to the model).
     const colorPreviewCheckpointRef = useRef(null);
     const [contextMenu, setContextMenu] = useState(null);
+    const [mediaContextMenu, setMediaContextMenu] = useState(null);
+    const [mediaResizeTarget, setMediaResizeTarget] = useState(null);
     // Tracks the exact caret position (path+offset) the link overlay was
     // last dismissed at (Escape/outside click) - suppresses an instant
     // re-popup while the caret hasn't moved, without needing a separate
@@ -348,6 +352,15 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // node.type.includes("formula") for its own correct "Formula source"
     // prompt.
     const resizableAtomSelected = mediaAtomSelected && selectedAtomNode?.type !== "formula" && selectedAtomNode?.type !== "block_formula";
+    const selectedAtomId = atomSelected && "nodeId" in currentAtomScope ? currentAtomScope.nodeId : null;
+    useEffect(() => {
+        if (mediaContextMenu && (!mediaAtomSelected || mediaContextMenu.nodeId !== selectedAtomId))
+            setMediaContextMenu(null);
+    }, [mediaContextMenu, mediaAtomSelected, selectedAtomId]);
+    useEffect(() => {
+        if (mediaResizeTarget && (!mediaAtomSelected || mediaResizeTarget.nodeId !== selectedAtomId))
+            setMediaResizeTarget(null);
+    }, [mediaResizeTarget, mediaAtomSelected, selectedAtomId]);
     // Context menu scope reduction: link no longer gets a right-click menu -
     // LinkEditorPopover (already built and wired for the toolbar's Link
     // button, per §1's investigation) auto-appears, anchored to the link's
@@ -803,13 +816,10 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
      * the same way Tab special-cases list.indent/outdent's dynamic params.
      */
     /**
-     * Context menu scope reduction: table-only now. Marks (already on the
-     * toolbar) and atom/link (moved to their own dedicated overlays -
-     * MediaOverlay below, and the auto-triggered LinkEditorPopover - see
-     * linkAnchorElement) no longer register contextMenu contributions at
-     * all (marks/plugin.ts, atom/plugin.ts) or get hardcoded item blocks
-     * here - only table plugin contributions (the generic loop) and the
-     * cell-colour items remain.
+     * The generic plugin context menu remains table-scoped. Images use their
+     * direct right-click details editor below, other media keeps its dedicated
+     * quick-action menu, while marks stay on the toolbar and links use the
+     * auto-triggered LinkEditorPopover.
      */
     const resolveContextMenuItems = () => {
         const many = () => ids(128);
@@ -1028,6 +1038,19 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         insertBlockAtom("block_image", {
             src: item.url, alt: item.alt || item.title || "Image", decorative: false, status: "ready",
             ...(item.width ? { width: item.width } : {}), ...(item.height ? { height: item.height } : {}),
+            // docs/bugs/media-details-old-editor-field-parity.md: item.license was
+            // already fetched and shown in MediaManager's own library-browser info
+            // panel (MediaManager.tsx), but had nowhere to persist once inserted -
+            // the atom schema had no license attrs at all, so this real,
+            // already-available data was silently discarded at exactly this call
+            // site. `licenseVersion` has no MediaItem.license equivalent (its
+            // shape has no separate version field) - left for the user to fill in
+            // via the media details panel, same as a freshly uploaded image.
+            ...(item.license?.workName || item.license?.licenseText
+                ? { licenseDescription: [item.license.workName, item.license.licenseText].filter(Boolean).join(" - ") } : {}),
+            ...(item.license?.sourceUrl ? { licenseSourceUrl: item.license.sourceUrl } : {}),
+            ...(item.license?.licenseType ? { licenseType: item.license.licenseType } : {}),
+            ...(item.license?.author ? { licenseAttribution: item.license.author } : {}),
         }, createNodeId());
     };
     const commentAuthorId = authorId || "anonymous";
@@ -1211,6 +1234,27 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         runtime.focus();
         setLinkPopover(null);
     };
+    const openMediaDetails = (scope, node, element) => {
+        if (scope.kind !== "atomic-node")
+            return;
+        const rect = (element || selectedAtomElement)?.getBoundingClientRect();
+        setMediaDetailsPopover({
+            x: rect ? rect.left : 0, y: rect ? rect.bottom + 6 : 0, scope,
+            initial: {
+                alt: String(node.attrs?.alt || ""),
+                href: String(node.attrs?.href || ""),
+                openInNewTab: node.attrs?.target === "_blank",
+                width: typeof node.attrs?.width === "number" ? node.attrs.width : undefined,
+                borderRadius: typeof node.attrs?.borderRadius === "number" ? node.attrs.borderRadius : undefined,
+                align: node.attrs?.align === "left" || node.attrs?.align === "center" || node.attrs?.align === "right" ? node.attrs.align : undefined,
+                licenseDescription: String(node.attrs?.licenseDescription || ""),
+                licenseSourceUrl: String(node.attrs?.licenseSourceUrl || ""),
+                licenseType: String(node.attrs?.licenseType || ""),
+                licenseVersion: String(node.attrs?.licenseVersion || ""),
+                licenseAttribution: String(node.attrs?.licenseAttribution || ""),
+            },
+        });
+    };
     const editSelectedAtom = (resizeBy) => {
         const scope = atomScope();
         if (scope.kind !== "atomic-node")
@@ -1218,16 +1262,59 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         const node = findNode(runtime.editor.document, scope.nodeId);
         if (!node)
             return;
+        if (resizeBy === undefined && !node.type.includes("formula")) {
+            // Images: the old window.prompt("Alt text") one-field edit is
+            // replaced by the full Media details panel (docs/bugs/
+            // media-details-old-editor-field-parity.md) - formulas keep their
+            // existing prompt unchanged below, since this panel's fields
+            // (link/align/radius/license) don't apply to a formula atom at all.
+            openMediaDetails(scope, node);
+            return;
+        }
         const operations = resizeBy === undefined
-            ? updateAtom(runtime.editor.document, scope, node.type.includes("formula")
-                ? { attrs: { source: window.prompt("Formula source", String(node.attrs?.source || "")) || node.attrs?.source } }
-                : { attrs: { alt: window.prompt("Alt text", String(node.attrs?.alt || "")) ?? node.attrs?.alt } }, blockContext())
+            ? updateAtom(runtime.editor.document, scope, { attrs: { source: window.prompt("Formula source", String(node.attrs?.source || "")) || node.attrs?.source } }, blockContext())
             : resizeAtom(runtime.editor.document, scope, {
                 width: Math.max(16, Number(node.attrs?.width || 160) + resizeBy),
                 height: Math.max(16, Number(node.attrs?.height || 90) + resizeBy),
             }, blockContext());
         runtime.executeOperations(operations, resizeBy === undefined ? {} : { historyGroup: `resize-${scope.nodeId}` });
     };
+    const applyMediaDetails = (draft) => {
+        if (!mediaDetailsPopover)
+            return;
+        const { scope } = mediaDetailsPopover;
+        if (scope.kind !== "atomic-node") {
+            setMediaDetailsPopover(null);
+            return;
+        }
+        const node = findNode(runtime.editor.document, scope.nodeId);
+        const currentWidth = typeof node?.attrs?.width === "number" ? node.attrs.width : undefined;
+        const currentHeight = typeof node?.attrs?.height === "number" ? node.attrs.height : undefined;
+        // Width preserves the original aspect ratio (matches the drag handle
+        // and Resize +/- buttons' own behavior) rather than exposing a separate
+        // Height field the old editor's own screenshot didn't have either.
+        const resizedHeight = draft.width && currentWidth && currentHeight
+            ? Math.round((draft.width * currentHeight) / currentWidth)
+            : currentHeight;
+        setMediaDetailsPopover(null);
+        runtime.executeOperations(updateAtom(runtime.editor.document, scope, {
+            attrs: {
+                alt: draft.alt,
+                href: draft.href || undefined,
+                target: draft.href && draft.openInNewTab ? "_blank" : undefined,
+                width: draft.width ?? currentWidth,
+                height: draft.width ? resizedHeight : currentHeight,
+                borderRadius: draft.borderRadius || undefined,
+                align: draft.align,
+                licenseDescription: draft.licenseDescription || undefined,
+                licenseSourceUrl: draft.licenseSourceUrl || undefined,
+                licenseType: draft.licenseType || undefined,
+                licenseVersion: draft.licenseVersion || undefined,
+                licenseAttribution: draft.licenseAttribution || undefined,
+            },
+        }, blockContext()));
+        runtime.focus();
+    };
     /** MediaOverlay's drag-corner-handle commit - explicit width/height rather than editSelectedAtom's fixed +/-20 increment. */
     const resizeSelectedAtomTo = (width, height) => {
         const scope = atomScope();
@@ -1396,7 +1483,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                     setLinkOverlayDismissedAt(runtime.editor.selection.head);
                     setLinkPopover(null);
                     runtime.focus();
-                } }), !readOnly && mediaAtomSelected && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, resizable: resizableAtomSelected, onEdit: () => editSelectedAtom(), onResize: (by) => editSelectedAtom(by), onResizeTo: resizeSelectedAtomTo, onDelete: deleteSelectedAtom, onDismiss: () => runtime.focus() }), colorPopover && _jsx(ColorPickerPopover, { x: colorPopover.x, y: colorPopover.y, label: colorPopover.target.kind === "mark"
+                } }), !readOnly && mediaResizeTarget && mediaResizeTarget.nodeId === selectedAtomId && mediaAtomSelected && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, showMenu: false, resizable: resizableAtomSelected, onEdit: () => undefined, onResize: () => undefined, onResizeTo: resizeSelectedAtomTo, onDelete: () => undefined, onDismiss: () => setMediaResizeTarget(null) }), !readOnly && mediaContextMenu && mediaAtomSelected && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, x: mediaContextMenu.x, y: mediaContextMenu.y, resizable: resizableAtomSelected, onEdit: () => { setMediaContextMenu(null); editSelectedAtom(); }, onResize: (by) => { setMediaContextMenu(null); editSelectedAtom(by); }, onResizeTo: resizeSelectedAtomTo, onDelete: () => { setMediaContextMenu(null); deleteSelectedAtom(); }, onDismiss: () => { setMediaContextMenu(null); runtime.focus(); } }), colorPopover && _jsx(ColorPickerPopover, { x: colorPopover.x, y: colorPopover.y, label: colorPopover.target.kind === "mark"
                     ? (colorPopover.target.markId === "textColor" ? "Text colour" : "Background colour")
                     : colorPopover.target.attr === "textColor" ? "Cell text colour" : "Cell background colour", ...(colorPopover.initialValue ? { initialValue: colorPopover.initialValue } : {}), recentColors: recentColors[colorBucketFor(colorPopover.target)], onPreview: previewColor, onApply: applyColor, onCancel: cancelColorPopover }), tableSizePopover && _jsx(TableSizePickerPopover, { x: tableSizePopover.x, y: tableSizePopover.y, onInsert: (rows, columns) => {
                     setTableSizePopover(null);
@@ -1405,7 +1492,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                 }, onCancel: () => {
                     setTableSizePopover(null);
                     runtime.focus();
-                } }), tableBorderPopover && _jsx(TableBorderPopover, { x: tableBorderPopover.x, y: tableBorderPopover.y, initial: tableBorderPopover.initial, recentColors: recentColors.border, onPreview: previewCellBorder, onApply: applyCellBorderCommit, onCancel: cancelTableBorderPopover }), formulaLibraryPopover && _jsx(FormulaLibraryPopover, { x: formulaLibraryPopover.x, y: formulaLibraryPopover.y, onInsert: insertFormulaFromLibrary, onCancel: () => { setFormulaLibraryPopover(null); runtime.focus(); } }), specialCharPopover && _jsx(SpecialCharacterPopover, { x: specialCharPopover.x, y: specialCharPopover.y, recentCharacters: recentSpecialChars, onInsert: insertSpecialCharacter, onCancel: () => { setSpecialCharPopover(null); runtime.focus(); } }), !readOnly && selectedTableElement && _jsx(TableResizeHandles, { tableElement: selectedTableElement, onResizeColumn: resizeTableColumn, onResizeRow: resizeTableRow }), contextMenu && _jsx(ContextMenu, { x: contextMenu.x, y: contextMenu.y, items: resolveContextMenuItems(), onDismiss: () => { setContextMenu(null); runtime.focus(); } }), _jsx("div", { ref: rootRef, className: "srte-editor", "data-placeholder": placeholder, contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", "aria-label": "Smart RTE editing surface", "aria-multiline": "true", onMouseDown: (event) => {
+                } }), tableBorderPopover && _jsx(TableBorderPopover, { x: tableBorderPopover.x, y: tableBorderPopover.y, initial: tableBorderPopover.initial, recentColors: recentColors.border, onPreview: previewCellBorder, onApply: applyCellBorderCommit, onCancel: cancelTableBorderPopover }), mediaDetailsPopover && _jsx(MediaDetailsPopover, { x: mediaDetailsPopover.x, y: mediaDetailsPopover.y, initial: mediaDetailsPopover.initial, onApply: applyMediaDetails, onCancel: () => { setMediaDetailsPopover(null); runtime.focus(); } }), formulaLibraryPopover && _jsx(FormulaLibraryPopover, { x: formulaLibraryPopover.x, y: formulaLibraryPopover.y, onInsert: insertFormulaFromLibrary, onCancel: () => { setFormulaLibraryPopover(null); runtime.focus(); } }), specialCharPopover && _jsx(SpecialCharacterPopover, { x: specialCharPopover.x, y: specialCharPopover.y, recentCharacters: recentSpecialChars, onInsert: insertSpecialCharacter, onCancel: () => { setSpecialCharPopover(null); runtime.focus(); } }), !readOnly && selectedTableElement && _jsx(TableResizeHandles, { tableElement: selectedTableElement, onResizeColumn: resizeTableColumn, onResizeRow: resizeTableRow }), contextMenu && _jsx(ContextMenu, { x: contextMenu.x, y: contextMenu.y, items: resolveContextMenuItems(), onDismiss: () => { setContextMenu(null); runtime.focus(); } }), _jsx("div", { ref: rootRef, className: "srte-editor", "data-placeholder": placeholder, contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", "aria-label": "Smart RTE editing surface", "aria-multiline": "true", onMouseDown: (event) => {
                     // A Ctrl/Cmd+click on a link is meant to open it (onClick below),
                     // not move the caret into it - but native mousedown's own default
                     // action *is* the caret-repositioning, and mousedown fires (and
@@ -1420,27 +1507,45 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                     // completed render in a varying number of passes, so the overlay
                     // could already be open before the flag was ever set.)
                     const anchor = event.target?.closest("a[href]");
-                    if (anchor && (event.metaKey || event.ctrlKey))
+                    const linkedMedia = event.target?.closest("[data-smart-href]");
+                    if ((anchor || linkedMedia) && (event.metaKey || event.ctrlKey))
                         event.preventDefault();
                 }, onClick: (event) => {
                     const anchor = event.target?.closest("a[href]");
-                    if (!anchor || !(event.metaKey || event.ctrlKey))
+                    // An image atom with a Link set (docs/bugs/media-details-old-editor-field-parity.md)
+                    // - plain data attributes, not a real <a> wrapper, in the live DOM
+                    // (see surface/renderer.ts's own reasoning); Ctrl/Cmd+click opens it
+                    // the same way a real text link does, matching this project's only
+                    // existing link-opening convention rather than inventing a second one.
+                    const linkedMedia = event.target?.closest("[data-smart-href]");
+                    const href = anchor?.href || linkedMedia?.getAttribute("data-smart-href");
+                    if (href && (event.metaKey || event.ctrlKey)) {
+                        event.preventDefault();
+                        window.open(href, "_blank", "noopener,noreferrer");
                         return;
-                    event.preventDefault();
-                    window.open(anchor.href, "_blank", "noopener,noreferrer");
+                    }
+                    const imageTarget = event.target?.closest("[data-smart-type=\"image\"], [data-smart-type=\"block_image\"]");
+                    if (!imageTarget)
+                        return;
+                    setMediaContextMenu(null);
+                    const mappedImage = runtime.surface.renderer?.mapping.domToNode(imageTarget);
+                    if (mappedImage)
+                        setMediaResizeTarget({ nodeId: mappedImage.nodeId });
                 }, onContextMenu: (event) => {
                     if (readOnly)
                         return;
                     event.preventDefault();
+                    setMediaContextMenu(null);
                     // Atom selection (unlike caret/text placement) is not native
                     // browser behavior - it's InputController's own clickListener
                     // (surface/input.ts), bound to the "click" DOM event, which never
                     // fires for a right-click. Without this, right-clicking an atom
                     // directly (no preceding left-click) left whatever selection was
                     // already there in place, so atomic-node scope never resolved and
-                    // MediaOverlay (which shows whenever atomSelected is true) never
-                    // appeared - right-clicking media looked like right-clicking
-                    // nothing. Mirrors clickListener's own atom-selection logic
+                    // the media interaction (details editor for images, quick-action
+                    // menu for other media) never appeared - right-clicking media looked
+                    // like right-clicking nothing. Mirrors clickListener's own
+                    // atom-selection logic
                     // exactly.
                     const atomTarget = event.target?.closest("[data-smart-atomic]");
                     const mapped = atomTarget ? runtime.surface.renderer?.mapping.domToNode(atomTarget) : null;
@@ -1450,6 +1555,19 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                             runtime.editor.setSelection({ type: "node", anchor: range.from, head: range.to }, { source: "api" });
                             runtime.surface.renderer?.render(runtime.editor.document, runtime.editor.selection);
                         }
+                        if (mapped.node.type !== "divider" && mapped.node.type !== "unknown") {
+                            setContextMenu(null);
+                            const isImage = mapped.node.type === "image" || mapped.node.type === "block_image";
+                            if (isImage) {
+                                const scope = runtime.editor.resolveScope({ want: "atomic-node" });
+                                setMediaResizeTarget({ nodeId: mapped.nodeId });
+                                if (scope.kind === "atomic-node")
+                                    openMediaDetails(scope, mapped.node, atomTarget || undefined);
+                                return;
+                            }
+                            setMediaContextMenu({ x: event.clientX, y: event.clientY, nodeId: mapped.nodeId });
+                            return;
+                        }
                     }
                     else if (isCollapsedTextSelection(runtime.editor.selection)) {
                         // Chromium/Firefox reposition the native caret to the click
@@ -1480,10 +1598,8 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                             runtime.surface.renderer?.render(runtime.editor.document, runtime.editor.selection);
                         }
                     }
-                    // Table-only now (context menu scope reduction) - media/link moved
-                    // to their own dedicated overlays, marks live on the toolbar only.
-                    // A right-click that doesn't resolve to a table cell opens nothing
-                    // at all, rather than an empty "No actions here" menu.
+                    // A right-click that is not handled by the media branch above and
+                    // does not resolve to a table cell opens no generic menu.
                     const rightClickTableScope = runtime.editor.resolveScope({ want: "table-grid" });
                     if ("kind" in rightClickTableScope && rightClickTableScope.kind === "table-grid") {
                         setContextMenu({ x: event.clientX, y: event.clientY });

package/dist/components/MediaDetailsPopover.d.ts

@@ -0,0 +1,35 @@
+export type MediaAlign = "left" | "center" | "right" | undefined;
+export interface MediaDetailsDraft {
+    alt: string;
+    href: string;
+    openInNewTab: boolean;
+    width: number | undefined;
+    borderRadius: number | undefined;
+    align: MediaAlign;
+    licenseDescription: string;
+    licenseSourceUrl: string;
+    licenseType: string;
+    licenseVersion: string;
+    licenseAttribution: string;
+}
+export interface MediaDetailsPopoverProps {
+    x: number;
+    y: number;
+    initial: MediaDetailsDraft;
+    onApply: (draft: MediaDetailsDraft) => void;
+    onCancel: () => void;
+}
+/**
+ * "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 declare function MediaDetailsPopover({ x, y, initial, onApply, onCancel }: MediaDetailsPopoverProps): import("react/jsx-runtime").JSX.Element;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "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",
@@ -84,7 +84,7 @@
     "lucide-react": "^1.35.0",
     "mammoth": "^1.11.0",
     "pdfjs-dist": "^5.4.530",
-    "smartrte-core": "^1.0.0-beta.2"
+    "smartrte-core": "^1.0.0-beta.3"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.json",