@keboola/design 13.1.2 → 13.1.3

package/CHANGELOG.md

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

package/dist/markdown-editor.js

@@ -14,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 { 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";
@@ -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"
+				})] })
+			]
 		})]
 	});
 };
@@ -1103,6 +1132,7 @@ 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;
@@ -1110,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);
@@ -1364,6 +1395,7 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 	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",
@@ -1375,7 +1407,7 @@ const ToolbarPlugin = ({ mode = "floating" }) => {
 			onEscapeKeyDown: handleEscape,
 			onInteractOutside: handleInteractOutside,
 			onMouseDown: keepEditorFocus,
-			className: cn(TOOLBAR_BASE_CLASS, "tw:flex-row tw:overflow-visible"),
+			className: cn(TOOLBAR_BASE_CLASS, "tw:flex-row"),
 			children: buttons
 		})]
 	});
@@ -1401,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]",
@@ -1444,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,
@@ -1459,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, {