@keboola/design 13.1.1 → 13.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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,7 +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";
@@ -31,7 +31,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";
@@ -1098,6 +1098,7 @@ 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.
 *
@@ -1118,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 = () => {
@@ -1142,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)) {
@@ -1160,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"));
@@ -1180,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(() => {
@@ -1191,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,
@@ -1301,18 +1360,25 @@ 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, {
+			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