@exsto/ds 0.0.1-rc.5 → 0.0.1-rc.7

package/dist/rich-text-editor.js

@@ -0,0 +1,846 @@
+import { B as cn, C as RICH_TEXT_ATTRIBUTES, E as isAllowedRichTextHref, L as PopoverTrigger, M as Popover, N as PopoverContent, O as popupItemClass, R as Button, T as RICH_TEXT_LINK_PROTOCOLS, _ as DropdownMenuTrigger, a as DropdownMenuContent, k as ScrollArea, n as toggleVariants, r as DropdownMenu, s as DropdownMenuItem, v as Input, w as RICH_TEXT_ELEMENTS, y as RICH_TEXT_BODY_CLASS } from "./chunks/toggle-C2c5oDaE.js";
+import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconLoader2, IconSeparatorHorizontal, IconUnderline, IconVariable } from "@tabler/icons-react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import { Extension, mergeAttributes } from "@tiptap/core";
+import { Bold } from "@tiptap/extension-bold";
+import { Document } from "@tiptap/extension-document";
+import { HardBreak } from "@tiptap/extension-hard-break";
+import { HorizontalRule } from "@tiptap/extension-horizontal-rule";
+import { Italic } from "@tiptap/extension-italic";
+import { Link } from "@tiptap/extension-link";
+import { BulletList, ListItem, OrderedList } from "@tiptap/extension-list";
+import { Mention } from "@tiptap/extension-mention";
+import { Paragraph } from "@tiptap/extension-paragraph";
+import { Text } from "@tiptap/extension-text";
+import { Underline } from "@tiptap/extension-underline";
+import { UndoRedo } from "@tiptap/extensions";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { DOMSerializer } from "@tiptap/pm/model";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region ../ui/src/components/edyn/rich-text-editor/serialize.ts
+var MENTION_MARK = "data-rich-text-mention";
+var defaultMentionToText = (item) => `@${item.id}`;
+/**
+* The document as HTML. Not `editor.getHTML()`: that would write a mention as its chip element, and
+* the HTML must carry the plain text the app chose (`@person@example.test`) and nothing else.
+*/
+var serializeDocument = (doc, toText) => {
+	const schema = doc.type.schema;
+	const nodes = {
+		...DOMSerializer.nodesFromSchema(schema),
+		mention: (node) => [
+			"span",
+			{ [MENTION_MARK]: "" },
+			toText({
+				id: String(node.attrs.id ?? ""),
+				label: String(node.attrs.label ?? "")
+			})
+		]
+	};
+	const serializer = new DOMSerializer(nodes, DOMSerializer.marksFromSchema(schema));
+	const container = document.createElement("div");
+	container.appendChild(serializer.serializeFragment(doc.content));
+	for (const element of Array.from(container.querySelectorAll(`[${MENTION_MARK}]`))) element.replaceWith(document.createTextNode(element.textContent ?? ""));
+	return container.innerHTML;
+};
+/** No text and no mention. A document of blank paragraphs, spaces and line breaks is empty too. */
+var isDocumentEmpty = (doc) => {
+	if (doc.textContent.trim() !== "") return false;
+	let hasMention = false;
+	doc.descendants((node) => {
+		if (node.type.name === "mention") hasMention = true;
+		return !hasMention;
+	});
+	return !hasMention;
+};
+/** Characters the HTML text will have: a mention counts as the text it is written as. */
+var countCharacters = (doc, toText) => {
+	let total = 0;
+	doc.descendants((node) => {
+		if (node.isText) total += node.text?.length ?? 0;
+		else if (node.type.name === "mention") total += toText({
+			id: String(node.attrs.id ?? ""),
+			label: String(node.attrs.label ?? "")
+		}).length;
+		else if (node.type.name === "hardBreak") total += 1;
+		return true;
+	});
+	return total;
+};
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-editor/extensions.ts
+var MENTION_CHIP_CLASS = "rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary";
+var limitKey = new PluginKey("richTextMaxLength");
+/** Refuses an edit that would take the text over the limit (a paste included) and lets one that shortens it through. */
+var maxLengthExtension = (host) => Extension.create({
+	name: "maxLength",
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			key: limitKey,
+			filterTransaction: (tr, state) => {
+				const limit = host.maxLength();
+				if (!tr.docChanged || limit === void 0) return true;
+				const next = countCharacters(tr.doc, host.toText());
+				return next <= limit || next <= countCharacters(state.doc, host.toText());
+			}
+		})];
+	}
+});
+/**
+* The editor's whole schema: paragraph, line break, bold, italic, underline, bullet and numbered lists, link, and the
+* mention chip. Whatever else arrives (a paste, `value`) is not in the schema, so ProseMirror drops the markup and keeps
+* the text.
+*/
+var buildExtensions = (host) => [
+	Document,
+	Paragraph,
+	Text,
+	HardBreak,
+	Bold,
+	Italic,
+	Underline,
+	BulletList,
+	OrderedList.extend({ addAttributes() {
+		return {};
+	} }),
+	ListItem,
+	HorizontalRule,
+	Link.extend({ addAttributes() {
+		return { href: {
+			default: null,
+			parseHTML: (element) => element.getAttribute("href"),
+			renderHTML: (attributes) => attributes.href ? { href: attributes.href } : {}
+		} };
+	} }).configure({
+		openOnClick: false,
+		autolink: true,
+		linkOnPaste: true,
+		defaultProtocol: "https",
+		protocols: ["mailto"],
+		isAllowedUri: (url) => isAllowedRichTextHref(url),
+		HTMLAttributes: {
+			rel: null,
+			target: null,
+			class: null
+		}
+	}),
+	UndoRedo,
+	maxLengthExtension(host),
+	Mention.extend({ addAttributes() {
+		return {
+			id: {
+				default: null,
+				parseHTML: (element) => element.getAttribute("data-id"),
+				renderHTML: (attributes) => attributes.id ? { "data-id": attributes.id } : {}
+			},
+			label: {
+				default: null,
+				parseHTML: (element) => element.getAttribute("data-label"),
+				renderHTML: (attributes) => attributes.label ? { "data-label": attributes.label } : {}
+			}
+		};
+	} }).configure({
+		HTMLAttributes: { class: MENTION_CHIP_CLASS },
+		renderText: ({ node }) => `@${node.attrs.label ?? node.attrs.id}`,
+		renderHTML: ({ options, node }) => [
+			"span",
+			mergeAttributes(options.HTMLAttributes),
+			`@${node.attrs.label ?? node.attrs.id}`
+		],
+		suggestion: {
+			char: "@",
+			allow: () => host.mentionEnabled(),
+			items: () => [],
+			command: ({ editor, range, props }) => {
+				editor.chain().focus().insertContentAt(range, [{
+					type: "mention",
+					attrs: {
+						id: props.id,
+						label: props.label
+					}
+				}, {
+					type: "text",
+					text: " "
+				}]).run();
+			},
+			render: () => ({
+				onStart: (props) => host.onSuggestion(props),
+				onUpdate: (props) => host.onSuggestion(props),
+				onKeyDown: (props) => host.onSuggestionKey(props),
+				onExit: () => host.onSuggestion(null)
+			})
+		}
+	})
+];
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-editor/mention-list.tsx
+var FIRST = {
+	status: "loading",
+	items: [],
+	page: 1,
+	hasMore: false,
+	more: false,
+	active: 0
+};
+var toPage = (result) => Array.isArray(result) ? {
+	items: result,
+	hasMore: false
+} : result;
+var optionId = (listId, index) => `${listId}-${index}`;
+/** The list that opens under the caret when the writer types @. */
+var MentionList = ({ query, rect, config, labels, listId, onPick, keyHandler, onActiveChange }) => {
+	const [state, setState] = useState(FIRST);
+	const refSearch = useRef(config.search);
+	refSearch.current = config.search;
+	const refFirst = useRef(true);
+	const refController = useRef(null);
+	const refViewport = useRef(null);
+	const debounce = config.debounce ?? 250;
+	useEffect(() => {
+		const controller = new AbortController();
+		refController.current = controller;
+		setState((previous) => ({
+			...previous,
+			status: "loading",
+			page: 1,
+			more: false
+		}));
+		const timer = setTimeout(async () => {
+			try {
+				const page = toPage(await refSearch.current(query, {
+					page: 1,
+					signal: controller.signal
+				}));
+				if (controller.signal.aborted) return;
+				setState({
+					status: "ready",
+					items: page.items,
+					page: 1,
+					hasMore: page.hasMore === true,
+					more: false,
+					active: 0
+				});
+			} catch {
+				if (!controller.signal.aborted) setState((previous) => ({
+					...previous,
+					status: "error",
+					items: [],
+					hasMore: false
+				}));
+			}
+		}, refFirst.current ? 0 : debounce);
+		refFirst.current = false;
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [query, debounce]);
+	const loadMore = () => {
+		const controller = refController.current;
+		if (!controller || state.status !== "ready" || !state.hasMore || state.more) return;
+		const next = state.page + 1;
+		setState((previous) => ({
+			...previous,
+			more: true
+		}));
+		refSearch.current(query, {
+			page: next,
+			signal: controller.signal
+		}).then((result) => {
+			if (controller.signal.aborted) return;
+			const page = toPage(result);
+			setState((previous) => ({
+				...previous,
+				items: [...previous.items, ...page.items.filter((item) => !previous.items.some((known) => known.id === item.id))],
+				page: next,
+				hasMore: page.hasMore === true,
+				more: false
+			}));
+		}).catch(() => {
+			if (!controller.signal.aborted) setState((previous) => ({
+				...previous,
+				more: false,
+				hasMore: false
+			}));
+		});
+	};
+	const refLoadMore = useRef(loadMore);
+	refLoadMore.current = loadMore;
+	const activeItem = state.items[state.active];
+	useEffect(() => {
+		onActiveChange(activeItem ? optionId(listId, state.active) : void 0);
+	}, [
+		activeItem,
+		listId,
+		onActiveChange,
+		state.active
+	]);
+	useEffect(() => {
+		document.getElementById(optionId(listId, state.active))?.scrollIntoView({ block: "nearest" });
+	}, [listId, state.active]);
+	const watchSentinel = useCallback((node) => {
+		if (!node) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) refLoadMore.current();
+		}, { root: refViewport.current });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		keyHandler.current = (event) => {
+			const count = state.items.length;
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				return false;
+			}
+			if (count === 0) return false;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				const step = event.key === "ArrowDown" ? 1 : -1;
+				const next = (state.active + step + count) % count;
+				if (step === 1 && state.active === count - 1) refLoadMore.current();
+				setState((previous) => ({
+					...previous,
+					active: next
+				}));
+				return true;
+			}
+			if ((event.key === "Enter" || event.key === "Tab") && activeItem) {
+				onPick(activeItem);
+				return true;
+			}
+			return false;
+		};
+		return () => {
+			keyHandler.current = null;
+		};
+	}, [
+		activeItem,
+		keyHandler,
+		onPick,
+		state.active,
+		state.items.length
+	]);
+	const anchor = { getBoundingClientRect: () => rect?.() ?? new DOMRect(0, 0, 0, 0) };
+	const announcement = state.status === "loading" ? labels.mentionSearching : state.status === "error" ? labels.mentionError : state.items.length === 0 ? labels.mentionEmpty : labels.mentionResults.replace("{count}", String(state.items.length));
+	return /* @__PURE__ */ jsx(Popover, {
+		open: true,
+		onOpenChange: () => void 0,
+		children: /* @__PURE__ */ jsxs(PopoverContent, {
+			anchor,
+			align: "start",
+			side: "bottom",
+			sideOffset: 6,
+			initialFocus: false,
+			finalFocus: false,
+			"data-slot": "rich-text-mention-popup",
+			className: "w-72 gap-0 p-1",
+			children: [/* @__PURE__ */ jsxs(ScrollArea, {
+				className: "max-h-60",
+				viewportRef: refViewport,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						role: "listbox",
+						id: listId,
+						"aria-label": labels.mentionList,
+						className: cn("flex flex-col gap-px", state.items.length === 0 && "hidden"),
+						children: state.items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+							id: optionId(listId, index),
+							role: "option",
+							"aria-selected": index === state.active,
+							"data-slot": "rich-text-mention-option",
+							"data-highlighted": index === state.active ? "" : void 0,
+							className: cn(popupItemClass("base-ui"), "h-auto min-h-8 flex-col items-start gap-0"),
+							onMouseDown: (event) => event.preventDefault(),
+							onMouseMove: () => setState((previous) => previous.active === index ? previous : {
+								...previous,
+								active: index
+							}),
+							onClick: () => onPick(item),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.label
+							}), item.secondary ? /* @__PURE__ */ jsx("span", {
+								className: "truncate text-xs text-foreground/70",
+								children: item.secondary
+							}) : null]
+						}, item.id))
+					}),
+					state.status === "loading" && state.items.length === 0 ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground",
+						children: [/* @__PURE__ */ jsx(IconLoader2, {
+							className: "size-4 animate-spin motion-reduce:animate-none",
+							"aria-hidden": true
+						}), labels.mentionSearching]
+					}) : null,
+					state.status === "ready" && state.items.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-2 py-1.5 text-sm text-muted-foreground",
+						children: labels.mentionEmpty
+					}) : null,
+					state.status === "error" ? /* @__PURE__ */ jsx("div", {
+						className: "px-2 py-1.5 text-sm text-destructive",
+						children: labels.mentionError
+					}) : null,
+					state.hasMore ? /* @__PURE__ */ jsx("div", {
+						ref: watchSentinel,
+						className: "flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground",
+						children: state.more ? labels.mentionLoadingMore : null
+					}, state.items.length) : null
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: "sr-only",
+				children: announcement
+			})]
+		})
+	});
+};
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-editor/toolbar.tsx
+var BUTTON_CLASS = cn(toggleVariants({
+	variant: "default",
+	size: "sm"
+}), "size-7 px-0");
+/** A typed address becomes a link: "name@example.test" a mailto, "example.test" an https address. */
+var normalizeHref = (raw) => {
+	const value = raw.trim();
+	if (value === "" || /^[a-z][a-z0-9+.-]*:/i.test(value)) return value;
+	return /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;
+};
+var ToolbarButton = ({ label, pressed, disabled, onClick, children }) => /* @__PURE__ */ jsx(Toolbar.Button, {
+	type: "button",
+	"aria-label": label,
+	title: label,
+	"aria-pressed": pressed,
+	"data-pressed": pressed ? "" : void 0,
+	disabled,
+	className: BUTTON_CLASS,
+	onMouseDown: (event) => event.preventDefault(),
+	onClick,
+	children
+});
+var hrefAt = (editor, range) => {
+	const { doc } = editor.state;
+	const marks = range.from < range.to ? doc.nodeAt(range.from)?.marks ?? [] : doc.resolve(range.from).marks();
+	return String(marks.find((mark) => mark.type.name === "link")?.attrs.href ?? "");
+};
+var LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }) => {
+	const [address, setAddress] = useState("");
+	const [invalid, setInvalid] = useState(false);
+	useEffect(() => {
+		if (open) {
+			setAddress(range.current ? hrefAt(editor, range.current) : "");
+			setInvalid(false);
+		}
+	}, [
+		editor,
+		open,
+		range
+	]);
+	const apply = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const href = normalizeHref(address);
+		if (!isAllowedRichTextHref(href)) {
+			setInvalid(true);
+			return;
+		}
+		const saved = range.current ?? {
+			from: editor.state.selection.from,
+			to: editor.state.selection.to
+		};
+		const chain = editor.chain().focus().setTextSelection(saved);
+		if (saved.from === saved.to && !hrefAt(editor, saved)) chain.insertContent({
+			type: "text",
+			text: href,
+			marks: [{
+				type: "link",
+				attrs: { href }
+			}]
+		}).run();
+		else chain.extendMarkRange("link").setLink({ href }).run();
+		onOpenChange(false);
+	};
+	const remove = () => {
+		const saved = range.current ?? {
+			from: editor.state.selection.from,
+			to: editor.state.selection.to
+		};
+		editor.chain().focus().setTextSelection(saved).extendMarkRange("link").unsetLink().run();
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Toolbar.Button, {
+				type: "button",
+				"aria-label": labels.link,
+				title: labels.link,
+				"aria-pressed": active,
+				"data-pressed": active ? "" : void 0,
+				disabled,
+				className: BUTTON_CLASS
+			}),
+			children: /* @__PURE__ */ jsx(IconLink, { "aria-hidden": true })
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			className: "w-80",
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-2",
+				onSubmit: apply,
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						type: "text",
+						inputMode: "url",
+						"aria-label": labels.linkAddress,
+						"aria-invalid": invalid || void 0,
+						value: address,
+						onChange: (event) => {
+							setAddress(event.target.value);
+							setInvalid(false);
+						}
+					}),
+					invalid ? /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-destructive",
+						children: labels.linkInvalid
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-end gap-2",
+						children: [active ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: remove,
+							children: labels.linkRemove
+						}) : null, /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "sm",
+							children: labels.linkApply
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+var RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }) => {
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: current }) => ({
+			bold: current.isActive("bold"),
+			italic: current.isActive("italic"),
+			underline: current.isActive("underline"),
+			bullets: current.isActive("bulletList"),
+			numbers: current.isActive("orderedList"),
+			link: current.isActive("link")
+		})
+	});
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		"data-slot": "rich-text-toolbar",
+		"aria-label": labels.toolbar,
+		className: "flex flex-wrap items-center gap-0.5 border-b border-input p-1",
+		children: [
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.bold,
+				pressed: state.bold,
+				disabled,
+				onClick: () => editor.chain().focus().toggleBold().run(),
+				children: /* @__PURE__ */ jsx(IconBold, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.italic,
+				pressed: state.italic,
+				disabled,
+				onClick: () => editor.chain().focus().toggleItalic().run(),
+				children: /* @__PURE__ */ jsx(IconItalic, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.underline,
+				pressed: state.underline,
+				disabled,
+				onClick: () => editor.chain().focus().toggleUnderline().run(),
+				children: /* @__PURE__ */ jsx(IconUnderline, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(Toolbar.Separator, { className: "mx-1 h-4 w-px bg-border" }),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.bulletList,
+				pressed: state.bullets,
+				disabled,
+				onClick: () => editor.chain().focus().toggleBulletList().run(),
+				children: /* @__PURE__ */ jsx(IconList, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.numberedList,
+				pressed: state.numbers,
+				disabled,
+				onClick: () => editor.chain().focus().toggleOrderedList().run(),
+				children: /* @__PURE__ */ jsx(IconListNumbers, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(LinkControl, {
+				range: linkRange,
+				editor,
+				labels,
+				active: state.link,
+				disabled,
+				open: linkOpen,
+				onOpenChange: onLinkOpenChange
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.horizontalRule,
+				disabled,
+				onClick: () => editor.chain().focus().setHorizontalRule().run(),
+				children: /* @__PURE__ */ jsx(IconSeparatorHorizontal, { "aria-hidden": true })
+			}),
+			fields && fields.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Toolbar.Separator, { className: "mx-1 h-4 w-px bg-border" }), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				render: /* @__PURE__ */ jsx(Toolbar.Button, {
+					type: "button",
+					"aria-label": labels.insertField,
+					title: labels.insertField,
+					disabled,
+					className: BUTTON_CLASS
+				}),
+				children: /* @__PURE__ */ jsx(IconVariable, { "aria-hidden": true })
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "start",
+				className: "w-56",
+				children: fields.map((field) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: () => editor.chain().focus().insertContent({
+						type: "text",
+						text: `{{${field.id}}}`
+					}).run(),
+					children: field.label
+				}, field.id))
+			})] })] }) : null
+		]
+	});
+};
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-editor/types.ts
+var DEFAULT_RICH_TEXT_LABELS = {
+	toolbar: "Formatting",
+	bold: "Bold",
+	italic: "Italic",
+	underline: "Underline",
+	bulletList: "Bulleted list",
+	numberedList: "Numbered list",
+	link: "Link",
+	horizontalRule: "Horizontal line",
+	insertField: "Insert a field",
+	linkAddress: "Link address",
+	linkApply: "Apply",
+	linkRemove: "Remove link",
+	linkInvalid: "Enter an http, https or mailto address.",
+	mentionList: "Mentions",
+	mentionSearching: "Searching...",
+	mentionEmpty: "No matches",
+	mentionError: "The search failed",
+	mentionLoadingMore: "Loading more...",
+	mentionResults: "{count} results"
+};
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-editor/rich-text-editor.tsx
+var LINE = 1.5;
+/**
+* A small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists and links, with optional
+* @mentions the app answers asynchronously. The value is HTML in and out, and only the elements in `RICH_TEXT_ELEMENTS`
+* can come out (no class, no style), whatever is pasted. A mention is a chip while editing and plain text in the HTML.
+* The server should still sanitise: this is a convenience for the writer, not a security boundary.
+*/
+var RichTextEditor = ({ value, defaultValue = "", onChange, placeholder, disabled = false, readOnly = false, invalid = false, minRows = 6, maxRows = 20, maxLength, mention, fields, toolbar = true, labels, id, autoFocus = false, onPasteFiles, ref, className, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) => {
+	const isInvalid = invalid || ariaInvalid === true || ariaInvalid === "true";
+	const text = useMemo(() => ({
+		...DEFAULT_RICH_TEXT_LABELS,
+		...labels
+	}), [labels]);
+	const listId = useId();
+	const [suggestion, setSuggestion] = useState(null);
+	const [activeOption, setActiveOption] = useState(void 0);
+	const [linkOpen, setLinkOpen] = useState(false);
+	const refLinkRange = useRef(null);
+	const refKeys = useRef(null);
+	const refEmitted = useRef(void 0);
+	const editable = !disabled && !readOnly;
+	const showToolbar = toolbar && !readOnly;
+	const latest = useRef({
+		mention,
+		maxLength,
+		onChange,
+		onPasteFiles,
+		toolbar: showToolbar
+	});
+	latest.current = {
+		mention,
+		maxLength,
+		onChange,
+		onPasteFiles,
+		toolbar: showToolbar
+	};
+	const host = useMemo(() => ({
+		mentionEnabled: () => latest.current.mention !== void 0,
+		maxLength: () => latest.current.maxLength,
+		toText: () => latest.current.mention?.toText ?? defaultMentionToText,
+		onSuggestion: (props) => {
+			if (props === null) setActiveOption(void 0);
+			setSuggestion(props === null ? null : {
+				query: props.query,
+				rect: props.clientRect ?? null,
+				command: props.command
+			});
+		},
+		onSuggestionKey: ({ event }) => refKeys.current?.(event) ?? false
+	}), []);
+	const extensions = useMemo(() => buildExtensions(host), [host]);
+	const emit = useCallback((current) => {
+		const html = isDocumentEmpty(current.state.doc) ? "" : serializeDocument(current.state.doc, host.toText());
+		refEmitted.current = html;
+		return html;
+	}, [host]);
+	const attributes = useMemo(() => {
+		const entries = {
+			role: "textbox",
+			"aria-multiline": "true",
+			"aria-autocomplete": mention ? "list" : void 0,
+			"aria-controls": suggestion ? listId : void 0,
+			"aria-activedescendant": suggestion ? activeOption : void 0,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy,
+			"aria-invalid": isInvalid ? "true" : void 0,
+			"aria-readonly": readOnly ? "true" : void 0,
+			"aria-disabled": disabled ? "true" : void 0,
+			"aria-placeholder": placeholder,
+			tabindex: readOnly && !disabled ? "0" : void 0,
+			id,
+			"data-slot": "rich-text-editor-content",
+			class: cn(RICH_TEXT_BODY_CLASS, "min-h-(--rich-text-min) px-2.5 py-2 outline-none")
+		};
+		return Object.fromEntries(Object.entries(entries).filter((entry) => entry[1] !== void 0));
+	}, [
+		activeOption,
+		ariaDescribedBy,
+		ariaLabel,
+		ariaLabelledBy,
+		disabled,
+		id,
+		isInvalid,
+		listId,
+		mention,
+		placeholder,
+		readOnly,
+		suggestion
+	]);
+	const editor = useEditor({
+		extensions,
+		content: value ?? defaultValue,
+		editable,
+		autofocus: autoFocus ? "end" : false,
+		editorProps: {
+			attributes,
+			handlePaste: (_view, event) => {
+				const data = event.clipboardData;
+				if (!(data !== null && data.files.length > 0 && data.getData("text/plain") === "" && data.getData("text/html") === "") || !latest.current.onPasteFiles) return false;
+				latest.current.onPasteFiles(Array.from(data.files));
+				return true;
+			},
+			handleKeyDown: (view, event) => {
+				if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "k" && latest.current.toolbar) {
+					event.preventDefault();
+					refLinkRange.current = {
+						from: view.state.selection.from,
+						to: view.state.selection.to
+					};
+					setLinkOpen(true);
+					return true;
+				}
+				return false;
+			}
+		},
+		onBlur: () => {
+			setSuggestion(null);
+			setActiveOption(void 0);
+		},
+		onUpdate: ({ editor: current }) => {
+			latest.current.onChange?.(emit(current));
+		}
+	});
+	useImperativeHandle(ref, () => ({
+		insertText: (value) => {
+			editor.chain().focus().insertContent({
+				type: "text",
+				text: value
+			}).run();
+		},
+		focus: () => {
+			editor.commands.focus();
+		}
+	}), [editor]);
+	useEffect(() => {
+		editor.setEditable(editable);
+	}, [editable, editor]);
+	useEffect(() => {
+		if (value === void 0 || value === refEmitted.current) return;
+		refEmitted.current = value;
+		editor.commands.setContent(value, { emitUpdate: false });
+	}, [editor, value]);
+	const empty = useEditorState({
+		editor,
+		selector: ({ editor: current }) => isDocumentEmpty(current.state.doc)
+	});
+	const pick = useCallback((item) => {
+		suggestion?.command(item);
+	}, [suggestion]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor",
+		"data-invalid": isInvalid ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
+		className: cn("flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent text-base transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-input/50 data-disabled:opacity-50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:data-disabled:bg-input/80 dark:data-invalid:ring-destructive/40", className),
+		...props,
+		children: [
+			showToolbar ? /* @__PURE__ */ jsx(RichTextToolbar, {
+				editor,
+				labels: text,
+				fields,
+				disabled,
+				linkOpen,
+				linkRange: refLinkRange,
+				onLinkOpenChange: (next) => {
+					if (next && !linkOpen) refLinkRange.current = {
+						from: editor.state.selection.from,
+						to: editor.state.selection.to
+					};
+					setLinkOpen(next);
+				}
+			}) : null,
+			/* @__PURE__ */ jsxs(ScrollArea, {
+				className: "relative",
+				style: {
+					maxHeight: `${maxRows * LINE + 1}rem`,
+					["--rich-text-min"]: `${minRows * LINE + 1}rem`
+				},
+				focusable: false,
+				children: [empty && placeholder ? /* @__PURE__ */ jsx("p", {
+					"aria-hidden": true,
+					className: "pointer-events-none absolute start-2.5 top-2 text-muted-foreground",
+					children: placeholder
+				}) : null, /* @__PURE__ */ jsx(EditorContent, { editor })]
+			}),
+			suggestion && mention ? /* @__PURE__ */ jsx(MentionList, {
+				query: suggestion.query,
+				rect: suggestion.rect,
+				config: mention,
+				labels: text,
+				listId,
+				onPick: pick,
+				keyHandler: refKeys,
+				onActiveChange: setActiveOption
+			}) : null
+		]
+	});
+};
+//#endregion
+export { DEFAULT_RICH_TEXT_LABELS, RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, RichTextEditor };
+
+//# sourceMappingURL=rich-text-editor.js.map