@riducms/plugin-richtext 0.2.2 → 0.3.0

package/README.md

@@ -15,7 +15,7 @@ Add `richtext.New()` to `Config.Plugins` and author fields with `richtext.Field`
 registry imports `richTextAdminPlugin`; do not register it again. Generation rejects incompatible Go
 and npm pairing metadata before the editor loads.
 
-Run `npm run dev`, verify the editor, then create and review the adapter migration before deployment:
+Run `bun run dev`, verify the editor, then create and review the adapter migration before deployment:
 
 ```sh
 ridu migrate create --name add-rich-text
@@ -33,3 +33,9 @@ Portable types are available from `@riducms/plugin-richtext/document`, HTML rend
 `@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.
+
+The supported authoring UI uses semantic SCSS, compact grouped insertion menus, six heading levels,
+Markdown shortcuts, interactive checklists, custom-URL link drawers and intrinsic-ratio media cards.
+See [customizing admin CSS](https://riducms.com/docs/admin/customizing-css/) for styling and the
+[rich-text guide](https://riducms.com/docs/rich-text/) for supported features and limits.
+No utility stylesheet is needed for this plugin's UI.

package/package.json

@@ -9,12 +9,13 @@
 		"@lexical/history": "0.49.0",
 		"@lexical/link": "0.49.0",
 		"@lexical/list": "0.49.0",
+		"@lexical/markdown": "0.49.0",
 		"@lexical/rich-text": "0.49.0",
 		"@lexical/selection": "0.49.0",
 		"@lexical/utils": "0.49.0",
-		"@riducms/plugin": "0.2.2",
-		"@riducms/protocol": "0.2.2",
-		"@riducms/ui": "0.2.2",
+		"@riducms/plugin": "0.3.0",
+		"@riducms/protocol": "0.3.0",
+		"@riducms/ui": "0.3.0",
 		"@types/prismjs": "^1.26.5",
 		"lexical": "0.49.0",
 		"prismjs": "^1.30.0",
@@ -22,7 +23,7 @@
 	},
 	"description": "Svelte and Lexical admin integration for Ridu's official rich-text plugin.",
 	"devDependencies": {
-		"@riducms/build": "0.2.2"
+		"@riducms/build": "0.3.0"
 	},
 	"exports": {
 		".": "./src/index.ts",
@@ -38,6 +39,7 @@
 	"imports": {
 		"#richtext/document": "./src/document.ts",
 		"#richtext/document-validation": "./src/document-validation.ts",
+		"#richtext/link-url-policy": "./src/link-url-policy.ts",
 		"#richtext/render": "./src/render.ts",
 		"#richtext/rich-text.svelte": "./src/render/rich-text.svelte",
 		"#richtext/svelte": "./src/render/index.ts"
@@ -59,5 +61,5 @@
 		"test": "bun test"
 	},
 	"type": "module",
-	"version": "0.2.2"
+	"version": "0.3.0"
 }

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

@@ -0,0 +1,139 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-richtext-block-card {
+		position: relative;
+		z-index: 1;
+		margin-block: 10px;
+		padding: 15px;
+		border: 1px solid var(--control-border);
+		border-radius: var(--control-radius);
+		background: var(--control-surface);
+		box-shadow: var(--control-shadow);
+		color: var(--foreground);
+		font-family: var(--font-sans);
+		line-height: var(--line-height-body);
+		transition:
+			border-color 100ms,
+			box-shadow 100ms;
+
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+
+		&.is-selected {
+			border-color: var(--foreground-muted);
+			box-shadow:
+				var(--control-shadow),
+				0 0 0 1px var(--foreground-muted);
+		}
+
+		&.has-issues {
+			border-color: var(--control-invalid-border);
+		}
+
+		&.has-name-field {
+			white-space: normal;
+		}
+	}
+
+	.ridu-richtext-block-card__name {
+		margin-block-end: 10px;
+	}
+
+	.ridu-richtext-block-card__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		min-width: 0;
+	}
+
+	.ridu-richtext-block-card__select {
+		min-width: 96px;
+		flex: 1;
+		border: 0;
+		border-radius: var(--control-radius);
+		padding: 2px;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+
+	.ridu-richtext-block-card__label,
+	.ridu-richtext-block-card__summary {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ridu-richtext-block-card__label {
+		color: var(--foreground-muted);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 16px;
+	}
+
+	.ridu-richtext-block-card__summary {
+		margin-block-start: 4px;
+		color: var(--foreground);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+
+	.ridu-richtext-block-card__actions {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		gap: 2px;
+	}
+
+	.ridu-richtext-block-card__action {
+		padding-inline: 8px;
+	}
+
+	.ridu-richtext-block-card__status {
+		margin: 10px 0 0;
+		color: var(--destructive);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+
+	.ridu-richtext-block-message {
+		margin: 8px 0;
+		color: var(--destructive);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+	}
+
+	.ridu-richtext-block-card__recovery {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 12px;
+		margin-block-start: 10px;
+
+		.ridu-richtext-block-card__status {
+			margin: 0;
+		}
+	}
+
+	@media (max-width: ui.$small) {
+		.ridu-richtext-block-card__header,
+		.ridu-richtext-block-card__recovery {
+			align-items: stretch;
+			flex-direction: column;
+		}
+
+		.ridu-richtext-block-card__actions {
+			flex-wrap: wrap;
+		}
+	}
+}

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

@@ -20,6 +20,7 @@
 		MOVE_BLOCK_COMMAND,
 		UPDATE_BLOCK_NAME_COMMAND,
 	} from "@plugin-richtext/menu/rich-text-commands";
+	import "@plugin-richtext/block/rich-text-block-card.scss";
 
 	let {
 		nodeKey,
@@ -133,10 +134,10 @@
 
 <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",
+		"ridu-richtext-embedded-card ridu-richtext-block-card",
+		nameField !== undefined && "has-name-field",
+		selected() && "is-selected",
+		issues.length > 0 && "has-issues",
 	]}
 	data-block-key={identity}
 	data-block-type={blockType}
@@ -146,7 +147,7 @@
 >
 	{#if nameField !== undefined && authoring?.schemaHeader !== undefined}
 		<div
-			class="mb-2"
+			class="ridu-richtext-block-card__name"
 			onfocuscapture={nameHistory.reset.bind(nameHistory)}
 			onblurcapture={nameHistory.reset.bind(nameHistory)}
 			onkeydowncapture={nameKeydown}
@@ -159,11 +160,11 @@
 			})}
 		</div>
 	{/if}
-	<div class="flex flex-wrap items-center justify-between gap-3">
+	<div class="ridu-richtext-block-card__header">
 		<button
 			type="button"
 			data-block-select
-			class="min-w-24 flex-1 text-start rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+			class="ridu-richtext-block-card__select"
 			aria-label={i18n.t("plugin.richtext:block.select", {
 				label: type?.labels.singular ?? blockType,
 			})}
@@ -171,36 +172,56 @@
 			onclickcapture={select}
 			onkeydowncapture={keydown}
 		>
-			<span class="block text-xs font-medium text-foreground-muted">
+			<span class="ridu-richtext-block-card__label">
 				{type?.labels.singular ?? blockType}
 			</span>
-			{#if nameField === undefined}<span class="block mt-1 truncate text-sm text-foreground">
+			{#if nameField === undefined}
+				<span class="ridu-richtext-block-card__summary">
 					{summary}
-				</span>{/if}
+				</span>
+			{/if}
 		</button>
 		{#if editable()}
-			<div class="flex shrink-0 gap-1">
-				<Button size="sm" variant="ghost" onclick={edit} disabled={recovery}>
+			<div
+				class="ridu-richtext-block-card__actions"
+				role="group"
+				aria-label={i18n.t("plugin.richtext:editor.blockActions")}
+			>
+				<Button
+					class="ridu-richtext-block-card__action"
+					size="sm"
+					variant="ghost"
+					onclick={edit}
+					disabled={recovery}
+				>
 					{i18n.t("plugin.richtext:block.edit")}
 				</Button>
-				<Button size="sm" variant="ghost" onclick={duplicate} disabled={recovery}>
+				<Button
+					class="ridu-richtext-block-card__action"
+					size="sm"
+					variant="ghost"
+					onclick={duplicate}
+					disabled={recovery}
+				>
 					{i18n.t("plugin.richtext:block.duplicate")}
 				</Button>
-				<Button size="sm" variant="ghost" onclick={remove}>
+				<Button class="ridu-richtext-block-card__action" 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>
+		<div class="ridu-richtext-block-card__recovery">
+			<p role="alert" class="ridu-richtext-block-card__status">
+				{i18n.t("plugin.richtext:block.recovery")}
+			</p>
+			<Button size="sm" variant="outline" onclick={exportBlock}>
+				{i18n.t("plugin.richtext:block.export")}
+			</Button>
+		</div>
 	{:else if issues.length > 0}
-		<p class="mt-2 text-sm text-destructive">
+		<p class="ridu-richtext-block-card__status">
 			{i18n.t("plugin.richtext:block.issues", { count: issues.length })}
 		</p>
 	{/if}

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

@@ -1,7 +1,7 @@
+import { isRecord } from "@riducms/protocol";
 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. */

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

@@ -1,3 +1,4 @@
+import { isRecord } from "@riducms/protocol";
 import type { Decorator } from "@hvniel/lexical-svelte";
 import {
 	$applyNodeReplacement,
@@ -9,7 +10,6 @@ import {
 	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>;

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { isRecord } from "@riducms/protocol";
 	import { getAdminI18n, type EmbeddedSchemaDraft, type FieldAuthoringHost } from "@riducms/plugin";
 	import type { SchemaField } from "@riducms/protocol";
 	import { useLexicalComposerContext } from "@hvniel/lexical-svelte";
@@ -9,7 +10,6 @@
 		$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,
@@ -46,6 +46,7 @@
 		MOVE_BLOCK_COMMAND,
 		UPDATE_BLOCK_NAME_COMMAND,
 	} from "@plugin-richtext/menu/rich-text-commands";
+	import "@plugin-richtext/block/rich-text-block-card.scss";
 
 	let { authoring, field }: { authoring: FieldAuthoringHost | undefined; field: SchemaField } =
 		$props();
@@ -319,7 +320,9 @@
 	});
 </script>
 
-{#if message !== ""}<p role="alert" class="text-sm text-destructive">{message}</p>{/if}
+{#if message !== ""}
+	<p role="alert" class="ridu-richtext-block-message">{message}</p>
+{/if}
 {#if session !== undefined && authoring?.schemaDraftEditor !== undefined}
 	{@render authoring.schemaDraftEditor({
 		draft: session.draft,

package/src/document-validation.ts

@@ -1,4 +1,6 @@
+import { isRecord } from "@riducms/protocol";
 import type { RichTextDocument } from "#richtext/document";
+import { renderableRichTextURL } from "#richtext/link-url-policy";
 const base = ["type", "version"];
 const element = [...base, "children", "direction", "format", "indent"];
 const container = [...element, "textFormat", "textStyle"];
@@ -21,10 +23,6 @@ const properties: Readonly<Record<string, readonly string[]>> = {
 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.
  */
@@ -76,7 +74,11 @@ export function documentRecoveryIssue(
 			!["", "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 === "link" &&
+			(typeof node.url !== "string" || renderableRichTextURL(node.url) === undefined)
+		)
+			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`;

package/src/field/reference-node-placement.ts

@@ -0,0 +1,49 @@
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import {
+	$createParagraphNode,
+	$getPreviousSelection,
+	$getRoot,
+	$getSelection,
+	$isElementNode,
+	$isParagraphNode,
+	$isRangeSelection,
+	type LexicalNode,
+} from "lexical";
+
+/** Inserts a reference block and a usable trailing selection within a Lexical update scope. */
+export function insertReferenceNode(node: LexicalNode) {
+	const selection = $getSelection() ?? $getPreviousSelection();
+	if (!$isRangeSelection(selection)) $getRoot().selectEnd();
+	const focusNode = $isRangeSelection(selection) ? selection.focus.getNode() : undefined;
+
+	$insertNodeToNearestRoot(node);
+	const next = node.getNextSibling();
+	if ($isParagraphNode(focusNode) && focusNode.getChildrenSize() === 0 && focusNode !== next) {
+		focusNode.remove();
+	}
+
+	const trailing = node.getNextSibling();
+	if ($isParagraphNode(trailing) && trailing.getChildrenSize() === 0) {
+		trailing.select();
+		return;
+	}
+
+	const paragraph = $createParagraphNode();
+	node.insertAfter(paragraph);
+	paragraph.select();
+}
+
+/** Removes a reference block and selects a valid neighbour within a Lexical update scope. */
+export function removeReferenceNode(node: LexicalNode) {
+	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();
+	}
+}

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

@@ -1,4 +1,4 @@
-import { resolveBlockTypes } from "@riducms/protocol";
+import { isRecord, resolveBlockTypes } from "@riducms/protocol";
 import type { SchemaBlockType, SchemaField } from "@riducms/protocol";
 
 /** The allowlist comes from resolved executable schemas, never plugin settings. */
@@ -12,10 +12,6 @@ export function richTextBlockTypes(field: SchemaField): readonly SchemaBlockType
 	);
 }
 
-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 {
 	// Named cards render their guarded header instead. Never mirror an editorial name
 	// into plugin-owned text, because the configured field may be unreadable.

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

@@ -1,3 +1,4 @@
+import { isRecord } from "@riducms/protocol";
 export type RichTextFeature =
 	"links" | "lists" | "code" | "horizontal-rule" | "uploads" | "relationships" | "blocks";
 
@@ -44,7 +45,3 @@ export function hasRichTextFeature(config: RichTextConfig, feature: RichTextFeat
 function isRichTextFeature(value: unknown): value is RichTextFeature {
 	return typeof value === "string" && features.has(value as RichTextFeature);
 }
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}

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

@@ -1,3 +1,4 @@
+import { isRecord } from "@riducms/protocol";
 import { documentRecoveryIssue } from "@plugin-richtext/document-validation";
 import type { RichTextConfig } from "@plugin-richtext/field/rich-text-config";
 
@@ -38,7 +39,3 @@ function withElementDefaults(node: Record<string, unknown>): Record<string, unkn
 		indent: node.indent ?? 0,
 	};
 }
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}