@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/rich-text-editor/rich-text-editor.js

@@ -0,0 +1,909 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { Button } from "../button/button.js";
+import { Tooltip, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Label } from "../label/label.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { isSafeUrl, normalizeUrl } from "./rich-text-html.js";
+import { $isDocumentEmpty, $readFormats, NO_FORMATS, applyLink, beginLink, createRichTextEditor, loadHtml, loadMarkdown, readValue, setBlock, syncDividers, toggleMark } from "./rich-text-engine.js";
+import { BackIcon, BoldIcon, CheckIcon, CodeBlockIcon, CodeIcon, DividerIcon, Heading1Icon, Heading2Icon, Heading3Icon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, ParagraphIcon, QuoteIcon, StrikeIcon, UnderlineIcon, UnlinkIcon } from "./rich-text-icons.js";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
+//#region src/rich-text-editor/rich-text-editor.tsx
+const markTool = (mark, id, label, shortcut, icon, key) => ({
+	id,
+	label,
+	shortcut,
+	icon,
+	pressed: (formats) => !!formats[key],
+	run: (editor) => toggleMark(editor, mark)
+});
+const blockTool = (type, label, icon) => ({
+	id: type,
+	label,
+	icon,
+	pressed: (formats) => formats.block === type,
+	run: (editor) => setBlock(editor, type)
+});
+const FORMAT_TOOLS = [
+	markTool("bold", "bold", "Bold", "B", /* @__PURE__ */ jsx(BoldIcon, {}), "bold"),
+	markTool("italic", "italic", "Italic", "I", /* @__PURE__ */ jsx(ItalicIcon, {}), "italic"),
+	markTool("underline", "underline", "Underline", "U", /* @__PURE__ */ jsx(UnderlineIcon, {}), "underline"),
+	markTool("strikethrough", "strike", "Strikethrough", "⇧X", /* @__PURE__ */ jsx(StrikeIcon, {}), "strike"),
+	markTool("code", "code", "Inline code", "E", /* @__PURE__ */ jsx(CodeIcon, {}), "code"),
+	{
+		id: "link",
+		label: "Link",
+		shortcut: "K",
+		icon: /* @__PURE__ */ jsx(LinkIcon, {}),
+		pressed: (formats) => formats.link !== null,
+		run: (_editor, openLink) => openLink()
+	}
+];
+const BLOCK_TOOLS = [
+	blockTool("h1", "Heading 1", /* @__PURE__ */ jsx(Heading1Icon, {})),
+	blockTool("h2", "Heading 2", /* @__PURE__ */ jsx(Heading2Icon, {})),
+	blockTool("blockquote", "Quote", /* @__PURE__ */ jsx(QuoteIcon, {}))
+];
+const SLASH_ITEMS = [
+	{
+		type: "p",
+		label: "Text",
+		hint: "",
+		keywords: "paragraph plain body",
+		icon: /* @__PURE__ */ jsx(ParagraphIcon, {})
+	},
+	{
+		type: "h1",
+		label: "Heading 1",
+		hint: "#",
+		keywords: "title h1 large",
+		icon: /* @__PURE__ */ jsx(Heading1Icon, {})
+	},
+	{
+		type: "h2",
+		label: "Heading 2",
+		hint: "##",
+		keywords: "subtitle h2 section",
+		icon: /* @__PURE__ */ jsx(Heading2Icon, {})
+	},
+	{
+		type: "h3",
+		label: "Heading 3",
+		hint: "###",
+		keywords: "h3 small",
+		icon: /* @__PURE__ */ jsx(Heading3Icon, {})
+	},
+	{
+		type: "ul",
+		label: "Bulleted list",
+		hint: "-",
+		keywords: "bullet unordered ul points",
+		icon: /* @__PURE__ */ jsx(ListIcon, {})
+	},
+	{
+		type: "ol",
+		label: "Numbered list",
+		hint: "1.",
+		keywords: "ordered ol steps numbers",
+		icon: /* @__PURE__ */ jsx(ListOrderedIcon, {})
+	},
+	{
+		type: "blockquote",
+		label: "Quote",
+		hint: ">",
+		keywords: "blockquote citation callout",
+		icon: /* @__PURE__ */ jsx(QuoteIcon, {})
+	},
+	{
+		type: "pre",
+		label: "Code block",
+		hint: "```",
+		keywords: "pre snippet monospace",
+		icon: /* @__PURE__ */ jsx(CodeBlockIcon, {})
+	},
+	{
+		type: "hr",
+		label: "Divider",
+		hint: "---",
+		keywords: "rule hr line separator",
+		icon: /* @__PURE__ */ jsx(DividerIcon, {})
+	}
+];
+/** ⌘ on Apple platforms, Ctrl elsewhere. Read when a tooltip opens, never during the first render. */
+function Hint({ label, shortcut }) {
+	const apple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [label, shortcut ? /* @__PURE__ */ jsx("kbd", {
+		className: "ms-2 font-sans opacity-80",
+		children: `${apple ? "⌘" : "Ctrl+"}${shortcut}`
+	}) : null] });
+}
+const toolButton = "size-8 rounded-md p-0 aria-pressed:bg-primary-subtle aria-pressed:text-primary-strong data-[hovered]:aria-pressed:bg-primary-subtle";
+/** The visible band of the nearest scrolling or clipping ancestor, so floating layers flip before they get cut off. */
+function clipBand(element) {
+	let top = 0;
+	let bottom = window.innerHeight;
+	for (let node = element.parentElement; node; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		if (style.overflowY !== "visible" || style.overflowX !== "visible") {
+			const rect = node.getBoundingClientRect();
+			top = Math.max(top, rect.top);
+			bottom = Math.min(bottom, rect.bottom);
+		}
+	}
+	return {
+		top,
+		bottom
+	};
+}
+const BLOCK_SELECTOR = "p, h1, h2, h3, li, blockquote";
+const RichTextEditor = forwardRef(function RichTextEditor({ value, defaultValue, defaultMarkdown, onChange, onHistoryChange, placeholder = "Start writing", blockHint = "Type / for blocks", isDisabled = false, isReadOnly = false, autoFocus = false, label, description, error, "aria-label": ariaLabel = "Editor", id, className }, ref) {
+	const uid = useId();
+	const labelId = `${uid}-label`;
+	const field = useFieldWiring({
+		enabled: true,
+		id,
+		describedBy: void 0,
+		invalid: void 0,
+		description,
+		error
+	});
+	const editable = !isDisabled && !isReadOnly;
+	const rootRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const editorRef = useRef(null);
+	const lastEmitted = useRef(null);
+	const dragging = useRef(false);
+	const typedSlash = useRef(false);
+	const hinted = useRef(null);
+	const callbacks = useRef({
+		onChange,
+		onHistoryChange
+	});
+	const initial = useRef({
+		value,
+		defaultValue,
+		defaultMarkdown,
+		autoFocus,
+		editable
+	});
+	useIsomorphicLayoutEffect(() => {
+		callbacks.current = {
+			onChange,
+			onHistoryChange
+		};
+	});
+	const [empty, setEmpty] = useState(true);
+	const [formats, setFormats] = useState(NO_FORMATS);
+	const [bar, setBar] = useState(null);
+	const [placed, setPlaced] = useState(false);
+	const [face, setFace] = useState("format");
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const [linkDraft, setLinkDraft] = useState("");
+	const [stop, setStop] = useState(0);
+	const [slash, setSlash] = useState(null);
+	const [slashActive, setSlashActive] = useState(0);
+	const [panel, setPanel] = useState({
+		height: 0,
+		sized: false
+	});
+	const [highlight, setHighlight] = useState({
+		y: 0,
+		h: 0,
+		placed: false
+	});
+	const [announce, setAnnounce] = useState("");
+	const faceRef = useRef(face);
+	const slashRef = useRef(slash);
+	const sizeRef = useRef(size);
+	const savedLink = useRef(null);
+	const toolbarRef = useRef(null);
+	const formatFaceRef = useRef(null);
+	const linkFaceRef = useRef(null);
+	const linkInputRef = useRef(null);
+	const slashPanelRef = useRef(null);
+	const slashBodyRef = useRef(null);
+	const listRef = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		faceRef.current = face;
+		slashRef.current = slash;
+		sizeRef.current = size;
+	});
+	const slashResults = useMemo(() => {
+		const query = slash?.query.trim().toLowerCase() ?? "";
+		if (!query) return SLASH_ITEMS;
+		return SLASH_ITEMS.filter((item) => `${item.label} ${item.keywords}`.toLowerCase().split(/\s+/).some((word) => word.startsWith(query)) || item.label.toLowerCase().includes(query));
+	}, [slash?.query]);
+	const slashIndex = Math.min(slashActive, Math.max(0, slashResults.length - 1));
+	const slashOpen = !!slash && editable && slashResults.length > 0;
+	const slashLive = useRef({
+		open: slashOpen,
+		results: slashResults,
+		index: slashIndex
+	});
+	useIsomorphicLayoutEffect(() => {
+		slashLive.current = {
+			open: slashOpen,
+			results: slashResults,
+			index: slashIndex
+		};
+	});
+	const [shownSlash, setShownSlash] = useState(null);
+	if (slash && slash !== shownSlash && slashOpen) setShownSlash(slash);
+	const panelSlash = slash ?? shownSlash;
+	const open = !!bar && editable;
+	const sync = () => {
+		const editor = editorRef.current;
+		const surface = surfaceRef.current;
+		const root = rootRef.current;
+		if (!editor || !surface || !root) return;
+		const selection = window.getSelection();
+		const range = !!selection?.rangeCount && surface.contains(selection.anchorNode) ? selection.getRangeAt(0) : null;
+		const next = editor.getEditorState().read($readFormats);
+		setFormats((current) => Object.keys(next).every((key) => current[key] === next[key]) ? current : next);
+		syncDividers(editor);
+		const block = (range ? range.startContainer instanceof Element ? range.startContainer : range.startContainer.parentElement : null)?.closest(BLOCK_SELECTOR);
+		const blockInEditor = block && surface.contains(block) ? block : null;
+		const hint = range?.collapsed && blockInEditor && !blockInEditor.textContent && !blockInEditor.querySelector("li, hr") ? blockInEditor : null;
+		if (hinted.current !== hint) {
+			hinted.current?.removeAttribute("data-hint");
+			hint?.setAttribute("data-hint", "");
+			hinted.current = hint;
+		}
+		if (!range) {
+			if (faceRef.current !== "link") setBar(null);
+			setSlash(null);
+			return;
+		}
+		const open = slashRef.current;
+		if (open) {
+			const text = editor.getEditorState().read(() => {
+				const sel = $getSelection();
+				const node = $getNodeByKey(open.key);
+				if (!$isRangeSelection(sel) || !$isTextNode(node) || !sel.isCollapsed() || sel.anchor.key !== open.key) return null;
+				const caret = sel.anchor.offset;
+				const content = node.getTextContent();
+				return caret > open.offset && content[open.offset] === "/" ? content.slice(open.offset + 1, caret) : null;
+			});
+			if (text === null || text.length > 24 || /^\s/.test(text) || /\s\s/.test(text)) setSlash(null);
+			else if (text !== open.query) setSlash({
+				...open,
+				query: text
+			});
+		}
+		const inCode = next.block === "pre";
+		if (range.collapsed || dragging.current || inCode || slashRef.current || !editable) {
+			if (faceRef.current !== "link") setBar(null);
+			return;
+		}
+		const rects = range.getClientRects();
+		const rect = rects.length ? rects[0] : range.getBoundingClientRect();
+		const whole = range.getBoundingClientRect();
+		const box = root.getBoundingClientRect();
+		const below = rect.top - clipBand(root).top < 60;
+		const half = (sizeRef.current.width || 280) / 2;
+		const x = Math.max(half + 4, Math.min(whole.left + whole.width / 2 - box.left, box.width - half - 4));
+		const y = below ? whole.bottom - box.top + 8 : rect.top - box.top - 8;
+		setBar((current) => current && current.x === x && current.y === y && current.below === below ? current : {
+			x,
+			y,
+			below
+		});
+	};
+	const syncRef = useRef(sync);
+	useIsomorphicLayoutEffect(() => {
+		syncRef.current = sync;
+	});
+	const focusSurface = () => surfaceRef.current?.focus({ preventScroll: true });
+	const focusEditor = () => {
+		editorRef.current?.focus();
+		focusSurface();
+	};
+	const closeLink = (refocus = true) => {
+		const editor = editorRef.current;
+		const saved = savedLink.current;
+		savedLink.current = null;
+		faceRef.current = "format";
+		setFace("format");
+		if (refocus && editor) {
+			if (saved) editor.update(() => $setSelection(saved.selection.clone()));
+			focusSurface();
+		}
+	};
+	const openLink = () => {
+		const editor = editorRef.current;
+		if (!editor || !editable) return;
+		const link = beginLink(editor);
+		if (!link) return;
+		savedLink.current = link;
+		faceRef.current = "link";
+		setLinkDraft(link.url ?? "");
+		setFace("link");
+		syncRef.current();
+	};
+	const openLinkRef = useRef(openLink);
+	useIsomorphicLayoutEffect(() => {
+		openLinkRef.current = openLink;
+	});
+	const submitLink = (remove = false) => {
+		const editor = editorRef.current;
+		const saved = savedLink.current;
+		if (!editor || !saved) return closeLink();
+		const url = remove ? "" : normalizeUrl(linkDraft);
+		if (url && !isSafeUrl(url)) {
+			setAnnounce("That address cannot be linked");
+			return;
+		}
+		savedLink.current = null;
+		faceRef.current = "format";
+		setFace("format");
+		setBar(null);
+		focusSurface();
+		applyLink(editor, saved.selection, url || null);
+		setAnnounce(url ? "Link added" : "Link removed");
+	};
+	const chooseSlash = (item) => {
+		const editor = editorRef.current;
+		const open = slashRef.current;
+		if (!editor || !open || !item) return;
+		setSlash(null);
+		editor.update(() => {
+			const node = $getNodeByKey(open.key);
+			if (!$isTextNode(node)) return;
+			const selection = $getSelection();
+			const caret = $isRangeSelection(selection) && selection.anchor.key === open.key ? selection.anchor.offset : open.offset + 1 + open.query.length;
+			node.spliceText(open.offset, Math.max(1, caret - open.offset), "", true);
+		}, { discrete: true });
+		setBlock(editor, item.type);
+		setAnnounce(`${item.label} added`);
+	};
+	const chooseRef = useRef(chooseSlash);
+	useIsomorphicLayoutEffect(() => {
+		chooseRef.current = chooseSlash;
+	});
+	useIsomorphicLayoutEffect(() => {
+		const surface = surfaceRef.current;
+		if (!surface) return;
+		const { editor, destroy } = createRichTextEditor(surface);
+		editorRef.current = editor;
+		const start = initial.current;
+		editor.setEditable(start.editable);
+		const html = start.value ?? start.defaultValue;
+		if (html !== void 0) loadHtml(editor, html, true, true);
+		else if (start.defaultMarkdown !== void 0) loadMarkdown(editor, start.defaultMarkdown, true, true);
+		else loadHtml(editor, "", true, true);
+		lastEmitted.current = start.value ?? null;
+		setEmpty(editor.getEditorState().read($isDocumentEmpty));
+		let canUndo = false;
+		let canRedo = false;
+		const reportHistory = () => callbacks.current.onHistoryChange?.({
+			canUndo,
+			canRedo
+		});
+		reportHistory();
+		const onBeforeInput = (event) => {
+			typedSlash.current = event.inputType === "insertText" && event.data === "/";
+		};
+		surface.addEventListener("beforeinput", onBeforeInput);
+		const openSlash = () => {
+			const root = rootRef.current;
+			const selection = window.getSelection();
+			const dom = selection?.anchorNode;
+			if (!root || !selection || !dom || dom.nodeType !== Node.TEXT_NODE || !selection.isCollapsed) return;
+			const caret = selection.anchorOffset;
+			const data = dom.data;
+			if (data[caret - 1] !== "/" || caret > 1 && !/\s/.test(data[caret - 2])) return;
+			const target = editor.getEditorState().read(() => {
+				const sel = $getSelection();
+				if (!$isRangeSelection(sel) || !sel.isCollapsed() || !$isTextNode(sel.anchor.getNode())) return null;
+				return $readFormats().block === "pre" ? null : {
+					key: sel.anchor.key,
+					offset: sel.anchor.offset - 1
+				};
+			});
+			if (!target) return;
+			const mark = document.createRange();
+			mark.setStart(dom, caret - 1);
+			mark.setEnd(dom, caret);
+			const rect = mark.getBoundingClientRect();
+			const box = root.getBoundingClientRect();
+			const band = clipBand(root);
+			const above = band.bottom - rect.bottom < 330 && rect.top - band.top > band.bottom - rect.bottom;
+			const room = above ? rect.top - band.top - 12 : band.bottom - rect.bottom - 12;
+			setSlash({
+				...target,
+				query: "",
+				x: Math.max(0, Math.min(rect.left - box.left - 8, box.width - 244)),
+				y: above ? rect.top - box.top - 6 : rect.bottom - box.top + 6,
+				above,
+				max: Math.max(150, room)
+			});
+			setSlashActive(0);
+			setBar(null);
+		};
+		function moveSlash(event, step) {
+			const live = slashLive.current;
+			if (!live.open || !event) return false;
+			event.preventDefault();
+			setSlashActive((live.index + step + live.results.length) % live.results.length);
+			return true;
+		}
+		function pickSlash(event) {
+			const live = slashLive.current;
+			if (!live.open || !event) return false;
+			event.preventDefault();
+			const item = live.results[live.index];
+			queueMicrotask(() => chooseRef.current(item));
+			return true;
+		}
+		const off = [
+			editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves, tags }) => {
+				if (dirtyElements.size > 0 || dirtyLeaves.size > 0) {
+					setEmpty(editorState.read($isDocumentEmpty));
+					if (!tags.has("rich-text-load")) {
+						const next = readValue(editor);
+						lastEmitted.current = next.html;
+						callbacks.current.onChange?.(next);
+					}
+				}
+				if (typedSlash.current) {
+					typedSlash.current = false;
+					openSlash();
+				}
+				syncRef.current();
+			}),
+			editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+				canUndo = payload;
+				reportHistory();
+				return false;
+			}, COMMAND_PRIORITY_LOW),
+			editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+				canRedo = payload;
+				reportHistory();
+				return false;
+			}, COMMAND_PRIORITY_LOW),
+			editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event) => moveSlash(event, 1), COMMAND_PRIORITY_HIGH),
+			editor.registerCommand(KEY_ARROW_UP_COMMAND, (event) => moveSlash(event, -1), COMMAND_PRIORITY_HIGH),
+			editor.registerCommand(KEY_ENTER_COMMAND, (event) => pickSlash(event), COMMAND_PRIORITY_HIGH),
+			editor.registerCommand(KEY_TAB_COMMAND, (event) => pickSlash(event), COMMAND_PRIORITY_HIGH),
+			editor.registerCommand(KEY_ESCAPE_COMMAND, (event) => {
+				if (!slashLive.current.open) return false;
+				event.preventDefault();
+				event.stopPropagation();
+				setSlash(null);
+				return true;
+			}, COMMAND_PRIORITY_HIGH),
+			editor.registerCommand(KEY_DOWN_COMMAND, (event) => {
+				if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return false;
+				event.preventDefault();
+				queueMicrotask(() => openLinkRef.current());
+				return true;
+			}, COMMAND_PRIORITY_LOW)
+		];
+		if (start.autoFocus && start.editable) {
+			editor.focus();
+			surface.focus({ preventScroll: true });
+		}
+		return () => {
+			off.forEach((unregister) => unregister());
+			surface.removeEventListener("beforeinput", onBeforeInput);
+			destroy();
+			editorRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		editorRef.current?.setEditable(editable);
+	}, [editable]);
+	useEffect(() => {
+		const editor = editorRef.current;
+		if (!editor || value === void 0 || value === lastEmitted.current) return;
+		lastEmitted.current = value;
+		loadHtml(editor, value, true);
+	}, [value]);
+	useImperativeHandle(ref, () => ({
+		focus: () => {
+			editorRef.current?.focus();
+			surfaceRef.current?.focus({ preventScroll: true });
+		},
+		getHTML: () => editorRef.current ? readValue(editorRef.current).html : "",
+		getMarkdown: () => editorRef.current ? readValue(editorRef.current).markdown : "",
+		getText: () => editorRef.current ? readValue(editorRef.current).text : "",
+		setHTML: (html) => editorRef.current && loadHtml(editorRef.current, html, false),
+		setMarkdown: (markdown) => editorRef.current && loadMarkdown(editorRef.current, markdown, false),
+		clear: () => editorRef.current && loadHtml(editorRef.current, "", false),
+		undo: () => {
+			editorRef.current?.dispatchCommand(UNDO_COMMAND, void 0);
+			setAnnounce("Undone");
+		},
+		redo: () => {
+			editorRef.current?.dispatchCommand(REDO_COMMAND, void 0);
+			setAnnounce("Redone");
+		},
+		get element() {
+			return surfaceRef.current;
+		}
+	}), []);
+	useEffect(() => {
+		const up = () => {
+			if (!dragging.current) return;
+			dragging.current = false;
+			syncRef.current();
+		};
+		const down = (event) => {
+			if (faceRef.current !== "link" || toolbarRef.current?.contains(event.target)) return;
+			savedLink.current = null;
+			faceRef.current = "format";
+			setFace("format");
+			setBar(null);
+		};
+		let frame = 0;
+		const changed = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => syncRef.current());
+		};
+		document.addEventListener("pointerup", up);
+		document.addEventListener("pointerdown", down);
+		document.addEventListener("selectionchange", changed);
+		return () => {
+			cancelAnimationFrame(frame);
+			document.removeEventListener("pointerup", up);
+			document.removeEventListener("pointerdown", down);
+			document.removeEventListener("selectionchange", changed);
+		};
+	}, []);
+	useEffect(() => {
+		if (face !== "link") return;
+		const frame = requestAnimationFrame(() => linkInputRef.current?.focus({ preventScroll: true }));
+		return () => cancelAnimationFrame(frame);
+	}, [face]);
+	useEffect(() => {
+		if (!open) return;
+		let second = 0;
+		const first = requestAnimationFrame(() => {
+			second = requestAnimationFrame(() => setPlaced(true));
+		});
+		return () => {
+			cancelAnimationFrame(first);
+			cancelAnimationFrame(second);
+			setPlaced(false);
+		};
+	}, [open]);
+	useIsomorphicLayoutEffect(() => {
+		const active = face === "format" ? formatFaceRef.current : linkFaceRef.current;
+		if (toolbarRef.current) toolbarRef.current.inert = !open;
+		if (formatFaceRef.current) formatFaceRef.current.inert = face !== "format";
+		if (linkFaceRef.current) linkFaceRef.current.inert = face !== "link";
+		if (!active) return;
+		const report = () => setSize((current) => current.width === active.offsetWidth && current.height === active.offsetHeight ? current : {
+			width: active.offsetWidth,
+			height: active.offsetHeight
+		});
+		report();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(report);
+		observer.observe(active);
+		return () => observer.disconnect();
+	}, [face, open]);
+	useIsomorphicLayoutEffect(() => {
+		if (!slashOpen) {
+			setHighlight((current) => current.placed ? {
+				...current,
+				placed: false
+			} : current);
+			setPanel((current) => current.sized ? {
+				...current,
+				sized: false
+			} : current);
+			return;
+		}
+		const row = listRef.current?.querySelector(`[data-index="${slashIndex}"]`);
+		if (row) {
+			setHighlight((current) => ({
+				y: row.offsetTop,
+				h: row.offsetHeight,
+				placed: current.placed || current.h > 0
+			}));
+			const panelEl = slashPanelRef.current;
+			if (panelEl) {
+				const top = row.offsetTop + 6;
+				const bottom = top + row.offsetHeight;
+				if (top - 6 < panelEl.scrollTop) panelEl.scrollTop = top - 6;
+				else if (bottom + 6 > panelEl.scrollTop + panelEl.clientHeight) panelEl.scrollTop = bottom + 6 - panelEl.clientHeight;
+			}
+		}
+		const body = slashBodyRef.current;
+		if (!body) return;
+		const max = panelSlash?.max ?? 320;
+		const fit = () => setPanel((current) => {
+			const height = Math.min(body.offsetHeight, max);
+			return current.height === height ? {
+				...current,
+				sized: true
+			} : {
+				height,
+				sized: current.height > 0
+			};
+		});
+		fit();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(fit);
+		observer.observe(body);
+		return () => observer.disconnect();
+	}, [
+		slashOpen,
+		slashIndex,
+		slashResults,
+		panelSlash?.max
+	]);
+	const focusToolbar = () => formatFaceRef.current?.querySelectorAll("button")[stop]?.focus();
+	const onSurfaceKeyDown = (event) => {
+		if (event.altKey && event.key === "F10" && open) {
+			event.preventDefault();
+			focusToolbar();
+		}
+	};
+	const onToolbarKeyDown = (event) => {
+		if (face === "link") return;
+		const buttons = Array.from(formatFaceRef.current?.querySelectorAll("button:not([disabled])") ?? []);
+		const at = buttons.indexOf(document.activeElement);
+		if (at >= 0 && (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "Home" || event.key === "End")) {
+			event.preventDefault();
+			buttons[event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (at + (event.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			focusSurface();
+		}
+	};
+	const tools = [...FORMAT_TOOLS, ...BLOCK_TOOLS];
+	const renderTool = (tool) => {
+		const index = tools.indexOf(tool);
+		return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: toolButton,
+			"aria-label": tool.label === "Link" && formats.link ? "Edit link" : tool.label,
+			"aria-pressed": tool.pressed(formats),
+			excludeFromTabOrder: stop !== index,
+			preventFocusOnPress: true,
+			onFocus: () => setStop(index),
+			onPress: () => {
+				const editor = editorRef.current;
+				if (editor) tool.run(editor, openLink);
+			},
+			children: tool.icon
+		}), /* @__PURE__ */ jsx(Tooltip, {
+			placement: "top",
+			children: /* @__PURE__ */ jsx(Hint, {
+				label: tool.label,
+				shortcut: tool.shortcut
+			})
+		})] }, tool.id);
+	};
+	const optionId = (index) => `${uid}-slash-${index}`;
+	const cssVars = {
+		"--rich-text-placeholder": JSON.stringify(placeholder),
+		"--rich-text-hint": JSON.stringify(blockHint)
+	};
+	const toolbarStyle = {
+		left: bar?.x ?? 0,
+		top: bar?.y ?? 0,
+		width: size.width,
+		height: size.height
+	};
+	const surface = /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		"data-slot": "rich-text-editor-root",
+		className: "rich-text",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: surfaceRef,
+				...field.controlProps,
+				"data-slot": "rich-text-editor",
+				"data-empty": empty || void 0,
+				role: "textbox",
+				"aria-multiline": "true",
+				"aria-label": label == null ? ariaLabel : void 0,
+				"aria-labelledby": label == null ? void 0 : labelId,
+				"aria-placeholder": placeholder,
+				"aria-readonly": isReadOnly || void 0,
+				"aria-disabled": isDisabled || void 0,
+				"aria-controls": slashOpen ? `${uid}-slash` : void 0,
+				"aria-activedescendant": slashOpen ? optionId(slashIndex) : void 0,
+				contentEditable: editable,
+				suppressContentEditableWarning: true,
+				tabIndex: isReadOnly && !isDisabled ? 0 : void 0,
+				spellCheck: true,
+				className: "rich-text-surface",
+				style: cssVars,
+				onKeyDown: onSurfaceKeyDown,
+				onPointerDown: () => {
+					dragging.current = true;
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				"data-slot": "rich-text-editor-status",
+				className: "sr-only",
+				children: announce
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: toolbarRef,
+				"data-slot": "rich-text-editor-toolbar",
+				role: "toolbar",
+				"aria-label": "Formatting",
+				"aria-keyshortcuts": "Alt+F10",
+				"data-open": open || void 0,
+				"data-below": bar?.below || void 0,
+				"data-placed": open && placed || void 0,
+				className: "rich-text-toolbar",
+				style: toolbarStyle,
+				onKeyDown: onToolbarKeyDown,
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: formatFaceRef,
+					"data-face": "format",
+					"data-active": face === "format" || void 0,
+					className: "rich-text-face",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "rich-text-row",
+						children: [FORMAT_TOOLS.map(renderTool), /* @__PURE__ */ jsxs("span", {
+							className: "rich-text-block-tools",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "rich-text-divider"
+							}), BLOCK_TOOLS.map(renderTool)]
+						})]
+					})
+				}), /* @__PURE__ */ jsx("form", {
+					ref: linkFaceRef,
+					"data-face": "link",
+					"data-active": face === "link" || void 0,
+					className: "rich-text-face",
+					onSubmit: (event) => {
+						event.preventDefault();
+						submitLink();
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "rich-text-row",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon",
+								className: toolButton,
+								type: "button",
+								"aria-label": "Back to formatting",
+								preventFocusOnPress: true,
+								onPress: () => closeLink(),
+								children: /* @__PURE__ */ jsx(BackIcon, {})
+							}),
+							/* @__PURE__ */ jsx("input", {
+								ref: linkInputRef,
+								className: "rich-text-link-input",
+								value: linkDraft,
+								onChange: (event) => setLinkDraft(event.target.value),
+								onKeyDown: (event) => {
+									if (event.key !== "Escape") return;
+									event.preventDefault();
+									event.stopPropagation();
+									closeLink();
+								},
+								placeholder: "Paste or type a link",
+								"aria-label": "Link address",
+								inputMode: "url",
+								autoComplete: "off",
+								spellCheck: false
+							}),
+							formats.link ? /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon",
+								className: toolButton,
+								type: "button",
+								"aria-label": "Remove link",
+								preventFocusOnPress: true,
+								onPress: () => submitLink(true),
+								children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+							}) : null,
+							/* @__PURE__ */ jsx(Button, {
+								variant: linkDraft.trim() ? "primary" : "secondary",
+								size: "icon",
+								className: "size-8 rounded-md p-0",
+								type: "submit",
+								"aria-label": "Apply link",
+								children: /* @__PURE__ */ jsx(CheckIcon, {})
+							})
+						]
+					})
+				})]
+			}),
+			panelSlash ? /* @__PURE__ */ jsx("div", {
+				ref: slashPanelRef,
+				"data-slot": "rich-text-editor-slash",
+				"data-open": slashOpen || void 0,
+				"data-above": panelSlash.above || void 0,
+				"data-sized": panel.sized || void 0,
+				className: "rich-text-slash",
+				style: {
+					left: panelSlash.x,
+					top: panelSlash.y,
+					height: panel.height || void 0,
+					maxHeight: panelSlash.max
+				},
+				onMouseDown: (event) => event.preventDefault(),
+				children: /* @__PURE__ */ jsx("div", {
+					ref: slashBodyRef,
+					className: "rich-text-slash-body",
+					children: /* @__PURE__ */ jsxs("ul", {
+						ref: listRef,
+						id: `${uid}-slash`,
+						role: "listbox",
+						"aria-label": "Blocks",
+						className: "rich-text-slash-list",
+						children: [/* @__PURE__ */ jsx("li", {
+							"aria-hidden": "true",
+							"data-placed": highlight.placed || void 0,
+							className: "rich-text-slash-highlight",
+							style: {
+								"--rich-text-y": `${highlight.y}px`,
+								"--rich-text-h": `${highlight.h}px`
+							}
+						}), slashResults.map((item, index) => /* @__PURE__ */ jsxs("li", {
+							id: optionId(index),
+							role: "option",
+							"aria-selected": index === slashIndex,
+							"data-index": index,
+							className: "rich-text-slash-option",
+							onPointerMove: () => {
+								if (index !== slashIndex) setSlashActive(index);
+							},
+							onClick: () => chooseSlash(item),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "grid w-5 flex-none place-items-center",
+									children: item.icon
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate font-medium",
+									children: item.label
+								}),
+								item.hint ? /* @__PURE__ */ jsx("kbd", {
+									className: "flex-none font-mono text-xs text-muted-foreground",
+									children: item.hint
+								}) : null
+							]
+						}, item.type))]
+					})
+				})
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "rich-text-editor-field",
+		className: cn("w-full min-w-0 font-sans", className),
+		children: /* @__PURE__ */ jsxs(FieldShell, {
+			label: null,
+			controlId: field.controlId,
+			description,
+			hintId: field.hintId,
+			error,
+			errorId: field.errorId,
+			wordExit: "quick",
+			children: [label == null ? null : /* @__PURE__ */ jsx(Label, {
+				id: labelId,
+				className: "mb-1.5",
+				onClick: focusEditor,
+				children: label
+			}), surface]
+		})
+	});
+});
+RichTextEditor.displayName = "RichTextEditor";
+//#endregion
+export { RichTextEditor };
+
+//# sourceMappingURL=rich-text-editor.js.map