@meowdown/react 0.33.1 → 0.35.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

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
 import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkMode, defineMarkdownCopy, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getPendingReplacement, getSelectedText, getVirtualElementFromRange, inlineTextToMarkChunks, isSelectionInTableCell, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
+import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkdownCopy, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getVirtualElementFromRange, inlineTextToMarkChunks, isSelectionInTableCell, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
@@ -217,9 +217,10 @@ function DropIndicator$1() {
 //#endregion
 //#region src/components/editor-extensions.tsx
 function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, bulletAfterHeading, placeholder, readOnly, wikilinkEnabled, spellCheck }) {
-	useExtension$1(useMemo(() => {
-		return defineMarkMode(markMode);
-	}, [markMode]));
+	const editor = useEditor$1();
+	useEffect(() => {
+		editor.commands.setMarkMode(markMode);
+	}, [editor, markMode]);
 	useExtension$1(useMemo(() => {
 		return readOnly ? defineReadonly() : null;
 	}, [readOnly]));
@@ -577,10 +578,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 +612,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 +690,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"
 						})
 					]
 				})]
@@ -1037,7 +1071,13 @@ var table_handle_module_default = {
 //#region src/components/table-handle.tsx
 function getTableHandleState(editor) {
 	const commands = editor.commands;
+	const columnAlign = getTableColumnAlign(editor.state);
 	return {
+		columnAlign,
+		setTableColumnAlign: {
+			canExec: commands.setTableColumnAlign.canExec("left"),
+			command: (align) => commands.setTableColumnAlign(columnAlign === align ? null : align)
+		},
 		addTableColumnBefore: {
 			canExec: commands.addTableColumnBefore.canExec(),
 			command: () => commands.addTableColumnBefore()
@@ -1072,6 +1112,21 @@ function getTableHandleState(editor) {
 		}
 	};
 }
+const COLUMN_ALIGN_LABELS = {
+	left: "Align Left",
+	center: "Align Center",
+	right: "Align Right"
+};
+function ColumnAlignMenuItem({ align, columnAlign, onSelect }) {
+	const active = columnAlign === align;
+	return /* @__PURE__ */ jsxs(MenuItem, {
+		className: table_handle_module_default.MenuItem,
+		"data-testid": `table-align-${align}`,
+		"data-active": active ? "" : void 0,
+		onSelect,
+		children: [/* @__PURE__ */ jsx("span", { children: COLUMN_ALIGN_LABELS[align] }), active && /* @__PURE__ */ jsx(CheckIcon, {})]
+	});
+}
 function TableHandle() {
 	const state = useEditorDerivedValue(getTableHandleState);
 	return /* @__PURE__ */ jsxs(TableHandleRoot, { children: [
@@ -1103,6 +1158,23 @@ function TableHandle() {
 								onSelect: state.addTableColumnAfter.command,
 								children: /* @__PURE__ */ jsx("span", { children: "Insert Right" })
 							}),
+							state.setTableColumnAlign.canExec && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								/* @__PURE__ */ jsx(ColumnAlignMenuItem, {
+									align: "left",
+									columnAlign: state.columnAlign,
+									onSelect: () => state.setTableColumnAlign.command("left")
+								}),
+								/* @__PURE__ */ jsx(ColumnAlignMenuItem, {
+									align: "center",
+									columnAlign: state.columnAlign,
+									onSelect: () => state.setTableColumnAlign.command("center")
+								}),
+								/* @__PURE__ */ jsx(ColumnAlignMenuItem, {
+									align: "right",
+									columnAlign: state.columnAlign,
+									onSelect: () => state.setTableColumnAlign.command("right")
+								})
+							] }),
 							state.deleteCellSelection.canExec && /* @__PURE__ */ jsxs(MenuItem, {
 								className: table_handle_module_default.MenuItem,
 								"data-testid": "table-clear-column",
@@ -1333,7 +1405,10 @@ function resolveSelection(doc, selection) {
 }
 function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, bulletAfterHeading, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, ref, children }) {
 	const [editor] = useState(() => {
-		const editor = createEditor({ extension: union(defineEditorExtension({ resolveFileLink }), defineCodeBlockView()) });
+		const editor = createEditor({ extension: union(defineEditorExtension({
+			resolveFileLink,
+			markMode
+		}), defineCodeBlockView()) });
 		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, {
 			nodes: editor.nodes,
 			frontmatter

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;
@@ -737,6 +740,13 @@
     opacity: .8;
     font-size: .75rem;
   }
+
+  & svg {
+    width: 1rem;
+    height: 1rem;
+    color: var(--meowdown-muted);
+    display: block;
+  }
 }
 .meowdown {
   flex-direction: column;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.33.1",
+  "version": "0.35.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.17",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.33.1"
+    "@meowdown/core": "0.35.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",