@riducms/plugin-richtext 0.1.5 → 0.2.0

package/README.md

@@ -24,3 +24,12 @@ npm run ridu -- migrate create --name add-rich-text
 See the [Rich text guide](../../website/src/content/docs/rich-text.md) for new- and
 existing-project setup, feature selection, uploads/relationships, portable values, constraints,
 safe Go rendering, migrations, and verification.
+
+Configure block-level embeds with executable `richtext.Config.Blocks` definitions. The paired
+editor uses the resolved allowlist for slash/toolbar insertion and an atomic card with a scoped
+Apply/Cancel drawer. The parent form owns saving; Lexical owns selection and history.
+
+Portable types are available from `@riducms/plugin-richtext/document`, HTML rendering from
+`@riducms/plugin-richtext/render`, and optional typed Svelte rendering from
+`@riducms/plugin-richtext/svelte`. These entries do not load the admin editor. See the rich-text
+guide for strict payloads, localization, typed renderers and experimental-content migration.

package/package.json

@@ -4,6 +4,7 @@
 	},
 	"dependencies": {
 		"@hvniel/lexical-svelte": "^0.1.1",
+		"@lexical/clipboard": "0.49.0",
 		"@lexical/code": "0.49.0",
 		"@lexical/history": "0.49.0",
 		"@lexical/link": "0.49.0",
@@ -11,9 +12,9 @@
 		"@lexical/rich-text": "0.49.0",
 		"@lexical/selection": "0.49.0",
 		"@lexical/utils": "0.49.0",
-		"@riducms/plugin": "0.1.5",
-		"@riducms/protocol": "0.1.5",
-		"@riducms/ui": "0.1.5",
+		"@riducms/plugin": "0.2.0",
+		"@riducms/protocol": "0.2.0",
+		"@riducms/ui": "0.2.0",
 		"@types/prismjs": "^1.26.5",
 		"lexical": "0.49.0",
 		"prismjs": "^1.30.0",
@@ -21,16 +22,26 @@
 	},
 	"description": "Svelte and Lexical admin integration for Ridu's official rich-text plugin.",
 	"devDependencies": {
-		"@riducms/build": "0.1.5"
+		"@riducms/build": "0.2.0"
 	},
 	"exports": {
-		".": "./src/index.ts"
+		".": "./src/index.ts",
+		"./document": "./src/document.ts",
+		"./render": "./src/render.ts",
+		"./svelte": "./src/render/index.ts"
 	},
 	"files": [
 		"src",
 		"LICENSE"
 	],
 	"homepage": "https://riducms.com",
+	"imports": {
+		"#richtext/document": "./src/document.ts",
+		"#richtext/document-validation": "./src/document-validation.ts",
+		"#richtext/render": "./src/render.ts",
+		"#richtext/rich-text.svelte": "./src/render/rich-text.svelte",
+		"#richtext/svelte": "./src/render/index.ts"
+	},
 	"license": "MIT",
 	"name": "@riducms/plugin-richtext",
 	"publishConfig": {
@@ -48,5 +59,5 @@
 		"test": "bun test"
 	},
 	"type": "module",
-	"version": "0.1.5"
+	"version": "0.2.0"
 }

package/src/block/rich-text-block-card.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import {
+		useLexicalComposerContext,
+		useLexicalEditable,
+		useLexicalNodeSelection,
+	} from "@hvniel/lexical-svelte";
+	import { $getNodeByKey, type NodeKey } from "lexical";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button } from "@riducms/ui";
+	import {
+		getRichTextField,
+		getRichTextAuthoringHost,
+	} from "@plugin-richtext/field/rich-text-context.svelte";
+	import { blockSummary, richTextBlockTypes } from "@plugin-richtext/field/rich-text-blocks";
+	import {
+		OPEN_BLOCK_EDITOR_COMMAND,
+		DUPLICATE_BLOCK_COMMAND,
+		REMOVE_BLOCK_COMMAND,
+		MOVE_BLOCK_COMMAND,
+	} from "@plugin-richtext/menu/rich-text-commands";
+
+	let {
+		nodeKey,
+		fields,
+		validEnvelope,
+	}: { nodeKey: NodeKey; fields: Record<string, unknown>; validEnvelope: boolean } = $props();
+	const editor = useLexicalComposerContext()[0];
+	const i18n = getAdminI18n();
+	const editable = useLexicalEditable();
+	const context = getRichTextField();
+	const authoring = getRichTextAuthoringHost();
+	// The decorator instance owns this fixed Lexical node key.
+	// svelte-ignore state_referenced_locally
+	const [selected, setSelected, clearSelected] = useLexicalNodeSelection(nodeKey);
+	const identity = $derived(typeof fields._key === "string" ? fields._key : "");
+	const blockType = $derived(
+		typeof fields.blockType === "string"
+			? fields.blockType
+			: i18n.t("plugin.richtext:block.unknown")
+	);
+	const type = $derived(
+		richTextBlockTypes(context.field).find((candidate) => candidate.slug === blockType)
+	);
+	const issues = $derived(authoring?.schemaIssues?.({ treeKey: "blocks", identity }) ?? []);
+	const recovery = $derived(type === undefined || !validEnvelope);
+	const summary = $derived(blockSummary(fields, type) || i18n.t("plugin.richtext:block.noSummary"));
+	function select(event: MouseEvent) {
+		event.stopPropagation();
+		if (!event.shiftKey) clearSelected();
+		setSelected(true);
+	}
+	function edit() {
+		editor.dispatchCommand(OPEN_BLOCK_EDITOR_COMMAND, { nodeKey });
+	}
+	function exportBlock() {
+		const serialized = editor.read(() => $getNodeByKey(nodeKey)?.exportJSON());
+		if (serialized === undefined) return;
+		const url = URL.createObjectURL(
+			new Blob([JSON.stringify(serialized, null, 2)], { type: "application/json" })
+		);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = `${blockType}-${identity || "historical"}.json`;
+		link.click();
+		setTimeout(() => URL.revokeObjectURL(url), 0);
+	}
+	function duplicate() {
+		editor.dispatchCommand(DUPLICATE_BLOCK_COMMAND, nodeKey);
+	}
+	function remove() {
+		editor.dispatchCommand(REMOVE_BLOCK_COMMAND, nodeKey);
+	}
+	function keydown(event: KeyboardEvent) {
+		if (
+			(event.key === "Delete" || event.key === "Backspace") &&
+			event.target === event.currentTarget &&
+			editable()
+		) {
+			event.preventDefault();
+			event.stopPropagation();
+			remove();
+		} else if (
+			editable() &&
+			event.altKey &&
+			event.shiftKey &&
+			(event.key === "ArrowUp" || event.key === "ArrowDown")
+		) {
+			event.preventDefault();
+			event.stopPropagation();
+			editor.dispatchCommand(MOVE_BLOCK_COMMAND, {
+				nodeKey,
+				direction: event.key === "ArrowUp" ? -1 : 1,
+			});
+		} else if (event.key === "Enter" && event.target === event.currentTarget && editable()) {
+			event.preventDefault();
+			event.stopPropagation();
+			edit();
+		}
+	}
+</script>
+
+<article
+	class={[
+		"ridu-richtext-embedded-card my-5 rounded-md border border-control-border bg-control p-4 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+		selected() && "border-primary",
+		issues.length > 0 && "border-destructive",
+	]}
+	data-block-key={identity}
+	data-block-type={blockType}
+	aria-label={i18n.t("plugin.richtext:block.label", { label: type?.labels.singular ?? blockType })}
+	data-invalid={issues.length > 0}
+	role="group"
+>
+	<div class="flex items-center justify-between gap-3">
+		<button
+			type="button"
+			data-block-select
+			class="min-w-0 flex-1 text-start rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+			aria-label={i18n.t("plugin.richtext:block.select", {
+				label: type?.labels.singular ?? blockType,
+			})}
+			aria-pressed={selected()}
+			onclickcapture={select}
+			onkeydowncapture={keydown}
+		>
+			<span class="block text-xs font-medium text-foreground-muted">
+				{type?.labels.singular ?? blockType}
+			</span>
+			<span class="block mt-1 truncate text-sm text-foreground">{summary}</span>
+		</button>
+		{#if editable()}
+			<div class="flex shrink-0 gap-1">
+				<Button size="sm" variant="ghost" onclick={edit} disabled={recovery}>
+					{i18n.t("plugin.richtext:block.edit")}
+				</Button>
+				<Button size="sm" variant="ghost" onclick={duplicate} disabled={recovery}>
+					{i18n.t("plugin.richtext:block.duplicate")}
+				</Button>
+				<Button size="sm" variant="ghost" onclick={remove}>
+					{i18n.t("plugin.richtext:block.remove")}
+				</Button>
+			</div>
+		{/if}
+	</div>
+	{#if recovery}
+		<p role="alert" class="mt-2 text-sm text-destructive">
+			{i18n.t("plugin.richtext:block.recovery")}
+		</p>
+		<Button size="sm" variant="outline" onclick={exportBlock}>
+			{i18n.t("plugin.richtext:block.export")}
+		</Button>
+	{:else if issues.length > 0}
+		<p class="mt-2 text-sm text-destructive">
+			{i18n.t("plugin.richtext:block.issues", { count: issues.length })}
+		</p>
+	{/if}
+</article>

package/src/block/rich-text-block-clipboard.ts

@@ -0,0 +1,54 @@
+import type { FieldAuthoringHost } from "@riducms/plugin";
+import type { SchemaBlockType } from "@riducms/protocol";
+import type { SerializedLexicalNode } from "lexical";
+import { isRecord } from "@plugin-richtext/field/rich-text-blocks";
+import { documentRecoveryIssue } from "@plugin-richtext/document-validation";
+
+/** Validates first, then copies only declared payloads through the generic schema host. */
+export function copyBlockClipboardNodes(
+	nodes: unknown,
+	types: readonly SchemaBlockType[],
+	copy: NonNullable<FieldAuthoringHost["copySchemaPayload"]>
+): { nodes: SerializedLexicalNode[]; hasBlocks: boolean } {
+	if (!Array.isArray(nodes)) throw new Error("Clipboard content is not a rich-text node list.");
+	const issue = documentRecoveryIssue({ version: 1, root: { type: "root", children: nodes } });
+	if (issue !== undefined)
+		throw new Error(
+			`Clipboard content exceeds a rich-text contract or traversal limit at ${issue}.`
+		);
+	const result = structuredClone(nodes);
+	const pending: { node: unknown; depth: number }[] = result.map((node) => ({ node, depth: 0 }));
+	const blocks: Record<string, unknown>[] = [];
+	let count = 0;
+	while (pending.length > 0) {
+		const { node, depth } = pending.pop()!;
+		if (++count > 10000 || depth > 64)
+			throw new Error("Clipboard content exceeds the rich-text traversal limit.");
+		if (!isRecord(node) || typeof node.type !== "string" || typeof node.version !== "number")
+			throw new Error("Clipboard contains a malformed rich-text node.");
+		if (node.type === "block") {
+			const fields = node.fields;
+			if (
+				node.version !== 1 ||
+				!isRecord(fields) ||
+				typeof fields.blockType !== "string" ||
+				!types.some((type) => type.slug === fields.blockType)
+			)
+				throw new Error(
+					"This field does not support a block type on the clipboard. Paste into a field that declares it, or migrate the content first."
+				);
+			blocks.push(node);
+			continue;
+		}
+		if (Array.isArray(node.children))
+			pending.push(...node.children.map((node) => ({ node, depth: depth + 1 })));
+	}
+	for (const node of blocks) {
+		const fields = node.fields as Record<string, unknown> & { blockType: string };
+		node.fields = copy(
+			{ treeKey: "blocks", caseTag: "block", variantSlug: fields.blockType },
+			fields
+		);
+	}
+	return { nodes: result as SerializedLexicalNode[], hasBlocks: blocks.length > 0 };
+}

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

@@ -0,0 +1,84 @@
+import type { Decorator } from "@hvniel/lexical-svelte";
+import {
+	$applyNodeReplacement,
+	$getDocument,
+	DecoratorNode,
+	type LexicalNode,
+	type NodeKey,
+	type SerializedLexicalNode,
+} from "lexical";
+import RichTextBlockCard from "@plugin-richtext/block/rich-text-block-card.svelte";
+import { isRecord } from "@plugin-richtext/field/rich-text-blocks";
+
+/** Retains the received envelope verbatim so historical content can be exported safely. */
+export type SerializedBlockNode = SerializedLexicalNode & Record<string, unknown>;
+
+export class BlockNode extends DecoratorNode<Decorator<typeof RichTextBlockCard>> {
+	__envelope: SerializedBlockNode;
+
+	static getType(): string {
+		return "block";
+	}
+	static clone(node: BlockNode): BlockNode {
+		return new BlockNode(node.__envelope, node.__key);
+	}
+	static importJSON(serializedNode: SerializedBlockNode): BlockNode {
+		return $applyNodeReplacement(new BlockNode(structuredClone(serializedNode)));
+	}
+	constructor(envelope: SerializedBlockNode, key?: NodeKey) {
+		super(key);
+		this.__envelope = envelope;
+	}
+	exportJSON(): SerializedBlockNode {
+		return structuredClone(this.getLatest().__envelope);
+	}
+	createDOM(): HTMLElement {
+		const element = $getDocument().createElement("div");
+		element.className = "ridu-richtext-embedded";
+		return element;
+	}
+	updateDOM(): false {
+		return false;
+	}
+	isInline(): false {
+		return false;
+	}
+	isKeyboardSelectable(): true {
+		return true;
+	}
+	getFields(): Record<string, unknown> {
+		const fields = this.getLatest().__envelope.fields;
+		return isRecord(fields) ? fields : {};
+	}
+	setFields(fields: Record<string, unknown>): this {
+		const writable = this.getWritable();
+		writable.__envelope = { type: "block", version: 1, fields: structuredClone(fields) };
+		return writable;
+	}
+	decorate(): Decorator<typeof RichTextBlockCard> {
+		return {
+			component: RichTextBlockCard,
+			props: {
+				nodeKey: this.getKey(),
+				fields: this.getFields(),
+				validEnvelope:
+					this.__envelope.type === "block" &&
+					this.__envelope.version === 1 &&
+					Object.keys(this.__envelope).every(
+						(key) => key === "type" || key === "version" || key === "fields"
+					) &&
+					typeof this.getFields()._key === "string" &&
+					String(this.getFields()._key).trim() !== "",
+			},
+		};
+	}
+}
+
+export function createBlockNode(fields: Record<string, unknown>): BlockNode {
+	return $applyNodeReplacement(
+		new BlockNode({ type: "block", version: 1, fields: structuredClone(fields) })
+	);
+}
+export function isBlockNode(node: LexicalNode | null | undefined): node is BlockNode {
+	return node instanceof BlockNode;
+}

package/src/block/rich-text-blocks-plugin.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+	import { getAdminI18n, type EmbeddedSchemaDraft, type FieldAuthoringHost } from "@riducms/plugin";
+	import type { SchemaField } from "@riducms/protocol";
+	import { useLexicalComposerContext } from "@hvniel/lexical-svelte";
+	import {
+		$generateNodesFromSerializedNodes,
+		$getClipboardDataFromSelection,
+		setLexicalClipboardDataTransfer,
+		$insertGeneratedNodes,
+	} from "@lexical/clipboard";
+	import { copyBlockClipboardNodes } from "@plugin-richtext/block/rich-text-block-clipboard";
+	import { isRecord } from "@plugin-richtext/field/rich-text-blocks";
+	import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
+	import {
+		$addUpdateTag,
+		$createParagraphNode,
+		$getNodeByKey,
+		$getRoot,
+		$getSelection,
+		$isElementNode,
+		$isNodeSelection,
+		$isParagraphNode,
+		$isRangeSelection,
+		$setSelection,
+		COMMAND_PRIORITY_HIGH,
+		COMMAND_PRIORITY_EDITOR,
+		HISTORY_PUSH_TAG,
+		COPY_COMMAND,
+		CUT_COMMAND,
+		KEY_BACKSPACE_COMMAND,
+		KEY_DELETE_COMMAND,
+		PASTE_COMMAND,
+		type BaseSelection,
+		type NodeKey,
+	} from "lexical";
+	import { createBlockNode, isBlockNode } from "@plugin-richtext/block/rich-text-block-node";
+	import { richTextBlockTypes } from "@plugin-richtext/field/rich-text-blocks";
+	import {
+		OPEN_BLOCK_EDITOR_COMMAND,
+		DUPLICATE_BLOCK_COMMAND,
+		REMOVE_BLOCK_COMMAND,
+		MOVE_BLOCK_COMMAND,
+	} from "@plugin-richtext/menu/rich-text-commands";
+
+	let { authoring, field }: { authoring: FieldAuthoringHost | undefined; field: SchemaField } =
+		$props();
+	const editor = useLexicalComposerContext()[0];
+	const i18n = getAdminI18n();
+	let session = $state.raw<{
+		draft: EmbeddedSchemaDraft;
+		title: string;
+		nodeKey?: NodeKey;
+		selection: BaseSelection | null;
+		position?: { targetNodeKey: NodeKey; insertBefore: boolean };
+	}>();
+	let message = $state("");
+
+	function close() {
+		session?.draft.discard();
+		session = undefined;
+		queueMicrotask(() => editor.focus());
+	}
+
+	// @lexical-scope
+	function $removeBlock(nodeKey: NodeKey) {
+		if (!editor.isEditable()) return false;
+		const node = $getNodeByKey(nodeKey);
+		if (!isBlockNode(node)) return false;
+		$addUpdateTag(HISTORY_PUSH_TAG);
+		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();
+			if (next !== null) next.insertBefore(paragraph);
+			else if (previous !== null) previous.insertAfter(paragraph);
+			else $getRoot().append(paragraph);
+			paragraph.select();
+		}
+		return true;
+	}
+
+	function apply(payload: Record<string, unknown>) {
+		const active = session;
+		if (active === undefined || active.draft.stale || !editor.isEditable()) return;
+		editor.update(
+			() => {
+				if (active.nodeKey !== undefined) {
+					const node = $getNodeByKey(active.nodeKey);
+					if (!isBlockNode(node) || node.getFields()._key !== active.draft.identity) return;
+					node.setFields(payload);
+					return;
+				}
+				if (active.position !== undefined) {
+					const target = $getNodeByKey(active.position.targetNodeKey);
+					if (target !== null) {
+						const node = createBlockNode(payload);
+						if (active.position.insertBefore) target.insertBefore(node);
+						else target.insertAfter(node);
+						return;
+					}
+				}
+				const selection = active.selection;
+				if (
+					$isRangeSelection(selection) &&
+					$getNodeByKey(selection.anchor.key) !== null &&
+					$getNodeByKey(selection.focus.key) !== null
+				)
+					$setSelection(selection.clone());
+				else $getRoot().selectEnd();
+				const current = $getSelection();
+				const anchor = $isRangeSelection(current) ? current.anchor.getNode() : undefined;
+				const node = createBlockNode(payload);
+				$insertNodeToNearestRoot(node);
+				if ($isParagraphNode(anchor) && anchor.getChildrenSize() === 0) anchor.remove();
+				const paragraph = $createParagraphNode();
+				node.insertAfter(paragraph);
+				paragraph.select();
+			},
+			{ tag: HISTORY_PUSH_TAG, discrete: true }
+		);
+		session = undefined;
+		queueMicrotask(() => editor.focus());
+	}
+
+	$effect(() => {
+		return mergeRegister(
+			...[COPY_COMMAND, CUT_COMMAND].map((command) =>
+				editor.registerCommand(
+					command,
+					(event) => {
+						if (command === CUT_COMMAND && !editor.isEditable()) return false;
+						const selection = $getSelection();
+						if (
+							!(event instanceof ClipboardEvent) ||
+							event.clipboardData === null ||
+							!$isNodeSelection(selection) ||
+							!selection.getNodes().some(isBlockNode)
+						)
+							return false;
+						event.preventDefault();
+						setLexicalClipboardDataTransfer(
+							event.clipboardData,
+							$getClipboardDataFromSelection(selection)
+						);
+						if (command === CUT_COMMAND) {
+							for (const node of selection.getNodes()) {
+								if (isBlockNode(node)) $removeBlock(node.getKey());
+								else node.remove();
+							}
+						}
+						return true;
+					},
+					COMMAND_PRIORITY_HIGH
+				)
+			),
+
+			editor.registerCommand(
+				PASTE_COMMAND,
+				(event) => {
+					if (
+						!editor.isEditable() ||
+						!(event instanceof ClipboardEvent) ||
+						authoring?.copySchemaPayload === undefined
+					)
+						return false;
+					const serialized = event.clipboardData?.getData("application/x-lexical-editor");
+					if (!serialized) return false;
+					try {
+						if (serialized.length > 5 * 1024 * 1024)
+							throw new Error("Clipboard content exceeds the rich-text size limit.");
+						const parsed: unknown = JSON.parse(serialized);
+						if (!isRecord(parsed)) return false;
+						const copied = copyBlockClipboardNodes(
+							parsed.nodes,
+							richTextBlockTypes(field),
+							authoring.copySchemaPayload
+						);
+						if (!copied.hasBlocks) return false;
+						const selection = $getSelection();
+						if (selection === null) return false;
+						const nodes = $generateNodesFromSerializedNodes(copied.nodes);
+						event.preventDefault();
+						$addUpdateTag(HISTORY_PUSH_TAG);
+						$insertGeneratedNodes(editor, nodes, selection);
+						message = "";
+						return true;
+					} catch (error) {
+						event.preventDefault();
+						message =
+							error instanceof Error
+								? error.message
+								: "This clipboard content could not be inserted safely.";
+						return true;
+					}
+				},
+				COMMAND_PRIORITY_HIGH
+			),
+
+			editor.registerCommand(
+				OPEN_BLOCK_EDITOR_COMMAND,
+				({ nodeKey, blockType, position }) => {
+					if (authoring?.beginSchemaDraft === undefined || !editor.isEditable()) return false;
+					if (session !== undefined) {
+						message = i18n.t("plugin.richtext:block.pendingEdit");
+						return true;
+					}
+					const node = nodeKey === undefined ? undefined : $getNodeByKey(nodeKey);
+					const fields = isBlockNode(node) ? node.getFields() : undefined;
+					const variantSlug = fields?.blockType ?? blockType;
+					const type = richTextBlockTypes(field).find((type) => type.slug === variantSlug);
+					if (type === undefined || (nodeKey !== undefined && !isBlockNode(node))) return false;
+					const draft =
+						fields !== undefined && typeof fields._key === "string"
+							? authoring.beginSchemaDraft({ treeKey: "blocks", identity: fields._key })
+							: authoring.beginSchemaDraft({
+									treeKey: "blocks",
+									caseTag: "block",
+									variantSlug: type.slug,
+								});
+					session = {
+						draft,
+						title: i18n.t(
+							nodeKey === undefined
+								? "plugin.richtext:block.insertTitle"
+								: "plugin.richtext:block.editTitle",
+							{ label: type.labels.singular }
+						),
+						...(nodeKey === undefined ? {} : { nodeKey }),
+						selection: $getSelection()?.clone() ?? null,
+						...(position === undefined ? {} : { position }),
+					};
+					message = "";
+					return true;
+				},
+				COMMAND_PRIORITY_EDITOR
+			),
+			editor.registerCommand(
+				DUPLICATE_BLOCK_COMMAND,
+				(nodeKey) => {
+					if (authoring?.copySchemaPayload === undefined || !editor.isEditable()) return false;
+					const node = $getNodeByKey(nodeKey);
+					if (!isBlockNode(node)) return false;
+					const fields = node.getFields();
+					if (typeof fields.blockType !== "string") return false;
+					const payload = authoring.copySchemaPayload(
+						{ treeKey: "blocks", caseTag: "block", variantSlug: fields.blockType },
+						fields
+					);
+					$addUpdateTag(HISTORY_PUSH_TAG);
+					const duplicate = createBlockNode(payload);
+					node.insertAfter(duplicate);
+					queueMicrotask(() =>
+						editor
+							.getElementByKey(duplicate.getKey())
+							?.querySelector<HTMLElement>("[data-block-select]")
+							?.focus()
+					);
+					return true;
+				},
+				COMMAND_PRIORITY_EDITOR
+			),
+			editor.registerCommand(REMOVE_BLOCK_COMMAND, $removeBlock, COMMAND_PRIORITY_EDITOR),
+			editor.registerCommand(
+				MOVE_BLOCK_COMMAND,
+				({ nodeKey, direction }) => {
+					if (!editor.isEditable()) return false;
+					const node = $getNodeByKey(nodeKey);
+					if (!isBlockNode(node)) return false;
+					const sibling = direction < 0 ? node.getPreviousSibling() : node.getNextSibling();
+					if (sibling === null) return true;
+					$addUpdateTag(HISTORY_PUSH_TAG);
+					if (direction < 0) sibling.insertBefore(node);
+					else sibling.insertAfter(node);
+					queueMicrotask(() =>
+						editor
+							.getElementByKey(nodeKey)
+							?.querySelector<HTMLElement>("[data-block-select]")
+							?.focus()
+					);
+					return true;
+				},
+				COMMAND_PRIORITY_EDITOR
+			),
+			...[KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND].map((command) =>
+				editor.registerCommand(
+					command,
+					(event) => {
+						if (!editor.isEditable()) return false;
+						const selection = $getSelection();
+						if (!$isNodeSelection(selection)) return false;
+						const nodes = selection.getNodes().filter(isBlockNode);
+						if (nodes.length === 0) return false;
+						event.preventDefault();
+						for (const node of nodes) $removeBlock(node.getKey());
+						return true;
+					},
+					COMMAND_PRIORITY_HIGH
+				)
+			),
+			() => session?.draft.discard()
+		);
+	});
+</script>
+
+{#if message !== ""}<p role="alert" class="text-sm text-destructive">{message}</p>{/if}
+{#if session !== undefined && authoring?.schemaDraftEditor !== undefined}
+	{@render authoring.schemaDraftEditor({
+		draft: session.draft,
+		title: session.title,
+		onApply: apply,
+		onCancel: close,
+	})}
+{/if}