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

package/dist/ui/src/components/edyn/progress-line/progress-line.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, CSSProperties } from 'react';
+/**
+ * The line's colour: an app sets --progress-line (on :root, or on any element above the
+ * line) to match its accent. The fallback is read where the line is, so it follows the
+ * theme, which a default declared once on :root would not.
+ */
+export declare const PROGRESS_LINE_COLOR = "var(--progress-line, var(--primary))";
+export interface IProgressLineProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'style' | 'role'> {
+    /** Work is under way. */
+    active: boolean;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A thin line in the accent (--progress-line, by default --primary) that runs along the top of what is loading (a table's rows
+ * under its header, a page under the top bar). It waits a moment before it shows, so
+ * quick work never flashes it; it eases towards the end without reaching it while the
+ * work runs; when the work is done it runs to the end and only then fades. More work
+ * before it has gone carries on from where it is. With reduced motion it is a
+ * full-width line that fades.
+ */
+export declare const ProgressLine: ({ active, label, className, style, ...props }: IProgressLineProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/progress-line/progress-line.js

@@ -0,0 +1,100 @@
+import { cn } from "../../../lib/utils.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/edyn/progress-line/progress-line.tsx
+/** Work quicker than this shows no line at all. */
+var START_DELAY = 150;
+var FINISH = 150;
+var FADE = 200;
+/** How far an ordinary run eases towards the end without reaching it. */
+var RUN_TARGET = .85;
+/**
+* The line's colour: an app sets --progress-line (on :root, or on any element above the
+* line) to match its accent. The fallback is read where the line is, so it follows the
+* theme, which a default declared once on :root would not.
+*/
+var PROGRESS_LINE_COLOR = "var(--progress-line, var(--primary))";
+var reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var scaleOf = (line) => {
+	const transform = line === null ? "none" : getComputedStyle(line).transform;
+	return transform === "none" ? 0 : new DOMMatrixReadOnly(transform).a;
+};
+/**
+* A thin line in the accent (--progress-line, by default --primary) that runs along the top of what is loading (a table's rows
+* under its header, a page under the top bar). It waits a moment before it shows, so
+* quick work never flashes it; it eases towards the end without reaching it while the
+* work runs; when the work is done it runs to the end and only then fades. More work
+* before it has gone carries on from where it is. With reduced motion it is a
+* full-width line that fades.
+*/
+var ProgressLine = ({ active, label = "Loading", className, style, ...props }) => {
+	const [phase, setPhase] = useState("idle");
+	const [target, setTarget] = useState(RUN_TARGET);
+	const refPhase = useRef("idle");
+	const refLine = useRef(null);
+	useEffect(() => {
+		let timer;
+		const go = (next) => {
+			refPhase.current = next;
+			setPhase(next);
+		};
+		const later = (milliseconds, run) => {
+			timer = window.setTimeout(run, milliseconds);
+		};
+		const fade = () => {
+			go("fading");
+			later(FADE, () => go("idle"));
+		};
+		const phaseNow = refPhase.current;
+		if (active) {
+			if (phaseNow === "idle" || phaseNow === "waiting") {
+				go("waiting");
+				later(START_DELAY, () => {
+					setTarget(RUN_TARGET);
+					go("running");
+				});
+			} else if (phaseNow === "finishing" || phaseNow === "fading") {
+				const reached = scaleOf(refLine.current);
+				setTarget(reached > .8 ? Math.min(.97, reached + .04) : RUN_TARGET);
+				go("running");
+			}
+		} else if (phaseNow === "waiting") go("idle");
+		else if (phaseNow === "running" || phaseNow === "finishing") {
+			if (reducedMotion()) fade();
+			else {
+				go("finishing");
+				later(FINISH, fade);
+			}
+		} else if (phaseNow === "fading") later(FADE, () => go("idle"));
+		return () => window.clearTimeout(timer);
+	}, [active]);
+	const reduced = phase !== "idle" && reducedMotion();
+	const scale = phase === "idle" || phase === "waiting" ? 0 : phase === "running" && !reduced ? target : 1;
+	const transition = phase === "running" && !reduced ? "transform 8s cubic-bezier(0.1, 0.7, 0.15, 1), opacity 120ms ease-out" : phase === "finishing" ? `transform ${FINISH}ms ease-out` : phase === "fading" ? `opacity ${FADE}ms ease-out` : "none";
+	const shown = phase === "running" || phase === "finishing" || phase === "fading";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "progress-line",
+		role: "progressbar",
+		"aria-label": label,
+		...props,
+		"aria-hidden": shown && phase !== "fading" ? void 0 : true,
+		"data-phase": phase,
+		className: cn("pointer-events-none h-0.5 overflow-hidden", className),
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: refLine,
+			"data-slot": "progress-line-bar",
+			className: "h-full origin-left",
+			style: {
+				backgroundColor: PROGRESS_LINE_COLOR,
+				transform: `scaleX(${scale})`,
+				opacity: phase === "fading" || !shown ? 0 : 1,
+				transition
+			}
+		})
+	});
+};
+//#endregion
+export { PROGRESS_LINE_COLOR, ProgressLine };
+
+//# sourceMappingURL=progress-line.js.map

package/dist/ui/src/components/edyn/progress-line/progress-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-line.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/progress-line/progress-line.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { type ComponentPropsWithoutRef, type CSSProperties, useEffect, useRef, useState } from 'react';\n\ntype TPhase = 'idle' | 'waiting' | 'running' | 'finishing' | 'fading';\n\n/** Work quicker than this shows no line at all. */\nconst START_DELAY = 150;\nconst FINISH = 150;\nconst FADE = 200;\n/** How far an ordinary run eases towards the end without reaching it. */\nconst RUN_TARGET = 0.85;\n\n/**\n * The line's colour: an app sets --progress-line (on :root, or on any element above the\n * line) to match its accent. The fallback is read where the line is, so it follows the\n * theme, which a default declared once on :root would not.\n */\nexport const PROGRESS_LINE_COLOR = 'var(--progress-line, var(--primary))';\n\nconst reducedMotion = (): boolean => window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n// How far the line has got: its scale along x, read from the transform it is drawn with right now.\nconst scaleOf = (line: HTMLElement | null): number => {\n  const transform = line === null ? 'none' : getComputedStyle(line).transform;\n  return transform === 'none' ? 0 : new DOMMatrixReadOnly(transform).a;\n};\n\nexport interface IProgressLineProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'style' | 'role'> {\n  /** Work is under way. */\n  active: boolean;\n  label?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * A thin line in the accent (--progress-line, by default --primary) that runs along the top of what is loading (a table's rows\n * under its header, a page under the top bar). It waits a moment before it shows, so\n * quick work never flashes it; it eases towards the end without reaching it while the\n * work runs; when the work is done it runs to the end and only then fades. More work\n * before it has gone carries on from where it is. With reduced motion it is a\n * full-width line that fades.\n */\nexport const ProgressLine = ({ active, label = 'Loading', className, style, ...props }: IProgressLineProps) => {\n  const [phase, setPhase] = useState<TPhase>('idle');\n  const [target, setTarget] = useState(RUN_TARGET);\n  const refPhase = useRef<TPhase>('idle');\n  const refLine = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let timer: number | undefined;\n    const go = (next: TPhase): void => {\n      refPhase.current = next;\n      setPhase(next);\n    };\n    const later = (milliseconds: number, run: () => void): void => {\n      timer = window.setTimeout(run, milliseconds);\n    };\n    const fade = (): void => {\n      go('fading');\n      later(FADE, () => go('idle'));\n    };\n    const phaseNow = refPhase.current;\n    if (active) {\n      if (phaseNow === 'idle' || phaseNow === 'waiting') {\n        go('waiting');\n        later(START_DELAY, () => {\n          setTarget(RUN_TARGET);\n          go('running');\n        });\n      } else if (phaseNow === 'finishing' || phaseNow === 'fading') {\n        // More work before the line has gone: on from where it is, never back to the start.\n        const reached = scaleOf(refLine.current);\n        setTarget(reached > 0.8 ? Math.min(0.97, reached + 0.04) : RUN_TARGET);\n        go('running');\n      }\n    } else if (phaseNow === 'waiting') {\n      go('idle');\n    } else if (phaseNow === 'running' || phaseNow === 'finishing') {\n      if (reducedMotion()) {\n        fade();\n      } else {\n        go('finishing');\n        later(FINISH, fade);\n      }\n    } else if (phaseNow === 'fading') {\n      later(FADE, () => go('idle'));\n    }\n    return () => window.clearTimeout(timer);\n  }, [active]);\n\n  const reduced = phase !== 'idle' && reducedMotion();\n  const scale = phase === 'idle' || phase === 'waiting' ? 0 : phase === 'running' && !reduced ? target : 1;\n  const transition =\n    phase === 'running' && !reduced\n      ? 'transform 8s cubic-bezier(0.1, 0.7, 0.15, 1), opacity 120ms ease-out'\n      : phase === 'finishing'\n        ? `transform ${FINISH}ms ease-out`\n        : phase === 'fading'\n          ? `opacity ${FADE}ms ease-out`\n          : 'none';\n  const shown = phase === 'running' || phase === 'finishing' || phase === 'fading';\n  return (\n    <div\n      data-slot=\"progress-line\"\n      role=\"progressbar\"\n      aria-label={label}\n      {...props}\n      aria-hidden={shown && phase !== 'fading' ? undefined : true}\n      data-phase={phase}\n      className={cn('pointer-events-none h-0.5 overflow-hidden', className)}\n      style={style}\n    >\n      <div\n        ref={refLine}\n        data-slot=\"progress-line-bar\"\n        className=\"h-full origin-left\"\n        style={{\n          backgroundColor: PROGRESS_LINE_COLOR,\n          transform: `scaleX(${scale})`,\n          opacity: phase === 'fading' || !shown ? 0 : 1,\n          transition,\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;AAMA,IAAM,cAAc;AACpB,IAAM,SAAS;AACf,IAAM,OAAO;;AAEb,IAAM,aAAa;;;;;;AAOnB,IAAa,sBAAsB;AAEnC,IAAM,sBAA+B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAG3F,IAAM,WAAW,SAAqC;CACpD,MAAM,YAAY,SAAS,OAAO,SAAS,iBAAiB,IAAI,CAAC,CAAC;CAClE,OAAO,cAAc,SAAS,IAAI,IAAI,kBAAkB,SAAS,CAAC,CAAC;AACrE;;;;;;;;;AAkBA,IAAa,gBAAgB,EAAE,QAAQ,QAAQ,WAAW,WAAW,OAAO,GAAG,YAAgC;CAC7G,MAAM,CAAC,OAAO,YAAY,SAAiB,MAAM;CACjD,MAAM,CAAC,QAAQ,aAAa,SAAS,UAAU;CAC/C,MAAM,WAAW,OAAe,MAAM;CACtC,MAAM,UAAU,OAAuB,IAAI;CAE3C,gBAAgB;EACd,IAAI;EACJ,MAAM,MAAM,SAAuB;GACjC,SAAS,UAAU;GACnB,SAAS,IAAI;EACf;EACA,MAAM,SAAS,cAAsB,QAA0B;GAC7D,QAAQ,OAAO,WAAW,KAAK,YAAY;EAC7C;EACA,MAAM,aAAmB;GACvB,GAAG,QAAQ;GACX,MAAM,YAAY,GAAG,MAAM,CAAC;EAC9B;EACA,MAAM,WAAW,SAAS;EAC1B,IAAI,QAAQ;GACV,IAAI,aAAa,UAAU,aAAa,WAAW;IACjD,GAAG,SAAS;IACZ,MAAM,mBAAmB;KACvB,UAAU,UAAU;KACpB,GAAG,SAAS;IACd,CAAC;GACH,OAAO,IAAI,aAAa,eAAe,aAAa,UAAU;IAE5D,MAAM,UAAU,QAAQ,QAAQ,OAAO;IACvC,UAAU,UAAU,KAAM,KAAK,IAAI,KAAM,UAAU,GAAI,IAAI,UAAU;IACrE,GAAG,SAAS;GACd;EACF,OAAO,IAAI,aAAa,WACtB,GAAG,MAAM;OACJ,IAAI,aAAa,aAAa,aAAa,aAAa;GAC7D,IAAI,cAAc,GAChB,KAAK;QACA;IACL,GAAG,WAAW;IACd,MAAM,QAAQ,IAAI;GACpB;EACF,OAAO,IAAI,aAAa,UACtB,MAAM,YAAY,GAAG,MAAM,CAAC;EAE9B,aAAa,OAAO,aAAa,KAAK;CACxC,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,UAAU,UAAU,UAAU,cAAc;CAClD,MAAM,QAAQ,UAAU,UAAU,UAAU,YAAY,IAAI,UAAU,aAAa,CAAC,UAAU,SAAS;CACvG,MAAM,aACJ,UAAU,aAAa,CAAC,UACpB,yEACA,UAAU,cACR,aAAa,OAAO,eACpB,UAAU,WACR,WAAW,KAAK,eAChB;CACV,MAAM,QAAQ,UAAU,aAAa,UAAU,eAAe,UAAU;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,GAAI;EACJ,eAAa,SAAS,UAAU,WAAW,KAAA,IAAY;EACvD,cAAY;EACZ,WAAW,GAAG,6CAA6C,SAAS;EAC7D;EAEP,UAAA,oBAAC,OAAD;GACE,KAAK;GACL,aAAU;GACV,WAAU;GACV,OAAO;IACL,iBAAiB;IACjB,WAAW,UAAU,MAAM;IAC3B,SAAS,UAAU,YAAY,CAAC,QAAQ,IAAI;IAC5C;GACF;EACD,CAAA;CACE,CAAA;AAET"}

package/dist/ui/src/components/edyn/progress-line/progress-line.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ProgressLine: waits before it shows, eases while the work runs, finishes before it fades.
+ *
+ * PATH TAKEN: the phase machine is timers and state, so happy-dom with the real
+ * clock covers it (the delays are 150, 150 and 200ms, waited out with margin
+ * rather than faked). Carrying on from where the line is after more work arrives
+ * mid-fade needs a real computed transform, so e2e/progress-line.spec.ts covers it.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-content/allow-list.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The HTML the rich-text editor emits, and the only HTML RichTextContent renders. An app that
+ * sanitises on a server takes its allow-list from here: nothing outside these elements and this
+ * attribute ever comes out of the editor, whatever was pasted into it.
+ */
+export declare const RICH_TEXT_ELEMENTS: readonly ["p", "br", "hr", "strong", "em", "u", "ul", "ol", "li", "a"];
+/** The attributes each element may carry. Every other element carries none (no class, no style). */
+export declare const RICH_TEXT_ATTRIBUTES: Readonly<Record<string, readonly string[]>>;
+/** A link must be absolute and use one of these. `javascript:`, `data:` and relative links are refused. */
+export declare const RICH_TEXT_LINK_PROTOCOLS: readonly ["http", "https", "mailto"];
+export declare const isAllowedRichTextHref: (href: string) => boolean;

package/dist/ui/src/components/edyn/rich-text-content/allow-list.js

@@ -0,0 +1,37 @@
+//#region ../ui/src/components/edyn/rich-text-content/allow-list.ts
+/**
+* The HTML the rich-text editor emits, and the only HTML RichTextContent renders. An app that
+* sanitises on a server takes its allow-list from here: nothing outside these elements and this
+* attribute ever comes out of the editor, whatever was pasted into it.
+*/
+var RICH_TEXT_ELEMENTS = [
+	"p",
+	"br",
+	"hr",
+	"strong",
+	"em",
+	"u",
+	"ul",
+	"ol",
+	"li",
+	"a"
+];
+/** The attributes each element may carry. Every other element carries none (no class, no style). */
+var RICH_TEXT_ATTRIBUTES = { a: ["href"] };
+/** A link must be absolute and use one of these. `javascript:`, `data:` and relative links are refused. */
+var RICH_TEXT_LINK_PROTOCOLS = [
+	"http",
+	"https",
+	"mailto"
+];
+var isAllowedRichTextHref = (href) => {
+	const cleaned = Array.from(href).filter((char) => char.charCodeAt(0) > 32).join("");
+	const colon = cleaned.indexOf(":");
+	if (colon < 1) return false;
+	const protocol = cleaned.slice(0, colon).toLowerCase();
+	return RICH_TEXT_LINK_PROTOCOLS.includes(protocol);
+};
+//#endregion
+export { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, isAllowedRichTextHref };
+
+//# sourceMappingURL=allow-list.js.map

package/dist/ui/src/components/edyn/rich-text-content/allow-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"allow-list.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-content/allow-list.ts"],"sourcesContent":["/**\n * The HTML the rich-text editor emits, and the only HTML RichTextContent renders. An app that\n * sanitises on a server takes its allow-list from here: nothing outside these elements and this\n * attribute ever comes out of the editor, whatever was pasted into it.\n */\nexport const RICH_TEXT_ELEMENTS = ['p', 'br', 'hr', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'a'] as const;\n\n/** The attributes each element may carry. Every other element carries none (no class, no style). */\nexport const RICH_TEXT_ATTRIBUTES: Readonly<Record<string, readonly string[]>> = { a: ['href'] };\n\n/** A link must be absolute and use one of these. `javascript:`, `data:` and relative links are refused. */\nexport const RICH_TEXT_LINK_PROTOCOLS = ['http', 'https', 'mailto'] as const;\n\nexport const isAllowedRichTextHref = (href: string): boolean => {\n  const cleaned = Array.from(href)\n    .filter((char) => char.charCodeAt(0) > 32)\n    .join('');\n  const colon = cleaned.indexOf(':');\n  if (colon < 1) {\n    return false;\n  }\n  const protocol = cleaned.slice(0, colon).toLowerCase();\n  return (RICH_TEXT_LINK_PROTOCOLS as readonly string[]).includes(protocol);\n};\n"],"mappings":";;;;;;AAKA,IAAa,qBAAqB;CAAC;CAAK;CAAM;CAAM;CAAU;CAAM;CAAK;CAAM;CAAM;CAAM;AAAG;;AAG9F,IAAa,uBAAoE,EAAE,GAAG,CAAC,MAAM,EAAE;;AAG/F,IAAa,2BAA2B;CAAC;CAAQ;CAAS;AAAQ;AAElE,IAAa,yBAAyB,SAA0B;CAC9D,MAAM,UAAU,MAAM,KAAK,IAAI,CAAC,CAC7B,QAAQ,SAAS,KAAK,WAAW,CAAC,IAAI,EAAE,CAAC,CACzC,KAAK,EAAE;CACV,MAAM,QAAQ,QAAQ,QAAQ,GAAG;CACjC,IAAI,QAAQ,GACV,OAAO;CAET,MAAM,WAAW,QAAQ,MAAM,GAAG,KAAK,CAAC,CAAC,YAAY;CACrD,OAAQ,yBAA+C,SAAS,QAAQ;AAC1E"}

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

@@ -0,0 +1,2 @@
+export * from './allow-list';
+export * from './rich-text-content';

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * How rich text looks, shared by the editor and by RichTextContent so a comment reads the same while it is typed and
+ * after it is saved. Descendant selectors rather than classes on the elements, because the HTML that is stored carries
+ * no classes.
+ */
+export declare const RICH_TEXT_BODY_CLASS = "text-sm leading-6 wrap-break-word [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_hr]:my-3 [&_hr]:border-0 [&_hr]:border-t [&_hr]:border-border [&_ol]:list-decimal [&_ol]:ps-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:ps-5 [&_ul+p]:mt-2 [&_ol+p]:mt-2 [&_p+ul]:mt-2 [&_p+ol]:mt-2";
+export declare const RICH_TEXT_MENTION_CLASS = "rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary";
+/** The HTML as React elements, keeping only what the editor can produce. Browser only (it needs a DOM parser). */
+export declare const richTextToNodes: (html: string) => ReactNode[];
+export interface IRichTextContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {
+    /** The HTML to show. Only the editor's elements are rendered, whatever else it holds. */
+    html: string;
+}
+/**
+ * Shows rich text the editor produced (or any HTML), as the same elements the editor emits and nothing else:
+ * `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` and `a` with an `href` (http, https or mailto; it opens in a new tab
+ * with `rel="noopener noreferrer"`). Everything else is dropped and its text kept. Built as React elements, not injected
+ * as markup, so it is safe on HTML that has not been cleaned. A run like `@name@example.test` or `@assignees` is shown
+ * as a chip.
+ */
+export declare const RichTextContent: ({ html, className, ...props }: IRichTextContentProps) => import('react').JSX.Element;

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

@@ -0,0 +1,124 @@
+import { cn } from "../../../lib/utils.js";
+import { isAllowedRichTextHref } from "./allow-list.js";
+import { createElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/edyn/rich-text-content/rich-text-content.tsx
+/**
+* How rich text looks, shared by the editor and by RichTextContent so a comment reads the same while it is typed and
+* after it is saved. Descendant selectors rather than classes on the elements, because the HTML that is stored carries
+* no classes.
+*/
+var RICH_TEXT_BODY_CLASS = "text-sm leading-6 wrap-break-word [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_hr]:my-3 [&_hr]:border-0 [&_hr]:border-t [&_hr]:border-border [&_ol]:list-decimal [&_ol]:ps-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:ps-5 [&_ul+p]:mt-2 [&_ol+p]:mt-2 [&_p+ul]:mt-2 [&_p+ol]:mt-2";
+var MENTION_PATTERN = /(?<![\w.+-])@(?:assignees\b|[A-Za-z0-9._%+-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+)/g;
+var RICH_TEXT_MENTION_CLASS = "rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary";
+var TAG_FOR = {
+	b: "strong",
+	i: "em"
+};
+var KEPT = /* @__PURE__ */ new Set([
+	"p",
+	"strong",
+	"em",
+	"u",
+	"ul",
+	"ol",
+	"li",
+	"a",
+	"br",
+	"hr"
+]);
+var DROPPED_WITH_CONTENT = /* @__PURE__ */ new Set([
+	"script",
+	"style",
+	"template",
+	"iframe",
+	"object",
+	"embed",
+	"noscript",
+	"svg",
+	"math",
+	"head",
+	"title"
+]);
+var withMentions = (text, key) => {
+	const parts = [];
+	let last = 0;
+	for (const match of text.matchAll(MENTION_PATTERN)) {
+		const start = match.index ?? 0;
+		if (start > last) parts.push(text.slice(last, start));
+		parts.push(/* @__PURE__ */ jsx("span", {
+			"data-slot": "rich-text-mention",
+			className: RICH_TEXT_MENTION_CLASS,
+			children: match[0]
+		}, `${key}-${start}`));
+		last = start + match[0].length;
+	}
+	if (last < text.length) parts.push(text.slice(last));
+	return parts;
+};
+var toNodes = (parent, key, insideLink) => {
+	const out = [];
+	parent.childNodes.forEach((child, index) => {
+		const childKey = `${key}.${index}`;
+		if (child.nodeType === 3) {
+			const text = child.textContent ?? "";
+			out.push(...insideLink ? [text] : withMentions(text, childKey));
+			return;
+		}
+		if (child.nodeType !== 1) return;
+		const element = child;
+		const name = element.tagName.toLowerCase();
+		if (DROPPED_WITH_CONTENT.has(name)) return;
+		const tag = TAG_FOR[name] ?? name;
+		if (!KEPT.has(tag)) {
+			out.push(...toNodes(element, childKey, insideLink));
+			return;
+		}
+		if (tag === "br") {
+			out.push(/* @__PURE__ */ jsx("br", {}, childKey));
+			return;
+		}
+		if (tag === "hr") {
+			out.push(/* @__PURE__ */ jsx("hr", {}, childKey));
+			return;
+		}
+		if (tag === "a") {
+			const href = element.getAttribute("href") ?? "";
+			const inner = toNodes(element, childKey, true);
+			out.push(...isAllowedRichTextHref(href) ? [/* @__PURE__ */ jsx("a", {
+				href: href.trim(),
+				rel: "noopener noreferrer",
+				target: "_blank",
+				children: inner
+			}, childKey)] : inner);
+			return;
+		}
+		out.push(createElement(tag, { key: childKey }, ...toNodes(element, childKey, insideLink)));
+	});
+	return out;
+};
+/** The HTML as React elements, keeping only what the editor can produce. Browser only (it needs a DOM parser). */
+var richTextToNodes = (html) => {
+	if (typeof DOMParser === "undefined" || html === "") return [];
+	return toNodes(new DOMParser().parseFromString(`<body>${html}`, "text/html").body, "r", false);
+};
+/**
+* Shows rich text the editor produced (or any HTML), as the same elements the editor emits and nothing else:
+* `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` and `a` with an `href` (http, https or mailto; it opens in a new tab
+* with `rel="noopener noreferrer"`). Everything else is dropped and its text kept. Built as React elements, not injected
+* as markup, so it is safe on HTML that has not been cleaned. A run like `@name@example.test` or `@assignees` is shown
+* as a chip.
+*/
+var RichTextContent = ({ html, className, ...props }) => {
+	const nodes = useMemo(() => richTextToNodes(html), [html]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "rich-text-content",
+		className: cn(RICH_TEXT_BODY_CLASS, className),
+		...props,
+		children: nodes
+	});
+};
+//#endregion
+export { RICH_TEXT_BODY_CLASS, RICH_TEXT_MENTION_CLASS, RichTextContent, richTextToNodes };
+
+//# sourceMappingURL=rich-text-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-content.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-content/rich-text-content.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { createElement, type HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { isAllowedRichTextHref } from './allow-list';\n\n/**\n * How rich text looks, shared by the editor and by RichTextContent so a comment reads the same while it is typed and\n * after it is saved. Descendant selectors rather than classes on the elements, because the HTML that is stored carries\n * no classes.\n */\nexport const RICH_TEXT_BODY_CLASS =\n  'text-sm leading-6 wrap-break-word [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_hr]:my-3 [&_hr]:border-0 [&_hr]:border-t [&_hr]:border-border [&_ol]:list-decimal [&_ol]:ps-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:ps-5 [&_ul+p]:mt-2 [&_ol+p]:mt-2 [&_p+ul]:mt-2 [&_p+ol]:mt-2';\n\nconst MENTION_PATTERN = /(?<![\\w.+-])@(?:assignees\\b|[A-Za-z0-9._%+-]+@[A-Za-z0-9-]+(?:\\.[A-Za-z0-9-]+)+)/g;\n\nexport const RICH_TEXT_MENTION_CLASS = 'rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary';\n\nconst TAG_FOR: Readonly<Record<string, string>> = { b: 'strong', i: 'em' };\nconst KEPT = new Set(['p', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'a', 'br', 'hr']);\nconst DROPPED_WITH_CONTENT = new Set(['script', 'style', 'template', 'iframe', 'object', 'embed', 'noscript', 'svg', 'math', 'head', 'title']);\n\nconst withMentions = (text: string, key: string): ReactNode[] => {\n  const parts: ReactNode[] = [];\n  let last = 0;\n  for (const match of text.matchAll(MENTION_PATTERN)) {\n    const start = match.index ?? 0;\n    if (start > last) {\n      parts.push(text.slice(last, start));\n    }\n    parts.push(\n      <span key={`${key}-${start}`} data-slot=\"rich-text-mention\" className={RICH_TEXT_MENTION_CLASS}>\n        {match[0]}\n      </span>,\n    );\n    last = start + match[0].length;\n  }\n  if (last < text.length) {\n    parts.push(text.slice(last));\n  }\n  return parts;\n};\n\nconst toNodes = (parent: Node, key: string, insideLink: boolean): ReactNode[] => {\n  const out: ReactNode[] = [];\n  parent.childNodes.forEach((child, index) => {\n    const childKey = `${key}.${index}`;\n    if (child.nodeType === 3) {\n      const text = child.textContent ?? '';\n      out.push(...(insideLink ? [text] : withMentions(text, childKey)));\n      return;\n    }\n    if (child.nodeType !== 1) {\n      return;\n    }\n    const element = child as Element;\n    const name = element.tagName.toLowerCase();\n    if (DROPPED_WITH_CONTENT.has(name)) {\n      return;\n    }\n    const tag = TAG_FOR[name] ?? name;\n    if (!KEPT.has(tag)) {\n      out.push(...toNodes(element, childKey, insideLink));\n      return;\n    }\n    if (tag === 'br') {\n      out.push(<br key={childKey} />);\n      return;\n    }\n    if (tag === 'hr') {\n      out.push(<hr key={childKey} />);\n      return;\n    }\n    if (tag === 'a') {\n      const href = element.getAttribute('href') ?? '';\n      const inner = toNodes(element, childKey, true);\n      out.push(\n        ...(isAllowedRichTextHref(href)\n          ? [\n              <a key={childKey} href={href.trim()} rel=\"noopener noreferrer\" target=\"_blank\">\n                {inner}\n              </a>,\n            ]\n          : inner),\n      );\n      return;\n    }\n    out.push(createElement(tag, { key: childKey }, ...toNodes(element, childKey, insideLink)));\n  });\n  return out;\n};\n\n/** The HTML as React elements, keeping only what the editor can produce. Browser only (it needs a DOM parser). */\nexport const richTextToNodes = (html: string): ReactNode[] => {\n  if (typeof DOMParser === 'undefined' || html === '') {\n    return [];\n  }\n  const parsed = new DOMParser().parseFromString(`<body>${html}`, 'text/html');\n  return toNodes(parsed.body, 'r', false);\n};\n\nexport interface IRichTextContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {\n  /** The HTML to show. Only the editor's elements are rendered, whatever else it holds. */\n  html: string;\n}\n\n/**\n * Shows rich text the editor produced (or any HTML), as the same elements the editor emits and nothing else:\n * `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` and `a` with an `href` (http, https or mailto; it opens in a new tab\n * with `rel=\"noopener noreferrer\"`). Everything else is dropped and its text kept. Built as React elements, not injected\n * as markup, so it is safe on HTML that has not been cleaned. A run like `@name@example.test` or `@assignees` is shown\n * as a chip.\n */\nexport const RichTextContent = ({ html, className, ...props }: IRichTextContentProps) => {\n  const nodes = useMemo(() => richTextToNodes(html), [html]);\n  return (\n    <div data-slot=\"rich-text-content\" className={cn(RICH_TEXT_BODY_CLASS, className)} {...props}>\n      {nodes}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/**
+ * RichTextContent shows saved HTML as the editor's own elements and nothing else. It is built as React elements,
+ * so these assertions read the markup it renders: a script or a javascript: link that survived would show here.
+ *
+ * PATH TAKEN: happy-dom parses the input (DOMParser) and renderToStaticMarkup prints the result, which is enough
+ * for what this component decides (what stays, what goes, what is added). How it looks is the browser spec's.
+ */
+export {};

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

@@ -0,0 +1,18 @@
+import { Extension } from '@tiptap/core';
+import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
+import { TMentionToText } from './serialize';
+import { IRichTextMentionItem } from './types';
+/** What the editor needs from the component while it runs. Held in a ref, so the extensions are built once. */
+export interface IEditorHost {
+    mentionEnabled: () => boolean;
+    maxLength: () => number | undefined;
+    toText: () => TMentionToText;
+    onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => void;
+    onSuggestionKey: (props: SuggestionKeyDownProps) => boolean;
+}
+/**
+ * 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.
+ */
+export declare const buildExtensions: (host: IEditorHost) => (Extension<any, any> | import('@tiptap/core').Node<any, any> | import('@tiptap/core').Node<import('@tiptap/extension-paragraph').ParagraphOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-hard-break').HardBreakOptions, any> | import('@tiptap/core').Mark<import('@tiptap/extension-bold').BoldOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-list').BulletListOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-list').ListItemOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-horizontal-rule').HorizontalRuleOptions, any> | import('@tiptap/core').Mark<import('@tiptap/extension-link').LinkOptions, any> | Extension<import('@tiptap/extensions').UndoRedoOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>)[];

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

@@ -0,0 +1,124 @@
+import { isAllowedRichTextHref } from "../rich-text-content/allow-list.js";
+import { countCharacters } from "./serialize.js";
+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";
+//#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
+export { buildExtensions };
+
+//# sourceMappingURL=extensions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"extensions.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/extensions.ts"],"sourcesContent":["import { isAllowedRichTextHref } from '@edyn/ui/components/edyn/rich-text-content/allow-list';\nimport { Extension, mergeAttributes } from '@tiptap/core';\nimport { Bold } from '@tiptap/extension-bold';\nimport { Document } from '@tiptap/extension-document';\nimport { HardBreak } from '@tiptap/extension-hard-break';\nimport { HorizontalRule } from '@tiptap/extension-horizontal-rule';\nimport { Italic } from '@tiptap/extension-italic';\nimport { Link } from '@tiptap/extension-link';\nimport { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';\nimport { Mention } from '@tiptap/extension-mention';\nimport { Paragraph } from '@tiptap/extension-paragraph';\nimport { Text } from '@tiptap/extension-text';\nimport { Underline } from '@tiptap/extension-underline';\nimport { UndoRedo } from '@tiptap/extensions';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport type { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';\nimport { countCharacters, type TMentionToText } from './serialize';\nimport type { IRichTextMentionItem } from './types';\n\n/** What the editor needs from the component while it runs. Held in a ref, so the extensions are built once. */\nexport interface IEditorHost {\n  mentionEnabled: () => boolean;\n  maxLength: () => number | undefined;\n  toText: () => TMentionToText;\n  onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => void;\n  onSuggestionKey: (props: SuggestionKeyDownProps) => boolean;\n}\n\nconst MENTION_CHIP_CLASS = 'rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary';\n\nconst limitKey = new PluginKey('richTextMaxLength');\n\n/** Refuses an edit that would take the text over the limit (a paste included) and lets one that shortens it through. */\nconst maxLengthExtension = (host: IEditorHost) =>\n  Extension.create({\n    name: 'maxLength',\n    addProseMirrorPlugins() {\n      return [\n        new Plugin({\n          key: limitKey,\n          filterTransaction: (tr, state) => {\n            const limit = host.maxLength();\n            if (!tr.docChanged || limit === undefined) {\n              return true;\n            }\n            const next = countCharacters(tr.doc, host.toText());\n            return next <= limit || next <= countCharacters(state.doc, host.toText());\n          },\n        }),\n      ];\n    },\n  });\n\n/**\n * The editor's whole schema: paragraph, line break, bold, italic, underline, bullet and numbered lists, link, and the\n * mention chip. Whatever else arrives (a paste, `value`) is not in the schema, so ProseMirror drops the markup and keeps\n * the text.\n */\nexport const buildExtensions = (host: IEditorHost) => [\n  Document,\n  Paragraph,\n  Text,\n  HardBreak,\n  Bold,\n  Italic,\n  Underline,\n  BulletList,\n  // A list is numbered from 1; the `start` it would otherwise keep is an attribute outside the allow-list.\n  OrderedList.extend({\n    addAttributes() {\n      return {};\n    },\n  }),\n  ListItem,\n  HorizontalRule,\n  Link.extend({\n    addAttributes() {\n      return {\n        href: {\n          default: null,\n          parseHTML: (element) => element.getAttribute('href'),\n          renderHTML: (attributes) => (attributes.href ? { href: attributes.href } : {}),\n        },\n      };\n    },\n  }).configure({\n    openOnClick: false,\n    autolink: true,\n    linkOnPaste: true,\n    defaultProtocol: 'https',\n    protocols: ['mailto'],\n    isAllowedUri: (url) => isAllowedRichTextHref(url),\n    HTMLAttributes: { rel: null, target: null, class: null },\n  }),\n  UndoRedo,\n  maxLengthExtension(host),\n  Mention.extend({\n    addAttributes() {\n      return {\n        id: {\n          default: null,\n          parseHTML: (element) => element.getAttribute('data-id'),\n          renderHTML: (attributes) => (attributes.id ? { 'data-id': attributes.id } : {}),\n        },\n        label: {\n          default: null,\n          parseHTML: (element) => element.getAttribute('data-label'),\n          renderHTML: (attributes) => (attributes.label ? { 'data-label': attributes.label } : {}),\n        },\n      };\n    },\n  }).configure({\n    HTMLAttributes: { class: MENTION_CHIP_CLASS },\n    renderText: ({ node }) => `@${node.attrs.label ?? node.attrs.id}`,\n    renderHTML: ({ options, node }) => ['span', mergeAttributes(options.HTMLAttributes), `@${node.attrs.label ?? node.attrs.id}`],\n    suggestion: {\n      char: '@',\n      allow: () => host.mentionEnabled(),\n      items: () => [],\n      command: ({ editor, range, props }) => {\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(range, [\n            { type: 'mention', attrs: { id: props.id, label: props.label } },\n            { type: 'text', text: ' ' },\n          ])\n          .run();\n      },\n      render: () => ({\n        onStart: (props) => host.onSuggestion(props),\n        onUpdate: (props) => host.onSuggestion(props),\n        onKeyDown: (props) => host.onSuggestionKey(props),\n        onExit: () => host.onSuggestion(null),\n      }),\n    },\n  }),\n];\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,IAAM,qBAAqB;AAE3B,IAAM,WAAW,IAAI,UAAU,mBAAmB;;AAGlD,IAAM,sBAAsB,SAC1B,UAAU,OAAO;CACf,MAAM;CACN,wBAAwB;EACtB,OAAO,CACL,IAAI,OAAO;GACT,KAAK;GACL,oBAAoB,IAAI,UAAU;IAChC,MAAM,QAAQ,KAAK,UAAU;IAC7B,IAAI,CAAC,GAAG,cAAc,UAAU,KAAA,GAC9B,OAAO;IAET,MAAM,OAAO,gBAAgB,GAAG,KAAK,KAAK,OAAO,CAAC;IAClD,OAAO,QAAQ,SAAS,QAAQ,gBAAgB,MAAM,KAAK,KAAK,OAAO,CAAC;GAC1E;EACF,CAAC,CACH;CACF;AACF,CAAC;;;;;;AAOH,IAAa,mBAAmB,SAAsB;CACpD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAY,OAAO,EACjB,gBAAgB;EACd,OAAO,CAAC;CACV,EACF,CAAC;CACD;CACA;CACA,KAAK,OAAO,EACV,gBAAgB;EACd,OAAO,EACL,MAAM;GACJ,SAAS;GACT,YAAY,YAAY,QAAQ,aAAa,MAAM;GACnD,aAAa,eAAgB,WAAW,OAAO,EAAE,MAAM,WAAW,KAAK,IAAI,CAAC;EAC9E,EACF;CACF,EACF,CAAC,CAAC,CAAC,UAAU;EACX,aAAa;EACb,UAAU;EACV,aAAa;EACb,iBAAiB;EACjB,WAAW,CAAC,QAAQ;EACpB,eAAe,QAAQ,sBAAsB,GAAG;EAChD,gBAAgB;GAAE,KAAK;GAAM,QAAQ;GAAM,OAAO;EAAK;CACzD,CAAC;CACD;CACA,mBAAmB,IAAI;CACvB,QAAQ,OAAO,EACb,gBAAgB;EACd,OAAO;GACL,IAAI;IACF,SAAS;IACT,YAAY,YAAY,QAAQ,aAAa,SAAS;IACtD,aAAa,eAAgB,WAAW,KAAK,EAAE,WAAW,WAAW,GAAG,IAAI,CAAC;GAC/E;GACA,OAAO;IACL,SAAS;IACT,YAAY,YAAY,QAAQ,aAAa,YAAY;IACzD,aAAa,eAAgB,WAAW,QAAQ,EAAE,cAAc,WAAW,MAAM,IAAI,CAAC;GACxF;EACF;CACF,EACF,CAAC,CAAC,CAAC,UAAU;EACX,gBAAgB,EAAE,OAAO,mBAAmB;EAC5C,aAAa,EAAE,WAAW,IAAI,KAAK,MAAM,SAAS,KAAK,MAAM;EAC7D,aAAa,EAAE,SAAS,WAAW;GAAC;GAAQ,gBAAgB,QAAQ,cAAc;GAAG,IAAI,KAAK,MAAM,SAAS,KAAK,MAAM;EAAI;EAC5H,YAAY;GACV,MAAM;GACN,aAAa,KAAK,eAAe;GACjC,aAAa,CAAC;GACd,UAAU,EAAE,QAAQ,OAAO,YAAY;IACrC,OACG,MAAM,CAAC,CACP,MAAM,CAAC,CACP,gBAAgB,OAAO,CACtB;KAAE,MAAM;KAAW,OAAO;MAAE,IAAI,MAAM;MAAI,OAAO,MAAM;KAAM;IAAE,GAC/D;KAAE,MAAM;KAAQ,MAAM;IAAI,CAC5B,CAAC,CAAC,CACD,IAAI;GACT;GACA,eAAe;IACb,UAAU,UAAU,KAAK,aAAa,KAAK;IAC3C,WAAW,UAAU,KAAK,aAAa,KAAK;IAC5C,YAAY,UAAU,KAAK,gBAAgB,KAAK;IAChD,cAAc,KAAK,aAAa,IAAI;GACtC;EACF;CACF,CAAC;AACH"}

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

@@ -0,0 +1,3 @@
+export { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS } from '../rich-text-content/allow-list';
+export * from './rich-text-editor';
+export * from './types';

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

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { IRichTextLabels, IRichTextMention, IRichTextMentionItem } from './types';
+export interface IMentionListProps {
+    query: string;
+    /** Where the @ was typed. */
+    rect: (() => DOMRect | null) | null;
+    config: IRichTextMention;
+    labels: IRichTextLabels;
+    listId: string;
+    onPick: (item: IRichTextMentionItem) => void;
+    /** The editor keeps focus, so the list is driven by its keys: the editor calls this one. */
+    keyHandler: RefObject<((event: KeyboardEvent) => boolean) | null>;
+    /** The id of the option the editor should name as `aria-activedescendant`. */
+    onActiveChange: (optionId: string | undefined) => void;
+}
+/** The list that opens under the caret when the writer types @. */
+export declare const MentionList: ({ query, rect, config, labels, listId, onPick, keyHandler, onActiveChange }: IMentionListProps) => import('react').JSX.Element;