@riducms/plugin-richtext 0.2.3 → 0.4.0

package/src/messages.ts

@@ -2,6 +2,27 @@ import { defineAdminMessages } from "@riducms/plugin";
 
 export const richTextMessages = defineAdminMessages({
 	fallback: {
+		"menu.lists": "Lists",
+		"menu.basic": "Basic",
+		"menu.blocks": "Blocks",
+		"editor.insertParagraph": "Insert paragraph",
+		"link.textLabel": "Text to display",
+		"link.textRequired": "Text to display is required.",
+		"link.urlRequired": "URL is required.",
+		"link.urlInvalid": "Enter a valid web, email, or telephone URL.",
+		"link.newTab": "Open in a new tab",
+		"link.saveChanges": "Save changes",
+		"link.preview": "Link options",
+		"editor.textStyle": "Text style",
+		"editor.alignment": "Alignment",
+		"editor.heading": "Heading {level}",
+		"editor.align.left": "Align left",
+		"editor.align.center": "Align center",
+		"editor.align.right": "Align right",
+		"editor.align.justify": "Justify",
+		"editor.indent": "Increase indent",
+		"editor.outdent": "Decrease indent",
+
 		"block.label": "{label} block",
 		"block.select": "Select {label} block",
 		"block.edit": "Edit",
@@ -28,7 +49,6 @@ export const richTextMessages = defineAdminMessages({
 		"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.",
@@ -53,6 +73,7 @@ export const richTextMessages = defineAdminMessages({
 		"editor.noMatchingBlocks": "No matching blocks",
 		"editor.placeholder": "Write body copy, or type / for commands…",
 		"editor.remove": "Remove",
+		"editor.removeLink": "Remove link",
 		"editor.removeNamed": "Remove {name}",
 		"editor.replaceNamed": "Replace {name}",
 		"editor.strikethrough": "Strikethrough",
@@ -71,12 +92,6 @@ export const richTextMessages = defineAdminMessages({
 		"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",
@@ -86,9 +101,9 @@ export const richTextMessages = defineAdminMessages({
 		"option.quote.description": "Quoted passage",
 		"option.quote.keywords": "quote blockquote citation",
 		"option.quote.label": "Quote",
-		"option.relationship.description": "Reference an existing {label}",
+		"option.relationship.description": "Reference an existing document",
 		"option.relationship.keywords": "relationship reference document related",
-		"option.relationship.label": "Related {label}",
+		"option.relationship.label": "Relationship",
 		"option.upload.description": "Select or upload {label}",
 		"option.upload.keywords": "upload image photo media file asset",
 		"relationship.actions": "Relationship actions",
@@ -99,6 +114,27 @@ export const richTextMessages = defineAdminMessages({
 	},
 	translations: {
 		fr: {
+			"menu.lists": "Listes",
+			"menu.basic": "Basique",
+			"menu.blocks": "Blocs",
+			"editor.insertParagraph": "Insérer un paragraphe",
+			"link.textLabel": "Texte à afficher",
+			"link.textRequired": "Le texte à afficher est obligatoire.",
+			"link.urlRequired": "L’URL est obligatoire.",
+			"link.urlInvalid": "Saisissez une URL web, e-mail ou téléphone valide.",
+			"link.newTab": "Ouvrir dans un nouvel onglet",
+			"link.saveChanges": "Enregistrer les modifications",
+			"link.preview": "Options du lien",
+			"editor.textStyle": "Style de texte",
+			"editor.alignment": "Alignement",
+			"editor.heading": "Titre {level}",
+			"editor.align.left": "Aligner à gauche",
+			"editor.align.center": "Centrer",
+			"editor.align.right": "Aligner à droite",
+			"editor.align.justify": "Justifier",
+			"editor.indent": "Augmenter le retrait",
+			"editor.outdent": "Diminuer le retrait",
+
 			"block.label": "Bloc {label}",
 			"block.select": "Sélectionner le bloc {label}",
 			"block.edit": "Modifier",
@@ -127,7 +163,6 @@ export const richTextMessages = defineAdminMessages({
 			"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.",
@@ -152,6 +187,7 @@ export const richTextMessages = defineAdminMessages({
 			"editor.noMatchingBlocks": "Aucun bloc correspondant",
 			"editor.placeholder": "Rédigez le contenu ou saisissez / pour les commandes…",
 			"editor.remove": "Supprimer",
+			"editor.removeLink": "Supprimer le lien",
 			"editor.removeNamed": "Supprimer {name}",
 			"editor.replaceNamed": "Remplacer {name}",
 			"editor.strikethrough": "Barré",
@@ -170,12 +206,6 @@ export const richTextMessages = defineAdminMessages({
 			"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",
@@ -185,9 +215,9 @@ export const richTextMessages = defineAdminMessages({
 			"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.description": "Référencer un document existant",
 			"option.relationship.keywords": "relation référence document associé",
-			"option.relationship.label": "{label} associé",
+			"option.relationship.label": "Relation",
 			"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",
@@ -197,6 +227,27 @@ export const richTextMessages = defineAdminMessages({
 			"relationship.unavailable": "Référence indisponible",
 		},
 		ar: {
+			"menu.lists": "القوائم",
+			"menu.basic": "أساسي",
+			"menu.blocks": "الكتل",
+			"editor.insertParagraph": "إدراج فقرة",
+			"link.textLabel": "النص المعروض",
+			"link.textRequired": "النص المعروض مطلوب.",
+			"link.urlRequired": "الرابط مطلوب.",
+			"link.urlInvalid": "أدخل رابط ويب أو بريد إلكتروني أو هاتف صالحًا.",
+			"link.newTab": "فتح في علامة تبويب جديدة",
+			"link.saveChanges": "حفظ التغييرات",
+			"link.preview": "خيارات الرابط",
+			"editor.textStyle": "نمط النص",
+			"editor.alignment": "المحاذاة",
+			"editor.heading": "عنوان {level}",
+			"editor.align.left": "محاذاة لليسار",
+			"editor.align.center": "توسيط",
+			"editor.align.right": "محاذاة لليمين",
+			"editor.align.justify": "ضبط",
+			"editor.indent": "زيادة المسافة البادئة",
+			"editor.outdent": "تقليل المسافة البادئة",
+
 			"block.label": "كتلة {label}",
 			"block.select": "تحديد كتلة {label}",
 			"block.edit": "تعديل",
@@ -223,7 +274,6 @@ export const richTextMessages = defineAdminMessages({
 			"asset.unavailable": "غير متاح",
 			"editor.addBlock": "إضافة كتلة",
 			"editor.addLink": "إضافة رابط",
-			"editor.apply": "تطبيق",
 			"editor.blockActions": "إجراءات الكتلة",
 			"editor.blockAlreadyFirst": "هذه الكتلة هي الأولى بالفعل.",
 			"editor.blockAlreadyLast": "هذه الكتلة هي الأخيرة بالفعل.",
@@ -248,6 +298,7 @@ export const richTextMessages = defineAdminMessages({
 			"editor.noMatchingBlocks": "لا توجد كتل مطابقة",
 			"editor.placeholder": "اكتب المحتوى أو اكتب / لعرض الأوامر…",
 			"editor.remove": "إزالة",
+			"editor.removeLink": "إزالة الرابط",
 			"editor.removeNamed": "إزالة {name}",
 			"editor.replaceNamed": "استبدال {name}",
 			"editor.strikethrough": "يتوسطه خط",
@@ -266,12 +317,6 @@ export const richTextMessages = defineAdminMessages({
 			"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": "قائمة مرقمة",
@@ -281,9 +326,9 @@ export const richTextMessages = defineAdminMessages({
 			"option.quote.description": "نص مقتبس",
 			"option.quote.keywords": "اقتباس نص مقتبس",
 			"option.quote.label": "اقتباس",
-			"option.relationship.description": "الإشارة إلى {label} موجود",
+			"option.relationship.description": "الإشارة إلى مستند موجود",
 			"option.relationship.keywords": "علاقة مرجع مستند مرتبط",
-			"option.relationship.label": "{label} مرتبط",
+			"option.relationship.label": "علاقة",
 			"option.upload.description": "اختيار أو رفع {label}",
 			"option.upload.keywords": "رفع صورة وسائط ملف أصل",
 			"relationship.actions": "إجراءات العلاقة",

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

@@ -0,0 +1,98 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-richtext-relationship-card {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		inline-size: min(100%, 360px);
+		margin-block: 12px;
+		padding: 14px 15px;
+		border: 1px solid var(--control-border);
+		border-radius: var(--control-radius);
+		background: var(--control-surface);
+		box-shadow: var(--control-shadow);
+		color: var(--foreground);
+		font-family: var(--font-sans);
+		line-height: var(--line-height-body);
+		transition:
+			border-color 100ms,
+			box-shadow 100ms;
+
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+
+		&.is-selected {
+			border-color: var(--foreground-muted);
+			box-shadow:
+				var(--control-shadow),
+				0 0 0 1px var(--foreground-muted);
+		}
+	}
+
+	.ridu-richtext-relationship-card__content {
+		display: grid;
+		flex: 1;
+		gap: 5px;
+		min-width: 0;
+	}
+
+	.ridu-richtext-relationship-card__label,
+	.ridu-richtext-relationship-card__title {
+		overflow: hidden;
+		line-height: 16px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ridu-richtext-relationship-card__label {
+		color: var(--foreground-muted);
+		font-size: 12px;
+	}
+
+	.ridu-richtext-relationship-card__title {
+		display: block;
+		min-width: 0;
+		max-width: 100%;
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: var(--foreground);
+		font: inherit;
+		font-weight: 600;
+		text-align: start;
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 2px;
+		cursor: pointer;
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+
+		&:disabled {
+			color: var(--control-disabled-foreground);
+			text-decoration: none;
+			cursor: default;
+		}
+	}
+
+	.ridu-richtext-relationship-card__actions {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		gap: 3px;
+	}
+
+	@media (max-width: 30rem) {
+		.ridu-richtext-relationship-card {
+			align-items: flex-start;
+			flex-wrap: wrap;
+		}
+
+		.ridu-richtext-relationship-card__actions {
+			margin-inline-start: auto;
+		}
+	}
+}

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

@@ -5,13 +5,17 @@
 		useLexicalNodeSelection,
 	} from "@hvniel/lexical-svelte";
 	import { getAdminI18n } from "@riducms/plugin";
+	import { Button } from "@riducms/ui";
 	import type { NodeKey } from "lexical";
+	import ReplaceIcon from "~icons/lucide/refresh-cw";
+	import RemoveIcon from "~icons/lucide/x";
 
 	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";
+	import "@plugin-richtext/relationship/rich-text-relationship-node.scss";
 
 	let {
 		documentID,
@@ -44,6 +48,8 @@
 		if (authoring === undefined) return;
 		void authoring.documentRevision;
 		const request = new AbortController();
+		document = undefined;
+		loadError = false;
 		authoring
 			.findDocument(relationTo, documentID, request.signal)
 			.then((value) => {
@@ -88,54 +94,54 @@
 </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",
-	]}
+	class={["ridu-richtext-relationship-card", isSelected() && "is-selected"]}
+	data-selected={isSelected() || undefined}
+	aria-busy={authoring !== undefined && document === undefined && !loadError}
 	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">
+	<div class="ridu-richtext-relationship-card__content" aria-live="polite">
+		<span class="ridu-richtext-relationship-card__label">
 			{collection?.labels.singular ?? relationTo} · {documentID}
 		</span>
-	</button>
+		<button
+			type="button"
+			class="ridu-richtext-relationship-card__title"
+			disabled={!isEditable()}
+			onclick={openDocument}
+		>
+			{loadError ? i18n.t("plugin.richtext:relationship.unavailable") : title}
+		</button>
+	</div>
 	{#if isEditable()}
 		<div
-			class="flex shrink-0 items-center gap-1"
+			class="ridu-richtext-relationship-card__actions"
+			role="group"
 			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"
+			<Button
+				class="ridu-richtext-relationship-card__action"
+				variant="ghost"
+				size="icon-sm"
 				onclick={replaceDocument}
+				aria-label={i18n.t("plugin.richtext:relationship.replace")}
+				tooltip={i18n.t("plugin.richtext:relationship.replace")}
 			>
-				{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"
+				<ReplaceIcon />
+			</Button>
+			<Button
+				class="ridu-richtext-relationship-card__action"
+				variant="ghost"
+				size="icon-sm"
 				onclick={removeRelationship}
+				aria-label={i18n.t("plugin.richtext:relationship.remove")}
+				tooltip={i18n.t("plugin.richtext:relationship.remove")}
 			>
-				{i18n.t("plugin.richtext:relationship.remove")}
-			</button>
+				<RemoveIcon />
+			</Button>
 		</div>
 	{/if}
 </article>

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

@@ -1,19 +1,8 @@
 <script lang="ts">
 	import type { FieldAuthoringHost } from "@riducms/plugin";
 	import type { SchemaCollection, SchemaField } from "@riducms/protocol";
-	import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
-	import {
-		$createParagraphNode,
-		$getNodeByKey,
-		$getPreviousSelection,
-		$getRoot,
-		$getSelection,
-		$isElementNode,
-		$isParagraphNode,
-		$isRangeSelection,
-		COMMAND_PRIORITY_EDITOR,
-		type NodeKey,
-	} from "lexical";
+	import { mergeRegister } from "@lexical/utils";
+	import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, type NodeKey } from "lexical";
 	import { useLexicalComposerContext } from "@hvniel/lexical-svelte";
 
 	import {
@@ -21,6 +10,10 @@
 		REMOVE_RELATIONSHIP_COMMAND,
 	} from "@plugin-richtext/menu/rich-text-commands";
 	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+	import {
+		insertReferenceNode,
+		removeReferenceNode,
+	} from "@plugin-richtext/field/reference-node-placement";
 	import {
 		createRelationshipNode,
 		isRelationshipNode,
@@ -38,7 +31,7 @@
 	} = $props();
 	const editor = useLexicalComposerContext()[0];
 	let browserOpen = $state(false);
-	let targetCollection = $state<SchemaCollection>();
+	let targetCollection = $state.raw<SchemaCollection>();
 	let documentID = $state<string>();
 	let browserMode = $state<"edit" | "insert" | "replace">("insert");
 	let replaceNodeKey: NodeKey | undefined;
@@ -61,9 +54,12 @@
 			editor.registerCommand(
 				OPEN_RELATIONSHIP_BROWSER_COMMAND,
 				(payload) => {
-					const collection = relationshipCollections.find(
-						(candidate) => candidate.slug === payload.collectionSlug
-					);
+					const collection =
+						payload.collectionSlug === undefined
+							? relationshipCollections[0]
+							: relationshipCollections.find(
+									(candidate) => candidate.slug === payload.collectionSlug
+								);
 					if (collection === undefined) return false;
 					browserMode =
 						payload.mode ??
@@ -85,16 +81,7 @@
 				(nodeKey) => {
 					const node = $getNodeByKey(nodeKey);
 					if (!isRelationshipNode(node)) return false;
-					const next = node.getNextSibling();
-					const previous = node.getPreviousSibling();
-					node.remove();
-					if ($isElementNode(next)) next.selectStart();
-					else if ($isElementNode(previous)) previous.selectEnd();
-					else {
-						const paragraph = $createParagraphNode();
-						$getRoot().append(paragraph);
-						paragraph.select();
-					}
+					removeReferenceNode(node);
 					return true;
 				},
 				COMMAND_PRIORITY_EDITOR
@@ -102,10 +89,13 @@
 		);
 	});
 
-	function commit(ids: string[]) {
+	function commit(ids: string[], collectionSlug: string) {
 		const id = ids[0];
-		const collection = targetCollection;
-		if (id === undefined || collection === undefined) return;
+		if (
+			id === undefined ||
+			!relationshipCollections.some((collection) => collection.slug === collectionSlug)
+		)
+			return;
 		if (browserMode === "edit") {
 			closeBrowser();
 			return;
@@ -113,21 +103,14 @@
 		editor.update(() => {
 			if (replaceNodeKey !== undefined) {
 				const current = $getNodeByKey(replaceNodeKey);
-				if (isRelationshipNode(current)) current.setReference(collection.slug, id);
+				if (isRelationshipNode(current)) current.setReference(collectionSlug, id);
 				return;
 			}
-			const selection = $getSelection() ?? $getPreviousSelection();
-			if (!$isRangeSelection(selection)) $getRoot().selectEnd();
-			const focusNode = $isRangeSelection(selection) ? selection.focus.getNode() : undefined;
 			const relationship = createRelationshipNode({
 				documentID: id,
-				relationTo: collection.slug,
+				relationTo: collectionSlug,
 			});
-			$insertNodeToNearestRoot(relationship);
-			if ($isParagraphNode(focusNode) && focusNode.getChildrenSize() === 0) focusNode.remove();
-			const paragraph = $createParagraphNode();
-			relationship.insertAfter(paragraph);
-			paragraph.select();
+			insertReferenceNode(relationship);
 		});
 		closeBrowser();
 	}
@@ -165,6 +148,7 @@
 		open
 		field={browserField}
 		collection={targetCollection}
+		{...browserMode === "edit" ? {} : { collections: relationshipCollections }}
 		hasMany={false}
 		selectedIDs={documentID === undefined ? [] : [documentID]}
 		{...browserMode === "edit" && documentID !== undefined ? { initialDocumentID: documentID } : {}}

package/src/render/rich-text.svelte

@@ -40,7 +40,8 @@
 	{#each values as node}
 		{#if node.type === "block"}
 			{const Block = $derived(component(node.fields))}
-			{#if Block !== undefined}<Block block={node.fields} />
+			{#if Block !== undefined}
+				<Block block={node.fields} />
 			{:else}
 				{const failure = $derived(
 					unsupported(
@@ -52,10 +53,13 @@
 			{/if}
 		{:else if node.type === "text"}
 			{@html renderRichTextText(node)}
-		{:else if node.type === "linebreak"}<br />
-		{:else if node.type === "horizontalrule"}<hr />
+		{:else if node.type === "linebreak"}
+			<br />
+		{:else if node.type === "horizontalrule"}
+			<hr />
 		{:else if node.type === "upload" || node.type === "relationship"}
-			{#if references !== undefined}{@render references(node)}
+			{#if references !== undefined}
+				{@render references(node)}
 			{:else}
 				{const failure = $derived(
 					unsupported(node, `No renderer registered for rich-text node ${node.type}`)
@@ -63,7 +67,8 @@
 				{@render failure.render(failure.node, failure.error)}
 			{/if}
 		{:else if node.type === "paragraph" || node.type === "heading" || node.type === "quote" || node.type === "link" || node.type === "list" || node.type === "listitem" || node.type === "code"}
-			{#if node.type === "code"}<pre><code>{@render nodes(node.children)}</code></pre>
+			{#if node.type === "code"}
+				<pre><code>{@render nodes(node.children)}</code></pre>
 			{:else}
 				<svelte:element
 					this={richTextElementTag(node)}

package/src/render.ts

@@ -6,6 +6,7 @@ import type {
 	RichTextTextNode,
 } from "#richtext/document";
 import { documentRecoveryIssue } from "#richtext/document-validation";
+import { renderableRichTextURL } from "#richtext/link-url-policy";
 
 export type { RichTextBlockRenderers } from "#richtext/document";
 export { documentRecoveryIssue } from "#richtext/document-validation";
@@ -33,14 +34,8 @@ export function escapeRichText(value: string): string {
 }
 
 export function safeRichTextURL(value: string): string {
-	const url = value.trim();
-	if (
-		/[\u0000-\u001f\u007f]/u.test(value) ||
-		url.startsWith("//") ||
-		(/^[a-z][a-z\d+.-]*:/iu.test(url) && !/^(https?|mailto|tel):/iu.test(url))
-	) {
-		throw new Error("Unsafe rich-text link URL");
-	}
+	const url = renderableRichTextURL(value);
+	if (url === undefined) throw new Error("Unsafe rich-text link URL");
 	return url;
 }