@riducms/plugin-richtext 0.1.0

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

@@ -0,0 +1,174 @@
+<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 { useLexicalComposerContext } from "@hvniel/lexical-svelte";
+
+	import {
+		OPEN_RELATIONSHIP_BROWSER_COMMAND,
+		REMOVE_RELATIONSHIP_COMMAND,
+	} from "@plugin-richtext/menu/rich-text-commands";
+	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+	import {
+		createRelationshipNode,
+		isRelationshipNode,
+		RelationshipNode,
+	} from "@plugin-richtext/relationship/rich-text-relationship-node";
+
+	let {
+		authoring,
+		config,
+		field,
+	}: {
+		authoring: FieldAuthoringHost | undefined;
+		config: RichTextConfig;
+		field: SchemaField;
+	} = $props();
+	const editor = useLexicalComposerContext()[0];
+	let browserOpen = $state(false);
+	let targetCollection = $state<SchemaCollection>();
+	let documentID = $state<string>();
+	let browserMode = $state<"edit" | "insert" | "replace">("insert");
+	let replaceNodeKey: NodeKey | undefined;
+	const relationshipCollections = $derived(
+		(authoring?.collections ?? []).filter(
+			(collection) =>
+				config.relationshipCollections.length === 0 ||
+				config.relationshipCollections.includes(collection.slug)
+		)
+	);
+	const browserField = $derived(
+		targetCollection === undefined ? undefined : createBrowserField(field, targetCollection)
+	);
+
+	$effect(() => {
+		if (!editor.hasNodes([RelationshipNode])) {
+			throw new Error("RichTextRelationshipPlugin requires RelationshipNode to be registered");
+		}
+		return mergeRegister(
+			editor.registerCommand(
+				OPEN_RELATIONSHIP_BROWSER_COMMAND,
+				(payload) => {
+					const collection = relationshipCollections.find(
+						(candidate) => candidate.slug === payload.collectionSlug
+					);
+					if (collection === undefined) return false;
+					browserMode =
+						payload.mode ??
+						(payload.nodeKey !== undefined
+							? "replace"
+							: payload.documentID !== undefined
+								? "edit"
+								: "insert");
+					targetCollection = collection;
+					documentID = payload.documentID;
+					replaceNodeKey = browserMode === "replace" ? payload.nodeKey : undefined;
+					browserOpen = true;
+					return true;
+				},
+				COMMAND_PRIORITY_EDITOR
+			),
+			editor.registerCommand(
+				REMOVE_RELATIONSHIP_COMMAND,
+				(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();
+					}
+					return true;
+				},
+				COMMAND_PRIORITY_EDITOR
+			)
+		);
+	});
+
+	function commit(ids: string[]) {
+		const id = ids[0];
+		const collection = targetCollection;
+		if (id === undefined || collection === undefined) return;
+		if (browserMode === "edit") {
+			closeBrowser();
+			return;
+		}
+		editor.update(() => {
+			if (replaceNodeKey !== undefined) {
+				const current = $getNodeByKey(replaceNodeKey);
+				if (isRelationshipNode(current)) current.setReference(collection.slug, 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,
+			});
+			$insertNodeToNearestRoot(relationship);
+			if ($isParagraphNode(focusNode) && focusNode.getChildrenSize() === 0) focusNode.remove();
+			const paragraph = $createParagraphNode();
+			relationship.insertAfter(paragraph);
+			paragraph.select();
+		});
+		closeBrowser();
+	}
+
+	function closeBrowser() {
+		browserOpen = false;
+		browserMode = "insert";
+		documentID = undefined;
+		replaceNodeKey = undefined;
+		queueMicrotask(() => editor.focus());
+	}
+
+	function createBrowserField(field: SchemaField, collection: SchemaCollection): SchemaField {
+		return {
+			id: `${field.id}-richtext-relationship`,
+			name: `${field.name}Relationship`,
+			path: `${field.path}.__relationship`,
+			type: "relationship",
+			category: "relationship",
+			required: false,
+			unique: false,
+			admin: { label: collection.labels.singular },
+			relationship: {
+				collectionId: collection.id,
+				collectionSlug: collection.slug,
+				onDelete: "nullify",
+			},
+		};
+	}
+</script>
+
+{#if browserOpen && authoring !== undefined && targetCollection !== undefined && browserField !== undefined}
+	{const ReferenceBrowser = authoring.referenceBrowser}
+	<ReferenceBrowser
+		open
+		field={browserField}
+		collection={targetCollection}
+		hasMany={false}
+		selectedIDs={documentID === undefined ? [] : [documentID]}
+		{...browserMode === "edit" && documentID !== undefined ? { initialDocumentID: documentID } : {}}
+		onCommit={commit}
+		onClose={closeBrowser}
+	/>
+{/if}

package/src/styles/integration.css

@@ -0,0 +1,83 @@
+.ridu-richtext-tags span + span::before {
+	margin-inline-end: 0.5rem;
+	color: var(--ink-faint);
+	content: "·";
+}
+
+.ridu-richtext-content ::selection {
+	background: color-mix(in srgb, var(--primary) 28%, transparent);
+	color: var(--foreground);
+}
+
+.ridu-richtext-content > .ridu-richtext-heading:first-child {
+	margin-top: 0;
+}
+
+.ridu-richtext-list-item::marker {
+	color: var(--brand-primary-soft);
+}
+
+.ridu-richtext-checklist .ridu-richtext-list-item {
+	position: relative;
+	padding-inline-start: 1.75rem;
+}
+
+.ridu-richtext-checklist .ridu-richtext-list-item::before {
+	position: absolute;
+	top: 0.42rem;
+	inset-inline-start: 0;
+	width: 0.9rem;
+	height: 0.9rem;
+	border: 1px solid var(--border);
+	border-radius: 0.25rem;
+	content: "";
+}
+
+.ridu-richtext-checklist .ridu-richtext-list-item-checked::before {
+	border-color: var(--primary);
+	background: var(--primary);
+	box-shadow: inset 0 0 0 2px var(--background);
+}
+
+.ridu-richtext-rule.is-selected {
+	border-top-color: color-mix(in srgb, var(--primary) 60%, transparent);
+}
+
+/* Lexical toggles this inline; keep the toolbar measurable while preventing interaction. */
+.ridu-richtext-block-toolbar[style*="display: none"] {
+	opacity: 0 !important;
+	pointer-events: none;
+}
+
+/* Lexical positions the menu 4px into the canvas; cancel that offset and center the grip on its rule. */
+.ridu-richtext-block-toolbar {
+	margin-inline-start: calc(-4px - 0.4rem);
+}
+
+.ridu-richtext-block-grip span {
+	width: 2px;
+	height: 2px;
+	border-radius: 50%;
+	background: currentColor;
+}
+
+.ridu-richtext-upload-preview.is-loading::after {
+	position: absolute;
+	inset: 0;
+	background: color-mix(in srgb, var(--foreground) 3%, transparent);
+	content: "";
+}
+
+@keyframes ridu-richtext-menu-in {
+	from {
+		opacity: 0;
+		transform: translateY(0.25rem) scale(0.985);
+	}
+}
+
+@keyframes ridu-richtext-toolbar-in {
+	from {
+		opacity: 0;
+		transform: translateY(0.2rem) scale(0.985);
+	}
+}

package/src/toolbar/rich-text-floating-toolbar.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+	import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+	import { mergeRegister } from "@lexical/utils";
+	import { getAdminI18n } from "@riducms/plugin";
+	import {
+		Button,
+		Input,
+		PopoverContent,
+		PopoverRoot,
+		PopoverTrigger,
+		ToolbarButton,
+		ToolbarRoot,
+	} from "@riducms/ui";
+	import { Portal, useLexicalComposerContext, useLexicalEditable } from "@hvniel/lexical-svelte";
+	import {
+		$getSelection,
+		$isRangeSelection,
+		COMMAND_PRIORITY_LOW,
+		SELECTION_CHANGE_COMMAND,
+		type TextFormatType,
+	} from "lexical";
+	import { tick } from "svelte";
+
+	import ToolbarIcon from "@plugin-richtext/toolbar/toolbar-icon.svelte";
+
+	const editor = useLexicalComposerContext()[0];
+	const isEditable = useLexicalEditable();
+	const i18n = getAdminI18n();
+	const formatButtons: readonly {
+		format: TextFormatType;
+		icon: "bold" | "code" | "italic" | "strike" | "subscript" | "superscript" | "underline";
+		label: string;
+	}[] = [
+		{ format: "bold", icon: "bold", label: i18n.t("plugin.richtext:editor.bold") },
+		{ format: "italic", icon: "italic", label: i18n.t("plugin.richtext:editor.italic") },
+		{ format: "underline", icon: "underline", label: i18n.t("plugin.richtext:editor.underline") },
+		{
+			format: "strikethrough",
+			icon: "strike",
+			label: i18n.t("plugin.richtext:editor.strikethrough"),
+		},
+		{ format: "subscript", icon: "subscript", label: i18n.t("plugin.richtext:editor.subscript") },
+		{
+			format: "superscript",
+			icon: "superscript",
+			label: i18n.t("plugin.richtext:editor.superscript"),
+		},
+		{ format: "code", icon: "code", label: i18n.t("plugin.richtext:editor.inlineCode") },
+	];
+	const toolbarButtonClass =
+		"size-[28.8px] rounded-[3px] p-0 text-foreground-muted hover:bg-control-hover hover:text-foreground focus-visible:bg-control-hover focus-visible:text-foreground focus-visible:outline-none data-[active]:bg-primary/12 data-[active]:text-brand-primary-soft";
+	let visible = $state(false);
+	let formats = $state.raw<Set<TextFormatType>>(new Set());
+	let link = $state(false);
+	let linkURL = $state("");
+	let linkOpen = $state(false);
+	let linkDraft = $state("");
+	let left = $state(0);
+	let top = $state(0);
+	let toolbar = $state<HTMLDivElement | null>(null);
+	let linkInput = $state<HTMLInputElement | null>(null);
+	let restoreLinkFocus = true;
+
+	// @lexical-scope
+	function $updateToolbar() {
+		if (linkOpen) return;
+		const selection = $getSelection();
+		const domSelection = editor._window?.getSelection() ?? window.getSelection();
+		const root = editor.getRootElement();
+		if (
+			!isEditable() ||
+			editor.isComposing() ||
+			!$isRangeSelection(selection) ||
+			selection.isCollapsed() ||
+			selection.getTextContent().replaceAll("\n", "") === "" ||
+			domSelection === null ||
+			domSelection.rangeCount === 0 ||
+			root === null ||
+			!root.contains(domSelection.anchorNode)
+		) {
+			visible = false;
+			return;
+		}
+
+		formats = new Set(
+			formatButtons.map(({ format }) => format).filter((format) => selection.hasFormat(format))
+		);
+		const anchorNode = selection.anchor.getNode();
+		let linkNode = $isLinkNode(anchorNode) ? anchorNode : undefined;
+		const parent = anchorNode.getParent();
+		if (linkNode === undefined && $isLinkNode(parent)) linkNode = parent;
+		link = linkNode !== undefined;
+		linkURL = linkNode?.getURL() ?? "";
+		visible = true;
+		positionToolbar(domSelection.getRangeAt(0).getBoundingClientRect());
+	}
+
+	function positionToolbar(selectionRect: DOMRect) {
+		const width = toolbar?.offsetWidth ?? 190;
+		const height = toolbar?.offsetHeight ?? 38;
+		left = Math.max(
+			12,
+			Math.min(
+				window.innerWidth - width - 12,
+				selectionRect.left + selectionRect.width / 2 - width / 2
+			)
+		);
+		const preferredTop = selectionRect.top - height - 9;
+		const maximumTop = window.innerHeight - height - 12;
+		top = Math.max(12, Math.min(maximumTop, preferredTop));
+	}
+
+	function updateFromEditor() {
+		editor.getEditorState().read($updateToolbar, { editor });
+	}
+
+	function preserveSelection(event: MouseEvent) {
+		if (event.target instanceof HTMLInputElement) return;
+		event.preventDefault();
+	}
+
+	// @lexical-scope
+	function formatText(format: TextFormatType) {
+		editor.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) selection.formatText(format);
+		});
+		queueMicrotask(updateFromEditor);
+	}
+
+	async function openLinkEditor() {
+		linkDraft = linkURL || "https://";
+		restoreLinkFocus = true;
+		linkOpen = true;
+		await tick();
+		window.setTimeout(() => {
+			linkInput?.focus();
+			linkInput?.select();
+		});
+	}
+
+	async function handleLinkOpenChange(open: boolean) {
+		if (open) await openLinkEditor();
+		else closeLinkEditor();
+	}
+
+	function sanitizeURL(value: string) {
+		const trimmed = value.trim();
+		if (/^(?:https?:|mailto:|tel:)/i.test(trimmed)) return trimmed;
+		return `https://${trimmed}`;
+	}
+
+	function applyLink() {
+		if (linkDraft.trim() === "" || linkDraft === "https://") return;
+		editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeURL(linkDraft));
+		closeLinkEditor();
+		queueMicrotask(() => editor.focus());
+	}
+
+	function removeLink() {
+		editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+		closeLinkEditor();
+		queueMicrotask(() => editor.focus());
+	}
+
+	function closeLinkEditor() {
+		linkOpen = false;
+	}
+
+	function handleLinkKeydown(event: KeyboardEvent) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			applyLink();
+		}
+	}
+
+	function focusLinkInput(event: Event) {
+		event.preventDefault();
+		linkInput?.focus();
+		linkInput?.select();
+	}
+
+	function restoreEditorFocus(event: Event) {
+		event.preventDefault();
+		const shouldRestore = restoreLinkFocus;
+		restoreLinkFocus = true;
+		if (shouldRestore) queueMicrotask(() => editor.focus());
+	}
+
+	function preserveOutsideFocus(event: Event) {
+		restoreLinkFocus = false;
+		const target =
+			event.target instanceof Element
+				? event.target.closest<HTMLElement>(
+						"button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+					)
+				: null;
+		if (target !== null) window.setTimeout(() => target.focus());
+	}
+
+	$effect(() => {
+		if (toolbar === null) return;
+		updateFromEditor();
+	});
+
+	$effect(() => {
+		document.addEventListener("selectionchange", updateFromEditor);
+		document.addEventListener("scroll", updateFromEditor, true);
+		window.addEventListener("resize", updateFromEditor);
+		const unregister = mergeRegister(
+			editor.registerUpdateListener(({ editorState }) => editorState.read($updateToolbar)),
+			editor.registerCommand(
+				SELECTION_CHANGE_COMMAND,
+				() => {
+					$updateToolbar();
+					return false;
+				},
+				COMMAND_PRIORITY_LOW
+			)
+		);
+		return () => {
+			unregister();
+			document.removeEventListener("selectionchange", updateFromEditor);
+			document.removeEventListener("scroll", updateFromEditor, true);
+			window.removeEventListener("resize", updateFromEditor);
+		};
+	});
+</script>
+
+{#if visible}
+	<Portal>
+		<ToolbarRoot
+			bind:ref={toolbar}
+			class="fixed z-80 gap-[0.1rem] rounded-[4px] border border-control-border bg-popover p-1 shadow-[var(--shadow-popover)] animate-[ridu-richtext-toolbar-in_150ms_ease] motion-reduce:animate-none"
+			aria-label={i18n.t("plugin.richtext:editor.formatText")}
+			tabindex={-1}
+			style={`left: ${left}px; top: ${top}px;`}
+			onmousedown={preserveSelection}
+		>
+			{#each formatButtons as button (button.format)}
+				<ToolbarButton
+					class={toolbarButtonClass}
+					type="button"
+					active={formats.has(button.format)}
+					aria-label={button.label}
+					aria-pressed={formats.has(button.format)}
+					onclick={() => formatText(button.format)}
+				>
+					<ToolbarIcon name={button.icon} />
+				</ToolbarButton>
+			{/each}
+			<span class="mx-[0.15rem] h-[1.15rem] w-px bg-border" aria-hidden="true"></span>
+			<PopoverRoot open={linkOpen} onOpenChange={handleLinkOpenChange}>
+				<PopoverTrigger>
+					{#snippet child({ props })}
+						<ToolbarButton
+							{...props}
+							class={toolbarButtonClass}
+							type="button"
+							active={link}
+							aria-label={i18n.t(
+								link ? "plugin.richtext:editor.editLink" : "plugin.richtext:editor.addLink"
+							)}
+							aria-pressed={link}
+						>
+							<ToolbarIcon name="link" />
+						</ToolbarButton>
+					{/snippet}
+				</PopoverTrigger>
+
+				<PopoverContent
+					class="grid w-68 gap-[0.45rem] p-[0.65rem]"
+					role="dialog"
+					aria-label={i18n.t("plugin.richtext:editor.editLink")}
+					trapFocus
+					side="bottom"
+					align="start"
+					onmousedown={preserveSelection}
+					onOpenAutoFocus={focusLinkInput}
+					onCloseAutoFocus={restoreEditorFocus}
+					onInteractOutside={preserveOutsideFocus}
+				>
+					<label
+						class="font-mono text-[10px] tracking-[0.12em] text-foreground-faint uppercase"
+						for="ridu-richtext-link-input"
+					>
+						{i18n.t("plugin.richtext:editor.linkURL")}
+					</label>
+					<Input
+						id="ridu-richtext-link-input"
+						class="h-[2.2rem] px-[0.65rem] font-mono text-xs"
+						bind:ref={linkInput}
+						bind:value={linkDraft}
+						aria-label={i18n.t("plugin.richtext:editor.linkURL")}
+						onkeydown={handleLinkKeydown}
+					/>
+					<div class="flex justify-end gap-[0.35rem]">
+						{#if link}<Button
+								variant="ghost"
+								size="sm"
+								class="me-auto h-7 px-[0.55rem] text-[11px] text-destructive hover:text-foreground"
+								onclick={removeLink}
+							>
+								{i18n.t("plugin.richtext:editor.remove")}
+							</Button>{/if}
+						<Button
+							variant="ghost"
+							size="sm"
+							class="h-7 px-[0.55rem] text-[11px]"
+							onclick={closeLinkEditor}
+						>
+							{i18n.t("plugin.richtext:editor.cancel")}
+						</Button>
+						<Button size="sm" class="h-7 px-[0.55rem] text-[11px]" onclick={applyLink}>
+							{i18n.t("plugin.richtext:editor.apply")}
+						</Button>
+					</div>
+				</PopoverContent>
+			</PopoverRoot>
+		</ToolbarRoot>
+	</Portal>
+{/if}

package/src/toolbar/toolbar-icon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	type IconName =
+		"bold" | "code" | "italic" | "link" | "strike" | "subscript" | "superscript" | "underline";
+
+	let { name, size = 15 }: { name: IconName; size?: number } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.8"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	aria-hidden="true"
+>
+	{#if name === "bold"}
+		<path d="M7 5h6a4 4 0 0 1 0 8H7z" />
+		<path d="M7 13h7a3.5 3.5 0 0 1 0 7H7z" />
+	{:else if name === "italic"}
+		<path d="M10 5h7" />
+		<path d="M7 19h7" />
+		<path d="m14 5-4 14" />
+	{:else if name === "link"}
+		<path d="M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1" />
+		<path d="M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1" />
+	{:else if name === "strike"}
+		<path d="M16 5.5A5.5 5.5 0 0 0 12 4c-2.2 0-4 1.2-4 3s1.6 2.5 4 3" />
+		<path d="M8 18.5a6 6 0 0 0 4 1.5c2.2 0 4-1.2 4-3 0-1.4-1-2.2-2.6-2.6" />
+		<path d="M4 12h16" />
+	{:else if name === "underline"}
+		<path d="M7 4v6a5 5 0 0 0 10 0V4" />
+		<path d="M5 21h14" />
+	{:else if name === "subscript"}
+		<path d="m5 6 8 10M13 6 5 16" />
+		<path d="M16 17c.5-1 3-1 3 .5 0 1-3 2-3 3h3" />
+	{:else if name === "superscript"}
+		<path d="m5 8 8 10M13 8 5 18" />
+		<path d="M16 4c.5-1 3-1 3 .5 0 1-3 2-3 3h3" />
+	{:else if name === "code"}
+		<path d="m8 9-3 3 3 3" />
+		<path d="m16 9 3 3-3 3" />
+		<path d="m14 5-4 14" />
+	{/if}
+</svg>