@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/composer/composer.js

@@ -0,0 +1,428 @@
+import SvgArrowForward from "../../vendor/@material-design-icons/svg/outlined/arrow_forward.js";
+import { lengthTone } from "../../lib/text-length.js";
+import { Button } from "../button/button.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { ComposerContext, useComposerContext } from "./composer.context.js";
+import { createComposerHandle } from "./composer.handle.js";
+import composer_module_default from "./composer.module.js";
+import { ComposerAttachButton, ComposerAttachments, ComposerAttachmentsError } from "./composer-attachments.js";
+import { ComposerEditor } from "./composer-editor.js";
+import { ComposerMentions } from "./composer-mentions.js";
+import { parseMentionString, toPlainText } from "./mention-text.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/composer/composer.tsx
+var defaultCanSubmit = ({ value, files }) => value.trim() !== "" || files.length > 0;
+var INTERACTIVE = "button, a, input, textarea, [contenteditable], [tabindex]";
+/**
+* The message composer: holds the draft, its attachments and its mentions,
+* and sends them through `onSend` once `canSubmit` allows it, within
+* `maxLength` and `maxFileSize`.
+*/
+var Root = (t0) => {
+	const $ = c(60);
+	const { children, defaultValue: t1, disabled: t2, maxLength, maxFileSize, canSubmit: t3, onSend, className, handle } = t0;
+	const defaultValue = t1 === void 0 ? "" : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const canSubmit = t3 === void 0 ? defaultCanSubmit : t3;
+	const [value, setValue] = useState(defaultValue);
+	let t4;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = [];
+		$[0] = t4;
+	} else t4 = $[0];
+	const [attachments, setAttachments] = useState(t4);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [mentionsListboxId, setMentionsListboxId] = useState(null);
+	const [mentionsOpen, setMentionsOpen] = useState(false);
+	const [mentionsActiveOptionId, setMentionsActiveOptionId] = useState(null);
+	const fieldFocus = useFieldFocus();
+	const editorHandle = useRef(null);
+	const nextAttachmentId = useRef(0);
+	const mentionMenuOpen = useRef(false);
+	let files;
+	let mentionIds;
+	let t5;
+	let textLength;
+	if ($[1] !== attachments || $[2] !== canSubmit || $[3] !== disabled || $[4] !== isSubmitting || $[5] !== maxFileSize || $[6] !== value) {
+		files = attachments.map(_temp);
+		let t6;
+		if ($[11] !== value) {
+			const tokens = parseMentionString(value);
+			mentionIds = tokens.flatMap(_temp2);
+			t6 = tokens.reduce(_temp3, 0);
+			$[11] = value;
+			$[12] = mentionIds;
+			$[13] = t6;
+		} else {
+			mentionIds = $[12];
+			t6 = $[13];
+		}
+		textLength = t6;
+		const hasOversizedFile = maxFileSize !== void 0 && files.some((file) => file.size > maxFileSize);
+		t5 = !disabled && !isSubmitting && !hasOversizedFile && canSubmit({
+			value,
+			files
+		});
+		$[1] = attachments;
+		$[2] = canSubmit;
+		$[3] = disabled;
+		$[4] = isSubmitting;
+		$[5] = maxFileSize;
+		$[6] = value;
+		$[7] = files;
+		$[8] = mentionIds;
+		$[9] = t5;
+		$[10] = textLength;
+	} else {
+		files = $[7];
+		mentionIds = $[8];
+		t5 = $[9];
+		textLength = $[10];
+	}
+	const canSend = t5;
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			editorHandle.current?.clear();
+			setValue("");
+			setAttachments([]);
+		};
+		$[14] = t6;
+	} else t6 = $[14];
+	const clear = t6;
+	let t7;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => editorHandle.current?.focus();
+		$[15] = t7;
+	} else t7 = $[15];
+	const focus = t7;
+	let t8;
+	let t9;
+	if ($[16] !== handle) {
+		t8 = () => handle?.connect({
+			clear,
+			focus
+		});
+		t9 = [
+			handle,
+			clear,
+			focus
+		];
+		$[16] = handle;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		t8 = $[17];
+		t9 = $[18];
+	}
+	useEffect(t8, t9);
+	let t10;
+	if ($[19] !== canSend || $[20] !== files || $[21] !== mentionIds || $[22] !== onSend || $[23] !== value) {
+		t10 = async () => {
+			if (onSend === void 0 || !canSend) return;
+			setIsSubmitting(true);
+			try {
+				await onSend({
+					text: toPlainText(value),
+					mentionIds,
+					attachments: files
+				});
+			} catch (t11) {
+				const error = t11;
+				setIsSubmitting(false);
+				throw error;
+			}
+			setIsSubmitting(false);
+		};
+		$[19] = canSend;
+		$[20] = files;
+		$[21] = mentionIds;
+		$[22] = onSend;
+		$[23] = value;
+		$[24] = t10;
+	} else t10 = $[24];
+	const submit = t10;
+	let t11;
+	let t12;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (incoming) => {
+			const staged = incoming.map((file_0) => {
+				const id = `attachment-${nextAttachmentId.current}`;
+				nextAttachmentId.current = nextAttachmentId.current + 1;
+				return {
+					id,
+					file: file_0
+				};
+			});
+			setAttachments((previous) => [...previous, ...staged]);
+		};
+		t12 = (id_0) => setAttachments((previous_0) => previous_0.filter((attachment_0) => attachment_0.id !== id_0));
+		$[25] = t11;
+		$[26] = t12;
+	} else {
+		t11 = $[25];
+		t12 = $[26];
+	}
+	const t13 = onSend !== void 0;
+	let t14;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (next) => {
+			editorHandle.current = next;
+		};
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (open) => {
+			mentionMenuOpen.current = open;
+			setMentionsOpen(open);
+		};
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== attachments || $[30] !== canSend || $[31] !== defaultValue || $[32] !== disabled || $[33] !== isSubmitting || $[34] !== maxFileSize || $[35] !== maxLength || $[36] !== mentionsActiveOptionId || $[37] !== mentionsListboxId || $[38] !== mentionsOpen || $[39] !== submit || $[40] !== t13 || $[41] !== textLength || $[42] !== value) {
+		t16 = {
+			value,
+			initialValue: defaultValue,
+			setValue,
+			disabled,
+			maxLength,
+			maxFileSize,
+			textLength,
+			attachments,
+			addFiles: t11,
+			removeAttachment: t12,
+			focusEditor: focus,
+			hasSubmit: t13,
+			canSend,
+			isSubmitting,
+			submit,
+			setEditorHandle: t14,
+			mentionMenuOpen,
+			mentionsListboxId,
+			registerMentions: setMentionsListboxId,
+			mentionsOpen,
+			mentionsActiveOptionId,
+			setMentionsActiveOption: setMentionsActiveOptionId,
+			setMentionMenuOpen: t15
+		};
+		$[29] = attachments;
+		$[30] = canSend;
+		$[31] = defaultValue;
+		$[32] = disabled;
+		$[33] = isSubmitting;
+		$[34] = maxFileSize;
+		$[35] = maxLength;
+		$[36] = mentionsActiveOptionId;
+		$[37] = mentionsListboxId;
+		$[38] = mentionsOpen;
+		$[39] = submit;
+		$[40] = t13;
+		$[41] = textLength;
+		$[42] = value;
+		$[43] = t16;
+	} else t16 = $[43];
+	const t17 = disabled || void 0;
+	let t18;
+	if ($[44] !== className) {
+		t18 = clsx(composer_module_default.composer, className);
+		$[44] = className;
+		$[45] = t18;
+	} else t18 = $[45];
+	const t19 = fieldFocus.props;
+	let t20;
+	if ($[46] !== disabled || $[47] !== fieldFocus.focusVisible || $[48] !== fieldFocus.focused) {
+		t20 = fieldStateAttributes({
+			disabled,
+			focused: fieldFocus.focused,
+			focusVisible: fieldFocus.focusVisible
+		});
+		$[46] = disabled;
+		$[47] = fieldFocus.focusVisible;
+		$[48] = fieldFocus.focused;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
+	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = (event) => {
+			if (!(event.target instanceof Element) || !event.currentTarget.contains(event.target) || event.target.closest(INTERACTIVE) !== null) return;
+			event.preventDefault();
+			editorHandle.current?.focus();
+		};
+		$[50] = t21;
+	} else t21 = $[50];
+	let t22;
+	if ($[51] !== children || $[52] !== fieldFocus.props || $[53] !== t17 || $[54] !== t18 || $[55] !== t20) {
+		t22 = /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-disabled": t17,
+			className: t18,
+			...t19,
+			...t20,
+			onMouseDown: t21,
+			children
+		});
+		$[51] = children;
+		$[52] = fieldFocus.props;
+		$[53] = t17;
+		$[54] = t18;
+		$[55] = t20;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== t16 || $[58] !== t22) {
+		t23 = /* @__PURE__ */ jsx(ComposerContext, {
+			value: t16,
+			children: t22
+		});
+		$[57] = t16;
+		$[58] = t22;
+		$[59] = t23;
+	} else t23 = $[59];
+	return t23;
+};
+/** The row under the editor holding the counter and the buttons. */
+var Toolbar = (t0) => {
+	const $ = c(5);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(composer_module_default.toolbar, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/** The `length/maxLength` counter, warning near the limit. Renders nothing without a `maxLength`. */
+var MaxLength = () => {
+	const $ = c(7);
+	const { maxLength, textLength } = useComposerContext();
+	if (maxLength === void 0) return null;
+	let t0;
+	if ($[0] !== maxLength || $[1] !== textLength) {
+		t0 = lengthTone(textLength, maxLength);
+		$[0] = maxLength;
+		$[1] = textLength;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== maxLength || $[4] !== t0 || $[5] !== textLength) {
+		t1 = /* @__PURE__ */ jsxs("span", {
+			className: composer_module_default.counter,
+			"data-tone": t0,
+			children: [
+				textLength,
+				"/",
+				maxLength
+			]
+		});
+		$[3] = maxLength;
+		$[4] = t0;
+		$[5] = textLength;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+/** The icon button that sends the message; disabled while it can't be sent. */
+var SendButton = (t0) => {
+	const $ = c(12);
+	let label;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({label, variant: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = label;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		label = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const variant = t1 === void 0 ? "primary" : t1;
+	const { submit, canSend } = useComposerContext();
+	const t2 = !canSend;
+	let t3;
+	if ($[4] !== submit) {
+		t3 = () => {
+			submit();
+		};
+		$[4] = submit;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== label || $[7] !== props || $[8] !== t2 || $[9] !== t3 || $[10] !== variant) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			variant,
+			size: "md",
+			iconOnly: true,
+			icon: SvgArrowForward,
+			label,
+			disabled: t2,
+			onClick: t3,
+			...props
+		});
+		$[6] = label;
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = variant;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+/**
+* A message composer: a plain-text editor with `@` mentions, staged
+* attachments, a length counter, and Enter to send (Shift+Enter for a new
+* line).
+*
+* @example
+* <Composer.Root onSend={send} maxLength={2000}>
+* 	<Composer.Attachments label="Attachments" removeLabel="Remove" fileHint={(name, size) => `${name} (${size})`} />
+* 	<Composer.Editor label="Comment">
+* 		<Composer.Mentions label="People to mention" sources={[people]} />
+* 	</Composer.Editor>
+* 	<Composer.Toolbar>
+* 		<Composer.MaxLength />
+* 		<Composer.AttachButton label="Add attachment" />
+* 		<Composer.SendButton label="Send" />
+* 	</Composer.Toolbar>
+* </Composer.Root>
+*/
+var Composer = {
+	Root,
+	Editor: ComposerEditor,
+	Mentions: ComposerMentions,
+	Toolbar,
+	Attachments: ComposerAttachments,
+	AttachmentsError: ComposerAttachmentsError,
+	AttachButton: ComposerAttachButton,
+	MaxLength,
+	SendButton,
+	createHandle: createComposerHandle
+};
+function _temp(attachment) {
+	return attachment.file;
+}
+function _temp2(token) {
+	return token.type === "mention" ? [token.id] : [];
+}
+function _temp3(total, token_0) {
+	return total + (token_0.type === "text" ? token_0.text.length : token_0.label.length);
+}
+export { Composer };

package/dist/components/composer/composer.module.js

@@ -0,0 +1,14 @@
+import './composer.css';// src/components/composer/composer.module.scss
+var composer = "_composer_pyl3q_3";
+var toolbar = "_toolbar_pyl3q_48";
+var counter = "_counter_pyl3q_56";
+var attachments = "_attachments_pyl3q_66";
+var attachmentsError = "_attachmentsError_pyl3q_75";
+var composer_module_default = {
+	composer,
+	toolbar,
+	counter,
+	attachments,
+	attachmentsError
+};
+export { attachments, attachmentsError, composer, counter, composer_module_default as default, toolbar };

package/dist/components/composer/editor-behavior.d.ts

@@ -0,0 +1,3 @@
+/** Wires the editor to its composer: editable while enabled, its handle, and Enter to send. */
+export declare const EditorBehaviorPlugin: () => null;
+//# sourceMappingURL=editor-behavior.d.ts.map

package/dist/components/composer/editor-behavior.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-behavior.d.ts","sourceRoot":"","sources":["../../../src/components/composer/editor-behavior.tsx"],"names":[],"mappings":"AAaA,+FAA+F;AAC/F,eAAO,MAAM,oBAAoB,QAAO,IAuDvC,CAAC"}

package/dist/components/composer/editor-behavior.js

@@ -0,0 +1,99 @@
+import { useComposerContext } from "./composer.context.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useEffectEvent } from "react";
+import { $createParagraphNode, $getRoot, COMMAND_PRIORITY_HIGH, KEY_ENTER_COMMAND } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+// src/components/composer/editor-behavior.tsx
+/** Wires the editor to its composer: editable while enabled, its handle, and Enter to send. */
+var EditorBehaviorPlugin = () => {
+	const $ = c(19);
+	const [editor] = useLexicalComposerContext();
+	const { setEditorHandle, submit, hasSubmit, mentionMenuOpen, disabled } = useComposerContext();
+	let t0;
+	if ($[0] !== submit) {
+		t0 = () => {
+			submit();
+		};
+		$[0] = submit;
+		$[1] = t0;
+	} else t0 = $[1];
+	const submitFromKeyboard = useEffectEvent(t0);
+	let t1;
+	let t2;
+	if ($[2] !== disabled || $[3] !== editor) {
+		t1 = () => {
+			editor.setEditable(!disabled);
+		};
+		t2 = [editor, disabled];
+		$[2] = disabled;
+		$[3] = editor;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[6] !== editor || $[7] !== setEditorHandle) {
+		t3 = () => {
+			setEditorHandle({
+				clear: () => editor.update(_temp),
+				focus: () => editor.focus()
+			});
+			return () => setEditorHandle(null);
+		};
+		t4 = [editor, setEditorHandle];
+		$[6] = editor;
+		$[7] = setEditorHandle;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[10] !== editor || $[11] !== hasSubmit || $[12] !== mentionMenuOpen || $[13] !== submitFromKeyboard) {
+		t5 = () => {
+			if (!hasSubmit) return;
+			return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+				if (mentionMenuOpen.current) return false;
+				if (event !== null && !event.shiftKey) {
+					event.preventDefault();
+					submitFromKeyboard();
+					return true;
+				}
+				return false;
+			}, COMMAND_PRIORITY_HIGH);
+		};
+		$[10] = editor;
+		$[11] = hasSubmit;
+		$[12] = mentionMenuOpen;
+		$[13] = submitFromKeyboard;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== editor || $[16] !== hasSubmit || $[17] !== mentionMenuOpen) {
+		t6 = [
+			editor,
+			hasSubmit,
+			mentionMenuOpen
+		];
+		$[15] = editor;
+		$[16] = hasSubmit;
+		$[17] = mentionMenuOpen;
+		$[18] = t6;
+	} else t6 = $[18];
+	useEffect(t5, t6);
+	return null;
+};
+function _temp() {
+	const root = $getRoot();
+	root.clear();
+	const paragraph = $createParagraphNode();
+	root.append(paragraph);
+	paragraph.select();
+}
+export { EditorBehaviorPlugin };

package/dist/components/composer/index.d.ts

@@ -0,0 +1,9 @@
+export type { ComposerAttachment, ComposerContent, ComposerSendPayload, } from "./composer.context.ts";
+export type { ComposerHandle } from "./composer.handle.ts";
+export * from "./composer.tsx";
+export type { ComposerAttachButtonProps, ComposerAttachmentsErrorProps, ComposerAttachmentsProps, } from "./composer-attachments.tsx";
+export type { ComposerEditorProps } from "./composer-editor.tsx";
+export type { ComposerMentionsProps } from "./composer-mentions.tsx";
+export type { MentionCandidate, MentionSource, } from "./mention-sources.ts";
+export * from "./mention-text.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/composer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/composer/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,kBAAkB,EAClB,eAAe,EACf,mBAAmB,GACnB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EACX,yBAAyB,EACzB,6BAA6B,EAC7B,wBAAwB,GACxB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,YAAY,EACX,gBAAgB,EAChB,aAAa,GACb,MAAM,sBAAsB,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/dist/components/composer/index.js

@@ -0,0 +1,3 @@
+import { Composer } from "./composer.js";
+import { MentionPill, MentionText, parseMentionString, serializeMention, toPlainText } from "./mention-text.js";
+export { Composer, MentionPill, MentionText, parseMentionString, serializeMention, toPlainText };

package/dist/components/composer/mention-node.d.ts

@@ -0,0 +1,45 @@
+import { DecoratorNode, type ExtensionConfigBase, type LexicalExtension, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from "lexical";
+import type { ReactNode } from "react";
+/** A `MentionNode` as stored in a serialized editor state. */
+export type SerializedMentionNode = Spread<Readonly<{
+    mentionId: string;
+    label: string;
+}>, SerializedLexicalNode>;
+/** A mention in the composer's editor, rendered as a `MentionPill`; its text is `@[label](id)`. */
+export declare class MentionNode extends DecoratorNode<ReactNode> {
+    readonly mentionId: string;
+    readonly label: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    static importJSON(serialized: SerializedMentionNode): MentionNode;
+    constructor(label: string, mentionId: string, key?: NodeKey);
+    exportJSON(): SerializedMentionNode;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    getTextContent(): string;
+    isInline(): boolean;
+    isKeyboardSelectable(): boolean;
+    decorate(): ReactNode;
+}
+/**
+ * Creates a `MentionNode` inside an editor update.
+ *
+ * @example
+ * editor.update(() => $insertNodes([$createMentionNode("AnnDoe", "user-ann")]));
+ */
+export declare const $createMentionNode: (label: string, mentionId: string) => MentionNode;
+/**
+ * Whether a node is a `MentionNode`.
+ *
+ * @example
+ * $isMentionNode(selection.getNodes()[0]); // true
+ */
+export declare const $isMentionNode: (node: LexicalNode | null | undefined) => node is MentionNode;
+/**
+ * Registers `MentionNode` with an editor built from extensions.
+ *
+ * @example
+ * defineExtension({ name: "editor", dependencies: [PlainTextExtension, MentionExtension] });
+ */
+export declare const MentionExtension: LexicalExtension<ExtensionConfigBase, "@maanlamp/react-web-ui/Mention", unknown, unknown>;
+//# sourceMappingURL=mention-node.d.ts.map

package/dist/components/composer/mention-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-node.d.ts","sourceRoot":"","sources":["../../../src/components/composer/mention-node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,aAAa,EAEb,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACX,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,8DAA8D;AAC9D,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACzC,QAAQ,CAAC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,EAC9C,qBAAqB,CACrB,CAAC;AAEF,mGAAmG;AACnG,qBAAa,WAAY,SAAQ,aAAa,CAAC,SAAS,CAAC;IACxD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEvB,OAAgB,OAAO,IAAI,MAAM,CAEhC;IAED,OAAgB,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,CAMpD;IAED,OAAgB,UAAU,CACzB,UAAU,EAAE,qBAAqB,GAC/B,WAAW,CAKb;IAED,YACC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,GAAG,CAAC,EAAE,OAAO,EAKb;IAEQ,UAAU,IAAI,qBAAqB,CAQ3C;IAEQ,SAAS,IAAI,WAAW,CAEhC;IAEQ,SAAS,IAAI,OAAO,CAE5B;IAEQ,cAAc,IAAI,MAAM,CAKhC;IAEQ,QAAQ,IAAI,OAAO,CAE3B;IAEQ,oBAAoB,IAAI,OAAO,CAEvC;IAEQ,QAAQ,IAAI,SAAS,CAE7B;CACD;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UACvB,MAAM,aACF,MAAM,KACf,WACsD,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,cAAc,SACpB,WAAW,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,IAAI,WAA0C,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAAgB,CAC9C,mBAAmB,EACnB,gCAAgC,EAChC,OAAO,EACP,OAAO,CAIN,CAAC"}

package/dist/components/composer/mention-node.js

@@ -0,0 +1,71 @@
+import { MentionPill, serializeMention } from "./mention-text.js";
+import { jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, defineExtension } from "lexical";
+// src/components/composer/mention-node.tsx
+/** A mention in the composer's editor, rendered as a `MentionPill`; its text is `@[label](id)`. */
+var MentionNode = class MentionNode extends DecoratorNode {
+	mentionId;
+	label;
+	static getType() {
+		return "mention";
+	}
+	static clone(node) {
+		return new MentionNode(node.label, node.mentionId, node.getKey());
+	}
+	static importJSON(serialized) {
+		return $createMentionNode(serialized.label, serialized.mentionId);
+	}
+	constructor(label, mentionId, key) {
+		super(key);
+		this.label = label;
+		this.mentionId = mentionId;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			type: "mention",
+			version: 1,
+			mentionId: this.mentionId,
+			label: this.label
+		};
+	}
+	createDOM() {
+		return document.createElement("span");
+	}
+	updateDOM() {
+		return false;
+	}
+	getTextContent() {
+		return serializeMention({
+			label: this.label,
+			id: this.mentionId
+		});
+	}
+	isInline() {
+		return true;
+	}
+	isKeyboardSelectable() {
+		return true;
+	}
+	decorate() {
+		return /* @__PURE__ */ jsx(MentionPill, { children: this.label });
+	}
+};
+/**
+* Creates a `MentionNode` inside an editor update.
+*
+* @example
+* editor.update(() => $insertNodes([$createMentionNode("AnnDoe", "user-ann")]));
+*/
+var $createMentionNode = (label, mentionId) => $applyNodeReplacement(new MentionNode(label, mentionId));
+/**
+* Registers `MentionNode` with an editor built from extensions.
+*
+* @example
+* defineExtension({ name: "editor", dependencies: [PlainTextExtension, MentionExtension] });
+*/
+var MentionExtension = defineExtension({
+	name: "@maanlamp/react-web-ui/Mention",
+	nodes: [MentionNode]
+});
+export { $createMentionNode, MentionExtension, MentionNode };