@riducms/plugin-richtext 0.2.1 → 0.2.3

package/package.json

@@ -12,9 +12,9 @@
 		"@lexical/rich-text": "0.49.0",
 		"@lexical/selection": "0.49.0",
 		"@lexical/utils": "0.49.0",
-		"@riducms/plugin": "0.2.1",
-		"@riducms/protocol": "0.2.1",
-		"@riducms/ui": "0.2.1",
+		"@riducms/plugin": "0.2.3",
+		"@riducms/protocol": "0.2.3",
+		"@riducms/ui": "0.2.3",
 		"@types/prismjs": "^1.26.5",
 		"lexical": "0.49.0",
 		"prismjs": "^1.30.0",
@@ -22,7 +22,7 @@
 	},
 	"description": "Svelte and Lexical admin integration for Ridu's official rich-text plugin.",
 	"devDependencies": {
-		"@riducms/build": "0.2.1"
+		"@riducms/build": "0.2.3"
 	},
 	"exports": {
 		".": "./src/index.ts",
@@ -59,5 +59,5 @@
 		"test": "bun test"
 	},
 	"type": "module",
-	"version": "0.2.1"
+	"version": "0.2.3"
 }

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

@@ -4,7 +4,7 @@
 		useLexicalEditable,
 		useLexicalNodeSelection,
 	} from "@hvniel/lexical-svelte";
-	import { $getNodeByKey, type NodeKey } from "lexical";
+	import { $getNodeByKey, REDO_COMMAND, UNDO_COMMAND, type NodeKey } from "lexical";
 	import { getAdminI18n } from "@riducms/plugin";
 	import { Button } from "@riducms/ui";
 	import {
@@ -12,11 +12,13 @@
 		getRichTextAuthoringHost,
 	} from "@plugin-richtext/field/rich-text-context.svelte";
 	import { blockSummary, richTextBlockTypes } from "@plugin-richtext/field/rich-text-blocks";
+	import { BlockNameHistorySession } from "@plugin-richtext/block/rich-text-block-name";
 	import {
 		OPEN_BLOCK_EDITOR_COMMAND,
 		DUPLICATE_BLOCK_COMMAND,
 		REMOVE_BLOCK_COMMAND,
 		MOVE_BLOCK_COMMAND,
+		UPDATE_BLOCK_NAME_COMMAND,
 	} from "@plugin-richtext/menu/rich-text-commands";
 
 	let {
@@ -29,6 +31,7 @@
 	const editable = useLexicalEditable();
 	const context = getRichTextField();
 	const authoring = getRichTextAuthoringHost();
+	const nameHistory = new BlockNameHistorySession();
 	// The decorator instance owns this fixed Lexical node key.
 	// svelte-ignore state_referenced_locally
 	const [selected, setSelected, clearSelected] = useLexicalNodeSelection(nodeKey);
@@ -41,6 +44,7 @@
 	const type = $derived(
 		richTextBlockTypes(context.field).find((candidate) => candidate.slug === blockType)
 	);
+	const nameField = $derived(type?.admin?.nameField);
 	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"));
@@ -49,6 +53,34 @@
 		if (!event.shiftKey) clearSelected();
 		setSelected(true);
 	}
+	function changeName(change: { field: string; value: string }) {
+		if (nameField === undefined || recovery || !editable()) return;
+		editor.dispatchCommand(UPDATE_BLOCK_NAME_COMMAND, {
+			nodeKey,
+			identity,
+			nameField,
+			change,
+			historyTag: nameHistory.nextTag(),
+		});
+	}
+	function nameKeydown(event: KeyboardEvent) {
+		if (!(event.target instanceof HTMLInputElement)) return;
+		event.stopPropagation();
+		if (event.isComposing) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			return;
+		}
+		if (event.target.readOnly || event.target.disabled) return;
+		const key = event.key.toLowerCase();
+		const modifier = event.metaKey || event.ctrlKey;
+		const undo = modifier && key === "z" && !event.shiftKey;
+		const redo = modifier && ((key === "z" && event.shiftKey) || (key === "y" && !event.metaKey));
+		if (!undo && !redo) return;
+		event.preventDefault();
+		nameHistory.reset();
+		editor.dispatchCommand(undo ? UNDO_COMMAND : REDO_COMMAND, undefined);
+	}
 	function edit() {
 		editor.dispatchCommand(OPEN_BLOCK_EDITOR_COMMAND, { nodeKey });
 	}
@@ -102,6 +134,7 @@
 <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",
+		nameField !== undefined && "whitespace-normal",
 		selected() && "border-primary",
 		issues.length > 0 && "border-destructive",
 	]}
@@ -111,11 +144,26 @@
 	data-invalid={issues.length > 0}
 	role="group"
 >
-	<div class="flex items-center justify-between gap-3">
+	{#if nameField !== undefined && authoring?.schemaHeader !== undefined}
+		<div
+			class="mb-2"
+			onfocuscapture={nameHistory.reset.bind(nameHistory)}
+			onblurcapture={nameHistory.reset.bind(nameHistory)}
+			onkeydowncapture={nameKeydown}
+		>
+			{@render authoring.schemaHeader({
+				treeKey: "blocks",
+				identity,
+				readOnly: !editable() || recovery,
+				onChange: changeName,
+			})}
+		</div>
+	{/if}
+	<div class="flex flex-wrap 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"
+			class="min-w-24 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,
 			})}
@@ -126,7 +174,9 @@
 			<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>
+			{#if nameField === undefined}<span class="block mt-1 truncate text-sm text-foreground">
+					{summary}
+				</span>{/if}
 		</button>
 		{#if editable()}
 			<div class="flex shrink-0 gap-1">

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

@@ -0,0 +1,16 @@
+import { HISTORY_MERGE_TAG, HISTORY_PUSH_TAG } from "lexical";
+
+/** Groups one focused name-input session into one Lexical undo entry. */
+export class BlockNameHistorySession {
+	#merge = false;
+
+	reset() {
+		this.#merge = false;
+	}
+
+	nextTag(): typeof HISTORY_PUSH_TAG | typeof HISTORY_MERGE_TAG {
+		const tag = this.#merge ? HISTORY_MERGE_TAG : HISTORY_PUSH_TAG;
+		this.#merge = true;
+		return tag;
+	}
+}

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

@@ -2,6 +2,7 @@ import type { Decorator } from "@hvniel/lexical-svelte";
 import {
 	$applyNodeReplacement,
 	$getDocument,
+	$getNodeByKey,
 	DecoratorNode,
 	type LexicalNode,
 	type NodeKey,
@@ -82,3 +83,23 @@ export function createBlockNode(fields: Record<string, unknown>): BlockNode {
 export function isBlockNode(node: LexicalNode | null | undefined): node is BlockNode {
 	return node instanceof BlockNode;
 }
+
+export interface BlockNameUpdate {
+	nodeKey: NodeKey;
+	identity: string;
+	nameField: string;
+	change: { field: string; value: string };
+}
+
+// @lexical-scope
+export function updateBlockName(update: BlockNameUpdate): boolean {
+	const node = $getNodeByKey(update.nodeKey);
+	if (
+		!isBlockNode(node) ||
+		node.getFields()._key !== update.identity ||
+		update.change.field !== update.nameField
+	)
+		return false;
+	node.setFields({ ...node.getFields(), [update.nameField]: update.change.value });
+	return true;
+}

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

@@ -33,13 +33,18 @@
 		type BaseSelection,
 		type NodeKey,
 	} from "lexical";
-	import { createBlockNode, isBlockNode } from "@plugin-richtext/block/rich-text-block-node";
+	import {
+		createBlockNode,
+		isBlockNode,
+		updateBlockName,
+	} 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,
+		UPDATE_BLOCK_NAME_COMMAND,
 	} from "@plugin-richtext/menu/rich-text-commands";
 
 	let { authoring, field }: { authoring: FieldAuthoringHost | undefined; field: SchemaField } =
@@ -284,6 +289,15 @@
 				},
 				COMMAND_PRIORITY_EDITOR
 			),
+			editor.registerCommand(
+				UPDATE_BLOCK_NAME_COMMAND,
+				(update) => {
+					if (!editor.isEditable() || !updateBlockName(update)) return false;
+					$addUpdateTag(update.historyTag);
+					return true;
+				},
+				COMMAND_PRIORITY_EDITOR
+			),
 			...[KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND].map((command) =>
 				editor.registerCommand(
 					command,

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

@@ -17,6 +17,9 @@ export function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 export function blockSummary(fields: Record<string, unknown>, type?: SchemaBlockType): string {
+	// Named cards render their guarded header instead. Never mirror an editorial name
+	// into plugin-owned text, because the configured field may be unreadable.
+	if (type?.admin?.nameField !== undefined) return "";
 	const summary = type?.admin?.rowLabel;
 	if (summary !== undefined) {
 		const value = summary

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

@@ -25,10 +25,14 @@ export function initialEditorState(value: unknown) {
 
 function withElementDefaults(node: Record<string, unknown>): Record<string, unknown> {
 	if (!Array.isArray(node.children)) return node;
+	const children =
+		node.type === "root" && node.children.length === 0
+			? [{ type: "paragraph", children: [], direction: null, format: "", indent: 0 }]
+			: node.children.map((child) => (isRecord(child) ? withElementDefaults(child) : child));
 
 	return {
 		...node,
-		children: node.children.map((child) => (isRecord(child) ? withElementDefaults(child) : child)),
+		children,
 		direction: node.direction ?? null,
 		format: node.format ?? "",
 		indent: node.indent ?? 0,

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

@@ -1,4 +1,10 @@
-import { createCommand, type LexicalCommand, type NodeKey } from "lexical";
+import {
+	createCommand,
+	HISTORY_MERGE_TAG,
+	HISTORY_PUSH_TAG,
+	type LexicalCommand,
+	type NodeKey,
+} from "lexical";
 
 export interface OpenUploadBrowserPayload {
 	collectionSlug: string;
@@ -41,3 +47,10 @@ export const DUPLICATE_BLOCK_COMMAND: LexicalCommand<NodeKey> =
 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");
+export const UPDATE_BLOCK_NAME_COMMAND: LexicalCommand<{
+	nodeKey: NodeKey;
+	identity: string;
+	nameField: string;
+	change: { field: string; value: string };
+	historyTag: typeof HISTORY_PUSH_TAG | typeof HISTORY_MERGE_TAG;
+}> = createCommand("UPDATE_BLOCK_NAME_COMMAND");