@riducms/plugin-richtext 0.1.0

package/src/menu/rich-text-slash-menu.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { getAdminI18n, type FieldAuthoringHost } from "@riducms/plugin";
+	import { PopoverContent, PopoverRoot } from "@riducms/ui";
+	import {
+		TypeaheadMenuPlugin,
+		createBasicTypeaheadTriggerMatch,
+		useLexicalComposerContext,
+		type MenuResolution,
+	} from "@hvniel/lexical-svelte";
+	import { $isParagraphNode, type TextNode } from "lexical";
+
+	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+	import RichTextMenu from "@plugin-richtext/menu/rich-text-menu.svelte";
+	import {
+		buildRichTextOptions,
+		filterRichTextOptions,
+		type RichTextMenuOption,
+	} from "@plugin-richtext/menu/rich-text-options";
+
+	let { authoring, config }: { authoring: FieldAuthoringHost | undefined; config: RichTextConfig } =
+		$props();
+	const i18n = getAdminI18n();
+	const editor = useLexicalComposerContext()[0];
+	const trigger = createBasicTypeaheadTriggerMatch("/", { allowWhitespace: true, minLength: 0 });
+	// Menu options carry attachment identity and the mounted field's feature set is fixed.
+	// svelte-ignore state_referenced_locally
+	const baseOptions = buildRichTextOptions(editor, config, i18n, authoring);
+	let query = $state<string | null>(null);
+	let menuAnchor = $state.raw<{
+		contextElement: HTMLElement;
+		getBoundingClientRect: () => DOMRect;
+	} | null>(null);
+	let menuHost = $state<HTMLElement | null>(null);
+	const options = $derived(filterRichTextOptions(baseOptions, query ?? "", i18n.language));
+
+	$effect(() => {
+		if (query !== null) {
+			menuHost?.parentElement?.setAttribute(
+				"aria-label",
+				i18n.t("plugin.richtext:editor.insertBlock")
+			);
+		}
+	});
+
+	function openMenu(resolution: MenuResolution) {
+		const contextElement = editor.getRootElement();
+		if (contextElement === null) return;
+		menuAnchor = {
+			contextElement,
+			getBoundingClientRect: resolution.getRect,
+		};
+	}
+
+	function closeMenu() {
+		menuAnchor = null;
+	}
+
+	function preserveEditorFocus(event: Event) {
+		event.preventDefault();
+	}
+
+	function selectOption(
+		option: RichTextMenuOption,
+		nodeToRemove: TextNode | null,
+		closeMenu: () => void
+	) {
+		const placeholder = nodeToRemove?.getParent();
+		nodeToRemove?.remove();
+		option.select();
+		if (
+			!option.preservePlaceholder &&
+			$isParagraphNode(placeholder) &&
+			placeholder.getTextContentSize() === 0
+		) {
+			placeholder.remove();
+		}
+		closeMenu();
+	}
+</script>
+
+<TypeaheadMenuPlugin
+	onQueryChange={(value) => (query = value)}
+	onSelectOption={selectOption}
+	onOpen={openMenu}
+	onClose={closeMenu}
+	{options}
+	{trigger}
+>
+	{#snippet menu(menuProps)}
+		<div bind:this={menuHost} role="presentation"></div>
+		{#if menuProps.options.length > 0 && menuAnchor !== null && menuHost !== null}
+			<PopoverRoot open>
+				<PopoverContent
+					portalTo={menuHost}
+					class="w-[min(19rem,calc(100vw-2rem))] p-0 animate-[ridu-richtext-menu-in_150ms_ease] motion-reduce:animate-none"
+					role="presentation"
+					customAnchor={menuAnchor}
+					side="bottom"
+					align="start"
+					sideOffset={3}
+					collisionPadding={8}
+					strategy="fixed"
+					trapFocus={false}
+					onOpenAutoFocus={preserveEditorFocus}
+					onCloseAutoFocus={preserveEditorFocus}
+				>
+					<RichTextMenu
+						options={menuProps.options}
+						selectedIndex={menuProps.selectedIndex}
+						onHighlight={(index) => {
+							menuProps.setHighlightedIndex(index);
+							editor
+								.getRootElement()
+								?.setAttribute("aria-activedescendant", `typeahead-item-${index}`);
+						}}
+						onSelect={menuProps.selectOption}
+						embedded
+						idPrefix="typeahead-item"
+					/>
+				</PopoverContent>
+			</PopoverRoot>
+		{/if}
+	{/snippet}
+</TypeaheadMenuPlugin>

package/src/messages.ts

@@ -0,0 +1,240 @@
+import { defineAdminMessages } from "@riducms/plugin";
+
+export const richTextMessages = defineAdminMessages({
+	fallback: {
+		"asset.actions": "Asset actions",
+		"asset.addCaption": "Add a caption…",
+		"asset.captionFor": "Caption for {filename}",
+		"asset.couldNotLoad": "The referenced asset could not be loaded",
+		"asset.file": "FILE",
+		"asset.label": "{collection}: {filename}",
+		"asset.remove": "Remove asset",
+		"asset.replace": "Replace asset",
+		"asset.unavailable": "Unavailable",
+		"editor.addBlock": "Add block",
+		"editor.addLink": "Add link",
+		"editor.apply": "Apply",
+		"editor.blockActions": "Block actions",
+		"editor.blockAlreadyFirst": "This block is already first.",
+		"editor.blockAlreadyLast": "This block is already last.",
+		"editor.blockMovedPosition": "Moved block to position {position} of {total}.",
+		"editor.bold": "Bold",
+		"editor.cancel": "Cancel",
+		"editor.dragToMoveBlock": "Drag to move block",
+		"editor.editLink": "Edit link",
+		"editor.editNamed": "Edit {name}",
+		"editor.empty": "No content",
+		"editor.filterBlocks": "Filter blocks",
+		"editor.filterBlocksPlaceholder": "Filter blocks…",
+		"editor.footerHint": "— type / for commands · move with Alt+Shift+↑/↓",
+		"editor.formatText": "Text formatting",
+		"editor.inlineCode": "Inline code",
+		"editor.insertBlock": "Insert block",
+		"editor.italic": "Italic",
+		"editor.linkURL": "Link URL",
+		"editor.noMatchingBlocks": "No matching blocks",
+		"editor.placeholder": "Write body copy, or type / for commands…",
+		"editor.remove": "Remove",
+		"editor.removeNamed": "Remove {name}",
+		"editor.replaceNamed": "Replace {name}",
+		"editor.strikethrough": "Strikethrough",
+		"editor.subscript": "Subscript",
+		"editor.superscript": "Superscript",
+		"editor.underline": "Underline",
+		"option.bulletedList.description": "Unordered list",
+		"option.bulletedList.keywords": "bulleted unordered list ul",
+		"option.bulletedList.label": "Bulleted list",
+		"option.checklist.description": "Tasks with checkboxes",
+		"option.checklist.keywords": "checklist todo task checkbox",
+		"option.checklist.label": "Checklist",
+		"option.codeBlock.description": "Preformatted code",
+		"option.codeBlock.keywords": "code block codeblock preformatted pre",
+		"option.codeBlock.label": "Code block",
+		"option.divider.description": "Horizontal rule",
+		"option.divider.keywords": "divider horizontal rule hr",
+		"option.divider.label": "Divider",
+		"option.heading2.description": "Section heading",
+		"option.heading2.keywords": "heading title section h2",
+		"option.heading2.label": "Heading 2",
+		"option.heading3.description": "Subsection heading",
+		"option.heading3.keywords": "heading subtitle subsection h3",
+		"option.heading3.label": "Heading 3",
+		"option.numberedList.description": "Ordered list",
+		"option.numberedList.keywords": "numbered ordered list ol",
+		"option.numberedList.label": "Numbered list",
+		"option.paragraph.description": "Plain body copy",
+		"option.paragraph.keywords": "paragraph text normal p",
+		"option.paragraph.label": "Paragraph",
+		"option.quote.description": "Quoted passage",
+		"option.quote.keywords": "quote blockquote citation",
+		"option.quote.label": "Quote",
+		"option.relationship.description": "Reference an existing {label}",
+		"option.relationship.keywords": "relationship reference document related",
+		"option.relationship.label": "Related {label}",
+		"option.upload.description": "Select or upload {label}",
+		"option.upload.keywords": "upload image photo media file asset",
+		"relationship.actions": "Relationship actions",
+		"relationship.label": "{collection}: {title}",
+		"relationship.remove": "Remove",
+		"relationship.replace": "Replace",
+		"relationship.unavailable": "Unavailable reference",
+	},
+	translations: {
+		fr: {
+			"asset.actions": "Actions sur le fichier",
+			"asset.addCaption": "Ajouter une légende…",
+			"asset.captionFor": "Légende de {filename}",
+			"asset.couldNotLoad": "Le fichier référencé n’a pas pu être chargé",
+			"asset.file": "FICHIER",
+			"asset.label": "{collection} : {filename}",
+			"asset.remove": "Supprimer le fichier",
+			"asset.replace": "Remplacer le fichier",
+			"asset.unavailable": "Indisponible",
+			"editor.addBlock": "Ajouter un bloc",
+			"editor.addLink": "Ajouter un lien",
+			"editor.apply": "Appliquer",
+			"editor.blockActions": "Actions du bloc",
+			"editor.blockAlreadyFirst": "Ce bloc est déjà le premier.",
+			"editor.blockAlreadyLast": "Ce bloc est déjà le dernier.",
+			"editor.blockMovedPosition": "Bloc déplacé à la position {position} sur {total}.",
+			"editor.bold": "Gras",
+			"editor.cancel": "Annuler",
+			"editor.dragToMoveBlock": "Faire glisser pour déplacer le bloc",
+			"editor.editLink": "Modifier le lien",
+			"editor.editNamed": "Modifier {name}",
+			"editor.empty": "Aucun contenu",
+			"editor.filterBlocks": "Filtrer les blocs",
+			"editor.filterBlocksPlaceholder": "Filtrer les blocs…",
+			"editor.footerHint": "— saisir / pour les commandes · déplacer avec Alt+Maj+↑/↓",
+			"editor.formatText": "Mise en forme du texte",
+			"editor.inlineCode": "Code en ligne",
+			"editor.insertBlock": "Insérer un bloc",
+			"editor.italic": "Italique",
+			"editor.linkURL": "URL du lien",
+			"editor.noMatchingBlocks": "Aucun bloc correspondant",
+			"editor.placeholder": "Rédigez le contenu ou saisissez / pour les commandes…",
+			"editor.remove": "Supprimer",
+			"editor.removeNamed": "Supprimer {name}",
+			"editor.replaceNamed": "Remplacer {name}",
+			"editor.strikethrough": "Barré",
+			"editor.subscript": "Indice",
+			"editor.superscript": "Exposant",
+			"editor.underline": "Souligné",
+			"option.bulletedList.description": "Liste non ordonnée",
+			"option.bulletedList.keywords": "liste puces non ordonnée ul",
+			"option.bulletedList.label": "Liste à puces",
+			"option.checklist.description": "Tâches avec cases à cocher",
+			"option.checklist.keywords": "liste tâches cases cocher todo",
+			"option.checklist.label": "Liste de tâches",
+			"option.codeBlock.description": "Code préformaté",
+			"option.codeBlock.keywords": "code bloc préformaté pre",
+			"option.codeBlock.label": "Bloc de code",
+			"option.divider.description": "Ligne horizontale",
+			"option.divider.keywords": "séparateur ligne horizontale hr",
+			"option.divider.label": "Séparateur",
+			"option.heading2.description": "Titre de section",
+			"option.heading2.keywords": "titre section en-tête h2",
+			"option.heading2.label": "Titre 2",
+			"option.heading3.description": "Titre de sous-section",
+			"option.heading3.keywords": "titre sous-section sous-titre h3",
+			"option.heading3.label": "Titre 3",
+			"option.numberedList.description": "Liste ordonnée",
+			"option.numberedList.keywords": "liste numérotée ordonnée ol",
+			"option.numberedList.label": "Liste numérotée",
+			"option.paragraph.description": "Texte courant",
+			"option.paragraph.keywords": "paragraphe texte normal p",
+			"option.paragraph.label": "Paragraphe",
+			"option.quote.description": "Passage cité",
+			"option.quote.keywords": "citation extrait bloc",
+			"option.quote.label": "Citation",
+			"option.relationship.description": "Référencer un élément {label} existant",
+			"option.relationship.keywords": "relation référence document associé",
+			"option.relationship.label": "{label} associé",
+			"option.upload.description": "Sélectionner ou téléverser {label}",
+			"option.upload.keywords": "téléverser image photo média fichier ressource",
+			"relationship.actions": "Actions sur la relation",
+			"relationship.label": "{collection} : {title}",
+			"relationship.remove": "Supprimer",
+			"relationship.replace": "Remplacer",
+			"relationship.unavailable": "Référence indisponible",
+		},
+		ar: {
+			"asset.actions": "إجراءات الملف",
+			"asset.addCaption": "إضافة وصف…",
+			"asset.captionFor": "وصف {filename}",
+			"asset.couldNotLoad": "تعذّر تحميل الملف المشار إليه",
+			"asset.file": "ملف",
+			"asset.label": "{collection}: {filename}",
+			"asset.remove": "إزالة الملف",
+			"asset.replace": "استبدال الملف",
+			"asset.unavailable": "غير متاح",
+			"editor.addBlock": "إضافة كتلة",
+			"editor.addLink": "إضافة رابط",
+			"editor.apply": "تطبيق",
+			"editor.blockActions": "إجراءات الكتلة",
+			"editor.blockAlreadyFirst": "هذه الكتلة هي الأولى بالفعل.",
+			"editor.blockAlreadyLast": "هذه الكتلة هي الأخيرة بالفعل.",
+			"editor.blockMovedPosition": "نُقلت الكتلة إلى الموضع {position} من {total}.",
+			"editor.bold": "عريض",
+			"editor.cancel": "إلغاء",
+			"editor.dragToMoveBlock": "اسحب لنقل الكتلة",
+			"editor.editLink": "تعديل الرابط",
+			"editor.editNamed": "تعديل {name}",
+			"editor.empty": "لا يوجد محتوى",
+			"editor.filterBlocks": "تصفية الكتل",
+			"editor.filterBlocksPlaceholder": "تصفية الكتل…",
+			"editor.footerHint": "— اكتب / لعرض الأوامر · انقل باستخدام Alt+Shift+↑/↓",
+			"editor.formatText": "تنسيق النص",
+			"editor.inlineCode": "شفرة مضمنة",
+			"editor.insertBlock": "إدراج كتلة",
+			"editor.italic": "مائل",
+			"editor.linkURL": "رابط URL",
+			"editor.noMatchingBlocks": "لا توجد كتل مطابقة",
+			"editor.placeholder": "اكتب المحتوى أو اكتب / لعرض الأوامر…",
+			"editor.remove": "إزالة",
+			"editor.removeNamed": "إزالة {name}",
+			"editor.replaceNamed": "استبدال {name}",
+			"editor.strikethrough": "يتوسطه خط",
+			"editor.subscript": "منخفض",
+			"editor.superscript": "مرتفع",
+			"editor.underline": "تحته خط",
+			"option.bulletedList.description": "قائمة غير مرتبة",
+			"option.bulletedList.keywords": "قائمة نقطية غير مرتبة ul",
+			"option.bulletedList.label": "قائمة نقطية",
+			"option.checklist.description": "مهام مع مربعات اختيار",
+			"option.checklist.keywords": "قائمة مهام مربعات اختيار todo",
+			"option.checklist.label": "قائمة تحقق",
+			"option.codeBlock.description": "شفرة منسقة مسبقًا",
+			"option.codeBlock.keywords": "شفرة كتلة منسقة مسبقًا pre",
+			"option.codeBlock.label": "كتلة شفرة",
+			"option.divider.description": "خط أفقي",
+			"option.divider.keywords": "فاصل خط أفقي hr",
+			"option.divider.label": "فاصل",
+			"option.heading2.description": "عنوان قسم",
+			"option.heading2.keywords": "عنوان قسم رئيسي h2",
+			"option.heading2.label": "عنوان 2",
+			"option.heading3.description": "عنوان قسم فرعي",
+			"option.heading3.keywords": "عنوان قسم فرعي h3",
+			"option.heading3.label": "عنوان 3",
+			"option.numberedList.description": "قائمة مرتبة",
+			"option.numberedList.keywords": "قائمة مرقمة مرتبة ol",
+			"option.numberedList.label": "قائمة مرقمة",
+			"option.paragraph.description": "نص عادي",
+			"option.paragraph.keywords": "فقرة نص عادي p",
+			"option.paragraph.label": "فقرة",
+			"option.quote.description": "نص مقتبس",
+			"option.quote.keywords": "اقتباس نص مقتبس",
+			"option.quote.label": "اقتباس",
+			"option.relationship.description": "الإشارة إلى {label} موجود",
+			"option.relationship.keywords": "علاقة مرجع مستند مرتبط",
+			"option.relationship.label": "{label} مرتبط",
+			"option.upload.description": "اختيار أو رفع {label}",
+			"option.upload.keywords": "رفع صورة وسائط ملف أصل",
+			"relationship.actions": "إجراءات العلاقة",
+			"relationship.label": "{collection}: {title}",
+			"relationship.remove": "إزالة",
+			"relationship.replace": "استبدال",
+			"relationship.unavailable": "مرجع غير متاح",
+		},
+	},
+});

package/src/relationship/rich-text-relationship-node.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import {
+		useLexicalComposerContext,
+		useLexicalEditable,
+		useLexicalNodeSelection,
+	} from "@hvniel/lexical-svelte";
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { NodeKey } from "lexical";
+
+	import { getRichTextAuthoringHost } from "@plugin-richtext/field/rich-text-context.svelte";
+	import {
+		OPEN_RELATIONSHIP_BROWSER_COMMAND,
+		REMOVE_RELATIONSHIP_COMMAND,
+	} from "@plugin-richtext/menu/rich-text-commands";
+
+	let {
+		documentID,
+		nodeKey,
+		relationTo,
+	}: { documentID: string; nodeKey: NodeKey; relationTo: string } = $props();
+	const editor = useLexicalComposerContext()[0];
+	const isEditable = useLexicalEditable();
+	const i18n = getAdminI18n();
+	// A decorator node key is fixed for this component's lifetime.
+	// svelte-ignore state_referenced_locally
+	const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+	const authoring = getRichTextAuthoringHost();
+	let document = $state.raw<Record<string, unknown>>();
+	let loadError = $state(false);
+	const collection = $derived(
+		authoring?.collections.find((candidate) => candidate.slug === relationTo)
+	);
+	const titleField = $derived(
+		collection?.admin.useAsTitle ??
+			collection?.fields.find((field) => field.name === "title" || field.name === "name")?.name
+	);
+	const title = $derived(
+		titleField !== undefined && typeof document?.[titleField] === "string"
+			? String(document[titleField])
+			: documentID
+	);
+
+	$effect(() => {
+		if (authoring === undefined) return;
+		void authoring.documentRevision;
+		const request = new AbortController();
+		authoring
+			.findDocument(relationTo, documentID, request.signal)
+			.then((value) => {
+				if (request.signal.aborted) return;
+				document = value;
+				loadError = false;
+			})
+			.catch(() => {
+				if (request.signal.aborted) return;
+				loadError = true;
+			});
+		return () => request.abort();
+	});
+
+	function selectNode(event?: MouseEvent) {
+		if (event?.shiftKey !== true) clearSelection();
+		setSelected(true);
+	}
+
+	function openDocument(event: MouseEvent) {
+		selectNode(event);
+		editor.dispatchCommand(OPEN_RELATIONSHIP_BROWSER_COMMAND, {
+			collectionSlug: relationTo,
+			documentID,
+			mode: "edit",
+		});
+	}
+
+	function replaceDocument() {
+		editor.dispatchCommand(OPEN_RELATIONSHIP_BROWSER_COMMAND, {
+			collectionSlug: relationTo,
+			documentID,
+			mode: "replace",
+			nodeKey,
+		});
+	}
+
+	function removeRelationship() {
+		editor.dispatchCommand(REMOVE_RELATIONSHIP_COMMAND, nodeKey);
+		queueMicrotask(() => editor.focus());
+	}
+</script>
+
+<article
+	class={[
+		"group/relationship relative my-6 flex items-center gap-3 rounded-[4px] border border-control-border bg-control px-4 py-3.5 transition-colors hover:border-primary/45",
+		isSelected() && "border-primary/50",
+	]}
+	role="group"
+	aria-label={i18n.t("plugin.richtext:relationship.label", {
+		collection: collection?.labels.singular ?? relationTo,
+		title,
+	})}
+>
+	<span
+		class="font-mono grid size-9 shrink-0 place-items-center rounded-full bg-primary/10 text-[11px] font-semibold text-brand-primary-soft"
+		aria-hidden="true"
+	>
+		{(collection?.labels.singular ?? relationTo).slice(0, 2).toLocaleUpperCase(i18n.language)}
+	</span>
+	<button
+		type="button"
+		class="min-w-0 flex-1 cursor-pointer border-0 bg-transparent p-0 text-start outline-none"
+		disabled={!isEditable()}
+		onclick={openDocument}
+	>
+		<span class="block truncate text-[13.5px] font-medium text-foreground-strong">
+			{loadError ? i18n.t("plugin.richtext:relationship.unavailable") : title}
+		</span>
+		<span class="font-mono mt-0.5 block truncate text-[10px] text-foreground-faint">
+			{collection?.labels.singular ?? relationTo} · {documentID}
+		</span>
+	</button>
+	{#if isEditable()}
+		<div
+			class="flex shrink-0 items-center gap-1"
+			aria-label={i18n.t("plugin.richtext:relationship.actions")}
+		>
+			<button
+				type="button"
+				class="rounded-[3px] px-2 py-1.5 text-[11px] text-foreground-muted hover:bg-control-hover hover:text-foreground"
+				onclick={replaceDocument}
+			>
+				{i18n.t("plugin.richtext:relationship.replace")}
+			</button>
+			<button
+				type="button"
+				class="rounded-[3px] px-2 py-1.5 text-[11px] text-destructive hover:bg-destructive/10"
+				onclick={removeRelationship}
+			>
+				{i18n.t("plugin.richtext:relationship.remove")}
+			</button>
+		</div>
+	{/if}
+</article>

package/src/relationship/rich-text-relationship-node.ts

@@ -0,0 +1,105 @@
+import type { Decorator } from "@hvniel/lexical-svelte";
+import { DecoratorBlockNode } from "@hvniel/lexical-svelte";
+import {
+	$applyNodeReplacement,
+	$getDocument,
+	type ElementFormatType,
+	type LexicalNode,
+	type LexicalUpdateJSON,
+	type NodeKey,
+	type SerializedLexicalNode,
+	type Spread,
+} from "lexical";
+
+import RichTextRelationshipNodeComponent from "@plugin-richtext/relationship/rich-text-relationship-node.svelte";
+
+export type SerializedRelationshipNode = Spread<
+	{
+		format: ElementFormatType;
+		id: string;
+		relationTo: string;
+	},
+	SerializedLexicalNode
+>;
+
+export class RelationshipNode extends DecoratorBlockNode {
+	__relationTo: string;
+	__documentID: string;
+
+	static getType(): string {
+		return "relationship";
+	}
+
+	static clone(node: RelationshipNode): RelationshipNode {
+		return new RelationshipNode(node.__relationTo, node.__documentID, node.__format, node.__key);
+	}
+
+	static importJSON(serializedNode: SerializedRelationshipNode): RelationshipNode {
+		return createRelationshipNode({
+			documentID: serializedNode.id,
+			format: serializedNode.format,
+			relationTo: serializedNode.relationTo,
+		}).updateFromJSON(serializedNode);
+	}
+
+	constructor(relationTo: string, documentID: string, format?: ElementFormatType, key?: NodeKey) {
+		super(format, key);
+		this.__relationTo = relationTo;
+		this.__documentID = documentID;
+	}
+
+	updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedRelationshipNode>): this {
+		const node = super.updateFromJSON(serializedNode);
+		node.__relationTo = serializedNode.relationTo;
+		node.__documentID = serializedNode.id;
+		return node;
+	}
+
+	exportJSON(): SerializedRelationshipNode {
+		return {
+			...super.exportJSON(),
+			id: this.__documentID,
+			relationTo: this.__relationTo,
+		};
+	}
+
+	createDOM(): HTMLElement {
+		const element = $getDocument().createElement("div");
+		element.className = "ridu-richtext-relationship";
+		return element;
+	}
+
+	decorate(): Decorator<typeof RichTextRelationshipNodeComponent> {
+		return {
+			component: RichTextRelationshipNodeComponent,
+			props: {
+				documentID: this.__documentID,
+				nodeKey: this.getKey(),
+				relationTo: this.__relationTo,
+			},
+		};
+	}
+
+	setReference(relationTo: string, documentID: string): this {
+		const writable = this.getWritable();
+		writable.__relationTo = relationTo;
+		writable.__documentID = documentID;
+		return writable;
+	}
+}
+
+export function createRelationshipNode({
+	documentID,
+	format,
+	relationTo,
+}: {
+	documentID: string;
+	format?: ElementFormatType;
+	relationTo: string;
+}): RelationshipNode {
+	return $applyNodeReplacement(new RelationshipNode(relationTo, documentID, format));
+}
+
+export function isRelationshipNode(node: LexicalNode | null | undefined): node is RelationshipNode {
+	return node instanceof RelationshipNode;
+}