@riducms/plugin-richtext 0.2.3 → 0.3.0

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

@@ -5,8 +5,10 @@
 		useLexicalNodeSelection,
 	} from "@hvniel/lexical-svelte";
 	import { getAdminI18n } from "@riducms/plugin";
-	import type { NodeKey } from "lexical";
-	import { Textarea, TooltipContent, TooltipRoot, TooltipTrigger } from "@riducms/ui";
+	import type { ElementFormatType, NodeKey } from "lexical";
+	import { Button, Textarea } from "@riducms/ui";
+	import ReplaceIcon from "~icons/lucide/refresh-cw";
+	import RemoveIcon from "~icons/lucide/x";
 
 	import { getRichTextAuthoringHost } from "@plugin-richtext/field/rich-text-context.svelte";
 	import {
@@ -14,13 +16,21 @@
 		REMOVE_UPLOAD_COMMAND,
 		UPDATE_UPLOAD_CAPTION_COMMAND,
 	} from "@plugin-richtext/menu/rich-text-commands";
+	import "@plugin-richtext/upload/rich-text-upload-node.scss";
 
 	let {
 		caption,
 		documentID,
+		format,
 		nodeKey,
 		relationTo,
-	}: { caption: string; documentID: string; nodeKey: NodeKey; relationTo: string } = $props();
+	}: {
+		caption: string;
+		documentID: string;
+		format: ElementFormatType;
+		nodeKey: NodeKey;
+		relationTo: string;
+	} = $props();
 	const editor = useLexicalComposerContext()[0];
 	const isEditable = useLexicalEditable();
 	const i18n = getAdminI18n();
@@ -37,17 +47,27 @@
 	const altText = $derived(typeof document?.alt === "string" ? document.alt.trim() : "");
 	const extension = $derived(fileExtension(filename));
 	const imageURL = $derived(
-		typeof document?.url === "string" &&
-			typeof document.mimeType === "string" &&
-			document.mimeType.startsWith("image/")
-			? document.url
+		typeof document?.mimeType === "string" && document.mimeType.startsWith("image/")
+			? typeof document.thumbnailURL === "string" && document.thumbnailURL !== ""
+				? document.thumbnailURL
+				: typeof document.url === "string"
+					? document.url
+					: undefined
 			: undefined
 	);
+	const mediaWidth = $derived(positiveDimension(document?.width));
+	const mediaHeight = $derived(positiveDimension(document?.height));
+	const mediaAspect = $derived(
+		mediaWidth !== undefined && mediaHeight !== undefined ? mediaWidth / mediaHeight : 1
+	);
+	const mediaWidthLimit = $derived(`${Math.min(450, Math.max(240, 450 * mediaAspect))}px`);
 
 	$effect(() => {
 		if (authoring === undefined) return;
 		void authoring.documentRevision;
 		const request = new AbortController();
+		document = undefined;
+		loadError = false;
 		authoring
 			.findDocument(relationTo, documentID, request.signal)
 			.then((value) => {
@@ -110,152 +130,103 @@
 		const match = /\.([a-z0-9]{1,8})$/i.exec(value);
 		return match?.[1]?.toLocaleUpperCase(i18n.language) ?? i18n.t("plugin.richtext:asset.file");
 	}
+
+	function positiveDimension(value: unknown) {
+		return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : undefined;
+	}
 </script>
 
 <figure
 	class={[
-		"group/upload relative my-[1.85rem] w-full overflow-hidden rounded-[4px] border border-control-border bg-control leading-[0] transition-colors duration-150 hover:border-primary/50 focus-within:border-primary/50",
-		isSelected() && "border-primary/50",
+		"ridu-richtext-upload-card",
+		isSelected() && "is-selected",
+		!isEditable() && "is-read-only",
 	]}
+	data-selected={isSelected() || undefined}
+	data-align={format || undefined}
+	aria-busy={authoring !== undefined && document === undefined && !loadError}
+	style:--ridu-richtext-upload-aspect={mediaAspect}
+	style:--ridu-richtext-upload-width={mediaWidthLimit}
 	role="group"
 	aria-label={i18n.t("plugin.richtext:asset.label", {
 		collection: collection?.labels.singular ?? relationTo,
 		filename,
 	})}
 >
-	<div class="relative w-full">
-		{#if isEditable()}
-			<button
-				type="button"
-				class="block w-full cursor-pointer border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-primary/65 focus-visible:ring-inset"
-				aria-label={i18n.t("plugin.richtext:editor.editNamed", { name: filename })}
-				onclick={openDocument}
-			>
-				<span
-					class={[
-						"ridu-richtext-upload-preview relative grid aspect-[16/7] w-full place-items-center overflow-hidden bg-background",
-						document === undefined && !loadError && "is-loading",
-					]}
-				>
-					{#if imageURL !== undefined}
-						<img
-							class="absolute inset-0 block size-full object-cover"
-							src={imageURL}
-							alt={altText}
-						/>
-					{:else}
-						<span
-							class="grid max-w-[80%] place-items-center gap-[0.45rem] font-mono text-[11px] leading-normal tracking-[0.12em] text-foreground-muted uppercase"
-							aria-hidden="true"
-						>
-							<strong class="text-[13px] font-medium">
-								{loadError ? i18n.t("plugin.richtext:asset.unavailable") : extension}
-							</strong>
-							<span class="max-w-full truncate text-foreground-faint">
-								{loadError ? i18n.t("plugin.richtext:asset.couldNotLoad") : filename}
-							</span>
-						</span>
-					{/if}
-				</span>
-			</button>
-		{:else}
-			<span
-				class={[
-					"ridu-richtext-upload-preview relative grid aspect-[16/7] w-full place-items-center overflow-hidden bg-background",
-					document === undefined && !loadError && "is-loading",
-				]}
-			>
-				{#if imageURL !== undefined}
-					<img class="absolute inset-0 block size-full object-cover" src={imageURL} alt={altText} />
-				{:else}
-					<span
-						class="font-mono text-[11px] leading-normal tracking-[0.12em] text-foreground-muted uppercase"
-					>
+	<div class="ridu-richtext-upload-card__media">
+		<span
+			class={[
+				"ridu-richtext-upload-preview ridu-richtext-upload-card__preview",
+				document === undefined && !loadError && "is-loading",
+			]}
+		>
+			{#if imageURL !== undefined}
+				<img class="ridu-richtext-upload-card__image" src={imageURL} alt={altText} />
+			{:else}
+				<span class="ridu-richtext-upload-card__file-preview">
+					<strong class="ridu-richtext-upload-card__extension">
 						{loadError ? i18n.t("plugin.richtext:asset.unavailable") : extension}
+					</strong>
+					<span class="ridu-richtext-upload-card__preview-name">
+						{loadError ? i18n.t("plugin.richtext:asset.couldNotLoad") : filename}
 					</span>
-				{/if}
-			</span>
-		{/if}
+				</span>
+			{/if}
+		</span>
 
 		{#if isEditable()}
 			<div
-				class={[
-					"pointer-events-none absolute top-3 left-1/2 z-2 flex max-w-[calc(100%-1.5rem)] -translate-x-1/2 items-center gap-1 rounded-[4px] border border-media-foreground/10 bg-media-overlay p-1 text-media-foreground opacity-0 shadow-[var(--shadow-popover)] backdrop-blur-md transition-opacity duration-150 group-hover/upload:pointer-events-auto group-hover/upload:opacity-100 group-focus-within/upload:pointer-events-auto group-focus-within/upload:opacity-100",
-					isSelected() && "pointer-events-auto opacity-100",
-				]}
+				class={["ridu-richtext-upload-card__actions", isSelected() && "is-visible"]}
+				role="group"
 				aria-label={i18n.t("plugin.richtext:asset.actions")}
 			>
+				<Button
+					class="ridu-richtext-upload-card__action"
+					variant="ghost"
+					size="icon-sm"
+					onclick={replaceDocument}
+					aria-label={i18n.t("plugin.richtext:editor.replaceNamed", { name: filename })}
+					tooltip={i18n.t("plugin.richtext:asset.replace")}
+				>
+					<ReplaceIcon />
+				</Button>
+				<Button
+					class="ridu-richtext-upload-card__action"
+					variant="ghost"
+					size="icon-sm"
+					onclick={removeUpload}
+					aria-label={i18n.t("plugin.richtext:editor.removeNamed", { name: filename })}
+					tooltip={i18n.t("plugin.richtext:asset.remove")}
+				>
+					<RemoveIcon />
+				</Button>
+			</div>
+		{/if}
+		<div class="ridu-richtext-upload-card__metadata" aria-live="polite">
+			{#if isEditable()}
 				<button
 					type="button"
-					class="min-w-0 cursor-pointer truncate rounded-[3px] border-0 bg-transparent px-2 py-1.5 text-start text-[11.5px] leading-[1.2] text-media-foreground/88 hover:bg-media-foreground/10 focus-visible:bg-media-foreground/10 focus-visible:outline-none"
+					class="ridu-richtext-upload-card__filename"
 					onclick={openDocument}
 					aria-label={i18n.t("plugin.richtext:editor.editNamed", { name: filename })}
 				>
 					{filename}
 				</button>
-				<span class="mx-0.5 h-4 w-px shrink-0 bg-media-foreground/16" aria-hidden="true"></span>
-				<TooltipRoot>
-					<TooltipTrigger>
-						{#snippet child({ props })}
-							<button
-								{...props}
-								type="button"
-								class="grid size-7 shrink-0 cursor-pointer place-items-center rounded-[3px] border-0 bg-transparent text-media-foreground/75 hover:bg-media-foreground/10 hover:text-media-foreground focus-visible:bg-media-foreground/10 focus-visible:text-media-foreground focus-visible:outline-none"
-								onclick={replaceDocument}
-								aria-label={i18n.t("plugin.richtext:editor.replaceNamed", { name: filename })}
-							>
-								<svg
-									class="size-3.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									aria-hidden="true"
-								>
-									<path
-										d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"
-									/>
-								</svg>
-							</button>
-						{/snippet}
-					</TooltipTrigger>
-					<TooltipContent>{i18n.t("plugin.richtext:asset.replace")}</TooltipContent>
-				</TooltipRoot>
-				<TooltipRoot>
-					<TooltipTrigger>
-						{#snippet child({ props })}
-							<button
-								{...props}
-								type="button"
-								class="grid size-7 shrink-0 cursor-pointer place-items-center rounded-[3px] border-0 bg-transparent text-media-foreground/75 hover:bg-destructive/25 hover:text-media-foreground focus-visible:bg-destructive/25 focus-visible:text-media-foreground focus-visible:outline-none"
-								onclick={removeUpload}
-								aria-label={i18n.t("plugin.richtext:editor.removeNamed", { name: filename })}
-							>
-								<svg
-									class="size-3.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									aria-hidden="true"
-								>
-									<path d="M18 6 6 18M6 6l12 12" />
-								</svg>
-							</button>
-						{/snippet}
-					</TooltipTrigger>
-					<TooltipContent>{i18n.t("plugin.richtext:asset.remove")}</TooltipContent>
-				</TooltipRoot>
-			</div>
-		{/if}
+			{:else}
+				<strong class="ridu-richtext-upload-card__filename">{filename}</strong>
+			{/if}
+			<span class="ridu-richtext-upload-card__collection">
+				{collection?.labels.singular ?? relationTo}
+			</span>
+		</div>
 	</div>
 
 	{#if isEditable() || caption !== ""}
-		<figcaption class="border-t border-border bg-background/45 px-[0.85rem] py-[0.55rem]">
+		<figcaption class="ridu-richtext-upload-card__caption">
 			{#if isEditable()}
-				<div class="flex items-start gap-2">
+				<div class="ridu-richtext-upload-card__caption-editor">
 					<svg
-						class="mt-[0.3rem] size-3 shrink-0 text-foreground-faint"
+						class="ridu-richtext-upload-card__caption-icon"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -265,7 +236,7 @@
 						<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z" />
 					</svg>
 					<Textarea
-						class="min-h-[1.45rem] w-full resize-none overflow-hidden border-0 bg-transparent p-0 text-start text-[13px] leading-[1.45] text-foreground-muted outline-none field-sizing-content placeholder:text-foreground-faint focus:text-foreground"
+						class="ridu-richtext-upload-card__caption-input"
 						rows={1}
 						value={caption}
 						oninput={updateCaption}
@@ -275,7 +246,7 @@
 					/>
 				</div>
 			{:else}
-				<p class="text-start text-[13px] leading-[1.45] text-foreground-muted">{caption}</p>
+				<p class="ridu-richtext-upload-card__caption-text">{caption}</p>
 			{/if}
 		</figcaption>
 	{/if}

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

@@ -93,6 +93,7 @@ export class UploadNode extends DecoratorBlockNode {
 			props: {
 				caption: this.__caption,
 				documentID: this.__documentID,
+				format: this.__format,
 				nodeKey: this.getKey(),
 				relationTo: this.__relationTo,
 			},

package/src/upload/rich-text-upload-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 {
@@ -22,6 +11,10 @@
 		UPDATE_UPLOAD_CAPTION_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 {
 		createUploadNode,
 		isUploadNode,
@@ -39,7 +32,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;
@@ -97,16 +90,7 @@
 				(nodeKey) => {
 					const node = $getNodeByKey(nodeKey);
 					if (!isUploadNode(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
@@ -125,18 +109,11 @@
 		editor.update(() => {
 			if (replaceNodeKey !== undefined) {
 				const current = $getNodeByKey(replaceNodeKey);
-				if (isUploadNode(current)) current.setReference(collection.slug, id);
+				if (isUploadNode(current)) current.setReference(collection.slug, id).setCaption("");
 				return;
 			}
-			const selection = $getSelection() ?? $getPreviousSelection();
-			if (!$isRangeSelection(selection)) $getRoot().selectEnd();
-			const focusNode = $isRangeSelection(selection) ? selection.focus.getNode() : undefined;
 			const upload = createUploadNode({ documentID: id, relationTo: collection.slug });
-			$insertNodeToNearestRoot(upload);
-			if ($isParagraphNode(focusNode) && focusNode.getChildrenSize() === 0) focusNode.remove();
-			const paragraph = $createParagraphNode();
-			upload.insertAfter(paragraph);
-			paragraph.select();
+			insertReferenceNode(upload);
 		});
 		closeBrowser();
 	}

package/src/styles/integration.css

@@ -1,83 +0,0 @@
-.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);
-	}
-}