@keboola/design 13.1.0 → 13.1.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @keboola/design
 
+## 13.1.2
+
+### Patch Changes
+
+- `MarkdownEditor`'s floating toolbar works inside a modal `Modal` or `Sheet`.
+  - The toolbar is a `Popover` anchored to the selection, so it stacks over a surrounding Radix dialog like any popover. Its buttons take clicks, and the link panel's fields take clicks and typing. It used to be portalled to `document.body`, under the dialog's `pointer-events: none` and outside its focus trap.
+  - Escape goes to the top layer: the link panel, then the toolbar, then the dialog. Escape with the toolbar showing hides it until the selection changes, and still reaches the editor's own Escape handling (`onCancel` with `saveOnBlur` or `singleLine`). Escape with focus on a toolbar button sends focus back to the editor.
+  - Inside a dialog, the dialog's focus trap is paused while the toolbar shows, as with any non-modal popover. Tab cycles inside the toolbar.
+  - A click or focus outside the editor and the toolbar hides it, so Escape in another field reaches that field; focus back in the editor shows it again. It used to stay up, pointing at the editor's selection, with an open link panel inside it.
+  - The toolbar follows its text when the text moves (an alignment change, a container scroll, a window resize), hides while the text is scrolled out of view, and moves below the selection when there is no room above it. It used to move only on an editor update, not on a scroll or resize.
+  - Nothing else changes: it shows for a non-empty selection, a button press keeps the editor's focus and selection, and it still renders in `document.body`. `toolbarMode="fixed"` is unchanged.
+
+## 13.1.1
+
+### Patch Changes
+
+- `MarkdownEditor`'s toolbar names its shortcuts for the platform it runs on, and two open link panels on one page each label their own fields.
+  - Bold, Italic and Underline are named by the action alone: `Bold`, `Italic`, `Underline`. The shortcut is in `aria-keyshortcuts`, `Meta+B` on Apple platforms, where Lexical binds Cmd, and `Control+B` elsewhere. The tooltip shows the action with its keys, `⌘+B` or `Ctrl+B`.
+  - The link panel's Label and URL fields take their ids from `useId`, so a second editor's panel no longer points its labels at the first editor's fields.
+
+- `MarkdownEditor`'s formatting toolbar names its buttons, and its link panel takes clicks and Escape, in both `toolbarMode`s.
+  - Each icon-only button has an accessible name (`Bold`, `Insert Link`, or `Remove Link` inside a link, `Text alignment`, ...), so a screen reader announces it and a test finds it with `getByRole('button', { name })`. Bold, Italic and Underline give their shortcut in `aria-keyshortcuts`, not in the name: `Meta+B` on Apple platforms, `Control+B` elsewhere. The block-type dropdown already had a name from its visible text.
+  - A click in the link panel's Label or URL field focuses it. The toolbar still keeps focus in the editor when a button is pressed, which is what keeps the selection a format applies to; the panel saves that selection when it opens.
+  - Escape while the link panel is open closes the panel and nothing around it. The panel registers in Radix's dismissable-layer stack and claims the key, so a surrounding `Modal`, `Sheet`, `Popover` or `FullScreenModal` stays open. Focus goes back to the editor when it was in the panel and stays put when it was elsewhere. Escape with the panel closed reaches the surface as before, and an outside click or focus still leaves the panel open.
+
 ## 13.1.0
 
 ### Minor Changes

package/dist/markdown-editor.d.ts

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 /**
  * How the toolbar is presented.
  *
- * - `floating`: a popup over the selection, portalled to `document.body`.
+ * - `floating`: a `Popover` over the selection, so it stacks over a surrounding dialog.
  * - `fixed`: a static bar at the top of the editor, visible with no selection.
  */
 type ToolbarMode = 'floating' | 'fixed';

package/dist/markdown-editor.js

@@ -6,13 +6,15 @@ import { ButtonGroup } from "./internal/components/ButtonGroup.js";
 import { DropdownMenu } from "./DropdownMenu-BJGLjpVc.js";
 import { Label } from "./internal/components/Label.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { Popover } from "./Popover-CEk915I1.js";
 import { TextInput } from "./TextInput-BWYXbfs4.js";
 import { FormGroup } from "./FormGroup-CmCppxOn.js";
 import { Skeleton } from "./internal/components/Skeleton/Skeleton.js";
+import { Kbd } from "./Kbd-J4n1J6i4.js";
 import { toast } from "./toast-CyXEdaCZ.js";
-import { Suspense, createContext, lazy, use, useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, createContext, lazy, use, useCallback, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { $createCodeNode, $isCodeNode, CodeNode } from "@lexical/code";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
@@ -29,8 +31,8 @@ import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPl
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $addUpdateTag, $createParagraphNode, $createTextNode, $getNodeByKey, $getSelection, $insertNodes, $isParagraphNode, $isRangeSelection, $isTextNode, $parseSerializedNode, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DROP_COMMAND, DecoratorNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, HISTORY_PUSH_TAG, KEY_DOWN_COMMAND, PASTE_COMMAND, PASTE_TAG, createEditor } from "lexical";
-import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow } from "@lexical/utils";
+import { $addUpdateTag, $createParagraphNode, $createTextNode, $getNodeByKey, $getSelection, $insertNodes, $isParagraphNode, $isRangeSelection, $isTextNode, $parseSerializedNode, $setSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DROP_COMMAND, DecoratorNode, FOCUS_COMMAND, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, HISTORY_PUSH_TAG, KEY_DOWN_COMMAND, PASTE_COMMAND, PASTE_TAG, createEditor } from "lexical";
+import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from "@lexical/utils";
 import { $createLinkNode, $isAutoLinkNode, $isLinkNode, AutoLinkNode, LinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
 import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
@@ -754,6 +756,7 @@ const ALIGNMENT_OPTIONS = [
 		icon: AlignJustify
 	}
 ];
+const TRIGGER_LABEL = "Text alignment";
 const ALIGNMENT_ICONS = Object.fromEntries(ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon]));
 const AlignmentDropdown = ({ editor, alignment }) => {
 	const savedSelectionRef = useRef(null);
@@ -773,13 +776,14 @@ const AlignmentDropdown = ({ editor, alignment }) => {
 	return /* @__PURE__ */ jsxs(DropdownMenu, {
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(Tooltip, {
-			tooltip: "Text alignment",
+			tooltip: TRIGGER_LABEL,
 			placement: "top",
 			triggerAsChild: true,
 			children: /* @__PURE__ */ jsx(DropdownMenu.Trigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
+					"aria-label": TRIGGER_LABEL,
 					className: cn("tw:flex tw:h-7 tw:cursor-pointer tw:items-center tw:gap-1 tw:rounded tw:border-0 tw:bg-transparent tw:px-1.5 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-accent"),
 					children: [/* @__PURE__ */ jsx(CurrentAlignmentIcon, { className: "tw:size-4" }), /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-3" })]
 				})
@@ -906,12 +910,39 @@ const BlockTypeDropdown = ({ editor, blockType }) => {
 };
 //#endregion
 //#region src/blocks/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
-const ToolbarButton = ({ active, disabled, onClick, tooltip, children, className: extraClassName }) => /* @__PURE__ */ jsx(Tooltip, {
-	tooltip,
+/**
+* The modifier Lexical binds its format keys to: Cmd on Apple platforms, Ctrl elsewhere.
+*
+* - Read from Lexical's own `IS_APPLE`, which counts iPhone and iPad where `isMac` does not.
+*/
+const MOD_KEY = IS_APPLE ? {
+	aria: "Meta",
+	symbol: "⌘"
+} : {
+	aria: "Control",
+	symbol: "Ctrl"
+};
+const ToolbarButton = ({ active, disabled, onClick, tooltip, shortcutKey, children, className: extraClassName }) => /* @__PURE__ */ jsx(Tooltip, {
+	tooltip: shortcutKey ? /* @__PURE__ */ jsxs("span", {
+		className: "tw:inline-flex tw:items-center tw:gap-2",
+		children: [tooltip, /* @__PURE__ */ jsxs(Kbd.Group, {
+			"aria-hidden": true,
+			separator: "+",
+			children: [/* @__PURE__ */ jsx(Kbd, {
+				variant: "primary",
+				children: MOD_KEY.symbol
+			}), /* @__PURE__ */ jsx(Kbd, {
+				variant: "primary",
+				children: shortcutKey
+			})]
+		})]
+	}) : tooltip,
 	placement: "top",
 	triggerAsChild: true,
 	children: /* @__PURE__ */ jsx("button", {
 		type: "button",
+		"aria-label": tooltip,
+		"aria-keyshortcuts": shortcutKey ? `${MOD_KEY.aria}+${shortcutKey}` : void 0,
 		disabled,
 		onClick,
 		className: cn("tw:flex tw:h-7 tw:min-w-7 tw:cursor-pointer tw:items-center tw:justify-center tw:rounded tw:border-0 tw:bg-transparent tw:px-1 tw:text-xs tw:text-muted-foreground", "tw:hover:bg-accent tw:disabled:cursor-not-allowed tw:disabled:opacity-30", active && "tw:bg-secondary-100 tw:text-secondary-500", extraClassName),
@@ -943,6 +974,8 @@ const LinkPanel = ({ editor, isLink }) => {
 	const [label, setLabel] = useState("");
 	const savedSelectionRef = useRef(null);
 	const panelRef = useRef(null);
+	const labelId = useId();
+	const urlId = useId();
 	const handleOpen = () => {
 		editor.getEditorState().read(() => {
 			const selection = $getSelection();
@@ -954,13 +987,27 @@ const LinkPanel = ({ editor, isLink }) => {
 		});
 		setOpen(true);
 	};
-	const handleClose = () => {
+	const resetPanel = () => {
 		setOpen(false);
 		setUrl("");
 		setLabel("");
 		savedSelectionRef.current = null;
+	};
+	const handleClose = () => {
+		resetPanel();
 		editor.focus();
 	};
+	/**
+	* Closes the panel on Escape pressed anywhere while it is open.
+	*
+	* - `preventDefault` claims the key from a surface outside Radix's stack (`FullScreenModal`).
+	* - Focus goes back to the editor only from inside the panel; anywhere else it stays put.
+	*/
+	const handleEscape = (event) => {
+		event.preventDefault();
+		if (panelRef.current?.contains(document.activeElement)) handleClose();
+		else resetPanel();
+	};
 	const handleSubmit = () => {
 		const trimmedUrl = url.trim();
 		if (!trimmedUrl) return;
@@ -972,10 +1019,6 @@ const LinkPanel = ({ editor, isLink }) => {
 			e.preventDefault();
 			handleSubmit();
 		}
-		if (e.key === "Escape") {
-			e.preventDefault();
-			handleClose();
-		}
 	};
 	if (isLink) return /* @__PURE__ */ jsx(ToolbarButton, {
 		active: true,
@@ -990,18 +1033,19 @@ const LinkPanel = ({ editor, isLink }) => {
 			onClick: handleOpen,
 			tooltip: "Insert Link",
 			children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
-		}), open && /* @__PURE__ */ jsx("div", {
+		}), open && /* @__PURE__ */ jsx(DismissableLayer, {
 			ref: panelRef,
+			onEscapeKeyDown: handleEscape,
 			className: "tw:absolute tw:left-0 tw:top-full tw:z-50 tw:mt-1 tw:w-80 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:p-3 tw:text-popover-foreground tw:shadow-lg",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:flex-col tw:gap-2",
 				children: [
 					/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: "link-label",
+						htmlFor: labelId,
 						className: "tw:mb-1 tw:text-xs",
 						children: "Label"
 					}), /* @__PURE__ */ jsx(TextInput, {
-						id: "link-label",
+						id: labelId,
 						autoFocus: true,
 						placeholder: "Link text",
 						value: label,
@@ -1010,11 +1054,11 @@ const LinkPanel = ({ editor, isLink }) => {
 						variant: "secondary"
 					})] }),
 					/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: "link-url",
+						htmlFor: urlId,
 						className: "tw:mb-1 tw:text-xs",
 						children: "URL"
 					}), /* @__PURE__ */ jsx(TextInput, {
-						id: "link-url",
+						id: urlId,
 						placeholder: "https://…",
 						value: url,
 						onValueChange: setUrl,
@@ -1054,6 +1098,16 @@ const ELEMENT_FORMAT_TYPES = [
 const isElementFormatType = (value) => ELEMENT_FORMAT_TYPES.includes(value);
 const toElementFormatType = (value) => isElementFormatType(value) ? value : "left";
 const TOOLBAR_BASE_CLASS = "tw:flex tw:items-center tw:gap-0.5 tw:rounded-lg tw:border tw:border-border tw:px-1.5 tw:py-1";
+const hasFocus = (element) => !!element?.contains(document.activeElement);
+/**
+* Keeps focus, and the editor selection with it, where it was when a toolbar control is pressed.
+*
+* - A link panel field takes focus as usual, so a click there lands the caret in it.
+*/
+const keepEditorFocus = (event) => {
+	if (event.target instanceof HTMLInputElement) return;
+	event.preventDefault();
+};
 const ToolbarPlugin = ({ mode = "floating" }) => {
 	const [editor] = useLexicalComposerContext();
 	const [isBold, setIsBold] = useState(false);
@@ -1065,23 +1119,68 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 	const [blockType, setBlockType] = useState("paragraph");
 	const [alignment, setAlignment] = useState("left");
 	const [isVisible, setIsVisible] = useState(false);
-	const [position, setPosition] = useState(null);
-	const toolbarRef = useRef(null);
+	const [anchor, setAnchor] = useState(null);
 	const isMouseDownRef = useRef(false);
 	const hasSelectionRef = useRef(false);
+	const toolbarRef = useRef(null);
+	/** The selection an Escape hid the toolbar on; it stays hidden until the selection differs. */
+	const dismissedRef = useRef(null);
 	const isFloating = mode === "floating";
-	const updatePosition = useCallback(() => {
+	/**
+	* Anchors the floating toolbar to the DOM selection inside the editor.
+	*
+	* - The range is a copy, so it keeps measuring these nodes when the page selection moves.
+	* - Measured live, so the toolbar follows the text on scroll and resize.
+	* - A range whose nodes Lexical replaced measures zero; the last real rect stands in for it.
+	* - A new anchor on every update, so floating-ui places the toolbar again when the text moves.
+	*/
+	const updateAnchor = useCallback(() => {
 		const nativeSelection = window.getSelection();
-		if (!nativeSelection || nativeSelection.rangeCount === 0) return;
-		const rect = nativeSelection.getRangeAt(0).getBoundingClientRect();
-		if (rect.width > 0) {
-			const toolbarWidth = toolbarRef.current?.offsetWidth ?? 300;
-			setPosition({
-				top: rect.top + window.scrollY - 8,
-				left: Math.max(8, rect.left + window.scrollX + rect.width / 2 - toolbarWidth / 2)
-			});
+		const root = editor.getRootElement();
+		if (!root || !nativeSelection || nativeSelection.rangeCount === 0) return;
+		const range = nativeSelection.getRangeAt(0).cloneRange();
+		if (!root.contains(range.commonAncestorContainer)) return;
+		let rect = range.getBoundingClientRect();
+		if (rect.width === 0) return;
+		const getBoundingClientRect = () => {
+			const next = range.getBoundingClientRect();
+			if (next.width > 0) rect = next;
+			return rect;
+		};
+		setAnchor({
+			getBoundingClientRect,
+			contextElement: root
+		});
+	}, [editor]);
+	/** Whether focus is in the editor or the toolbar, the places a selection shows the toolbar from. */
+	const isFocusWithin = useCallback(() => hasFocus(editor.getRootElement()) || hasFocus(toolbarRef.current), [editor]);
+	/**
+	* Hides the floating toolbar on a click or focus outside it and the editor.
+	*
+	* - So Escape in another field reaches that field, not this layer.
+	* - Radix counts the toolbar's own dropdown menus as inside.
+	*/
+	const handleInteractOutside = (event) => {
+		const target = event.target;
+		if (target instanceof Node && editor.getRootElement()?.contains(target)) return;
+		setIsVisible(false);
+	};
+	/**
+	* Escape on the floating toolbar, which `PopoverContent` stops at `document`.
+	*
+	* 1. Focus in the toolbar goes back to the editor, and the toolbar stays.
+	* 2. Otherwise the toolbar hides until the selection changes; with focus in the editor, its own
+	*    Escape handling gets the key as a command.
+	*/
+	const handleEscape = (event) => {
+		if (hasFocus(toolbarRef.current)) {
+			editor.focus();
+			return;
 		}
-	}, []);
+		setIsVisible(false);
+		dismissedRef.current = editor.getEditorState().read(() => $getSelection()?.clone() ?? null);
+		if (hasFocus(editor.getRootElement())) editor.dispatchCommand(KEY_DOWN_COMMAND, event);
+	};
 	useEffect(() => {
 		if (!isFloating) return;
 		const handleMouseDown = () => {
@@ -1089,15 +1188,24 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 		};
 		const handleMouseUp = () => {
 			isMouseDownRef.current = false;
-			if (hasSelectionRef.current) setIsVisible(true);
+			if (hasSelectionRef.current && !dismissedRef.current && isFocusWithin()) setIsVisible(true);
 		};
 		document.addEventListener("mousedown", handleMouseDown);
 		document.addEventListener("mouseup", handleMouseUp);
+		const unregisterFocus = editor.registerCommand(FOCUS_COMMAND, () => {
+			if (hasSelectionRef.current && !dismissedRef.current) setIsVisible(true);
+			return false;
+		}, COMMAND_PRIORITY_LOW);
 		return () => {
 			document.removeEventListener("mousedown", handleMouseDown);
 			document.removeEventListener("mouseup", handleMouseUp);
+			unregisterFocus();
 		};
-	}, [isFloating]);
+	}, [
+		editor,
+		isFloating,
+		isFocusWithin
+	]);
 	const updateToolbar = useCallback(() => {
 		const selection = $getSelection();
 		if (!$isRangeSelection(selection)) {
@@ -1107,9 +1215,10 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 		}
 		const hasSelection = !selection.isCollapsed() && selection.getTextContent().length > 0;
 		hasSelectionRef.current = hasSelection;
+		if (dismissedRef.current && !selection.is(dismissedRef.current)) dismissedRef.current = null;
 		if (!hasSelection) setIsVisible(false);
-		else if (!isMouseDownRef.current) setIsVisible(true);
-		if (hasSelection) updatePosition();
+		else if (!isMouseDownRef.current && !dismissedRef.current && isFocusWithin()) setIsVisible(true);
+		if (hasSelection && isFloating) updateAnchor();
 		setIsBold(selection.hasFormat("bold"));
 		setIsItalic(selection.hasFormat("italic"));
 		setIsUnderline(selection.hasFormat("underline"));
@@ -1127,7 +1236,11 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 		else if ($isQuoteNode(blockElement)) setBlockType("quote");
 		else setBlockType("paragraph");
 		setAlignment(toElementFormatType(blockElement.getFormatType()));
-	}, [updatePosition]);
+	}, [
+		isFloating,
+		isFocusWithin,
+		updateAnchor
+	]);
 	useEffect(() => {
 		const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
 			editorState.read(() => {
@@ -1138,7 +1251,6 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 			unregisterUpdate();
 		};
 	}, [editor, updateToolbar]);
-	if (isFloating && (!isVisible || !position)) return null;
 	const buttons = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(BlockTypeDropdown, {
 			editor,
@@ -1148,19 +1260,22 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 		/* @__PURE__ */ jsx(ToolbarButton, {
 			active: isBold,
 			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"),
-			tooltip: "Bold (Ctrl+B)",
+			tooltip: "Bold",
+			shortcutKey: "B",
 			children: /* @__PURE__ */ jsx(Bold, { className: "tw:size-4" })
 		}),
 		/* @__PURE__ */ jsx(ToolbarButton, {
 			active: isItalic,
 			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"),
-			tooltip: "Italic (Ctrl+I)",
+			tooltip: "Italic",
+			shortcutKey: "I",
 			children: /* @__PURE__ */ jsx(Italic, { className: "tw:size-4" })
 		}),
 		/* @__PURE__ */ jsx(ToolbarButton, {
 			active: isUnderline,
 			onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"),
-			tooltip: "Underline (Ctrl+U)",
+			tooltip: "Underline",
+			shortcutKey: "U",
 			children: /* @__PURE__ */ jsx(Underline, { className: "tw:size-4" })
 		}),
 		/* @__PURE__ */ jsx(ToolbarButton, {
@@ -1241,22 +1356,29 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 	if (!isFloating) return /* @__PURE__ */ jsx("div", {
 		role: "toolbar",
 		"aria-label": "Formatting options",
-		onMouseDown: (event) => event.preventDefault(),
+		onMouseDown: keepEditorFocus,
 		className: cn(TOOLBAR_BASE_CLASS, "tw:mb-1 tw:flex-wrap tw:bg-background"),
 		children: buttons
 	});
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		ref: toolbarRef,
-		role: "toolbar",
-		"aria-label": "Formatting options",
-		onMouseDown: (event) => event.preventDefault(),
-		style: {
-			top: position?.top,
-			left: position?.left
-		},
-		className: cn(TOOLBAR_BASE_CLASS, "tw:absolute tw:z-[1060] tw:-translate-y-full tw:bg-popover tw:text-popover-foreground tw:shadow-lg"),
-		children: buttons
-	}), document.body);
+	if (!isVisible || !anchor) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: true,
+		children: [/* @__PURE__ */ jsx(Popover.Anchor, { virtualRef: { current: anchor } }), /* @__PURE__ */ jsx(Popover.Content, {
+			ref: toolbarRef,
+			role: "toolbar",
+			"aria-label": "Formatting options",
+			side: "top",
+			sideOffset: 8,
+			collisionPadding: 8,
+			hideWhenDetached: true,
+			onOpenAutoFocus: (event) => event.preventDefault(),
+			onEscapeKeyDown: handleEscape,
+			onInteractOutside: handleInteractOutside,
+			onMouseDown: keepEditorFocus,
+			className: cn(TOOLBAR_BASE_CLASS, "tw:flex-row tw:overflow-visible"),
+			children: buttons
+		})]
+	});
 };
 //#endregion
 //#region src/blocks/MarkdownEditor/theme.ts