@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/ui/src/components/edyn/rich-text-editor/mention-list.js

@@ -0,0 +1,232 @@
+import { cn } from "../../../lib/utils.js";
+import { popupItemClass } from "../../../lib/popup-list.js";
+import { Popover, PopoverContent } from "../../ui/popover/popover.js";
+import { ScrollArea } from "../../ui/scroll-area/scroll-area.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconLoader2 } from "@tabler/icons-react";
+//#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
+export { MentionList };
+
+//# sourceMappingURL=mention-list.js.map

package/dist/ui/src/components/edyn/rich-text-editor/mention-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-list.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/mention-list.tsx"],"sourcesContent":["import { Popover, PopoverContent } from '@edyn/ui/components/ui/popover';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconLoader2 } from '@tabler/icons-react';\nimport { type RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport type { IRichTextLabels, IRichTextMention, IRichTextMentionItem, IRichTextMentionPage } from './types';\n\ninterface IListState {\n  status: 'loading' | 'ready' | 'error';\n  items: IRichTextMentionItem[];\n  page: number;\n  hasMore: boolean;\n  more: boolean;\n  active: number;\n}\n\nconst FIRST: IListState = { status: 'loading', items: [], page: 1, hasMore: false, more: false, active: 0 };\n\nconst toPage = (result: IRichTextMentionItem[] | IRichTextMentionPage): IRichTextMentionPage =>\n  Array.isArray(result) ? { items: result, hasMore: false } : result;\n\nexport interface IMentionListProps {\n  query: string;\n  /** Where the @ was typed. */\n  rect: (() => DOMRect | null) | null;\n  config: IRichTextMention;\n  labels: IRichTextLabels;\n  listId: string;\n  onPick: (item: IRichTextMentionItem) => void;\n  /** The editor keeps focus, so the list is driven by its keys: the editor calls this one. */\n  keyHandler: RefObject<((event: KeyboardEvent) => boolean) | null>;\n  /** The id of the option the editor should name as `aria-activedescendant`. */\n  onActiveChange: (optionId: string | undefined) => void;\n}\n\nconst optionId = (listId: string, index: number): string => `${listId}-${index}`;\n\n/** The list that opens under the caret when the writer types @. */\nexport const MentionList = ({ query, rect, config, labels, listId, onPick, keyHandler, onActiveChange }: IMentionListProps) => {\n  const [state, setState] = useState<IListState>(FIRST);\n  const refSearch = useRef(config.search);\n  refSearch.current = config.search;\n  const refFirst = useRef(true);\n  const refController = useRef<AbortController | null>(null);\n  const refViewport = useRef<HTMLDivElement | null>(null);\n  const debounce = config.debounce ?? 250;\n\n  useEffect(() => {\n    const controller = new AbortController();\n    refController.current = controller;\n    setState((previous) => ({ ...previous, status: 'loading', page: 1, more: false }));\n    const timer = setTimeout(\n      async () => {\n        try {\n          const page = toPage(await refSearch.current(query, { page: 1, signal: controller.signal }));\n          if (controller.signal.aborted) {\n            return;\n          }\n          setState({ status: 'ready', items: page.items, page: 1, hasMore: page.hasMore === true, more: false, active: 0 });\n        } catch {\n          if (!controller.signal.aborted) {\n            setState((previous) => ({ ...previous, status: 'error', items: [], hasMore: false }));\n          }\n        }\n      },\n      refFirst.current ? 0 : debounce,\n    );\n    refFirst.current = false;\n    return () => {\n      clearTimeout(timer);\n      controller.abort();\n    };\n  }, [query, debounce]);\n\n  const loadMore = () => {\n    const controller = refController.current;\n    if (!controller || state.status !== 'ready' || !state.hasMore || state.more) {\n      return;\n    }\n    const next = state.page + 1;\n    setState((previous) => ({ ...previous, more: true }));\n    refSearch\n      .current(query, { page: next, signal: controller.signal })\n      .then((result) => {\n        if (controller.signal.aborted) {\n          return;\n        }\n        const page = toPage(result);\n        setState((previous) => ({\n          ...previous,\n          items: [...previous.items, ...page.items.filter((item) => !previous.items.some((known) => known.id === item.id))],\n          page: next,\n          hasMore: page.hasMore === true,\n          more: false,\n        }));\n      })\n      .catch(() => {\n        if (!controller.signal.aborted) {\n          setState((previous) => ({ ...previous, more: false, hasMore: false }));\n        }\n      });\n  };\n  const refLoadMore = useRef(loadMore);\n  refLoadMore.current = loadMore;\n\n  const activeItem = state.items[state.active];\n\n  useEffect(() => {\n    onActiveChange(activeItem ? optionId(listId, state.active) : undefined);\n  }, [activeItem, listId, onActiveChange, state.active]);\n\n  useEffect(() => {\n    document.getElementById(optionId(listId, state.active))?.scrollIntoView({ block: 'nearest' });\n  }, [listId, state.active]);\n\n  const watchSentinel = useCallback((node: HTMLDivElement | null) => {\n    if (!node) {\n      return;\n    }\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          refLoadMore.current();\n        }\n      },\n      { root: refViewport.current },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    keyHandler.current = (event) => {\n      const count = state.items.length;\n      if (event.key === 'Escape') {\n        event.stopPropagation();\n        return false;\n      }\n      if (count === 0) {\n        return false;\n      }\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        const step = event.key === 'ArrowDown' ? 1 : -1;\n        const next = (state.active + step + count) % count;\n        if (step === 1 && state.active === count - 1) {\n          refLoadMore.current();\n        }\n        setState((previous) => ({ ...previous, active: next }));\n        return true;\n      }\n      if ((event.key === 'Enter' || event.key === 'Tab') && activeItem) {\n        onPick(activeItem);\n        return true;\n      }\n      return false;\n    };\n    return () => {\n      keyHandler.current = null;\n    };\n  }, [activeItem, keyHandler, onPick, state.active, state.items.length]);\n\n  const anchor = { getBoundingClientRect: () => rect?.() ?? new DOMRect(0, 0, 0, 0) };\n  const announcement =\n    state.status === 'loading'\n      ? labels.mentionSearching\n      : state.status === 'error'\n        ? labels.mentionError\n        : state.items.length === 0\n          ? labels.mentionEmpty\n          : labels.mentionResults.replace('{count}', String(state.items.length));\n\n  return (\n    <Popover open onOpenChange={() => undefined}>\n      <PopoverContent\n        anchor={anchor}\n        align=\"start\"\n        side=\"bottom\"\n        sideOffset={6}\n        initialFocus={false}\n        finalFocus={false}\n        data-slot=\"rich-text-mention-popup\"\n        className=\"w-72 gap-0 p-1\"\n      >\n        <ScrollArea className=\"max-h-60\" viewportRef={refViewport}>\n          <div\n            role=\"listbox\"\n            id={listId}\n            aria-label={labels.mentionList}\n            className={cn('flex flex-col gap-px', state.items.length === 0 && 'hidden')}\n          >\n            {state.items.map((item, index) => (\n              // biome-ignore lint/a11y/useKeyWithClickEvents: the editor keeps focus and drives the list with its own keys\n              // biome-ignore lint/a11y/useFocusableInteractive: options are named by aria-activedescendant on the editor, never focused\n              <div\n                key={item.id}\n                id={optionId(listId, index)}\n                role=\"option\"\n                aria-selected={index === state.active}\n                data-slot=\"rich-text-mention-option\"\n                data-highlighted={index === state.active ? '' : undefined}\n                className={cn(popupItemClass('base-ui'), 'h-auto min-h-8 flex-col items-start gap-0')}\n                onMouseDown={(event) => event.preventDefault()}\n                onMouseMove={() => setState((previous) => (previous.active === index ? previous : { ...previous, active: index }))}\n                onClick={() => onPick(item)}\n              >\n                <span className=\"truncate\">{item.label}</span>\n                {item.secondary ? <span className=\"truncate text-xs text-foreground/70\">{item.secondary}</span> : null}\n              </div>\n            ))}\n          </div>\n          {state.status === 'loading' && state.items.length === 0 ? (\n            <div className=\"flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground\">\n              <IconLoader2 className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden />\n              {labels.mentionSearching}\n            </div>\n          ) : null}\n          {state.status === 'ready' && state.items.length === 0 ? (\n            <div className=\"px-2 py-1.5 text-sm text-muted-foreground\">{labels.mentionEmpty}</div>\n          ) : null}\n          {state.status === 'error' ? <div className=\"px-2 py-1.5 text-sm text-destructive\">{labels.mentionError}</div> : null}\n          {state.hasMore ? (\n            <div key={state.items.length} ref={watchSentinel} className=\"flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground\">\n              {state.more ? labels.mentionLoadingMore : null}\n            </div>\n          ) : null}\n        </ScrollArea>\n        <div role=\"status\" className=\"sr-only\">\n          {announcement}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.d.ts

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { IRichTextEditorHandle, IRichTextField, IRichTextLabels, IRichTextMention } from './types';
+export interface IRichTextEditorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'id'> {
+    /** The HTML, when the parent owns it. Pass back what `onChange` gave. An empty editor is `""`. */
+    value?: string;
+    /** The HTML to start from when the editor owns its own value. */
+    defaultValue?: string;
+    /** Called with the HTML after every edit. Only the elements in `RICH_TEXT_ELEMENTS` can appear, and `""` when there is no text. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shows the content and keeps it selectable and copyable, with no toolbar. */
+    readOnly?: boolean;
+    /** Draws the error border and sets `aria-invalid`. The message is the form's to draw: point `aria-describedby` at it. */
+    invalid?: boolean;
+    /**
+     * Lines the box is tall when empty.
+     * @default 6
+     */
+    minRows?: number;
+    /**
+     * Lines it grows to before it scrolls inside.
+     * @default 20
+     */
+    maxRows?: number;
+    /** The most characters of text (a mention counts as the text it is written as). An edit past it is refused. Off by default. */
+    maxLength?: number;
+    /** Turns @ into a search the app answers. Without it, @ is an ordinary character. */
+    mention?: IRichTextMention;
+    /** Adds an "Insert a field" menu that writes `{{id}}` at the caret. */
+    fields?: IRichTextField[];
+    /**
+     * Whether the formatting toolbar shows.
+     * @default true
+     */
+    toolbar?: boolean;
+    /** Replaces any of the strings the editor shows (the defaults are English). */
+    labels?: Partial<IRichTextLabels>;
+    /** On the editable element, so a form can name it. */
+    id?: string;
+    autoFocus?: boolean;
+    /** Called with the files when the writer pastes only files (a screenshot). Without it, such a paste does nothing. */
+    onPasteFiles?: (files: File[]) => void;
+    /** Gives `insertText` and `focus`, for buttons outside the editor. */
+    ref?: Ref<IRichTextEditorHandle>;
+}
+/**
+ * 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.
+ */
+export declare const RichTextEditor: ({ value, defaultValue, onChange, placeholder, disabled, readOnly, invalid, minRows, maxRows, maxLength, mention, fields, toolbar, labels, id, autoFocus, onPasteFiles, ref, className, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: IRichTextEditorProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js

@@ -0,0 +1,244 @@
+import { cn } from "../../../lib/utils.js";
+import { ScrollArea } from "../../ui/scroll-area/scroll-area.js";
+import { RICH_TEXT_BODY_CLASS } from "../rich-text-content/rich-text-content.js";
+import { defaultMentionToText, isDocumentEmpty, serializeDocument } from "./serialize.js";
+import { buildExtensions } from "./extensions.js";
+import { MentionList } from "./mention-list.js";
+import { isLive, syncEditable, syncValue } from "./sync.js";
+import { RichTextToolbar } from "./toolbar.js";
+import { DEFAULT_RICH_TEXT_LABELS } from "./types.js";
+import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+//#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-control bg-transparent text-base transition-colors focus-within:outline-solid 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 { RichTextEditor };
+
+//# sourceMappingURL=rich-text-editor.js.map

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { RICH_TEXT_BODY_CLASS } from '@edyn/ui/components/edyn/rich-text-content/rich-text-content';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type { Editor } from '@tiptap/core';\nimport { EditorContent, useEditor, useEditorState } from '@tiptap/react';\nimport type { SuggestionProps } from '@tiptap/suggestion';\nimport {\n  type ComponentPropsWithoutRef,\n  type Ref,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\nimport { buildExtensions, type IEditorHost } from './extensions';\nimport { MentionList } from './mention-list';\nimport { defaultMentionToText, isDocumentEmpty, serializeDocument } from './serialize';\nimport { isLive, syncEditable, syncValue } from './sync';\nimport { type ILinkRange, RichTextToolbar } from './toolbar';\nimport {\n  DEFAULT_RICH_TEXT_LABELS,\n  type IRichTextEditorHandle,\n  type IRichTextField,\n  type IRichTextLabels,\n  type IRichTextMention,\n  type IRichTextMentionItem,\n} from './types';\n\nconst LINE = 1.5;\n\ninterface ISuggestionState {\n  query: string;\n  rect: (() => DOMRect | null) | null;\n  command: (item: IRichTextMentionItem) => void;\n}\n\nexport interface IRichTextEditorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'id'> {\n  /** The HTML, when the parent owns it. Pass back what `onChange` gave. An empty editor is `\"\"`. */\n  value?: string;\n  /** The HTML to start from when the editor owns its own value. */\n  defaultValue?: string;\n  /** Called with the HTML after every edit. Only the elements in `RICH_TEXT_ELEMENTS` can appear, and `\"\"` when there is no text. */\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Shows the content and keeps it selectable and copyable, with no toolbar. */\n  readOnly?: boolean;\n  /** Draws the error border and sets `aria-invalid`. The message is the form's to draw: point `aria-describedby` at it. */\n  invalid?: boolean;\n  /**\n   * Lines the box is tall when empty.\n   * @default 6\n   */\n  minRows?: number;\n  /**\n   * Lines it grows to before it scrolls inside.\n   * @default 20\n   */\n  maxRows?: number;\n  /** The most characters of text (a mention counts as the text it is written as). An edit past it is refused. Off by default. */\n  maxLength?: number;\n  /** Turns @ into a search the app answers. Without it, @ is an ordinary character. */\n  mention?: IRichTextMention;\n  /** Adds an \"Insert a field\" menu that writes `{{id}}` at the caret. */\n  fields?: IRichTextField[];\n  /**\n   * Whether the formatting toolbar shows.\n   * @default true\n   */\n  toolbar?: boolean;\n  /** Replaces any of the strings the editor shows (the defaults are English). */\n  labels?: Partial<IRichTextLabels>;\n  /** On the editable element, so a form can name it. */\n  id?: string;\n  autoFocus?: boolean;\n  /** Called with the files when the writer pastes only files (a screenshot). Without it, such a paste does nothing. */\n  onPasteFiles?: (files: File[]) => void;\n  /** Gives `insertText` and `focus`, for buttons outside the editor. */\n  ref?: Ref<IRichTextEditorHandle>;\n}\n\n/**\n * A small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists and links, with optional\n * @mentions the app answers asynchronously. The value is HTML in and out, and only the elements in `RICH_TEXT_ELEMENTS`\n * can come out (no class, no style), whatever is pasted. A mention is a chip while editing and plain text in the HTML.\n * The server should still sanitise: this is a convenience for the writer, not a security boundary.\n */\nexport const RichTextEditor = ({\n  value,\n  defaultValue = '',\n  onChange,\n  placeholder,\n  disabled = false,\n  readOnly = false,\n  invalid = false,\n  minRows = 6,\n  maxRows = 20,\n  maxLength,\n  mention,\n  fields,\n  toolbar = true,\n  labels,\n  id,\n  autoFocus = false,\n  onPasteFiles,\n  ref,\n  className,\n  'aria-invalid': ariaInvalid,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: IRichTextEditorProps) => {\n  const isInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';\n  const text = useMemo(() => ({ ...DEFAULT_RICH_TEXT_LABELS, ...labels }), [labels]);\n  const listId = useId();\n  const [suggestion, setSuggestion] = useState<ISuggestionState | null>(null);\n  const [activeOption, setActiveOption] = useState<string | undefined>(undefined);\n  const [linkOpen, setLinkOpen] = useState(false);\n  const refLinkRange = useRef<ILinkRange | null>(null);\n  const refKeys = useRef<((event: KeyboardEvent) => boolean) | null>(null);\n  // What the editor and the parent agree on. It starts as the value the editor is built from, so a controlled value\n  // that has not changed asks for nothing at mount.\n  const refKnown = useRef<string | undefined>(value ?? defaultValue);\n  const refPending = useRef<Array<(live: Editor) => void>>([]);\n  const [, wake] = useReducer((count: number) => count + 1, 0);\n  const editable = !disabled && !readOnly;\n  const showToolbar = toolbar && !readOnly;\n\n  const latest = useRef({ mention, maxLength, onChange, onPasteFiles, toolbar: showToolbar });\n  latest.current = { mention, maxLength, onChange, onPasteFiles, toolbar: showToolbar };\n\n  const host = useMemo<IEditorHost>(\n    () => ({\n      mentionEnabled: () => latest.current.mention !== undefined,\n      maxLength: () => latest.current.maxLength,\n      toText: () => latest.current.mention?.toText ?? defaultMentionToText,\n      onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => {\n        if (props === null) {\n          setActiveOption(undefined);\n        }\n        setSuggestion(props === null ? null : { query: props.query, rect: props.clientRect ?? null, command: props.command });\n      },\n      onSuggestionKey: ({ event }) => refKeys.current?.(event) ?? false,\n    }),\n    [],\n  );\n  const extensions = useMemo(() => buildExtensions(host), [host]);\n\n  const emit = useCallback(\n    (current: Editor): string => {\n      const html = isDocumentEmpty(current.state.doc) ? '' : serializeDocument(current.state.doc, host.toText());\n      refKnown.current = html;\n      return html;\n    },\n    [host],\n  );\n\n  const attributes = useMemo(() => {\n    const entries: Record<string, string | undefined> = {\n      role: 'textbox',\n      'aria-multiline': 'true',\n      'aria-autocomplete': mention ? 'list' : undefined,\n      'aria-controls': suggestion ? listId : undefined,\n      'aria-activedescendant': suggestion ? activeOption : undefined,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': isInvalid ? 'true' : undefined,\n      'aria-readonly': readOnly ? 'true' : undefined,\n      'aria-disabled': disabled ? 'true' : undefined,\n      'aria-placeholder': placeholder,\n      tabindex: readOnly && !disabled ? '0' : undefined,\n      id,\n      'data-slot': 'rich-text-editor-content',\n      class: cn(RICH_TEXT_BODY_CLASS, 'min-h-(--rich-text-min) px-2.5 py-2 outline-none'),\n    };\n    return Object.fromEntries(Object.entries(entries).filter((entry): entry is [string, string] => entry[1] !== undefined));\n  }, [activeOption, ariaDescribedBy, ariaLabel, ariaLabelledBy, disabled, id, isInvalid, listId, mention, placeholder, readOnly, suggestion]);\n\n  const editor = useEditor({\n    extensions,\n    content: value ?? defaultValue,\n    editable,\n    autofocus: autoFocus ? 'end' : false,\n    editorProps: {\n      attributes,\n      handlePaste: (_view, event) => {\n        const data = event.clipboardData;\n        const onlyFiles = data !== null && data.files.length > 0 && data.getData('text/plain') === '' && data.getData('text/html') === '';\n        if (!onlyFiles || !latest.current.onPasteFiles) {\n          return false;\n        }\n        latest.current.onPasteFiles(Array.from(data.files));\n        return true;\n      },\n      handleKeyDown: (view, event) => {\n        if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k' && latest.current.toolbar) {\n          event.preventDefault();\n          refLinkRange.current = { from: view.state.selection.from, to: view.state.selection.to };\n          setLinkOpen(true);\n          return true;\n        }\n        return false;\n      },\n    },\n    onBlur: () => {\n      setSuggestion(null);\n      setActiveOption(undefined);\n    },\n    onUpdate: ({ editor: current }) => {\n      latest.current.onChange?.(emit(current));\n    },\n  });\n\n  // useEditor can replace the editor (it destroys one that was not mounted in time, and in development a second render\n  // makes a second), so readiness is read off the editor in hand: wake up when this one finishes initialising.\n  const ready = isLive(editor);\n  useEffect(() => {\n    editor.on('create', wake);\n    wake();\n    return () => {\n      editor.off('create', wake);\n    };\n  }, [editor]);\n\n  const whenLive = useCallback(\n    (action: (live: Editor) => void) => {\n      if (isLive(editor)) {\n        action(editor);\n      } else {\n        refPending.current.push(action);\n      }\n    },\n    [editor],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      insertText: (text) => {\n        whenLive((live) => {\n          live.chain().focus().insertContent({ type: 'text', text }).run();\n        });\n      },\n      focus: () => {\n        whenLive((live) => {\n          live.commands.focus();\n        });\n      },\n    }),\n    [whenLive],\n  );\n\n  useEffect(() => {\n    if (!ready || !isLive(editor)) {\n      return;\n    }\n    for (const action of refPending.current.splice(0)) {\n      action(editor);\n    }\n  }, [editor, ready]);\n\n  useEffect(() => {\n    if (ready) {\n      syncEditable(editor, editable);\n    }\n  }, [editable, editor, ready]);\n\n  useEffect(() => {\n    if (ready) {\n      syncValue(editor, value, refKnown);\n    }\n  }, [editor, ready, value]);\n\n  const empty = useEditorState({ editor, selector: ({ editor: current }) => isDocumentEmpty(current.state.doc) });\n\n  const pick = useCallback(\n    (item: IRichTextMentionItem) => {\n      suggestion?.command(item);\n    },\n    [suggestion],\n  );\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      data-invalid={isInvalid ? '' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      data-readonly={readOnly ? '' : undefined}\n      className={cn(\n        'flex w-full min-w-0 flex-col rounded-lg border border-control bg-transparent text-base transition-colors focus-within:outline-solid 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',\n        className,\n      )}\n      {...props}\n    >\n      {showToolbar ? (\n        <RichTextToolbar\n          editor={editor}\n          labels={text}\n          fields={fields}\n          disabled={disabled}\n          linkOpen={linkOpen}\n          linkRange={refLinkRange}\n          onLinkOpenChange={(next) => {\n            if (next && !linkOpen) {\n              refLinkRange.current = { from: editor.state.selection.from, to: editor.state.selection.to };\n            }\n            setLinkOpen(next);\n          }}\n        />\n      ) : null}\n      <ScrollArea\n        className=\"relative\"\n        style={{ maxHeight: `${maxRows * LINE + 1}rem`, ['--rich-text-min' as string]: `${minRows * LINE + 1}rem` }}\n        focusable={false}\n      >\n        {empty && placeholder ? (\n          <p aria-hidden className=\"pointer-events-none absolute start-2.5 top-2 text-muted-foreground\">\n            {placeholder}\n          </p>\n        ) : null}\n        <EditorContent editor={editor} />\n      </ScrollArea>\n      {suggestion && mention ? (\n        <MentionList\n          query={suggestion.query}\n          rect={suggestion.rect}\n          config={mention}\n          labels={text}\n          listId={listId}\n          onPick={pick}\n          keyHandler={refKeys}\n          onActiveChange={setActiveOption}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The editor's schema decides what HTML can come out, whatever goes in. These tests drive the real extension set
+ * through a headless ProseMirror editor and read what it serialises, so the allow-list the docs promise is the one
+ * that is checked. Typing, focus and the mention list need a real browser: e2e/rich-text-editor.spec.ts.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-editor/serialize.d.ts

@@ -0,0 +1,13 @@
+import { Node as TProseNode } from '@tiptap/pm/model';
+import { IRichTextMention } from './types';
+export type TMentionToText = NonNullable<IRichTextMention['toText']>;
+export declare const defaultMentionToText: TMentionToText;
+/**
+ * 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.
+ */
+export declare const serializeDocument: (doc: TProseNode, toText: TMentionToText) => string;
+/** No text and no mention. A document of blank paragraphs, spaces and line breaks is empty too. */
+export declare const isDocumentEmpty: (doc: TProseNode) => boolean;
+/** Characters the HTML text will have: a mention counts as the text it is written as. */
+export declare const countCharacters: (doc: TProseNode, toText: TMentionToText) => number;