@meowdown/react 0.33.1 → 0.34.0

package/dist/index.d.ts

@@ -226,7 +226,8 @@ interface EditorProps {
   selectionMenuAffordance?: boolean;
   /**
    * Extra controls rendered in the pending-replacement preview footer, next to
-   * the built-in Accept and Discard buttons (e.g. a retry button).
+   * the built-in accept ("Replace selection" / "Insert below", per the staged
+   * mode) and Discard buttons (e.g. a retry button).
    */
   pendingReplacementActions?: ReactNode;
   /**

package/dist/index.js

@@ -577,10 +577,27 @@ var pending_replacement_preview_module_default = {
 //#endregion
 //#region src/components/pending-replacement-preview.tsx
 /**
+* Vertical room (px) the popover needs under its anchor: the text area's
+* 14rem max-height plus the footer, borders, and the anchor offset.
+*/
+const PREVIEW_CLEARANCE = 320;
+/** Minimum gap (px) kept above the anchor line when scrolling to make room. */
+const SCROLL_TOP_MARGIN = 16;
+/** The nearest ancestor that can scroll vertically, or the page scroller. */
+function closestScrollable(element) {
+	for (let node = element.parentElement; node; node = node.parentElement) {
+		const { overflowY } = getComputedStyle(node);
+		if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
+	}
+	return document.scrollingElement;
+}
+/**
 * The preview for a staged (pending) replacement: a popover anchored to the
-* source range showing the accumulated text, with Accept and Discard controls
-* plus a host-provided `actions` slot. Dismissing the popover (Escape or an
-* outside press) discards the stage; the document is only touched on accept.
+* end of the source range showing the accumulated text, with a Discard control
+* and an accept control labeled by what accepting does ("Replace selection" or
+* "Insert below", per the staged mode), plus a host-provided `actions` slot.
+* Dismissing the popover (Escape or an outside press) discards the stage; the
+* document is only touched on accept.
 */
 function PendingReplacementPreview({ actions, onResolve }) {
 	const editor = useEditor$1();
@@ -594,19 +611,35 @@ function PendingReplacementPreview({ actions, onResolve }) {
 			}
 		});
 	}, [onResolve]));
-	const from = pending?.from;
 	const to = pending?.to;
 	const anchor = useMemo(() => {
-		if (from == null || to == null) return;
+		if (to == null) return;
 		return getVirtualElementFromRange(editor.view, {
-			from,
+			from: to,
 			to
 		});
-	}, [
-		from,
-		to,
-		editor
-	]);
+	}, [to, editor]);
+	const staged = pending !== null;
+	useEffect(() => {
+		if (!staged) return;
+		const view = editor.view;
+		const position = getPendingReplacement(view.state)?.to;
+		if (position == null) return;
+		const clearanceBottom = window.innerHeight - PREVIEW_CLEARANCE;
+		let coords = view.coordsAtPos(position);
+		if (coords.top >= 0 && coords.bottom <= clearanceBottom) return;
+		const { node } = view.domAtPos(position);
+		const element = node instanceof Element ? node : node.parentElement;
+		if (!element) return;
+		element.scrollIntoView({ block: "center" });
+		coords = view.coordsAtPos(position);
+		const overflow = coords.bottom - clearanceBottom;
+		const nudge = Math.min(overflow, Math.max(0, coords.top - SCROLL_TOP_MARGIN));
+		if (nudge > 0) {
+			const scroller = closestScrollable(element);
+			if (scroller) scroller.scrollTop += nudge;
+		}
+	}, [staged, editor]);
 	if (!pending) return null;
 	const discard = () => {
 		editor.commands.discardPendingReplacement();
@@ -656,7 +689,7 @@ function PendingReplacementPreview({ actions, onResolve }) {
 							"data-testid": "pending-replacement-accept",
 							disabled: !pending.text.trim(),
 							onClick: accept,
-							children: "Accept"
+							children: pending.mode === "replace" ? "Replace selection" : "Insert below"
 						})
 					]
 				})]

package/dist/style.css

@@ -346,7 +346,7 @@
 }
 .meow_Positioner_DPJ5ia {
   z-index: 50;
-  width: min(24rem, 100vw - 1rem);
+  width: min(30rem, 100vw - 1rem);
   display: block;
 }
 
@@ -377,6 +377,7 @@
 
 .meow_Footer_DPJ5ia {
   border-top: 1px solid var(--meowdown-border);
+  flex-wrap: wrap;
   align-items: center;
   gap: .25rem;
   padding: .375rem;
@@ -389,6 +390,7 @@
 
 .meow_Button_DPJ5ia {
   color: var(--meowdown-text);
+  white-space: nowrap;
   cursor: pointer;
   border-radius: .5rem;
   align-items: center;
@@ -403,6 +405,7 @@
 .meow_AcceptButton_DPJ5ia {
   color: var(--meowdown-popover-bg);
   background: var(--meowdown-accent);
+  white-space: nowrap;
   cursor: pointer;
   border-radius: .5rem;
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,12 +20,12 @@
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@ocavue/utils": "^1.7.0",
-    "@prosekit/core": "^0.13.0-beta.4",
-    "@prosekit/pm": "^0.1.19-beta.1",
-    "@prosekit/react": "^0.8.0-beta.15",
+    "@prosekit/core": "^0.13.0-beta.5",
+    "@prosekit/pm": "^0.1.19-beta.2",
+    "@prosekit/react": "^0.8.0-beta.16",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.33.1"
+    "@meowdown/core": "0.34.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",