@meowdown/react 0.80.3 → 0.81.1

package/dist/index.d.ts

@@ -2,6 +2,14 @@ import { ComponentProps, ReactElement, ReactNode, Ref } from "react";
 import { AcceptPendingReplacementOptions, EditorConfig, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, ImageUrlResolver, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, ReferenceDefinitions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver, XPostMediaClickHandler, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoClickHandler, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { ReactNodeViewComponent, ReactNodeViewComponent as ReactNodeViewComponent$1, useEditor, useExtension, useKeymap } from "@prosekit/react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/collision-boundary.d.ts
+/**
+ * The area the editor's floating menus and popovers stay inside. Same as the
+ * `collisionBoundary` prop of Base UI positioners.
+ */
+type CollisionBoundary = NonNullable<Popover.Positioner.Props['collisionBoundary']>;
+//#endregion
 //#region src/utils/date-format.d.ts
 type TimeFormat = '12' | '24';
 //#endregion
@@ -330,6 +338,12 @@ interface EditorProps {
    * is set. Ignored when `readOnly` is set.
    */
   selectionMenuAffordance?: boolean | undefined;
+  /**
+   * The element the editor's menus and popovers stay inside, for example one
+   * that leaves out the area under a phone's status bar. Defaults to the
+   * viewport.
+   */
+  collisionBoundary?: CollisionBoundary | undefined;
   /**
    * Extra controls rendered in the pending-replacement preview footer, next to
    * the built-in accept ("Replace selection" / "Insert below", per the staged
@@ -583,7 +597,7 @@ interface EditorProps {
  *
  * Callbacks and resolvers should be stable; pass them via `useCallback`.
  */
-export declare function MarkdownEditor({ mode, initialMarkdown, singleParagraph, referenceDefinitions, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste, linkPaste, bulletAfterHeading, backspaceDeletesEmptyFirstBlock, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
+export declare function MarkdownEditor({ mode, initialMarkdown, singleParagraph, referenceDefinitions, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, collisionBoundary, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste, linkPaste, bulletAfterHeading, backspaceDeletesEmptyFirstBlock, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /**
@@ -930,4 +944,4 @@ interface WikilinkHoverCardProps {
  */
 export declare function WikilinkHoverCard({ children, className }: WikilinkHoverCardProps): ReactNode;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LightboxCloseOptions, type LightboxController, type LightboxFrameItem, type LightboxFrameProps, type LightboxImageItem, type LightboxImageProps, type LightboxItem, type LightboxRootProps, type LightboxVideoItem, type LightboxVideoProps, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, type XPostResolver, type YouTubeVideoResolver, useEditor, useExtension, useKeymap };
+export { type CollisionBoundary, type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LightboxCloseOptions, type LightboxController, type LightboxFrameItem, type LightboxFrameProps, type LightboxImageItem, type LightboxImageProps, type LightboxItem, type LightboxRootProps, type LightboxVideoItem, type LightboxVideoProps, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, type XPostResolver, type YouTubeVideoResolver, useEditor, useExtension, useKeymap };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { clsx } from "clsx/lite";
-import { Fragment, ViewTransition, cloneElement, createElement, memo, startTransition, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Fragment, ViewTransition, cloneElement, createContext, createElement, memo, startTransition, use, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, dismissLinkHover, docToMarkdown, docToParagraphMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, paragraphMarkdownToDoc, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
@@ -98,6 +98,20 @@ var code_block_view_module_default = {
 	"TriggerIcon": "meow_TriggerIcon_D3j_9q"
 };
 
+//#endregion
+//#region src/components/collision-boundary.ts
+/**
+* See `EditorProps.collisionBoundary`.
+*/
+const CollisionBoundaryContext = createContext(void 0);
+/**
+* Converts a {@link CollisionBoundary} to the `boundary` prop of ProseKit
+* positioners, which spell the keyword the floating-ui way.
+*/
+function toFloatingBoundary(boundary) {
+	return boundary === "clipping-ancestors" ? "clippingAncestors" : boundary;
+}
+
 //#endregion
 //#region src/components/copy-button.tsx
 const COPIED_RESET_MS = 1500;
@@ -272,6 +286,25 @@ function CodeBlockView(props) {
 	});
 }
 function CodeBlockToolbar({ code, language, setLanguage }) {
+	const [comboboxOpen, setComboboxOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: code_block_view_module_default.Toolbar,
+		contentEditable: false,
+		"data-open": comboboxOpen || void 0,
+		children: [/* @__PURE__ */ jsx(CodeBlockLanguagePickerMemo, {
+			language,
+			setLanguage,
+			onShownChange: setComboboxOpen
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			getText: () => code,
+			label: "Copy code",
+			className: code_block_view_module_default.CopyButton,
+			"data-testid": "code-block-copy"
+		})]
+	});
+}
+function CodeBlockLanguagePicker({ language, setLanguage, onShownChange }) {
+	const collisionBoundary = use(CollisionBoundaryContext);
 	const selected = useMemo(() => {
 		return codeBlockLanguages.find((item) => item.value === language) ?? {
 			value: language,
@@ -279,7 +312,6 @@ function CodeBlockToolbar({ code, language, setLanguage }) {
 		};
 	}, [language]);
 	const [query, setQuery] = useState("");
-	const [comboboxOpen, setComboboxOpen] = useState(false);
 	const itemsForView = useMemo(() => {
 		const value = query.trim();
 		if (!value) return codeBlockLanguages;
@@ -289,73 +321,65 @@ function CodeBlockToolbar({ code, language, setLanguage }) {
 			label: `Use "${value}"`
 		}];
 	}, [query]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: code_block_view_module_default.Toolbar,
-		contentEditable: false,
-		"data-open": comboboxOpen || void 0,
-		children: [/* @__PURE__ */ jsxs(Combobox.Root, {
-			items: itemsForView,
-			value: selected,
-			onValueChange: (item) => setLanguage(item?.value ?? ""),
-			inputValue: query,
-			onInputValueChange: setQuery,
-			onOpenChange: (open) => {
-				if (open) setComboboxOpen(true);
-				else setQuery("");
-			},
-			onOpenChangeComplete: (open) => {
-				if (!open) setComboboxOpen(false);
-			},
-			children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
-				className: code_block_view_module_default.Trigger,
-				"data-testid": "code-block-language",
-				children: [/* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" }), /* @__PURE__ */ jsx(Combobox.Icon, {
-					className: code_block_view_module_default.TriggerIcon,
-					children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
-				})]
-			}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-				className: code_block_view_module_default.Positioner,
-				sideOffset: 4,
-				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-					className: code_block_view_module_default.Popup,
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: code_block_view_module_default.SearchRow,
-							children: /* @__PURE__ */ jsx(Combobox.Input, {
-								className: code_block_view_module_default.Search,
-								placeholder: "Search or type a language",
-								"data-testid": "code-block-language-search"
-							})
-						}),
-						/* @__PURE__ */ jsx(Combobox.Empty, {
-							className: code_block_view_module_default.Empty,
-							children: "No languages found."
-						}),
-						/* @__PURE__ */ jsx(Combobox.List, {
-							className: code_block_view_module_default.List,
-							children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
-								value: item,
-								className: code_block_view_module_default.Item,
-								children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-									className: code_block_view_module_default.ItemIndicator,
-									children: /* @__PURE__ */ jsx(CheckIcon, {})
-								}), /* @__PURE__ */ jsx("span", {
-									className: code_block_view_module_default.ItemText,
-									children: item.label
-								})]
-							}, item.label)
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		items: itemsForView,
+		value: selected,
+		onValueChange: (item) => setLanguage(item?.value ?? ""),
+		inputValue: query,
+		onInputValueChange: setQuery,
+		onOpenChange: (open) => {
+			if (open) onShownChange(true);
+			else setQuery("");
+		},
+		onOpenChangeComplete: (open) => {
+			if (!open) onShownChange(false);
+		},
+		children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
+			className: code_block_view_module_default.Trigger,
+			"data-testid": "code-block-language",
+			children: [/* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" }), /* @__PURE__ */ jsx(Combobox.Icon, {
+				className: code_block_view_module_default.TriggerIcon,
+				children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+			})]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			className: code_block_view_module_default.Positioner,
+			sideOffset: 4,
+			collisionBoundary,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: code_block_view_module_default.Popup,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: code_block_view_module_default.SearchRow,
+						children: /* @__PURE__ */ jsx(Combobox.Input, {
+							className: code_block_view_module_default.Search,
+							placeholder: "Search or type a language",
+							"data-testid": "code-block-language-search"
 						})
-					]
-				})
-			}) })]
-		}), /* @__PURE__ */ jsx(CopyButton, {
-			getText: () => code,
-			label: "Copy code",
-			className: code_block_view_module_default.CopyButton,
-			"data-testid": "code-block-copy"
-		})]
+					}),
+					/* @__PURE__ */ jsx(Combobox.Empty, {
+						className: code_block_view_module_default.Empty,
+						children: "No languages found."
+					}),
+					/* @__PURE__ */ jsx(Combobox.List, {
+						className: code_block_view_module_default.List,
+						children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
+							value: item,
+							className: code_block_view_module_default.Item,
+							children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+								className: code_block_view_module_default.ItemIndicator,
+								children: /* @__PURE__ */ jsx(CheckIcon, {})
+							}), /* @__PURE__ */ jsx("span", {
+								className: code_block_view_module_default.ItemText,
+								children: item.label
+							})]
+						}, item.label)
+					})
+				]
+			})
+		}) })]
 	});
 }
+const CodeBlockLanguagePickerMemo = /* @__PURE__ */ memo(CodeBlockLanguagePicker);
 
 //#endregion
 //#region src/extensions/code-block-view.ts
@@ -534,6 +558,7 @@ function selectLinkUnit(editor, link) {
 	editor.focus();
 }
 function LinkPopover({ anchor, open, onClose, onCloseComplete, onPopupHover, children }) {
+	const collisionBoundary = use(CollisionBoundaryContext);
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		open,
 		onOpenChange: (open) => {
@@ -546,6 +571,7 @@ function LinkPopover({ anchor, open, onClose, onCloseComplete, onPopupHover, chi
 			anchor,
 			side: "bottom",
 			sideOffset: 8,
+			collisionBoundary,
 			className: link_menu_module_default.Positioner,
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				className: link_menu_module_default.Popup,
@@ -1099,17 +1125,18 @@ var selection_menu_module_default = {
 */
 function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, affordance = true }) {
 	const editor = useEditor$1();
+	const collisionBoundary = use(CollisionBoundaryContext);
 	const [selection, setSelection] = useState();
 	useExtension$1(useMemo(() => {
 		return defineUpdateHandler((view) => {
 			const { from, to, empty } = view.state.selection;
 			const anchorable = !empty && isTextSelection(view.state.selection) && !getPendingReplacement(view.state) && getSearchStatus(view.state).active === 0;
 			setSelection((previous) => {
-				if (previous?.from === from && previous?.to === to && previous?.anchorable === anchorable) return previous;
+				if (!anchorable) return;
+				if (previous?.from === from && previous?.to === to) return previous;
 				return {
 					from,
-					to,
-					anchorable
+					to
 				};
 			});
 		});
@@ -1120,12 +1147,9 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 	}, [onClose, editor]);
 	const menuAnchor = useMemo(() => {
 		if (!context) return;
-		return getVirtualElementFromRange(editor.view, {
-			from: context.from,
-			to: context.to
-		});
+		return getMenuAnchor(editor.view, context.from, context.to);
 	}, [context, editor]);
-	const showAffordance = affordance && !!!context && !!selection?.anchorable;
+	const showAffordance = affordance && !!!context && !!selection;
 	const affordanceVisible = useDelayedFlag(showAffordance, 250, 0);
 	const affordanceAnchor = useMemo(() => {
 		if (!showAffordance || !selection) return;
@@ -1147,6 +1171,7 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 			anchor: menuAnchor,
 			side: "bottom",
 			sideOffset: 8,
+			collisionBoundary,
 			className: selection_menu_module_default.Positioner,
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				className: selection_menu_module_default.Popup,
@@ -1167,6 +1192,7 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 			anchor: affordanceAnchor,
 			side: "bottom",
 			sideOffset: 4,
+			collisionBoundary,
 			className: selection_menu_module_default.AffordancePositioner,
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				className: selection_menu_module_default.AffordancePopup,
@@ -1188,6 +1214,30 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 	return null;
 }
 /**
+* Anchors the menu to the selected range, or to the range's end when the range
+* is taller than a third of the visible height: such a range leaves no room
+* for the menu above or below it.
+*/
+function getMenuAnchor(view, from, to) {
+	const range = getVirtualElementFromRange(view, {
+		from,
+		to
+	});
+	if (from === to) return range;
+	const end = getVirtualElementFromRange(view, {
+		from: to,
+		to
+	});
+	const pickAnchor = () => {
+		const visibleHeight = view.dom.ownerDocument.defaultView?.visualViewport?.height ?? Infinity;
+		return range.getBoundingClientRect().height > visibleHeight / 3 ? end : range;
+	};
+	return {
+		getBoundingClientRect: () => pickAnchor().getBoundingClientRect(),
+		contextElement: view.dom
+	};
+}
+/**
 * The menu content. Mounted only while the menu is open, so its filter state
 *  resets naturally on close.
 */
@@ -1322,10 +1372,104 @@ function SlashMenuItem({ label, keywords, detail, kbd, onSelect }) {
 function selectionInTableCell(editor) {
 	return isSelectionInTableCell(editor.state);
 }
+function BuiltinSlashMenuItems({ editor, timeFormat, onAttachFile }) {
+	const inTableCell = useEditorDerivedValue(selectionInTableCell);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		!inTableCell && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Text",
+				keywords: ["paragraph", "plain"],
+				onSelect: () => editor.commands.turnIntoText()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 1",
+				keywords: ["h1"],
+				kbd: "#",
+				onSelect: () => editor.commands.setHeading({ level: 1 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 2",
+				keywords: ["h2"],
+				kbd: "##",
+				onSelect: () => editor.commands.setHeading({ level: 2 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 3",
+				keywords: ["h3"],
+				kbd: "###",
+				onSelect: () => editor.commands.setHeading({ level: 3 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 4",
+				keywords: ["h4"],
+				kbd: "####",
+				onSelect: () => editor.commands.setHeading({ level: 4 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Blockquote",
+				kbd: ">",
+				onSelect: () => editor.commands.setBlockquote()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Bullet list",
+				kbd: "-",
+				onSelect: () => editor.commands.wrapInList({ kind: "bullet" })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Ordered list",
+				kbd: "1.",
+				onSelect: () => editor.commands.wrapInList({ kind: "ordered" })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Task list",
+				kbd: "+ [ ] ",
+				onSelect: () => editor.commands.wrapInCircleTask()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Checkbox list",
+				kbd: "- [ ] ",
+				onSelect: () => editor.commands.wrapInSquareTask()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Code block",
+				kbd: "```",
+				onSelect: () => editor.commands.setCodeBlock()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Math",
+				keywords: ["latex"],
+				kbd: "```math",
+				onSelect: () => editor.commands.insertMarkdown("```math\n```")
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Table",
+				onSelect: () => editor.commands.insertTable({
+					row: 3,
+					col: 3,
+					header: true
+				})
+			})
+		] }),
+		/* @__PURE__ */ jsx(SlashMenuItem, {
+			label: "Now",
+			onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
+		}),
+		onAttachFile ? /* @__PURE__ */ jsx(SlashMenuItem, {
+			label: "Attach file",
+			keywords: [
+				"attachment",
+				"file",
+				"upload"
+			],
+			onSelect: onAttachFile
+		}) : null
+	] });
+}
+const BuiltinSlashMenuItemsMemo = /* @__PURE__ */ memo(BuiltinSlashMenuItems);
 function SlashMenu({ timeFormat = "12", onSlashMenuSearch, onFilePaste, onFileSaveError }) {
 	const editor = useEditor$1();
+	const collisionBoundary = use(CollisionBoundaryContext);
 	const fileInputRef = useRef(null);
-	const inTableCell = useEditorDerivedValue(selectionInTableCell);
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [hostItems, setHostItems] = useState([]);
@@ -1386,98 +1530,16 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch, onFilePaste, onFileSa
 			onChange: handleFileInputChange
 		}) : null, /* @__PURE__ */ jsx(AutocompletePositioner, {
 			className: autocomplete_menu_module_default.Positioner,
+			boundary: toFloatingBoundary(collisionBoundary),
 			children: /* @__PURE__ */ jsxs(AutocompletePopup, {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "slash-menu",
 				children: [
-					!inTableCell && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Text",
-							keywords: ["paragraph", "plain"],
-							onSelect: () => editor.commands.turnIntoText()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 1",
-							keywords: ["h1"],
-							kbd: "#",
-							onSelect: () => editor.commands.setHeading({ level: 1 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 2",
-							keywords: ["h2"],
-							kbd: "##",
-							onSelect: () => editor.commands.setHeading({ level: 2 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 3",
-							keywords: ["h3"],
-							kbd: "###",
-							onSelect: () => editor.commands.setHeading({ level: 3 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 4",
-							keywords: ["h4"],
-							kbd: "####",
-							onSelect: () => editor.commands.setHeading({ level: 4 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Blockquote",
-							kbd: ">",
-							onSelect: () => editor.commands.setBlockquote()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Bullet list",
-							kbd: "-",
-							onSelect: () => editor.commands.wrapInList({ kind: "bullet" })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Ordered list",
-							kbd: "1.",
-							onSelect: () => editor.commands.wrapInList({ kind: "ordered" })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Task list",
-							kbd: "+ [ ] ",
-							onSelect: () => editor.commands.wrapInCircleTask()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Checkbox list",
-							kbd: "- [ ] ",
-							onSelect: () => editor.commands.wrapInSquareTask()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Code block",
-							kbd: "```",
-							onSelect: () => editor.commands.setCodeBlock()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Math",
-							keywords: ["latex"],
-							kbd: "```math",
-							onSelect: () => editor.commands.insertMarkdown("```math\n```")
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Table",
-							onSelect: () => editor.commands.insertTable({
-								row: 3,
-								col: 3,
-								header: true
-							})
-						})
-					] }),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Now",
-						onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
+					/* @__PURE__ */ jsx(BuiltinSlashMenuItemsMemo, {
+						editor,
+						timeFormat,
+						onAttachFile: onFilePaste ? openFilePicker : void 0
 					}),
-					onFilePaste ? /* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Attach file",
-						keywords: [
-							"attachment",
-							"file",
-							"upload"
-						],
-						onSelect: openFilePicker
-					}) : null,
 					hostItems.map((item) => /* @__PURE__ */ jsx(SlashMenuItem, {
 						label: item.label,
 						keywords: item.keywords,
@@ -1508,68 +1570,188 @@ var table_handle_module_default = {
 
 //#endregion
 //#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) => {
-				return commands.setTableColumnAlign(columnAlign === align ? null : align);
-			}
-		},
-		addTableColumnBefore: {
-			canExec: commands.addTableColumnBefore.canExec(),
-			command: () => commands.addTableColumnBefore()
-		},
-		addTableColumnAfter: {
-			canExec: commands.addTableColumnAfter.canExec(),
-			command: () => commands.addTableColumnAfter()
-		},
-		addTableRowAbove: {
-			canExec: commands.addTableRowAbove.canExec(),
-			command: () => commands.addTableRowAbove()
-		},
-		addTableRowBelow: {
-			canExec: commands.addTableRowBelow.canExec(),
-			command: () => commands.addTableRowBelow()
-		},
-		deleteCellSelection: {
-			canExec: commands.deleteCellSelection.canExec(),
-			command: () => commands.deleteCellSelection()
-		},
-		deleteTableColumn: {
-			canExec: commands.deleteTableColumn.canExec(),
-			command: () => commands.deleteTableColumn()
-		},
-		deleteTableRow: {
-			canExec: commands.deleteTableRow.canExec(),
-			command: () => commands.deleteTableRow()
-		},
-		deleteTable: {
-			canExec: commands.deleteTable.canExec(),
-			command: () => commands.deleteTable()
-		}
-	};
-}
-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, {
+function TableHandleItem({ children, onSelect, testId, active = false, danger = false }) {
+	return /* @__PURE__ */ jsx(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, {})]
+		"data-testid": testId,
+		"data-active": active ? "" : void 0,
+		"data-danger": danger ? "" : void 0,
+		children
 	});
 }
+function canInsertLeft(editor) {
+	return editor.commands.addTableColumnBefore.canExec();
+}
+function runInsertLeft(editor) {
+	editor.commands.addTableColumnBefore();
+}
+function TableMenuInsertLeft({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertLeft);
+	const handler = useCallback(() => runInsertLeft(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-left",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Left" })
+	}) : null;
+}
+function canInsertRight(editor) {
+	return editor.commands.addTableColumnAfter.canExec();
+}
+function runInsertRight(editor) {
+	editor.commands.addTableColumnAfter();
+}
+function TableMenuInsertRight({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertRight);
+	const handler = useCallback(() => runInsertRight(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-right",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Right" })
+	}) : null;
+}
+function canAlign(editor) {
+	return editor.commands.setTableColumnAlign.canExec("left");
+}
+function getActiveAlign(editor) {
+	return getTableColumnAlign(editor.state);
+}
+function runAlign(editor, align, active) {
+	editor.commands.setTableColumnAlign(active ? null : align);
+}
+function TableMenuAlignItem({ label, editor, align, activeAlign }) {
+	const active = activeAlign === align;
+	const handler = useCallback(() => runAlign(editor, align, active), [
+		editor,
+		align,
+		active
+	]);
+	return /* @__PURE__ */ jsxs(TableHandleItem, {
+		testId: `table-align-${align}`,
+		active,
+		onSelect: handler,
+		children: [/* @__PURE__ */ jsx("span", { children: label }), active && /* @__PURE__ */ jsx(CheckIcon, {})]
+	});
+}
+function TableMenuAlignItems({ editor }) {
+	const activeAlign = useEditorDerivedValue(getActiveAlign);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(TableMenuAlignItem, {
+			align: "left",
+			label: "Align Left",
+			editor,
+			activeAlign
+		}),
+		/* @__PURE__ */ jsx(TableMenuAlignItem, {
+			align: "center",
+			label: "Align Center",
+			editor,
+			activeAlign
+		}),
+		/* @__PURE__ */ jsx(TableMenuAlignItem, {
+			align: "right",
+			label: "Align Right",
+			editor,
+			activeAlign
+		})
+	] });
+}
+function TableMenuAlign({ editor }) {
+	return useEditorDerivedValue(canAlign) ? /* @__PURE__ */ jsx(TableMenuAlignItems, { editor }) : null;
+}
+function canClearContents(editor) {
+	return editor.commands.deleteCellSelection.canExec();
+}
+function runClearContents(editor) {
+	editor.commands.deleteCellSelection();
+}
+function TableMenuClearContents({ editor, testId }) {
+	const canExec = useEditorDerivedValue(canClearContents);
+	const handler = useCallback(() => runClearContents(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsxs(TableHandleItem, {
+		testId,
+		onSelect: handler,
+		children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
+	}) : null;
+}
+function canDeleteColumn(editor) {
+	return editor.commands.deleteTableColumn.canExec();
+}
+function runDeleteColumn(editor) {
+	editor.commands.deleteTableColumn();
+}
+function TableMenuDeleteColumn({ editor }) {
+	const canExec = useEditorDerivedValue(canDeleteColumn);
+	const handler = useCallback(() => runDeleteColumn(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-delete-column",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Delete Column" })
+	}) : null;
+}
+function canInsertAbove(editor) {
+	return editor.commands.addTableRowAbove.canExec();
+}
+function runInsertAbove(editor) {
+	editor.commands.addTableRowAbove();
+}
+function TableMenuInsertAbove({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertAbove);
+	const handler = useCallback(() => runInsertAbove(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-above",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Above" })
+	}) : null;
+}
+function canInsertBelow(editor) {
+	return editor.commands.addTableRowBelow.canExec();
+}
+function runInsertBelow(editor) {
+	editor.commands.addTableRowBelow();
+}
+function TableMenuInsertBelow({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertBelow);
+	const handler = useCallback(() => runInsertBelow(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-below",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Below" })
+	}) : null;
+}
+function canDeleteRow(editor) {
+	return editor.commands.deleteTableRow.canExec();
+}
+function runDeleteRow(editor) {
+	editor.commands.deleteTableRow();
+}
+function TableMenuDeleteRow({ editor }) {
+	const canExec = useEditorDerivedValue(canDeleteRow);
+	const handler = useCallback(() => runDeleteRow(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-delete-row",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Delete Row" })
+	}) : null;
+}
+function canDeleteTable(editor) {
+	return editor.commands.deleteTable.canExec();
+}
+function runDeleteTable(editor) {
+	editor.commands.deleteTable();
+}
+function TableMenuDeleteTable({ editor, testId }) {
+	const canExec = useEditorDerivedValue(canDeleteTable);
+	const handler = useCallback(() => runDeleteTable(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId,
+		danger: true,
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+	}) : null;
+}
 function TableHandle() {
-	const state = useEditorDerivedValue(getTableHandleState);
+	const editor = useEditor$1();
 	return /* @__PURE__ */ jsxs(TableHandleRoot, { children: [
 		/* @__PURE__ */ jsx(TableHandleDragPreview, {}),
 		/* @__PURE__ */ jsx(TableHandleDropIndicator, {}),
@@ -1587,53 +1769,17 @@ function TableHandle() {
 						className: table_handle_module_default.MenuPopup,
 						"data-testid": "table-handle-column-menu",
 						children: [
-							state.addTableColumnBefore.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-left",
-								onSelect: state.addTableColumnBefore.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Left" })
-							}),
-							state.addTableColumnAfter.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-right",
-								onSelect: state.addTableColumnAfter.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Right" })
+							/* @__PURE__ */ jsx(TableMenuInsertLeft, { editor }),
+							/* @__PURE__ */ jsx(TableMenuInsertRight, { editor }),
+							/* @__PURE__ */ jsx(TableMenuAlign, { editor }),
+							/* @__PURE__ */ jsx(TableMenuClearContents, {
+								editor,
+								testId: "table-clear-column"
 							}),
-							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",
-								onSelect: state.deleteCellSelection.command,
-								children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
-							}),
-							state.deleteTableColumn.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-delete-column",
-								onSelect: state.deleteTableColumn.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Column" })
-							}),
-							state.deleteTable.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-danger": "",
-								"data-testid": "table-delete-table-column",
-								onSelect: state.deleteTable.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+							/* @__PURE__ */ jsx(TableMenuDeleteColumn, { editor }),
+							/* @__PURE__ */ jsx(TableMenuDeleteTable, {
+								editor,
+								testId: "table-delete-table-column"
 							})
 						]
 					})
@@ -1641,7 +1787,6 @@ function TableHandle() {
 			})
 		}),
 		/* @__PURE__ */ jsx(TableHandleRowPositioner, {
-			placement: "left",
 			className: table_handle_module_default.Positioner,
 			children: /* @__PURE__ */ jsx(TableHandleRowPopup, {
 				className: table_handle_module_default.RowPopup,
@@ -1655,36 +1800,16 @@ function TableHandle() {
 						className: table_handle_module_default.MenuPopup,
 						"data-testid": "table-handle-row-menu",
 						children: [
-							state.addTableRowAbove.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-above",
-								onSelect: state.addTableRowAbove.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Above" })
-							}),
-							state.addTableRowBelow.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-below",
-								onSelect: state.addTableRowBelow.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Below" })
-							}),
-							state.deleteCellSelection.canExec && /* @__PURE__ */ jsxs(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-clear-row",
-								onSelect: state.deleteCellSelection.command,
-								children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
-							}),
-							state.deleteTableRow.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-delete-row",
-								onSelect: state.deleteTableRow.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Row" })
+							/* @__PURE__ */ jsx(TableMenuInsertAbove, { editor }),
+							/* @__PURE__ */ jsx(TableMenuInsertBelow, { editor }),
+							/* @__PURE__ */ jsx(TableMenuClearContents, {
+								editor,
+								testId: "table-clear-row"
 							}),
-							state.deleteTable.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-danger": "",
-								"data-testid": "table-delete-table-row",
-								onSelect: state.deleteTable.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+							/* @__PURE__ */ jsx(TableMenuDeleteRow, { editor }),
+							/* @__PURE__ */ jsx(TableMenuDeleteTable, {
+								editor,
+								testId: "table-delete-table-row"
 							})
 						]
 					})
@@ -1705,6 +1830,7 @@ function returnsTrue() {
 const regex$1 = new RegExp((canUseRegexLookbehind() ? String.raw`(?<!\S)` : "") + String.raw`#[\da-z]+$`, "iu");
 function TagMenu({ onTagSearch }) {
 	const editor = useEditor$1();
+	const collisionBoundary = use(CollisionBoundaryContext);
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [items, setItems] = useState([]);
@@ -1738,6 +1864,7 @@ function TagMenu({ onTagSearch }) {
 		onQueryChange: (event) => setQuery(event.detail),
 		children: /* @__PURE__ */ jsx(AutocompletePositioner, {
 			className: autocomplete_menu_module_default.Positioner,
+			boundary: toFloatingBoundary(collisionBoundary),
 			children: /* @__PURE__ */ jsxs(AutocompletePopup, {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "tag-menu",
@@ -1780,6 +1907,7 @@ function queryFromRegexMatch(match) {
 }
 function WikilinkMenu({ onWikilinkSearch }) {
 	const editor = useEditor$1();
+	const collisionBoundary = use(CollisionBoundaryContext);
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [items, setItems] = useState([]);
@@ -1815,6 +1943,7 @@ function WikilinkMenu({ onWikilinkSearch }) {
 		onQueryChange: (event) => setQuery(event.detail),
 		children: /* @__PURE__ */ jsx(AutocompletePositioner, {
 			className: autocomplete_menu_module_default.Positioner,
+			boundary: toFloatingBoundary(collisionBoundary),
 			children: /* @__PURE__ */ jsxs(AutocompletePopup, {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "wikilink-menu",
@@ -1887,7 +2016,7 @@ function findHeadingPosition(doc, fragment) {
 	});
 	return match;
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, singleParagraph = false, referenceDefinitions, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste, linkPaste, bulletAfterHeading, backspaceDeletesEmptyFirstBlock, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, singleParagraph = false, referenceDefinitions, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, collisionBoundary, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste, linkPaste, bulletAfterHeading, backspaceDeletesEmptyFirstBlock, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
 	const suppressDocChangeRef = useRef(false);
 	const handleDocChange = useMemo(() => {
 		if (!onDocChange) return;
@@ -2111,47 +2240,50 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, singleParagraph =
 	const mount = useCallback((element) => {
 		return editor.mount(element);
 	}, [editor]);
-	return /* @__PURE__ */ jsxs(ProseKit, {
-		editor,
-		children: [
-			/* @__PURE__ */ jsx(VirtualCaret, {}),
-			/* @__PURE__ */ jsx("div", { ref: mount }),
-			/* @__PURE__ */ jsx(EditorExtensions, {
-				config,
-				searchQuery,
-				onDocChange: handleDocChange,
-				onSearchChange
-			}),
-			blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
-			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
-			blockHandle && !readOnly && /* @__PURE__ */ jsx(DropIndicator$1, {}),
-			/* @__PURE__ */ jsx(SlashMenu, {
-				timeFormat,
-				onSlashMenuSearch,
-				onFilePaste,
-				onFileSaveError
-			}),
-			/* @__PURE__ */ jsx(LinkMenu, {
-				onLinkClick,
-				onLinkCopy,
-				resolveLinkPreview,
-				readOnly
-			}, String(readOnly)),
-			onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),
-			onWikilinkSearch && /* @__PURE__ */ jsx(WikilinkMenu, { onWikilinkSearch }),
-			onSelectionMenuSearch && !readOnly && /* @__PURE__ */ jsx(SelectionMenu, {
-				onSelectionMenuSearch,
-				context: selectionMenuContext,
-				onOpen: openSelectionMenu,
-				onClose: closeSelectionMenu,
-				affordance: selectionMenuAffordance
-			}),
-			!readOnly && /* @__PURE__ */ jsx(PendingReplacementPreview, {
-				actions: pendingReplacementActions,
-				onResolve: onPendingReplacementResolve
-			}),
-			children
-		]
+	return /* @__PURE__ */ jsx(CollisionBoundaryContext, {
+		value: collisionBoundary,
+		children: /* @__PURE__ */ jsxs(ProseKit, {
+			editor,
+			children: [
+				/* @__PURE__ */ jsx(VirtualCaret, {}),
+				/* @__PURE__ */ jsx("div", { ref: mount }),
+				/* @__PURE__ */ jsx(EditorExtensions, {
+					config,
+					searchQuery,
+					onDocChange: handleDocChange,
+					onSearchChange
+				}),
+				blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
+				!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
+				blockHandle && !readOnly && /* @__PURE__ */ jsx(DropIndicator$1, {}),
+				/* @__PURE__ */ jsx(SlashMenu, {
+					timeFormat,
+					onSlashMenuSearch,
+					onFilePaste,
+					onFileSaveError
+				}),
+				/* @__PURE__ */ jsx(LinkMenu, {
+					onLinkClick,
+					onLinkCopy,
+					resolveLinkPreview,
+					readOnly
+				}, String(readOnly)),
+				onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),
+				onWikilinkSearch && /* @__PURE__ */ jsx(WikilinkMenu, { onWikilinkSearch }),
+				onSelectionMenuSearch && !readOnly && /* @__PURE__ */ jsx(SelectionMenu, {
+					onSelectionMenuSearch,
+					context: selectionMenuContext,
+					onOpen: openSelectionMenu,
+					onClose: closeSelectionMenu,
+					affordance: selectionMenuAffordance
+				}),
+				!readOnly && /* @__PURE__ */ jsx(PendingReplacementPreview, {
+					actions: pendingReplacementActions,
+					onResolve: onPendingReplacementResolve
+				}),
+				children
+			]
+		})
 	});
 }
 
@@ -2164,7 +2296,7 @@ const CARET_GLIDE_OFF = { "--meowdown-caret-glide": "0ms" };
 *
 * Callbacks and resolvers should be stable; pass them via `useCallback`.
 */
-function MarkdownEditor({ mode = "focus", initialMarkdown, singleParagraph, referenceDefinitions, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, backspaceDeletesEmptyFirstBlock = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }) {
+function MarkdownEditor({ mode = "focus", initialMarkdown, singleParagraph, referenceDefinitions, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, collisionBoundary, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, backspaceDeletesEmptyFirstBlock = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -2277,6 +2409,7 @@ function MarkdownEditor({ mode = "focus", initialMarkdown, singleParagraph, refe
 			onWikilinkSearch,
 			onSelectionMenuSearch,
 			selectionMenuAffordance,
+			collisionBoundary,
 			pendingReplacementActions,
 			onPendingReplacementResolve,
 			onWikilinkClick,

package/dist/style.css

@@ -746,11 +746,12 @@
 
 .meow_Popup_2_4Zjq {
   box-sizing: border-box;
+  width: 100%;
+  max-height: var(--available-height);
   border: 1px solid var(--meowdown-border);
   background: var(--meowdown-popover-bg);
   border-radius: .75rem;
   flex-direction: column;
-  width: 100%;
   padding: .25rem;
   font-size: .875rem;
   display: flex;
@@ -765,6 +766,7 @@
   border: 1px solid var(--meowdown-border);
   background: none;
   border-radius: .5rem;
+  flex: none;
   margin-bottom: .25rem;
   padding: .375rem .5rem;
 
@@ -776,6 +778,8 @@
 
 .meow_List_2_4Zjq {
   flex-direction: column;
+  flex: auto;
+  min-height: 6rem;
   max-height: 16rem;
   display: flex;
   overflow-y: auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.80.3",
+  "version": "0.81.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@meowdown/core": "0.81.1",
+    "@meowdown/core": "0.81.2",
     "@meowdown/embed": "0.3.1",
     "@meowdown/markdown": "0.77.0",
     "@ocavue/utils": "^1.9.0",
@@ -56,12 +56,12 @@
     "@tsdown/css": "^0.23.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@vitest/browser-playwright": "^5.0.3",
+    "@vitest/browser-playwright": "^5.0.5",
     "dedent": "^1.7.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tsdown": "^0.23.1",
-    "vitest": "^5.0.3",
+    "vitest": "^5.0.5",
     "vitest-browser-commands": "^0.5.0",
     "vitest-browser-react": "^2.3.0"
   },