smartrte-react 0.3.5 → 1.0.0-beta.2

package/dist/components/TableBorderPopover.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ColorPickerPopover } from "./ColorPickerPopover.js";
+// Widths start at 2px, not 1px - table_cell's border-collapse table (see
+// theme.ts's th/td rule) already renders a 1px ambient default gridline on
+// every cell. A custom border tied at 1px loses CSS border-collapse's
+// conflict resolution on shared edges half the time (whichever side faces
+// an earlier-in-table-order neighbor keeps the neighbor's default border,
+// confirmed empirically: 1px, and even a fractional 1.5px, lost this way in
+// every engine tested) - only a width strictly greater than the ambient
+// default reliably wins on every side regardless of table position. 2px is
+// the thinnest value that's actually renderable as a real, always-visible
+// custom border under this constraint - see
+// docs/bugs/table-cell-border-thin-preset-loses-border-collapse-tie.md.
+export const BORDER_WIDTH_PRESETS = [
+    { id: "thin", label: "Thin", px: 2 },
+    { id: "medium", label: "Medium", px: 3 },
+    { id: "thick", label: "Thick", px: 4 },
+];
+const STYLE_OPTIONS = ["solid", "dashed", "dotted"];
+const buttonStyle = {
+    minHeight: 32, padding: "0 10px", 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 selectStyle = {
+    width: "100%", height: 32, boxSizing: "border-box", padding: "0 8px", borderRadius: 8,
+    border: "1px solid var(--srte-input-border)", background: "var(--srte-input-bg)", color: "var(--srte-input-text)",
+    font: "inherit", fontSize: 13, cursor: "pointer",
+};
+const fieldLabelStyle = { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.7, marginBottom: 4 };
+const SIDE_BAR_LENGTH = 40;
+const SIDE_BAR_THICKNESS = 8;
+const SIDE_BOX = 64;
+/**
+ * "Border options" - one popover combining every dimension of a cell
+ * border, replacing what used to be a separate toolbar-dropdown width
+ * <select> and a standalone "Border colour" item. table_cell.attrs only
+ * ever stored ONE uniform border for all four sides (`borders`) - "which
+ * sides get a border" (per-cell top/right/bottom/left) needed new per-side
+ * schema attrs (borderTop/Right/Bottom/Left), added specifically to back
+ * this control (see docs/bugs/table-cell-border-color-width-no-ui.md's
+ * addendum). One style/width/colour choice applies to whichever sides are
+ * toggled on here, rather than letting all four vary independently - real
+ * border dialogs (Word, Google Docs) default to this simpler mode too, and
+ * a fully independent 4-way style/width/colour matrix wasn't asked for.
+ *
+ * The colour swatch opens the existing ColorPickerPopover completely
+ * unmodified, as a nested popover anchored to the swatch - the dismiss/
+ * Escape handling below explicitly accounts for it being a DOM sibling
+ * (both are position:fixed overlays, so `rootRef.contains()` alone would
+ * never recognize a click inside it as "inside" this popover).
+ */
+export function TableBorderPopover({ x, y, initial, recentColors, onPreview, onApply, onCancel }) {
+    const [draft, setDraft] = useState(initial);
+    const [colorPickerAnchor, setColorPickerAnchor] = useState(null);
+    const hexBeforeNestedPickerRef = useRef(initial.hex);
+    const rootRef = useRef(null);
+    const swatchRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const onCancelRef = useRef(onCancel);
+    onCancelRef.current = onCancel;
+    const onPreviewRef = useRef(onPreview);
+    onPreviewRef.current = onPreview;
+    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 ? y - height : y;
+        const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - margin));
+        setPlacement({ left: clampedLeft, top: clampedTop });
+    }, [x, y]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            const target = event.target;
+            if (rootRef.current?.contains(target))
+                return;
+            // The nested colour picker is a DOM sibling (both are position:fixed
+            // overlays), not a descendant of rootRef - without this, clicking
+            // inside it would look like an "outside" click on this popover.
+            if (colorPickerAnchor && document.querySelector('[data-srte-color-popover="true"]')?.contains(target))
+                return;
+            onCancelRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, [colorPickerAnchor]);
+    useEffect(() => {
+        const onWindowKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            // While the nested colour picker is open, let its own Escape handler
+            // commit/dismiss just that picker first - a second Escape closes this
+            // whole dialog.
+            if (colorPickerAnchor)
+                return;
+            onCancelRef.current();
+        };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+    }, [colorPickerAnchor]);
+    const update = (patch) => {
+        const next = { ...draft, ...patch };
+        setDraft(next);
+        onPreviewRef.current(next);
+    };
+    const toggleSide = (side) => update({ sides: { ...draft.sides, [side]: !draft.sides[side] } });
+    const edgeButton = (side, style, label) => (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": draft.sides[side], onMouseDown: (event) => event.preventDefault(), onClick: () => toggleSide(side), style: {
+            position: "absolute", border: "none", borderRadius: 3, cursor: "pointer", padding: 0,
+            background: draft.sides[side] ? "var(--srte-primary)" : "var(--srte-input-border)",
+            ...style,
+        } }));
+    return (_jsxs("div", { ref: rootRef, "data-srte-table-border-popover": "true", role: "dialog", "aria-label": "Border options", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 70,
+            width: 240,
+            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: 12,
+        }, children: [_jsx("div", { style: { fontWeight: 650 }, children: "Border options" }), _jsxs("div", { style: { display: "flex", gap: 14, alignItems: "center" }, children: [_jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Sides" }), _jsxs("div", { style: { position: "relative", width: SIDE_BOX, height: SIDE_BOX, border: "1px dashed var(--srte-border)", borderRadius: 6 }, children: [edgeButton("top", { top: -SIDE_BAR_THICKNESS / 2, left: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_LENGTH, height: SIDE_BAR_THICKNESS }, "Top border"), edgeButton("bottom", { bottom: -SIDE_BAR_THICKNESS / 2, left: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_LENGTH, height: SIDE_BAR_THICKNESS }, "Bottom border"), edgeButton("left", { left: -SIDE_BAR_THICKNESS / 2, top: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_THICKNESS, height: SIDE_BAR_LENGTH }, "Left border"), edgeButton("right", { right: -SIDE_BAR_THICKNESS / 2, top: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_THICKNESS, height: SIDE_BAR_LENGTH }, "Right border")] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [_jsx("button", { type: "button", style: buttonStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => update({ sides: { top: true, right: true, bottom: true, left: true } }), children: "All sides" }), _jsx("button", { type: "button", style: buttonStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => update({ sides: { top: false, right: false, bottom: false, left: false } }), children: "No border" })] })] }), _jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Style" }), _jsx("select", { "aria-label": "Border style", value: draft.style, onChange: (event) => update({ style: event.target.value }), style: selectStyle, children: STYLE_OPTIONS.map((style) => _jsxs("option", { value: style, children: [style[0].toUpperCase(), style.slice(1)] }, style)) })] }), _jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Width" }), _jsx("select", { "aria-label": "Border width", value: BORDER_WIDTH_PRESETS.find((preset) => preset.px === draft.widthPx)?.id ?? BORDER_WIDTH_PRESETS[0].id, onChange: (event) => { const preset = BORDER_WIDTH_PRESETS.find((entry) => entry.id === event.target.value); if (preset)
+                            update({ widthPx: preset.px }); }, style: selectStyle, children: BORDER_WIDTH_PRESETS.map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id)) })] }), _jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Colour" }), _jsxs("button", { ref: swatchRef, type: "button", "aria-label": "Border colour", onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                            hexBeforeNestedPickerRef.current = draft.hex;
+                            const rect = swatchRef.current?.getBoundingClientRect();
+                            setColorPickerAnchor({ x: rect?.left ?? x, y: (rect?.bottom ?? y) + 4 });
+                        }, style: { ...buttonStyle, width: "100%", display: "flex", alignItems: "center", gap: 8, justifyContent: "flex-start" }, children: [_jsx("span", { style: { width: 18, height: 18, borderRadius: 4, border: "1px solid var(--srte-input-border)", background: draft.hex }, "aria-hidden": "true" }), draft.hex] })] }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [_jsx("button", { type: "button", style: buttonStyle, onClick: onCancel, children: "Cancel" }), _jsx("button", { type: "button", onClick: () => onApply(draft), style: { ...buttonStyle, borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: "Apply" })] }), colorPickerAnchor && _jsx(ColorPickerPopover, { x: colorPickerAnchor.x, y: colorPickerAnchor.y, label: "Border colour", initialValue: draft.hex, recentColors: recentColors, onPreview: (hex) => update({ hex }), onApply: (hex) => { update({ hex }); setColorPickerAnchor(null); }, onCancel: () => { update({ hex: hexBeforeNestedPickerRef.current }); setColorPickerAnchor(null); } })] }));
+}

package/dist/components/TableResizeHandles.d.ts

@@ -0,0 +1,25 @@
+export interface TableResizeHandlesProps {
+    tableElement: HTMLTableElement;
+    /**
+     * `currentWidths` is every column's real, currently-rendered width (not
+     * just the dragged one) - see the handleUp comment below for why the
+     * caller needs this, not just the one changed index.
+     */
+    onResizeColumn: (index: number, width: number, currentWidths: readonly number[]) => void;
+    onResizeRow: (index: number, height: number, adjacent?: {
+        index: number;
+        height: number;
+    }) => void;
+}
+/**
+ * Phase 11.5 §2.2: column-width/row-height drag handles calling the
+ * existing setTableColumnWidthCommand/setTableRowHeightCommand (row/column
+ * reorder already had toolbar buttons - "Move row up/down"/"Move column
+ * left/right" - wired since before this phase; resize had no UI at all).
+ * Commit-on-release, not a live preview during drag - a deliberately
+ * bounded scope for the first pass. Recomputes handle geometry from the
+ * live table's actual rendered cell rects on every table layout change via
+ * ResizeObserver, since table content (and therefore column/row sizes)
+ * changes independently of resize actions.
+ */
+export declare function TableResizeHandles({ tableElement, onResizeColumn, onResizeRow }: TableResizeHandlesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableResizeHandles.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+const HANDLE_THICKNESS = 6;
+const MIN_SIZE = 20;
+/**
+ * Phase 11.5 §2.2: column-width/row-height drag handles calling the
+ * existing setTableColumnWidthCommand/setTableRowHeightCommand (row/column
+ * reorder already had toolbar buttons - "Move row up/down"/"Move column
+ * left/right" - wired since before this phase; resize had no UI at all).
+ * Commit-on-release, not a live preview during drag - a deliberately
+ * bounded scope for the first pass. Recomputes handle geometry from the
+ * live table's actual rendered cell rects on every table layout change via
+ * ResizeObserver, since table content (and therefore column/row sizes)
+ * changes independently of resize actions.
+ */
+export function TableResizeHandles({ tableElement, onResizeColumn, onResizeRow }) {
+    const [columns, setColumns] = useState([]);
+    const [rows, setRows] = useState([]);
+    // `nextStartSize`/`nextIndex` are null for the last row/column's own
+    // outer-edge handle - that one still grows/shrinks the table's overall
+    // size (no neighbor to redistribute with); every other handle has a
+    // real neighbor and redistributes between the two instead.
+    const dragRef = useRef(null);
+    const [dragging, setDragging] = useState(null);
+    // handleUp (below) is defined inside an effect that doesn't depend on
+    // `columns`/`rows` (to avoid tearing down the pointer listeners on every
+    // ResizeObserver tick) - these refs keep it reading the latest measured
+    // sizes anyway, without that staleness risk.
+    const columnsRef = useRef([]);
+    columnsRef.current = columns;
+    const rowsRef = useRef([]);
+    rowsRef.current = rows;
+    // Shared by the passive observers below (structural/layout changes that
+    // happen outside a drag) and by handleMove during an active drag (see
+    // that effect for why an active drag can't just wait for these
+    // observers to notice).
+    const recompute = useCallback(() => {
+        const tableRect = tableElement.getBoundingClientRect();
+        const firstRowCells = [...tableElement.querySelectorAll("tr")[0]?.children || []];
+        const colBoundaries = [];
+        firstRowCells.forEach((cell, index) => {
+            const rect = cell.getBoundingClientRect();
+            colBoundaries.push({ index, position: rect.right, length: tableRect.height, start: tableRect.top, size: rect.width });
+        });
+        const rowElements = [...tableElement.querySelectorAll(":scope > tr, :scope > tbody > tr")];
+        const rowBoundaries = [];
+        rowElements.forEach((row, index) => {
+            const rect = row.getBoundingClientRect();
+            rowBoundaries.push({ index, position: rect.bottom, length: tableRect.width, start: tableRect.left, size: rect.height });
+        });
+        setColumns(colBoundaries);
+        setRows(rowBoundaries);
+    }, [tableElement]);
+    useEffect(() => {
+        recompute();
+        const observer = new ResizeObserver(recompute);
+        observer.observe(tableElement);
+        // ResizeObserver only fires when tableElement's own box size changes -
+        // inserting/removing a row or column into a table that stays the same
+        // overall width (the common case: width:100%, or a pinned literal
+        // width unaffected by redistributing space across one more/fewer
+        // column) never changes that box size, so it never fires. Handles
+        // then stay stale: wrong count, wrong position, wrong `boundary.size`
+        // for whatever column/row the model now has at that index - dragging
+        // one computed a wildly wrong new width from a stale start size. A
+        // MutationObserver on the table's own structure (row/cell add/remove/
+        // reorder) catches exactly the class of change ResizeObserver misses.
+        const mutationObserver = new MutationObserver(recompute);
+        mutationObserver.observe(tableElement, { childList: true, subtree: true });
+        const ownerWindow = tableElement.ownerDocument.defaultView;
+        ownerWindow?.addEventListener("scroll", recompute, true);
+        return () => {
+            observer.disconnect();
+            mutationObserver.disconnect();
+            ownerWindow?.removeEventListener("scroll", recompute, true);
+        };
+    }, [tableElement, recompute]);
+    useEffect(() => {
+        const ownerWindow = tableElement.ownerDocument.defaultView;
+        if (!ownerWindow)
+            return;
+        // For an internal boundary (a real neighbor exists), clamp the raw
+        // pointer delta so neither side ever goes below MIN_SIZE, then apply
+        // the *same* clamped delta with opposite signs to both sides - their
+        // sum is therefore always exactly startSize + nextStartSize, whatever
+        // the clamp did. That invariant is what makes "the border just moves"
+        // true: the table's own total size never has to change for these.
+        //
+        // Rows can't use this arithmetic-only approach: a <tr>'s rendered
+        // height can never go below what its own cell content needs (an
+        // explicit row height behaves as a minimum, not a hard cap, in table
+        // layout) - unlike a column's width under table-layout:fixed, which
+        // genuinely can be squeezed below its content's natural width. Naively
+        // clamping to a fixed MIN_SIZE the way columns do would, the instant a
+        // row's *real* content floor was higher than that, still hand the
+        // *other* row the full requested delta anyway - the total table
+        // height would silently grow instead of staying constant, and the row
+        // actually being dragged would appear frozen while its neighbor
+        // visibly ballooned (this is what "resize rows... move cursor up
+        // then it is effecting below row height" was - see docs/bugs/
+        // row-resize-drag-up-only-grows-the-row-below.md). Measuring the real
+        // DOM after attempting a shrink, and handing the other row only what
+        // was actually ceded, keeps that same invariant true regardless of
+        // where a row's real floor turns out to be.
+        const resolveSizes = (drag, event) => {
+            const rawDelta = drag.kind === "column" ? event.clientX - drag.startClient : event.clientY - drag.startClient;
+            if (drag.kind === "column") {
+                if (drag.nextStartSize === null) {
+                    return { size: Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta)), nextSize: null };
+                }
+                const minDelta = -(drag.startSize - MIN_SIZE);
+                const maxDelta = drag.nextStartSize - MIN_SIZE;
+                const delta = Math.min(Math.max(rawDelta, minDelta), maxDelta);
+                return { size: Math.round(drag.startSize + delta), nextSize: Math.round(drag.nextStartSize - delta) };
+            }
+            const rowElements = [...tableElement.querySelectorAll(":scope > tr, :scope > tbody > tr")];
+            if (drag.nextStartSize === null || drag.nextIndex === null) {
+                const target = Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta));
+                const rowElement = rowElements[drag.index];
+                if (rowElement)
+                    rowElement.style.height = `${target}px`;
+                const actual = rowElement ? Math.round(rowElement.getBoundingClientRect().height) : target;
+                return { size: actual, nextSize: null };
+            }
+            const rowElement = rowElements[drag.index];
+            const nextRowElement = rowElements[drag.nextIndex];
+            if (rawDelta <= 0) {
+                // The dragged (above) row is the one shrinking; the row below
+                // only grows by however much the above row actually gave up.
+                // There's no equivalent fallback for the dragged row itself here -
+                // a row that can't shrink just can't, full stop, no matter how
+                // flexible the table's total height is willing to be.
+                const target = Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta));
+                if (rowElement)
+                    rowElement.style.height = `${target}px`;
+                const actualSize = rowElement ? Math.round(rowElement.getBoundingClientRect().height) : target;
+                return { size: actualSize, nextSize: Math.round(drag.nextStartSize - (actualSize - drag.startSize)) };
+            }
+            // Dragging down: the row below is asked to shrink to pay for the
+            // dragged row's growth, exactly like the mirror case above - but
+            // unlike a row shrinking, a row *growing* is never floor-limited (a
+            // <tr>'s content only ever imposes a minimum, never a maximum), so
+            // there's no symmetric "the dragged row just can't grow" outcome to
+            // fall back to here. Making the dragged row's growth conditional on
+            // the neighbor actually having room to give (the way the shrink
+            // case correctly is) meant that on a table where every row already
+            // sits at its own content floor - true of almost any freshly
+            // created or pasted table with short cell text - internal
+            // row-boundary dragging did *nothing at all* in either direction:
+            // shrinking had nowhere to go, and growing was blocked because the
+            // neighbor had nowhere to give either. See docs/bugs/
+            // row-resize-blocked-when-every-row-is-at-its-floor.md. Grow the
+            // dragged row by the full requested amount unconditionally, and let
+            // the neighbor give up only what it actually can; if that's less
+            // than what was asked, the shortfall becomes real table growth -
+            // the only place that space could possibly come from - rather than
+            // silently refusing the drag altogether.
+            const size = Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta));
+            if (rowElement)
+                rowElement.style.height = `${size}px`;
+            const target = Math.max(MIN_SIZE, Math.round(drag.nextStartSize - rawDelta));
+            if (nextRowElement)
+                nextRowElement.style.height = `${target}px`;
+            const nextSize = nextRowElement ? Math.round(nextRowElement.getBoundingClientRect().height) : target;
+            return { size, nextSize };
+        };
+        const handleMove = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            setDragging({ kind: drag.kind, index: drag.index, position: drag.kind === "column" ? event.clientX : event.clientY });
+            // Live preview: mutate the real <col>/<tr> directly during the drag
+            // (commit-on-release still only touches the model, via onResizeColumn/
+            // onResizeRow below) - previously nothing rendered until pointerup, so
+            // the drag looked frozen until it suddenly jumped to the final size.
+            // Undoing this on the next real render is automatic: committing
+            // triggers the renderer's own re-render from authoritative model
+            // state, which overwrites whatever this loop wrote.
+            const { size: liveSize, nextSize: liveNextSize } = resolveSizes(drag, event);
+            if (drag.kind === "column") {
+                const cols = [...(tableElement.querySelector("colgroup")?.children || [])];
+                const col = cols[drag.index];
+                if (col)
+                    col.style.width = `${liveSize}px`;
+                if (liveNextSize !== null && drag.nextIndex !== null) {
+                    const nextCol = cols[drag.nextIndex];
+                    if (nextCol)
+                        nextCol.style.width = `${liveNextSize}px`;
+                }
+                // The stylesheet's `table-layout: fixed` + `width: 100%` treats
+                // <col> widths as proportions of the table's own rendered width,
+                // not literal pixels, unless the table's own width matches their
+                // sum (see surface/renderer.ts's table-width fix) - keep that sum
+                // live too, or every other column visibly compresses for the
+                // duration of the drag even though the fix restores them on
+                // release. Redistributing between two columns (liveNextSize !==
+                // null) never changes this sum by construction, so only the
+                // last column's own resize (liveNextSize === null) needs this.
+                if (liveNextSize === null) {
+                    const total = cols.reduce((sum, candidate, index) => sum + (index === drag.index ? liveSize : (parseFloat(candidate.style.width) || 0)), 0);
+                    if (total > 0)
+                        tableElement.style.width = `${total}px`;
+                }
+            }
+            else {
+                const rowElements = [...tableElement.querySelectorAll(":scope > tr, :scope > tbody > tr")];
+                const rowElement = rowElements[drag.index];
+                if (rowElement)
+                    rowElement.style.height = `${liveSize}px`;
+                if (liveNextSize !== null && drag.nextIndex !== null) {
+                    const nextRow = rowElements[drag.nextIndex];
+                    if (nextRow)
+                        nextRow.style.height = `${liveNextSize}px`;
+                }
+            }
+            // The handles' own on-screen position/length come from `columns`/
+            // `rows` state, which the effect above only refreshes via
+            // ResizeObserver/MutationObserver/scroll - none of which reliably
+            // fire here. Column drags happen to nudge the table's own rendered
+            // width by sub-pixel rounding (table-layout: fixed redistributing a
+            // stray pixel), which incidentally retriggers ResizeObserver; an
+            // internal row-boundary drag keeps the table's total height exactly
+            // constant by construction (see resolveSizes above), so it never
+            // does. Left alone, the row handle (and the blue line it renders)
+            // stays frozen at its pre-drag position while the real row border
+            // moves live underneath it - reported as a misplaced, "very slow"
+            // blue line that overflows past the table/editor as the gap between
+            // the frozen handle and the actual, now-taller table grows. Forcing
+            // a synchronous re-measure after every live style mutation (a
+            // getBoundingClientRect read right after a style write forces the
+            // browser to flush layout first, so this always reflects the
+            // mutation just above, not a stale value) keeps both column and row
+            // handles tracking the real border on every pointermove instead of
+            // waiting on an observer that may not fire at all.
+            recompute();
+        };
+        const handleUp = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            const { size, nextSize } = resolveSizes(drag, event);
+            if (drag.kind === "column") {
+                // A table pasted/created with no columnWidths yet (natural,
+                // stretched rendering - see docs/bugs/table-shrinks-after-paste.md)
+                // has no real per-column data for the command layer to fall back
+                // on; without this, setTableColumnWidthCommand's own fallback
+                // (Array(columns).fill(120)) would silently reset every OTHER
+                // column to a fabricated 120px default the instant any one column
+                // was resized, shrinking the whole table - passing the real,
+                // currently-measured width of every column lets the caller seed a
+                // complete, accurate columnWidths array instead of guessing.
+                const currentWidths = columnsRef.current.map((boundary) => boundary.size);
+                if (nextSize !== null && drag.nextIndex !== null)
+                    currentWidths[drag.nextIndex] = nextSize;
+                onResizeColumn(drag.index, size, currentWidths);
+            }
+            else if (nextSize !== null && drag.nextIndex !== null) {
+                onResizeRow(drag.index, size, { index: drag.nextIndex, height: nextSize });
+            }
+            else
+                onResizeRow(drag.index, size);
+            dragRef.current = null;
+            setDragging(null);
+        };
+        ownerWindow.addEventListener("pointermove", handleMove);
+        ownerWindow.addEventListener("pointerup", handleUp);
+        return () => {
+            ownerWindow.removeEventListener("pointermove", handleMove);
+            ownerWindow.removeEventListener("pointerup", handleUp);
+        };
+    }, [tableElement, onResizeColumn, onResizeRow, recompute]);
+    const startDrag = (kind, boundary) => (event) => {
+        event.preventDefault();
+        const siblings = kind === "column" ? columnsRef.current : rowsRef.current;
+        const next = siblings[boundary.index + 1] ?? null;
+        dragRef.current = {
+            kind, index: boundary.index, startClient: kind === "column" ? event.clientX : event.clientY, startSize: boundary.size,
+            nextIndex: next?.index ?? null, nextStartSize: next?.size ?? null,
+        };
+        setDragging({ kind, index: boundary.index, position: kind === "column" ? event.clientX : event.clientY });
+    };
+    return (_jsxs("div", { "data-srte-table-resize-handles": "true", style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 60 }, children: [rows.map((boundary) => (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": `Resize row ${boundary.index + 1}`, "data-srte-row-resize-handle": boundary.index, onPointerDown: startDrag("row", boundary), style: {
+                    position: "fixed",
+                    left: boundary.start,
+                    top: boundary.position - HANDLE_THICKNESS / 2,
+                    width: boundary.length,
+                    height: HANDLE_THICKNESS,
+                    cursor: "row-resize",
+                    pointerEvents: "auto",
+                    background: dragging?.kind === "row" && dragging.index === boundary.index ? "var(--srte-primary)" : "transparent",
+                } }, `row-${boundary.index}`))), columns.map((boundary) => (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize column ${boundary.index + 1}`, "data-srte-column-resize-handle": boundary.index, onPointerDown: startDrag("column", boundary), style: {
+                    position: "fixed",
+                    left: boundary.position - HANDLE_THICKNESS / 2,
+                    top: boundary.start,
+                    width: HANDLE_THICKNESS,
+                    height: boundary.length,
+                    cursor: "col-resize",
+                    pointerEvents: "auto",
+                    background: dragging?.kind === "column" && dragging.index === boundary.index ? "var(--srte-primary)" : "transparent",
+                } }, `col-${boundary.index}`)))] }));
+}

package/dist/components/TableSizePickerPopover.d.ts

@@ -0,0 +1,16 @@
+export interface TableSizePickerPopoverProps {
+    x: number;
+    y: number;
+    onInsert: (rows: number, columns: number) => void;
+    onCancel: () => void;
+}
+/**
+ * "Insert table" size picker - CKEditor's own pattern: hover an N×M grid to
+ * preview the size, click a cell to insert immediately (one decisive click,
+ * no separate Apply/Confirm step, since a grid cell click is already a
+ * single deliberate choice - the same reasoning ColorPickerPopover's
+ * recent-swatch buttons and the removed preset grid used). A numeric
+ * fallback below covers sizes past the grid's cap without capping what the
+ * tool can actually do.
+ */
+export declare function TableSizePickerPopover({ x, y, onInsert, onCancel }: TableSizePickerPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableSizePickerPopover.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+const MAX_GRID = 8;
+const buttonStyle = {
+    minHeight: 32,
+    padding: "0 10px",
+    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 inputStyle = {
+    width: 48,
+    height: 32,
+    boxSizing: "border-box",
+    padding: "0 8px",
+    border: "1px solid var(--srte-input-border)",
+    borderRadius: 8,
+    outline: "none",
+    background: "var(--srte-input-bg)",
+    color: "var(--srte-input-text)",
+    font: "inherit",
+    textAlign: "center",
+};
+/**
+ * "Insert table" size picker - CKEditor's own pattern: hover an N×M grid to
+ * preview the size, click a cell to insert immediately (one decisive click,
+ * no separate Apply/Confirm step, since a grid cell click is already a
+ * single deliberate choice - the same reasoning ColorPickerPopover's
+ * recent-swatch buttons and the removed preset grid used). A numeric
+ * fallback below covers sizes past the grid's cap without capping what the
+ * tool can actually do.
+ */
+export function TableSizePickerPopover({ x, y, onInsert, onCancel }) {
+    const rootRef = useRef(null);
+    const rowsRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const [hover, setHover] = useState(null);
+    const [customRows, setCustomRows] = useState("2");
+    const [customColumns, setCustomColumns] = useState("2");
+    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 ? y - height : y;
+        const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - margin));
+        setPlacement({ left: clampedLeft, top: clampedTop });
+    }, [x, y]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target))
+                onCancelRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, []);
+    // Escape must dismiss regardless of focus - unlike LinkEditorPopover/
+    // ColorPickerPopover, nothing here is autofocused on open (the grid is
+    // meant to be hovered, not tabbed into first), so focus stays wherever it
+    // was (typically the "Insert table" toolbar button) and the div's own
+    // onKeyDown below would never see the keypress.
+    useEffect(() => {
+        const onWindowKeyDown = (event) => {
+            if (event.key === "Escape")
+                onCancelRef.current();
+        };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+    }, []);
+    const insertCustom = () => {
+        const rows = Math.min(50, Math.max(1, Math.round(Number(customRows)) || 0));
+        const columns = Math.min(50, Math.max(1, Math.round(Number(customColumns)) || 0));
+        if (!rows || !columns)
+            return;
+        onInsert(rows, columns);
+    };
+    return (_jsxs("div", { ref: rootRef, "data-srte-table-size-popover": "true", role: "dialog", "aria-label": "Insert table", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 70,
+            width: 232,
+            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,
+        }, children: [_jsx("div", { style: { fontWeight: 650, marginBottom: 10 }, children: "Insert table" }), _jsx("div", { "data-srte-table-size-grid": "true", style: { display: "grid", gridTemplateColumns: `repeat(${MAX_GRID}, 1fr)`, gap: 3, marginBottom: 8 }, onMouseLeave: () => setHover(null), children: Array.from({ length: MAX_GRID * MAX_GRID }, (_, index) => {
+                    const row = Math.floor(index / MAX_GRID);
+                    const column = index % MAX_GRID;
+                    const active = hover ? row <= hover.row && column <= hover.column : false;
+                    return (_jsx("button", { type: "button", "data-srte-table-size-cell": `${row + 1}x${column + 1}`, "aria-label": `Insert a ${row + 1} by ${column + 1} table`, onMouseEnter: () => setHover({ row, column }), onFocus: () => setHover({ row, column }), onClick: () => onInsert(row + 1, column + 1), style: {
+                            width: 20, height: 20, padding: 0, boxSizing: "border-box",
+                            border: `1px solid ${active ? "var(--srte-primary)" : "var(--srte-input-border)"}`,
+                            borderRadius: 3,
+                            background: active ? "var(--srte-primary)" : "var(--srte-input-bg)",
+                            cursor: "pointer",
+                        } }, index));
+                }) }), _jsx("div", { "data-srte-table-size-label": "true", style: { fontSize: 12, marginBottom: 12, minHeight: 16 }, children: hover ? `${hover.row + 1} × ${hover.column + 1} table` : "Hover to choose a size" }), _jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 6 }, children: "Custom size" }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }, children: [_jsx("input", { ref: rowsRef, type: "number", min: 1, max: 50, "aria-label": "Rows", value: customRows, onChange: (event) => setCustomRows(event.target.value), onKeyDown: (event) => { if (event.key === "Enter") {
+                            event.preventDefault();
+                            insertCustom();
+                        } }, style: inputStyle }), _jsx("span", { children: "\u00D7" }), _jsx("input", { type: "number", min: 1, max: 50, "aria-label": "Columns", value: customColumns, onChange: (event) => setCustomColumns(event.target.value), onKeyDown: (event) => { if (event.key === "Enter") {
+                            event.preventDefault();
+                            insertCustom();
+                        } }, style: inputStyle }), _jsx("button", { type: "button", onClick: insertCustom, style: { ...buttonStyle, marginLeft: "auto", borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: "Insert" })] }), _jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: _jsx("button", { type: "button", onClick: onCancel, style: buttonStyle, children: "Cancel" }) })] }));
+}