@keboola/design 13.1.1 → 13.1.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @keboola/design
 
+## 13.1.3
+
+### Patch Changes
+
+- `MarkdownEditor`'s link panel stays inside the viewport, and a nested list shows one marker per item.
+  - The link panel is a `Popover` anchored to the Insert Link button, in both `toolbarMode`s. It opens below the button at its left edge, shifts left to stay 8 px inside the viewport, and opens above the button when there is no room below. It used to hang off the button at a fixed 320 px, so in a narrow container (a reply box in a `Sheet`) it ran past the edge and the container clipped it.
+  - It renders in `document.body`, like the floating toolbar, so it wears the page theme and stacks over a surrounding `Modal` or `Sheet`. It takes the `Popover` surface: argo chrome gives it the larger radius.
+  - An outside click or focus closes it, and focus stays where the click or focus put it. It used to stay open.
+  - A second press of Insert Link closes it like Cancel. The button carries `aria-expanded` and `aria-controls`, and the panel is a dialog named `Insert Link`.
+  - The Label field takes focus, with its text selected, every time the panel opens, including a reopen while it is still animating out.
+  - Unchanged: both fields take clicks, Enter adds the link, Escape closes only the panel and returns focus to the editor (then the floating toolbar, then the dialog), and the editor's selection survives opening the panel and adding the link.
+  - With `saveOnBlur`, focus moving into anything the toolbar portals (the floating toolbar, the link panel, the Block type and Alignment menus) does not count as leaving the editor, in either mode. Opening either menu used to save. `onSave` still fires synchronously on a real blur.
+  - In a nested bullet, numbered or check list, the item that holds the nested list no longer draws a bullet, number or checkbox of its own beside the nested item's. The markdown it exports is unchanged.
+
+## 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

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,6 +6,7 @@ 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";
@@ -13,8 +14,6 @@ import { Kbd } from "./Kbd-J4n1J6i4.js";
 import { toast } from "./toast-CyXEdaCZ.js";
 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";
@@ -31,7 +30,7 @@ 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 { $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";
@@ -42,6 +41,11 @@ import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, TRANS
 const ImageRendererContext = createContext(null);
 const ImageRendererProvider = ImageRendererContext;
 const useImageRenderer = () => use(ImageRendererContext);
+const EditorLayerContext = createContext(void 0);
+/** Takes the id `MarkdownEditor`'s blur guard matches on its toolbar's portalled layers. */
+const EditorLayerProvider = EditorLayerContext;
+/** Props for a layer the toolbar portals out of the editor, so its blur guard counts focus there. */
+const useEditorLayer = () => ({ "data-editor-layer": use(EditorLayerContext) });
 //#endregion
 //#region src/blocks/MarkdownEditor/nodes/ImageNodeComponent.tsx
 const isPlaceholder = (src) => src.startsWith("upload-placeholder-");
@@ -760,6 +764,7 @@ 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);
+	const editorLayer = useEditorLayer();
 	const handleOpenChange = (open) => {
 		if (open) editor.getEditorState().read(() => {
 			const selection = $getSelection();
@@ -789,6 +794,7 @@ const AlignmentDropdown = ({ editor, alignment }) => {
 				})
 			})
 		}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			...editorLayer,
 			align: "start",
 			className: "tw:min-w-32",
 			children: ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
@@ -851,6 +857,7 @@ const BLOCK_TYPE_OPTIONS = Object.entries(BLOCK_TYPE_META).filter(([, meta]) =>
 const isBlockType = (value) => Object.prototype.hasOwnProperty.call(BLOCK_TYPE_META, value);
 const BlockTypeDropdown = ({ editor, blockType }) => {
 	const savedSelectionRef = useRef(null);
+	const editorLayer = useEditorLayer();
 	const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
 	const CurrentBlockIcon = currentMeta?.icon ?? Type;
 	const handleOpenChange = (open) => {
@@ -898,6 +905,7 @@ const BlockTypeDropdown = ({ editor, blockType }) => {
 				})
 			})
 		}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			...editorLayer,
 			align: "start",
 			className: "tw:min-w-40",
 			children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
@@ -922,7 +930,12 @@ const MOD_KEY = IS_APPLE ? {
 	aria: "Control",
 	symbol: "Ctrl"
 };
-const ToolbarButton = ({ active, disabled, onClick, tooltip, shortcutKey, children, className: extraClassName }) => /* @__PURE__ */ jsx(Tooltip, {
+/**
+* An icon button named by its tooltip.
+*
+* - Other props reach the `<button>`, so it can be a trigger; they cannot rename it.
+*/
+const ToolbarButton = ({ active, tooltip, shortcutKey, children, className: extraClassName, ...props }) => /* @__PURE__ */ jsx(Tooltip, {
 	tooltip: shortcutKey ? /* @__PURE__ */ jsxs("span", {
 		className: "tw:inline-flex tw:items-center tw:gap-2",
 		children: [tooltip, /* @__PURE__ */ jsxs(Kbd.Group, {
@@ -941,16 +954,16 @@ const ToolbarButton = ({ active, disabled, onClick, tooltip, shortcutKey, childr
 	triggerAsChild: true,
 	children: /* @__PURE__ */ jsx("button", {
 		type: "button",
+		...props,
 		"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),
 		children
 	})
 });
 //#endregion
 //#region src/blocks/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+const PANEL_NAME = "Insert Link";
 const insertLink = (editor, url, label, savedSelection) => {
 	editor.update(() => {
 		$setSelection(savedSelection);
@@ -969,13 +982,25 @@ const insertLink = (editor, url, label, savedSelection) => {
 	});
 };
 const LinkPanel = ({ editor, isLink }) => {
+	const editorLayer = useEditorLayer();
 	const [open, setOpen] = useState(false);
 	const [url, setUrl] = useState("");
 	const [label, setLabel] = useState("");
 	const savedSelectionRef = useRef(null);
 	const panelRef = useRef(null);
+	const labelRef = useRef(null);
 	const labelId = useId();
 	const urlId = useId();
+	/**
+	* Focuses and selects the Label field on every open.
+	*
+	* - `FocusScope` does it only on mount, and a reopen during the exit animation reuses the panel.
+	*/
+	useEffect(() => {
+		if (!open) return;
+		labelRef.current?.focus({ preventScroll: true });
+		labelRef.current?.select();
+	}, [open]);
 	const handleOpen = () => {
 		editor.getEditorState().read(() => {
 			const selection = $getSelection();
@@ -998,14 +1023,14 @@ const LinkPanel = ({ editor, isLink }) => {
 		editor.focus();
 	};
 	/**
-	* Closes the panel on Escape pressed anywhere while it is open.
+	* Opens the panel, or closes it however Radix asks: Escape, its button again, an outside click.
 	*
-	* - `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.
+	* - Focus still in the panel (Escape, or the button, which leaves focus put): the editor takes it.
+	* - Focus already elsewhere (an outside click or focus): it stays there.
 	*/
-	const handleEscape = (event) => {
-		event.preventDefault();
-		if (panelRef.current?.contains(document.activeElement)) handleClose();
+	const handleOpenChange = (next) => {
+		if (next) handleOpen();
+		else if (panelRef.current?.contains(document.activeElement)) handleClose();
 		else resetPanel();
 	};
 	const handleSubmit = () => {
@@ -1026,58 +1051,62 @@ const LinkPanel = ({ editor, isLink }) => {
 		tooltip: "Remove Link",
 		children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "tw:relative",
-		children: [/* @__PURE__ */ jsx(ToolbarButton, {
-			active: open,
-			onClick: handleOpen,
-			tooltip: "Insert Link",
-			children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
-		}), 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: labelId,
-						className: "tw:mb-1 tw:text-xs",
-						children: "Label"
-					}), /* @__PURE__ */ jsx(TextInput, {
-						id: labelId,
-						autoFocus: true,
-						placeholder: "Link text",
-						value: label,
-						onValueChange: setLabel,
-						onKeyDown: handleKeyDown,
-						variant: "secondary"
-					})] }),
-					/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: urlId,
-						className: "tw:mb-1 tw:text-xs",
-						children: "URL"
-					}), /* @__PURE__ */ jsx(TextInput, {
-						id: urlId,
-						placeholder: "https://…",
-						value: url,
-						onValueChange: setUrl,
-						onKeyDown: handleKeyDown,
-						variant: "secondary"
-					})] }),
-					/* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(Button, {
-						size: "small",
-						variant: "outline",
-						onClick: handleClose,
-						children: "Cancel"
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "small",
-						onClick: handleSubmit,
-						disabled: !url.trim(),
-						children: "Add link"
-					})] })
-				]
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				active: open,
+				tooltip: PANEL_NAME,
+				children: /* @__PURE__ */ jsx(Link, { className: "tw:size-4" })
 			})
+		}), /* @__PURE__ */ jsxs(Popover.Content, {
+			ref: panelRef,
+			"aria-label": PANEL_NAME,
+			...editorLayer,
+			align: "start",
+			collisionPadding: 8,
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			className: "tw:w-80 tw:max-w-[calc(100vw-1rem)] tw:gap-2 tw:p-3",
+			children: [
+				/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: labelId,
+					className: "tw:mb-1 tw:text-xs",
+					children: "Label"
+				}), /* @__PURE__ */ jsx(TextInput, {
+					ref: labelRef,
+					id: labelId,
+					placeholder: "Link text",
+					value: label,
+					onValueChange: setLabel,
+					onKeyDown: handleKeyDown,
+					variant: "secondary"
+				})] }),
+				/* @__PURE__ */ jsxs(FormGroup, { children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: urlId,
+					className: "tw:mb-1 tw:text-xs",
+					children: "URL"
+				}), /* @__PURE__ */ jsx(TextInput, {
+					id: urlId,
+					placeholder: "https://…",
+					value: url,
+					onValueChange: setUrl,
+					onKeyDown: handleKeyDown,
+					variant: "secondary"
+				})] }),
+				/* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					variant: "outline",
+					onClick: handleClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					onClick: handleSubmit,
+					disabled: !url.trim(),
+					children: "Add link"
+				})] })
+			]
 		})]
 	});
 };
@@ -1098,10 +1127,12 @@ 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.
+* - The link panel is portalled, but React bubbles its events up here all the same.
 */
 const keepEditorFocus = (event) => {
 	if (event.target instanceof HTMLInputElement) return;
@@ -1109,6 +1140,7 @@ const keepEditorFocus = (event) => {
 };
 const ToolbarPlugin = ({ mode = "floating" }) => {
 	const [editor] = useLexicalComposerContext();
+	const editorLayer = useEditorLayer();
 	const [isBold, setIsBold] = useState(false);
 	const [isItalic, setIsItalic] = useState(false);
 	const [isUnderline, setIsUnderline] = useState(false);
@@ -1118,23 +1150,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 = () => {
@@ -1142,15 +1219,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)) {
@@ -1160,9 +1246,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"));
@@ -1180,7 +1267,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(() => {
@@ -1191,7 +1282,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,
@@ -1301,18 +1391,26 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 		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: keepEditorFocus,
-		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, {
+			...editorLayer,
+			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"),
+			children: buttons
+		})]
+	});
 };
 //#endregion
 //#region src/blocks/MarkdownEditor/theme.ts
@@ -1335,6 +1433,7 @@ const editorTheme = {
 		ol: "tw:!list-decimal",
 		ul: "tw:!list-disc",
 		checklist: "tw:!list-none tw:!pl-0",
+		nested: { listitem: "tw:list-none tw:before:hidden tw:after:hidden" },
 		listitemChecked: [
 			"tw:relative tw:!pl-6 tw:list-none tw:outline-hidden tw:line-through tw:text-muted-foreground",
 			"tw:before:content-[\"\"] tw:before:absolute tw:before:left-0 tw:before:top-[3px]",
@@ -1378,12 +1477,14 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 		}
 	}));
 	const skipBlurSaveRef = useRef(false);
+	const layerId = useId();
 	const handleBlur = saveOnBlur && onSave ? (event) => {
 		if (skipBlurSaveRef.current) {
 			skipBlurSaveRef.current = false;
 			return;
 		}
-		if (!event.currentTarget.contains(event.relatedTarget)) onSave();
+		const next = event.relatedTarget;
+		if (!event.currentTarget.contains(next) && !next?.closest(`[data-editor-layer="${layerId}"]`)) onSave();
 	} : void 0;
 	return /* @__PURE__ */ jsx(LexicalComposer, {
 		initialConfig,
@@ -1393,7 +1494,10 @@ const MarkdownEditor = ({ value, onChange, readOnly = false, placeholder, autoFo
 				className: cn(!compact && "tw:prose", compact && "tw:[&_p]:m-0 tw:[&_p+p]:mt-2", clampDisplay && "tw:[&:not(:focus-within)]:line-clamp-2", className),
 				onBlur: handleBlur,
 				children: [
-					showToolbar && editable && /* @__PURE__ */ jsx(ToolbarPlugin, { mode: toolbarMode }),
+					showToolbar && editable && /* @__PURE__ */ jsx(EditorLayerProvider, {
+						value: layerId,
+						children: /* @__PURE__ */ jsx(ToolbarPlugin, { mode: toolbarMode })
+					}),
 					/* @__PURE__ */ jsx("div", {
 						className: cn("tw:relative tw:rounded-md tw:transition-colors", contentPadding, compact && "tw:-mx-1.5 tw:-my-0.5", editable && "tw:cursor-text tw:hover:bg-muted tw:focus-within:ring-2 tw:focus-within:ring-ring/40"),
 						children: /* @__PURE__ */ jsx(RichTextPlugin, {