@riducms/plugin-richtext 0.1.4 → 0.2.0

package/src/document-validation.ts

@@ -0,0 +1,104 @@
+import type { RichTextDocument } from "#richtext/document";
+const base = ["type", "version"];
+const element = [...base, "children", "direction", "format", "indent"];
+const container = [...element, "textFormat", "textStyle"];
+const properties: Readonly<Record<string, readonly string[]>> = {
+	root: element,
+	paragraph: container,
+	heading: [...container, "tag"],
+	quote: container,
+	link: [...container, "url", "target", "rel", "title"],
+	list: [...container, "listType", "start", "tag"],
+	listitem: [...container, "value", "checked"],
+	code: [...container, "language", "theme"],
+	text: [...base, "text", "format", "detail", "mode", "style"],
+	linebreak: base,
+	horizontalrule: base,
+	upload: [...base, "relationTo", "id", "caption", "format"],
+	relationship: [...base, "relationTo", "id", "format"],
+	block: [...base, "fields"],
+};
+const integers = new Set(["detail", "textFormat", "indent", "start", "value"]);
+const nullableStrings = new Set(["target", "rel", "title", "direction"]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/** Return the first unsupported envelope path without interpreting schema-owned payloads.
+ * Both editor admission and portable rendering use this lossless JSON boundary.
+ */
+export function documentRecoveryIssue(
+	value: unknown,
+	allowedNodeTypes?: ReadonlySet<string>
+): string | undefined {
+	if (!isRecord(value)) return "document";
+	if (value.version !== 1) return "version";
+	const extra = Object.keys(value).find((key) => key !== "version" && key !== "root");
+	if (extra !== undefined) return extra;
+	let count = 0;
+	const visit = (node: unknown, path: string, depth: number): string | undefined => {
+		if (++count > 10_000 || depth > 64) return path;
+		if (!isRecord(node)) return path;
+		const type = node.type;
+		if (typeof type !== "string" || !Object.hasOwn(properties, type)) return `${path}.type`;
+		if ((depth === 0) !== (type === "root")) return `${path}.type`;
+		if (allowedNodeTypes !== undefined && !allowedNodeTypes.has(type)) return `${path}.type`;
+		if (("version" in node && node.version !== 1) || (type === "block" && node.version !== 1))
+			return `${path}.version`;
+		for (const [key, value] of Object.entries(node)) {
+			if (!properties[type]!.includes(key)) return `${path}.${key}`;
+			if (key === "type" || key === "version" || key === "children") continue;
+			if (key === "fields") {
+				if (!isRecord(value)) return `${path}.fields`;
+			} else if (integers.has(key) || (key === "format" && type === "text")) {
+				if (typeof value !== "number" || !Number.isSafeInteger(value)) return `${path}.${key}`;
+			} else if (key === "checked") {
+				if (typeof value !== "boolean") return `${path}.${key}`;
+			} else if (!(nullableStrings.has(key) && value === null) && typeof value !== "string") {
+				return `${path}.${key}`;
+			}
+		}
+		if (type === "block") return isRecord(node.fields) ? undefined : `${path}.fields`;
+		if (type === "text" && typeof node.text !== "string") return `${path}.text`;
+		if ("mode" in node && !["normal", "token", "segmented"].includes(String(node.mode)))
+			return `${path}.mode`;
+		if (
+			"direction" in node &&
+			node.direction !== null &&
+			node.direction !== "ltr" &&
+			node.direction !== "rtl"
+		)
+			return `${path}.direction`;
+		if (
+			type !== "text" &&
+			"format" in node &&
+			!["", "left", "start", "center", "right", "end", "justify"].includes(String(node.format))
+		)
+			return `${path}.format`;
+		if (type === "link" && typeof node.url !== "string") return `${path}.url`;
+		if (type === "heading" && !/^h[1-6]$/.test(String(node.tag))) return `${path}.tag`;
+		if (type === "list" && !["bullet", "number", "check"].includes(String(node.listType)))
+			return `${path}.listType`;
+		if (type === "upload" || type === "relationship") {
+			if (typeof node.relationTo !== "string") return `${path}.relationTo`;
+			if (typeof node.id !== "string") return `${path}.id`;
+		}
+		if (properties[type]!.includes("children")) {
+			if (!Array.isArray(node.children)) return `${path}.children`;
+			for (let index = 0; index < node.children.length; index++) {
+				const issue = visit(node.children[index], `${path}.children.${index}`, depth + 1);
+				if (issue !== undefined) return issue;
+			}
+		}
+		return undefined;
+	};
+	return visit(value.root, "root", 0);
+}
+
+/** Decode the portable envelope; embedded payload semantics remain schema-owned. */
+export function decodeRichTextDocument(value: unknown): RichTextDocument<unknown> {
+	const issue = documentRecoveryIssue(value);
+	if (issue !== undefined) throw new Error(`Invalid rich-text document at ${issue}.`);
+	return value as RichTextDocument<unknown>;
+}

package/src/document.ts

@@ -0,0 +1,76 @@
+/** Portable JSON contracts. This entry point imports no editor, Svelte or DOM code. */
+export interface RichTextDocument<Payload = never> {
+	version: 1;
+	root: RichTextRootNode<Payload>;
+}
+
+/** Payload is instantiated with generated input variants (required values and canonical IDs). */
+export type RichTextDocumentInput<Payload = never> = RichTextDocument<Payload>;
+
+export type RichTextElementFormat = "" | "left" | "center" | "right" | "justify" | "start" | "end";
+
+export interface RichTextRootNode<Payload = never> {
+	type: "root";
+	version?: 1;
+	children: RichTextNode<Payload>[];
+	direction?: "ltr" | "rtl" | null;
+	format?: RichTextElementFormat;
+	indent?: number;
+}
+
+export type RichTextBlockNode<Payload> = [Payload] extends [never]
+	? never
+	: { type: "block"; version: 1; fields: Payload };
+
+export interface RichTextTextNode {
+	type: "text";
+	version?: 1;
+	text: string;
+	format?: number;
+	detail?: number;
+	mode?: "normal" | "token" | "segmented";
+	style?: string;
+}
+
+export interface RichTextElementNode<Payload = never> {
+	type: "paragraph" | "heading" | "quote" | "link" | "list" | "listitem" | "code";
+	version?: 1;
+	children: RichTextNode<Payload>[];
+	direction?: "ltr" | "rtl" | null;
+	format?: RichTextElementFormat;
+	indent?: number;
+	tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ol" | "ul";
+	url?: string;
+	target?: string | null;
+	rel?: string | null;
+	title?: string | null;
+	listType?: "bullet" | "number" | "check";
+	start?: number;
+	value?: number;
+	checked?: boolean;
+	language?: string;
+	theme?: string;
+	textFormat?: number;
+	textStyle?: string;
+}
+
+export interface RichTextReferenceNode {
+	type: "upload" | "relationship";
+	version?: 1;
+	relationTo: string;
+	id: string;
+	caption?: string;
+	format?: RichTextElementFormat;
+}
+
+export type RichTextNode<Payload = never> =
+	| RichTextTextNode
+	| RichTextElementNode<Payload>
+	| RichTextReferenceNode
+	| { type: "linebreak" | "horizontalrule"; version?: 1 }
+	| RichTextBlockNode<Payload>;
+
+/** Checked renderer dispatch retains the selected variant's exact payload. */
+export type RichTextBlockRenderers<Payload extends { blockType: string }, Result> = {
+	[Slug in Payload["blockType"]]: (block: Extract<Payload, { blockType: Slug }>) => Result;
+};

package/src/field/rich-text-blocks.ts

@@ -0,0 +1,37 @@
+import { resolveBlockTypes } from "@riducms/protocol";
+import type { SchemaBlockType, SchemaField } from "@riducms/protocol";
+
+/** The allowlist comes from resolved executable schemas, never plugin settings. */
+export function richTextBlockTypes(field: SchemaField): readonly SchemaBlockType[] {
+	return (
+		resolveBlockTypes(
+			field.plugin?.embeddedTrees
+				?.find((tree) => tree.key === "blocks")
+				?.cases.find((entry) => entry.tagValue === "block")
+		) ?? []
+	);
+}
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function blockSummary(fields: Record<string, unknown>, type?: SchemaBlockType): string {
+	const summary = type?.admin?.rowLabel;
+	if (summary !== undefined) {
+		const value = summary
+			.split(".")
+			.reduce<unknown>((value, key) => (isRecord(value) ? value[key] : undefined), fields);
+		if (typeof value === "string" && value.trim() !== "") return value;
+	}
+	for (const field of type?.fields ?? []) {
+		const value = fields[field.name];
+		if (
+			(field.type === "text" || field.type === "textarea") &&
+			typeof value === "string" &&
+			value.trim() !== ""
+		)
+			return value;
+	}
+	return "";
+}

package/src/field/rich-text-config.ts

@@ -17,20 +17,23 @@ const features = new Set<RichTextFeature>([
 	"blocks",
 ]);
 
-export function parseRichTextConfig(value: unknown): RichTextConfig {
-	if (!isRecord(value)) return { features: [], uploadCollections: [], relationshipCollections: [] };
+export function decodeRichTextConfig(value: unknown): RichTextConfig {
+	if (!isRecord(value)) throw new Error("Rich-text config must be an object.");
+	for (const key of Object.keys(value))
+		if (!["features", "uploadCollections", "relationshipCollections"].includes(key))
+			throw new Error(`Unsupported rich-text config key ${key}.`);
+	const strings = (key: string): string[] => {
+		const items = value[key] ?? [];
+		if (!Array.isArray(items) || items.some((item) => typeof item !== "string" || !item))
+			throw new Error(`${key} must be an array of nonempty strings.`);
+		return [...items];
+	};
+	const selected = strings("features");
+	if (!selected.every(isRichTextFeature)) throw new Error("Unsupported rich-text feature.");
 	return {
-		features: Array.isArray(value.features) ? value.features.filter(isRichTextFeature) : [],
-		uploadCollections: Array.isArray(value.uploadCollections)
-			? value.uploadCollections.filter(
-					(collection): collection is string => typeof collection === "string"
-				)
-			: [],
-		relationshipCollections: Array.isArray(value.relationshipCollections)
-			? value.relationshipCollections.filter(
-					(collection): collection is string => typeof collection === "string"
-				)
-			: [],
+		features: selected,
+		uploadCollections: strings("uploadCollections"),
+		relationshipCollections: strings("relationshipCollections"),
 	};
 }
 

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

@@ -6,3 +6,12 @@ const [getRichTextAuthoringHost, setRichTextAuthoringHost] = createContext<
 >();
 
 export { getRichTextAuthoringHost, setRichTextAuthoringHost };
+
+import type { FieldDocumentForm } from "@riducms/plugin";
+import type { SchemaField } from "@riducms/protocol";
+
+const [getRichTextField, setRichTextField] = createContext<{
+	readonly field: SchemaField;
+	readonly form: FieldDocumentForm;
+}>();
+export { getRichTextField, setRichTextField };

package/src/field/rich-text-document.ts

@@ -1,5 +1,25 @@
+import { documentRecoveryIssue } from "@plugin-richtext/document-validation";
+import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+
+export function editorRecoveryIssue(value: unknown, config: RichTextConfig) {
+	if (value === undefined || value === null) return undefined;
+	const types = new Set(["root", "paragraph", "heading", "quote", "text", "linebreak", "block"]);
+	const featureTypes = {
+		links: ["link"],
+		lists: ["list", "listitem"],
+		code: ["code"],
+		"horizontal-rule": ["horizontalrule"],
+		uploads: ["upload"],
+		relationships: ["relationship"],
+		blocks: ["block"],
+	};
+	for (const feature of config.features) for (const type of featureTypes[feature]) types.add(type);
+	return documentRecoveryIssue(value, types);
+}
+
 export function initialEditorState(value: unknown) {
-	if (!isRecord(value) || value.version !== 1 || !isRecord(value.root)) return null;
+	if (!isRecord(value) || !isRecord(value.root) || documentRecoveryIssue(value) !== undefined)
+		return null;
 	return JSON.stringify({ root: withElementDefaults(value.root) });
 }
 

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { useLexicalComposerContext } from "@hvniel/lexical-svelte";
+
+	let { readOnly = false }: { readOnly?: boolean } = $props();
+	const editor = useLexicalComposerContext()[0];
+
+	// A fieldset cannot disable contenteditable; synchronize the host's live editability.
+	$effect(() => editor.setEditable(!readOnly));
+</script>

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

@@ -0,0 +1,250 @@
+<script lang="ts">
+	import type { RichTextDocument } from "@plugin-richtext/document";
+	import { decodeRichTextDocument } from "@plugin-richtext/document-validation";
+	import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+	import type { PluginFieldProps } 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 { $createParagraphNode, $getRoot, defineExtension, type EditorState } from "lexical";
+	import { Button, FieldFrame, fieldControlARIA } from "@riducms/ui";
+
+	import "@plugin-richtext/styles/integration.css";
+	import RichTextBlockToolbar from "@plugin-richtext/menu/rich-text-block-toolbar.svelte";
+	import RichTextEditabilityPlugin from "@plugin-richtext/field/rich-text-editability-plugin.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 { hasRichTextFeature } from "@plugin-richtext/field/rich-text-config";
+	import {
+		setRichTextAuthoringHost,
+		setRichTextField,
+	} from "@plugin-richtext/field/rich-text-context.svelte";
+	import {
+		editorRecoveryIssue,
+		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 { BlockNode } from "@plugin-richtext/block/rich-text-block-node";
+	import RichTextBlocksPlugin from "@plugin-richtext/block/rich-text-blocks-plugin.svelte";
+	import RichTextRelationshipPlugin from "@plugin-richtext/relationship/rich-text-relationship-plugin.svelte";
+
+	let {
+		field: binding,
+		form,
+		config,
+		authoring,
+		i18n,
+	}: PluginFieldProps<RichTextDocument<unknown>, RichTextConfig> = $props();
+	const field = $derived(binding.schema);
+	const editingBlocked = $derived(binding.readOnly);
+	const issues = $derived(binding.issues);
+	const inputARIA = $derived(
+		fieldControlARIA(field.id, field.admin.description !== undefined, issues.length > 0)
+	);
+	const placeholderText = $derived(i18n.t("plugin.richtext:editor.placeholder"));
+	const visiblePlaceholder = $derived(
+		field.admin.readOnly ? i18n.t("plugin.richtext:editor.empty") : placeholderText
+	);
+	let canvasElement = $state<HTMLElement | null>(null);
+	// A mounted field hydrates once; the parent remounts it for schema/revision/locale changes.
+	// svelte-ignore state_referenced_locally
+	const initialValue = binding.rawValue;
+	// Config belongs to this keyed editor mount.
+	// svelte-ignore state_referenced_locally
+	const recoveryIssue = editorRecoveryIssue(initialValue, config);
+	// The host is stable for this mounted field and decorator descendants inherit it through portals.
+	// svelte-ignore state_referenced_locally
+	setRichTextAuthoringHost(authoring);
+	setRichTextField({
+		get field() {
+			return field;
+		},
+		get form() {
+			return form;
+		},
+	});
+
+	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",
+		},
+		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",
+		},
+		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]",
+		},
+		upload: "ridu-richtext-upload m-0",
+	};
+
+	// The extension tree is identity-bearing and belongs to this field instance.
+	// svelte-ignore state_referenced_locally
+	const extension = defineExtension({
+		$initialEditorState:
+			(recoveryIssue === undefined ? initialEditorState(initialValue) : null) ??
+			(() => {
+				// Initialize Lexical only: its first real edit must not look like initial hydration.
+				$getRoot().append($createParagraphNode());
+			}),
+		dependencies: [
+			RichTextExtension,
+			HistoryExtension,
+			...(hasRichTextFeature(config, "lists") ? [ListExtension] : []),
+		],
+		name: "@riducms/plugin-richtext/editor",
+		namespace: `ridu-${field.id}`,
+		nodes: [
+			BlockNode,
+			...(hasRichTextFeature(config, "links") ? [LinkNode] : []),
+			...(hasRichTextFeature(config, "code") ? [CodeNode] : []),
+			...(hasRichTextFeature(config, "horizontal-rule") ? [HorizontalRuleNode] : []),
+			...(hasRichTextFeature(config, "uploads") ? [UploadNode] : []),
+			...(hasRichTextFeature(config, "relationships") ? [RelationshipNode] : []),
+		],
+		editable: !editingBlocked,
+		theme,
+		onError: (error) => {
+			throw error;
+		},
+	});
+
+	function changed(editorState: EditorState) {
+		// Lexical can retain undefined optional properties after importing sparse server JSON.
+		// Decode its serialized wire value, where those properties are absent.
+		binding.set(
+			decodeRichTextDocument(
+				JSON.parse(JSON.stringify({ version: 1, root: editorState.toJSON().root }))
+			)
+		);
+	}
+	function exportDocument() {
+		const url = URL.createObjectURL(
+			new Blob([JSON.stringify(initialValue, null, 2)], { type: "application/json" })
+		);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = `${field.name}-recovery.json`;
+		link.click();
+		setTimeout(() => URL.revokeObjectURL(url), 0);
+	}
+</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={inputARIA["aria-invalid"]}
+		>
+			{#if recoveryIssue !== undefined}
+				<p role="alert" class="my-3 text-sm text-destructive">
+					{i18n.t("plugin.richtext:editor.recovery", { path: `${field.path}.${recoveryIssue}` })}
+				</p>
+				<Button variant="outline" onclick={exportDocument}>
+					{i18n.t("plugin.richtext:editor.exportDocument")}
+				</Button>
+			{:else}
+				<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={inputARIA["aria-describedby"]}
+							ariaErrorMessage={inputARIA["aria-errormessage"]}
+							ariaInvalid={inputARIA["aria-invalid"]}
+							ariaRequired={field.required}
+							aria-keyshortcuts="Alt+Shift+ArrowUp Alt+Shift+ArrowDown"
+							aria-placeholder={visiblePlaceholder}
+						>
+							{#snippet placeholder()}
+								<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",
+										field.admin.readOnly && "top-0 start-0 max-[34rem]:top-0 max-[34rem]:start-0",
+									]}
+								>
+									{visiblePlaceholder}
+								</span>
+							{/snippet}
+						</ContentEditable>
+					</div>
+					{#if hasRichTextFeature(config, "links")}<LinkPlugin />{/if}
+					{#if hasRichTextFeature(config, "horizontal-rule")}<HorizontalRulePlugin />{/if}
+					{#if !editingBlocked}
+						<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}
+					<RichTextEditabilityPlugin readOnly={editingBlocked} />
+					<RichTextBlocksPlugin {authoring} {field} />
+					<OnChangePlugin onChange={changed} ignoreSelectionChange />
+					<RichTextFooter readOnly={field.admin.readOnly === true} />
+				</LexicalExtensionComposer>
+			{/if}
+		</div>
+	</FieldFrame>
+</div>