@riducms/plugin-richtext 0.1.4 → 0.2.0

package/src/field/rich-text-field.svelte

@@ -1,187 +1,65 @@
 <script lang="ts">
-	import type { FieldComponentProps } from "@riducms/plugin";
-	import { CodeNode } from "@lexical/code";
-	import { HistoryExtension } from "@lexical/history";
-	import { LinkNode } from "@lexical/link";
-	import { ListExtension } from "@lexical/list";
-	import { RichTextExtension } from "@lexical/rich-text";
-	import {
-		ContentEditable,
-		HorizontalRuleNode,
-		HorizontalRulePlugin,
-		LexicalExtensionComposer,
-		LinkPlugin,
-		OnChangePlugin,
-	} from "@hvniel/lexical-svelte";
-	import { defineExtension, type EditorState } from "lexical";
-	import { onDestroy } from "svelte";
-	import { FieldFrame } from "@riducms/ui";
+	import type { PluginFieldProps, PluginFieldBinding } from "@riducms/plugin";
+	import type { RichTextDocument } from "@plugin-richtext/document";
+	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+	import RichTextEditor from "@plugin-richtext/field/rich-text-editor.svelte";
 
-	import "@plugin-richtext/styles/integration.css";
-	import RichTextBlockToolbar from "@plugin-richtext/menu/rich-text-block-toolbar.svelte";
-	import RichTextFooter from "@plugin-richtext/field/rich-text-footer.svelte";
-	import RichTextFloatingToolbar from "@plugin-richtext/toolbar/rich-text-floating-toolbar.svelte";
-	import RichTextSlashMenu from "@plugin-richtext/menu/rich-text-slash-menu.svelte";
-	import { parseRichTextConfig, hasRichTextFeature } from "@plugin-richtext/field/rich-text-config";
-	import { setRichTextAuthoringHost } from "@plugin-richtext/field/rich-text-context.svelte";
-	import { initialEditorState } from "@plugin-richtext/field/rich-text-document";
-	import { UploadNode } from "@plugin-richtext/upload/rich-text-upload-node";
-	import RichTextUploadPlugin from "@plugin-richtext/upload/rich-text-upload-plugin.svelte";
-	import { RelationshipNode } from "@plugin-richtext/relationship/rich-text-relationship-node";
-	import RichTextRelationshipPlugin from "@plugin-richtext/relationship/rich-text-relationship-plugin.svelte";
-
-	let { field, form, authoring, i18n }: FieldComponentProps = $props();
-	const issues = $derived(form.issuesFor(field.path));
-	const messageID = $derived(`${field.id}-message`);
-	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
-	const placeholderText = $derived(i18n.t("plugin.richtext:editor.placeholder"));
-	let canvasElement = $state<HTMLElement | null>(null);
-	// Field identity and plugin config are fixed for this mounted component.
-	// svelte-ignore state_referenced_locally
-	const config = parseRichTextConfig(field.plugin?.config);
-	// The host is stable for this mounted field and decorator descendants inherit it through portals.
-	// svelte-ignore state_referenced_locally
-	setRichTextAuthoringHost(authoring);
-
-	const theme = {
-		heading: {
-			h1: "ridu-richtext-heading ridu-richtext-h1 mt-[2.1rem] mb-[0.85rem] font-serif text-[2rem] leading-[1.12] tracking-[-0.015em] text-foreground font-normal text-balance max-[34rem]:text-[1.75rem]",
-			h2: "ridu-richtext-heading ridu-richtext-h2 mt-[2.1rem] mb-[0.85rem] font-serif text-[1.75rem] leading-[1.12] text-foreground font-normal text-balance",
-			h3: "ridu-richtext-heading ridu-richtext-h3 mt-[2.1rem] mb-[0.85rem] font-sans text-lg leading-[1.35] text-foreground font-semibold text-balance",
+	let {
+		field,
+		form,
+		config,
+		authoring,
+		i18n,
+	}: PluginFieldProps<RichTextDocument<unknown>, RichTextConfig> = $props();
+	let replacement = $state(0);
+	function fingerprint() {
+		return JSON.stringify([
+			field.schema.id,
+			config,
+			form.contentLocale,
+			form.resource,
+			field.rawValue,
+		]);
+	}
+	// Local editor writes retain Lexical selection/history. Only an external parent
+	// replacement (save normalization, locale, schema, group paste) starts a new editor.
+	let accepted = fingerprint();
+	$effect(() => {
+		const incoming = fingerprint();
+		if (incoming !== accepted) {
+			accepted = incoming;
+			replacement++;
+		}
+	});
+	const editorField: PluginFieldBinding<RichTextDocument<unknown>, "plugin"> = {
+		get schema() {
+			return field.schema;
 		},
-		code: "ridu-richtext-code-block my-6 block overflow-x-auto rounded-[3px] border border-control-border bg-control px-[1.1rem] py-4 font-mono text-[12.5px] leading-[1.7] text-foreground-strong [tab-size:2]",
-		hr: "ridu-richtext-rule my-8 block cursor-pointer border-0 border-t border-border py-[0.65rem]",
-		hrSelected: "is-selected",
-		link: "ridu-richtext-link cursor-pointer text-brand-primary-soft underline decoration-primary/40 decoration-1 underline-offset-[0.18em] hover:text-primary-hover hover:decoration-current",
-		list: {
-			checklist:
-				"ridu-richtext-checklist mt-1 mb-[1.35rem] list-none ps-0 text-[15.5px] leading-7 text-foreground-body",
-			listitemChecked: "ridu-richtext-list-item-checked line-through opacity-70",
-			listitemUnchecked: "ridu-richtext-list-item-unchecked",
-			listitem: "ridu-richtext-list-item ps-1",
-			nested: { listitem: "ridu-richtext-list-item-nested" },
-			ol: "ridu-richtext-list-ordered mt-1 mb-[1.35rem] list-decimal ps-[1.55rem] text-[15.5px] leading-7 text-foreground-body",
-			ul: "ridu-richtext-list-unordered mt-1 mb-[1.35rem] list-disc ps-[1.55rem] text-[15.5px] leading-7 text-foreground-body",
+		get value() {
+			return field.value;
 		},
-		paragraph:
-			"ridu-richtext-paragraph relative mb-[0.9rem] text-[15.5px] leading-7 text-foreground-body text-pretty last:mb-0",
-		quote:
-			"ridu-richtext-quote my-[1.85rem] border-s-2 border-primary/55 py-[0.1rem] ps-5 font-serif text-[19px] italic leading-6 text-foreground-strong text-pretty",
-		text: {
-			bold: "ridu-richtext-bold font-semibold",
-			code: "ridu-richtext-inline-code rounded-[3px] border border-control-border bg-control px-[0.32em] py-[0.12em] font-mono text-[0.86em] text-foreground-strong",
-			italic: "ridu-richtext-italic italic",
-			subscript: "ridu-richtext-subscript",
-			superscript: "ridu-richtext-superscript",
-			strikethrough: "ridu-richtext-strikethrough line-through",
-			underline: "ridu-richtext-underline underline underline-offset-[0.15em]",
+		get rawValue() {
+			return field.rawValue;
 		},
-		upload: "ridu-richtext-upload m-0",
-	};
-
-	// Field identity is fixed for this mounted plugin component.
-	// svelte-ignore state_referenced_locally
-	const unregisterField = form.register(field.path);
-	onDestroy(unregisterField);
-
-	// The extension tree is identity-bearing and belongs to this field instance.
-	// svelte-ignore state_referenced_locally
-	const extension = defineExtension({
-		$initialEditorState: initialEditorState(form.get(field.path)),
-		dependencies: [
-			RichTextExtension,
-			HistoryExtension,
-			...(hasRichTextFeature(config, "lists") ? [ListExtension] : []),
-		],
-		name: "@riducms/plugin-richtext/editor",
-		namespace: `ridu-${field.id}`,
-		nodes: [
-			...(hasRichTextFeature(config, "links") ? [LinkNode] : []),
-			...(hasRichTextFeature(config, "code") ? [CodeNode] : []),
-			...(hasRichTextFeature(config, "horizontal-rule") ? [HorizontalRuleNode] : []),
-			...(hasRichTextFeature(config, "uploads") ? [UploadNode] : []),
-			...(hasRichTextFeature(config, "relationships") ? [RelationshipNode] : []),
-		],
-		editable: !field.admin.readOnly,
-		theme,
-		onError: (error) => {
-			throw error;
+		get issues() {
+			return field.issues;
 		},
-	});
-
-	function changed(editorState: EditorState) {
-		form.set(field.path, { version: 1, root: editorState.toJSON().root });
-	}
+		get liveValidation() {
+			return field.liveValidation;
+		},
+		get readOnly() {
+			return field.readOnly;
+		},
+		get stale() {
+			return field.stale;
+		},
+		set: (value) => {
+			field.set(value);
+			accepted = fingerprint();
+		},
+	};
 </script>
 
-<div data-field-path={field.path}>
-	<FieldFrame
-		controlID={field.id}
-		label={field.admin.label}
-		required={field.required}
-		readOnly={field.admin.readOnly}
-		description={field.admin.description}
-		errors={issues.map((issue) => issue.message)}
-		class="min-w-0"
-	>
-		<div
-			class={[
-				"ridu-richtext-editor min-w-0 border-b border-transparent pb-[0.65rem] transition-colors duration-150",
-				issues.length > 0 && "border-b-destructive/22",
-				field.admin.readOnly && "pt-[1.6rem]",
-				issues.length > 0 && "has-error",
-				field.admin.readOnly && "is-read-only",
-			]}
-			aria-invalid={issues.length > 0}
-		>
-			<LexicalExtensionComposer {extension} contentEditable={null}>
-				<div class="relative" bind:this={canvasElement}>
-					<ContentEditable
-						id={field.id}
-						class={[
-							"ridu-richtext-content relative z-1 min-h-44 pt-[1.35rem] pe-0 pb-3 ps-9 text-foreground-body caret-primary outline-none focus-visible:outline-none max-[34rem]:min-h-36 max-[34rem]:pt-4 max-[34rem]:ps-8",
-							field.admin.readOnly
-								? "min-h-auto pt-0 ps-0 max-[34rem]:min-h-auto max-[34rem]:pt-0 max-[34rem]:ps-0"
-								: "border-s border-border transition-colors duration-150",
-							issues.length > 0 && !field.admin.readOnly && "border-s-destructive/72",
-						]}
-						ariaLabel={field.admin.label}
-						ariaDescribedBy={hasMessage ? messageID : undefined}
-						ariaInvalid={issues.length > 0}
-						ariaRequired={field.required}
-						aria-keyshortcuts="Alt+Shift+ArrowUp Alt+Shift+ArrowDown"
-						aria-placeholder={placeholderText}
-					>
-						{#snippet placeholder(editable)}
-							<span
-								class={[
-									"pointer-events-none absolute top-[1.35rem] start-9 z-0 text-[15.5px] leading-7 text-foreground-placeholder max-[34rem]:top-4 max-[34rem]:start-8",
-									!editable && "top-0 start-0 max-[34rem]:top-0 max-[34rem]:start-0",
-								]}
-							>
-								{editable ? placeholderText : i18n.t("plugin.richtext:editor.empty")}
-							</span>
-						{/snippet}
-					</ContentEditable>
-				</div>
-				{#if hasRichTextFeature(config, "links")}<LinkPlugin />{/if}
-				{#if hasRichTextFeature(config, "horizontal-rule")}<HorizontalRulePlugin />{/if}
-				{#if !field.admin.readOnly}
-					<RichTextSlashMenu {authoring} {config} />
-					<RichTextFloatingToolbar />
-					{#if canvasElement !== null}
-						<RichTextBlockToolbar anchorElement={canvasElement} {authoring} {config} />
-					{/if}
-					{#if hasRichTextFeature(config, "uploads")}
-						<RichTextUploadPlugin {authoring} {config} {field} />
-					{/if}
-					{#if hasRichTextFeature(config, "relationships")}
-						<RichTextRelationshipPlugin {authoring} {config} {field} />
-					{/if}
-				{/if}
-				<OnChangePlugin onChange={changed} ignoreSelectionChange />
-				<RichTextFooter />
-			</LexicalExtensionComposer>
-		</div>
-	</FieldFrame>
-</div>
+{#key replacement}
+	<RichTextEditor field={editorField} {form} {config} {authoring} {i18n} />
+{/key}

package/src/field/rich-text-footer.svelte

@@ -12,8 +12,10 @@
 	const editor = useLexicalComposerContext()[0];
 	const isEditable = useLexicalEditable();
 	const i18n = getAdminI18n();
+	let { readOnly = false }: { readOnly?: boolean } = $props();
 
 	function focusAtEnd() {
+		if (!editor.isEditable()) return;
 		editor.focus(
 			() => {
 				editor.update(() => {
@@ -34,10 +36,11 @@
 	}
 </script>
 
-{#if isEditable()}
+{#if !readOnly}
 	<button
-		class="mt-[0.55rem] inline-flex cursor-text items-center gap-[0.35rem] border-0 bg-transparent py-[0.35rem] font-mono text-[11px] leading-[1.2] text-foreground-sub transition-colors duration-150 hover:text-foreground-muted focus-visible:rounded focus-visible:text-foreground-muted focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-3"
+		class="mt-[0.55rem] inline-flex cursor-text items-center gap-[0.35rem] border-0 bg-transparent py-[0.35rem] font-mono text-[11px] leading-[1.2] text-foreground-sub transition-colors duration-150 hover:text-foreground-muted focus-visible:rounded focus-visible:text-foreground-muted focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:outline-offset-3 disabled:cursor-not-allowed disabled:opacity-45"
 		type="button"
+		disabled={!isEditable()}
 		onclick={focusAtEnd}
 	>
 		<span aria-hidden="true">+</span>

package/src/index.ts

@@ -1,4 +1,6 @@
-import { ADMIN_PLUGIN_API_VERSION, defineAdminPlugin, defineFieldPlugin } from "@riducms/plugin";
+import { defineAdminPlugin, definePluginField } from "@riducms/plugin/authoring/v1";
+import { decodeRichTextDocument } from "@plugin-richtext/document-validation";
+import { decodeRichTextConfig } from "@plugin-richtext/field/rich-text-config";
 import Prism from "prismjs";
 
 import { richTextMessages } from "@plugin-richtext/messages";
@@ -8,25 +10,27 @@ browserGlobals.Prism ??= Prism;
 
 const { default: RichTextField } = await import("@plugin-richtext/field/rich-text-field.svelte");
 
-export const richTextFieldPlugin = defineFieldPlugin({
-	type: "plugin",
-	key: "richtext",
-	component: RichTextField,
-	canRender: (field) => field.plugin?.key === "richtext",
-});
-
 export const richTextAdminPlugin = defineAdminPlugin({
-	apiVersion: ADMIN_PLUGIN_API_VERSION,
 	key: "richtext",
 	pairingVersion: 1,
-	fields: [richTextFieldPlugin],
+	fields: {
+		richtext: definePluginField({
+			component: RichTextField,
+			decodeValue: decodeRichTextDocument,
+			decodeConfig: decodeRichTextConfig,
+		}),
+	},
 	messages: richTextMessages,
 });
 
-export interface RichTextDocument {
-	version: 1;
-	root: Record<string, unknown>;
-}
+export type {
+	RichTextDocument,
+	RichTextDocumentInput,
+	RichTextNode,
+	RichTextRootNode,
+	RichTextBlockNode,
+	RichTextBlockRenderers,
+} from "#richtext/document";
 
 export { richTextMessages } from "@plugin-richtext/messages";
 export type { RichTextConfig, RichTextFeature } from "@plugin-richtext/field/rich-text-config";

package/src/menu/rich-text-block-toolbar.svelte

@@ -30,7 +30,10 @@
 	} from "lexical";
 	import type { Attachment } from "svelte/attachments";
 
+	import { getRichTextField } from "@plugin-richtext/field/rich-text-context.svelte";
+	import { richTextBlockTypes } from "@plugin-richtext/field/rich-text-blocks";
 	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+	import { OPEN_BLOCK_EDITOR_COMMAND } from "@plugin-richtext/menu/rich-text-commands";
 	import RichTextMenu from "@plugin-richtext/menu/rich-text-menu.svelte";
 	import {
 		buildRichTextOptions,
@@ -63,7 +66,13 @@
 	let restorePickerFocus = true;
 	// The mounted field's authoring surface and feature set are stable.
 	// svelte-ignore state_referenced_locally
-	const baseOptions = buildRichTextOptions(editor, config, i18n, authoring);
+	const baseOptions = buildRichTextOptions(
+		editor,
+		config,
+		i18n,
+		authoring,
+		richTextBlockTypes(getRichTextField().field)
+	);
 	const options = $derived(filterRichTextOptions(baseOptions, query, i18n.language));
 
 	function isOnToolbar(element: HTMLElement) {
@@ -164,6 +173,13 @@
 		restorePickerFocus = option.restoreEditorFocus;
 		closePicker();
 		if (state === null) return;
+		if (option.blockType !== undefined) {
+			editor.dispatchCommand(OPEN_BLOCK_EDITOR_COMMAND, {
+				blockType: option.blockType,
+				position: state,
+			});
+			return;
+		}
 
 		editor.update(() => {
 			const target = $getNodeByKey(state.targetNodeKey);

package/src/menu/rich-text-commands.ts

@@ -30,3 +30,14 @@ export const REMOVE_RELATIONSHIP_COMMAND: LexicalCommand<NodeKey> = createComman
 
 export const UPDATE_UPLOAD_CAPTION_COMMAND: LexicalCommand<UpdateUploadCaptionPayload> =
 	createCommand("UPDATE_UPLOAD_CAPTION_COMMAND");
+
+export const OPEN_BLOCK_EDITOR_COMMAND: LexicalCommand<{
+	blockType?: string;
+	nodeKey?: NodeKey;
+	position?: { targetNodeKey: NodeKey; insertBefore: boolean };
+}> = createCommand("OPEN_BLOCK_EDITOR_COMMAND");
+export const DUPLICATE_BLOCK_COMMAND: LexicalCommand<NodeKey> =
+	createCommand("DUPLICATE_BLOCK_COMMAND");
+export const REMOVE_BLOCK_COMMAND: LexicalCommand<NodeKey> = createCommand("REMOVE_BLOCK_COMMAND");
+export const MOVE_BLOCK_COMMAND: LexicalCommand<{ nodeKey: NodeKey; direction: -1 | 1 }> =
+	createCommand("MOVE_BLOCK_COMMAND");

package/src/menu/rich-text-options.ts

@@ -6,6 +6,7 @@ import {
 } from "@lexical/list";
 import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
+import type { SchemaBlockType } from "@riducms/protocol";
 import type { AdminI18n, FieldAuthoringHost } from "@riducms/plugin";
 import { INSERT_HORIZONTAL_RULE_COMMAND, MenuOption } from "@hvniel/lexical-svelte";
 import {
@@ -18,6 +19,7 @@ import {
 
 import {
 	OPEN_RELATIONSHIP_BROWSER_COMMAND,
+	OPEN_BLOCK_EDITOR_COMMAND,
 	OPEN_UPLOAD_BROWSER_COMMAND,
 } from "@plugin-richtext/menu/rich-text-commands";
 import { hasRichTextFeature, type RichTextConfig } from "@plugin-richtext/field/rich-text-config";
@@ -31,6 +33,7 @@ export class RichTextMenuOption extends MenuOption {
 	readonly keyHint: string;
 	readonly preservePlaceholder: boolean;
 	readonly restoreEditorFocus: boolean;
+	readonly blockType: string | undefined;
 
 	constructor(
 		key: string,
@@ -43,6 +46,7 @@ export class RichTextMenuOption extends MenuOption {
 			keyHint?: string;
 			preservePlaceholder?: boolean;
 			restoreEditorFocus?: boolean;
+			blockType?: string;
 		} = {}
 	) {
 		super(key);
@@ -54,6 +58,7 @@ export class RichTextMenuOption extends MenuOption {
 		this.keyHint = options.keyHint ?? "↵";
 		this.preservePlaceholder = options.preservePlaceholder ?? true;
 		this.restoreEditorFocus = options.restoreEditorFocus ?? true;
+		this.blockType = options.blockType;
 	}
 }
 
@@ -61,7 +66,8 @@ export function buildRichTextOptions(
 	editor: LexicalEditor,
 	config: RichTextConfig,
 	i18n: AdminI18n,
-	authoring?: FieldAuthoringHost
+	authoring?: FieldAuthoringHost,
+	blockTypes: readonly SchemaBlockType[] = []
 ): RichTextMenuOption[] {
 	const options = [
 		new RichTextMenuOption(
@@ -215,6 +221,27 @@ export function buildRichTextOptions(
 		options.push(...relationshipOptions);
 	}
 
+	if (hasRichTextFeature(config, "blocks") && authoring?.beginSchemaDraft !== undefined) {
+		options.splice(
+			4,
+			0,
+			...blockTypes.map(
+				(type) =>
+					new RichTextMenuOption(
+						`block-${type.slug}`,
+						type.labels.singular,
+						i18n.t("plugin.richtext:block.description", { key: type.slug }),
+						"▣",
+						["block", type.slug, type.labels.singular],
+						() =>
+							queueMicrotask(() =>
+								editor.dispatchCommand(OPEN_BLOCK_EDITOR_COMMAND, { blockType: type.slug })
+							),
+						{ restoreEditorFocus: false, blockType: type.slug }
+					)
+			)
+		);
+	}
 	return options;
 }
 

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

@@ -9,6 +9,8 @@
 	} from "@hvniel/lexical-svelte";
 	import { $isParagraphNode, type TextNode } from "lexical";
 
+	import { getRichTextField } from "@plugin-richtext/field/rich-text-context.svelte";
+	import { richTextBlockTypes } from "@plugin-richtext/field/rich-text-blocks";
 	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
 	import RichTextMenu from "@plugin-richtext/menu/rich-text-menu.svelte";
 	import {
@@ -24,7 +26,13 @@
 	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);
+	const baseOptions = buildRichTextOptions(
+		editor,
+		config,
+		i18n,
+		authoring,
+		richTextBlockTypes(getRichTextField().field)
+	);
 	let query = $state<string | null>(null);
 	let menuAnchor = $state.raw<{
 		contextElement: HTMLElement;

package/src/messages.ts

@@ -2,6 +2,21 @@ import { defineAdminMessages } from "@riducms/plugin";
 
 export const richTextMessages = defineAdminMessages({
 	fallback: {
+		"block.label": "{label} block",
+		"block.select": "Select {label} block",
+		"block.edit": "Edit",
+		"block.duplicate": "Duplicate",
+		"block.remove": "Remove",
+		"block.insertTitle": "Insert {label}",
+		"block.editTitle": "Edit {label}",
+		"block.description": "Structured block · {key}",
+		"block.noSummary": "No summary",
+		"block.unknown": "Unknown",
+		"block.recovery":
+			"This block type is no longer configured. Its content is preserved; export it before removing or migrating it.",
+		"block.export": "Export block JSON",
+		"block.issues": "{count} fields need attention. Edit this block to review.",
+		"block.pendingEdit": "Apply or cancel the open block before editing another.",
 		"asset.actions": "Asset actions",
 		"asset.addCaption": "Add a caption…",
 		"asset.captionFor": "Caption for {filename}",
@@ -24,6 +39,9 @@ export const richTextMessages = defineAdminMessages({
 		"editor.editLink": "Edit link",
 		"editor.editNamed": "Edit {name}",
 		"editor.empty": "No content",
+		"editor.recovery":
+			"Unsupported historical content at {path}. The original JSON is preserved. Export and migrate it before editing this field.",
+		"editor.exportDocument": "Export document JSON",
 		"editor.filterBlocks": "Filter blocks",
 		"editor.filterBlocksPlaceholder": "Filter blocks…",
 		"editor.footerHint": "— type / for commands · move with Alt+Shift+↑/↓",
@@ -81,6 +99,23 @@ export const richTextMessages = defineAdminMessages({
 	},
 	translations: {
 		fr: {
+			"block.label": "Bloc {label}",
+			"block.select": "Sélectionner le bloc {label}",
+			"block.edit": "Modifier",
+			"block.duplicate": "Dupliquer",
+			"block.remove": "Supprimer",
+			"block.insertTitle": "Insérer {label}",
+			"block.editTitle": "Modifier {label}",
+			"block.description": "Bloc structuré · {key}",
+			"block.noSummary": "Aucun résumé",
+			"block.unknown": "Inconnu",
+			"block.recovery":
+				"Ce type de bloc n’est plus configuré. Son contenu est conservé ; exportez-le avant de le supprimer ou de le migrer.",
+			"block.export": "Exporter le JSON du bloc",
+			"block.issues":
+				"{count} champs nécessitent votre attention. Modifiez ce bloc pour les vérifier.",
+			"block.pendingEdit":
+				"Appliquez ou annulez la modification en cours avant de modifier un autre bloc.",
 			"asset.actions": "Actions sur le fichier",
 			"asset.addCaption": "Ajouter une légende…",
 			"asset.captionFor": "Légende de {filename}",
@@ -103,6 +138,9 @@ export const richTextMessages = defineAdminMessages({
 			"editor.editLink": "Modifier le lien",
 			"editor.editNamed": "Modifier {name}",
 			"editor.empty": "Aucun contenu",
+			"editor.recovery":
+				"Contenu historique non pris en charge à {path}. Le JSON original est conservé. Exportez-le et migrez-le avant de modifier ce champ.",
+			"editor.exportDocument": "Exporter le document JSON",
 			"editor.filterBlocks": "Filtrer les blocs",
 			"editor.filterBlocksPlaceholder": "Filtrer les blocs…",
 			"editor.footerHint": "— saisir / pour les commandes · déplacer avec Alt+Maj+↑/↓",
@@ -159,6 +197,21 @@ export const richTextMessages = defineAdminMessages({
 			"relationship.unavailable": "Référence indisponible",
 		},
 		ar: {
+			"block.label": "كتلة {label}",
+			"block.select": "تحديد كتلة {label}",
+			"block.edit": "تعديل",
+			"block.duplicate": "تكرار",
+			"block.remove": "إزالة",
+			"block.insertTitle": "إدراج {label}",
+			"block.editTitle": "تعديل {label}",
+			"block.description": "كتلة منظمة · {key}",
+			"block.noSummary": "لا يوجد ملخص",
+			"block.unknown": "غير معروف",
+			"block.recovery":
+				"لم يعد نوع الكتلة هذا معرّفًا. تم الاحتفاظ بمحتواه؛ صدّره قبل إزالته أو ترحيله.",
+			"block.export": "تصدير JSON للكتلة",
+			"block.issues": "هناك {count} حقول تحتاج إلى مراجعة. عدّل هذه الكتلة لمراجعتها.",
+			"block.pendingEdit": "طبّق التعديل المفتوح أو ألغِه قبل تعديل كتلة أخرى.",
 			"asset.actions": "إجراءات الملف",
 			"asset.addCaption": "إضافة وصف…",
 			"asset.captionFor": "وصف {filename}",
@@ -181,6 +234,9 @@ export const richTextMessages = defineAdminMessages({
 			"editor.editLink": "تعديل الرابط",
 			"editor.editNamed": "تعديل {name}",
 			"editor.empty": "لا يوجد محتوى",
+			"editor.recovery":
+				"محتوى سابق غير مدعوم في {path}. تم الاحتفاظ ببيانات JSON الأصلية. صدّرها ورحّلها قبل تعديل هذا الحقل.",
+			"editor.exportDocument": "تصدير مستند JSON",
 			"editor.filterBlocks": "تصفية الكتل",
 			"editor.filterBlocksPlaceholder": "تصفية الكتل…",
 			"editor.footerHint": "— اكتب / لعرض الأوامر · انقل باستخدام Alt+Shift+↑/↓",

package/src/render/index.ts

@@ -0,0 +1,6 @@
+import type { Component } from "svelte";
+
+export { default as RichText } from "#richtext/rich-text.svelte";
+export type RichTextBlockComponents<Payload extends { blockType: string }> = {
+	[Slug in Payload["blockType"]]: Component<{ block: Extract<Payload, { blockType: Slug }> }>;
+};