@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/rich-text-editor.js

@@ -1,905 +1,4 @@
-import { c as Button, n as Popover, r as PopoverContent, s as PopoverTrigger, t as Input, u as cn } from "./chunks/input-syWxjY2U.js";
-import { C as RICH_TEXT_ELEMENTS, O as popupItemClass, S as RICH_TEXT_ATTRIBUTES, T as isAllowedRichTextHref, _ as DropdownMenuTrigger, a as DropdownMenuContent, k as ScrollArea, n as toggleVariants, r as DropdownMenu, s as DropdownMenuItem, v as RICH_TEXT_BODY_CLASS, w as RICH_TEXT_LINK_PROTOCOLS } from "./chunks/toggle-Bxg8P-61.js";
-import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useReducer, 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, TextSelection } 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/sync.ts
-/**
-* Whether commands may be called on the editor. TipTap builds an editor during the render, mounts its view later, and
-* destroys one that has not been mounted within a moment (useEditor then makes a new one), so an effect can be handed an
-* editor that is not there yet or no longer is. `isDestroyed` is true for both: it reads true until the view exists. A
-* destroyed editor has no command manager, so `editor.commands` throws on it.
-*/
-var isLive = (editor) => editor.isInitialized && !editor.isDestroyed;
-/**
-* Brings the editor to a value the parent passed in, if it is one the editor did not just report itself.
-* `known` is the last HTML the editor and the parent agree on (the starting value, then whatever the editor emitted or was
-* given). The caret stays where it was, kept inside the new content, so a value changed from outside while the writer is
-* typing does not throw the caret to the start.
-*/
-var syncValue = (editor, value, known) => {
-	if (!isLive(editor) || value === void 0 || value === known.current) return;
-	known.current = value;
-	const { from, to } = editor.state.selection;
-	editor.commands.setContent(value, { emitUpdate: false });
-	editor.commands.command(({ tr }) => {
-		const size = tr.doc.content.size;
-		tr.setSelection(TextSelection.between(tr.doc.resolve(Math.min(from, size)), tr.doc.resolve(Math.min(to, size))));
-		return true;
-	});
-};
-/** Sets whether the editor can be edited without telling the app something changed (TipTap emits an update by default). */
-var syncEditable = (editor, editable) => {
-	if (isLive(editor) && editor.isEditable !== editable) editor.setEditable(editable, false);
-};
-//#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 refKnown = useRef(value ?? defaultValue);
-	const refPending = useRef([]);
-	const [, wake] = useReducer((count) => count + 1, 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());
-		refKnown.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));
-		}
-	});
-	const ready = isLive(editor);
-	useEffect(() => {
-		editor.on("create", wake);
-		wake();
-		return () => {
-			editor.off("create", wake);
-		};
-	}, [editor]);
-	const whenLive = useCallback((action) => {
-		if (isLive(editor)) action(editor);
-		else refPending.current.push(action);
-	}, [editor]);
-	useImperativeHandle(ref, () => ({
-		insertText: (text) => {
-			whenLive((live) => {
-				live.chain().focus().insertContent({
-					type: "text",
-					text
-				}).run();
-			});
-		},
-		focus: () => {
-			whenLive((live) => {
-				live.commands.focus();
-			});
-		}
-	}), [whenLive]);
-	useEffect(() => {
-		if (!ready || !isLive(editor)) return;
-		for (const action of refPending.current.splice(0)) action(editor);
-	}, [editor, ready]);
-	useEffect(() => {
-		if (ready) syncEditable(editor, editable);
-	}, [
-		editable,
-		editor,
-		ready
-	]);
-	useEffect(() => {
-		if (ready) syncValue(editor, value, refKnown);
-	}, [
-		editor,
-		ready,
-		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
+import { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS } from "./ui/src/components/edyn/rich-text-content/allow-list.js";
+import { DEFAULT_RICH_TEXT_LABELS } from "./ui/src/components/edyn/rich-text-editor/types.js";
+import { RichTextEditor } from "./ui/src/components/edyn/rich-text-editor/rich-text-editor.js";
 export { DEFAULT_RICH_TEXT_LABELS, RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, RichTextEditor };
-
-//# sourceMappingURL=rich-text-editor.js.map