@riducms/plugin-richtext 0.2.3 → 0.3.0

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

@@ -6,24 +6,40 @@
 	import { CodeNode } from "@lexical/code";
 	import { HistoryExtension } from "@lexical/history";
 	import { LinkNode } from "@lexical/link";
-	import { ListExtension } from "@lexical/list";
+	import { CheckListExtension, ListExtension } from "@lexical/list";
+	import { registerMarkdownShortcuts } from "@lexical/markdown";
 	import { RichTextExtension } from "@lexical/rich-text";
+	import { $insertNodeToNearestRoot } from "@lexical/utils";
 	import {
 		ContentEditable,
+		DEFAULT_TRANSFORMERS,
+		$createHorizontalRuleNode,
 		HorizontalRuleNode,
-		HorizontalRulePlugin,
+		INSERT_HORIZONTAL_RULE_COMMAND,
 		LexicalExtensionComposer,
 		LinkPlugin,
 		OnChangePlugin,
 	} from "@hvniel/lexical-svelte";
-	import { $createParagraphNode, $getRoot, defineExtension, type EditorState } from "lexical";
+	import {
+		$createParagraphNode,
+		$getRoot,
+		$getSelection,
+		$isRangeSelection,
+		COMMAND_PRIORITY_EDITOR,
+		defineExtension,
+		mergeRegister,
+		type EditorState,
+	} from "lexical";
 	import { Button, FieldFrame, fieldControlARIA } from "@riducms/ui";
 
-	import "@plugin-richtext/styles/integration.css";
+	import "@plugin-richtext/styles/integration.scss";
 	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 RichTextLinkPlugin from "@plugin-richtext/link/rich-text-link-plugin.svelte";
+	import { registerSafeLinkTransform } from "@plugin-richtext/link/safe-link-transform";
+	import { richTextMarkdownTransformers } from "@plugin-richtext/field/rich-text-markdown";
 	import RichTextSlashMenu from "@plugin-richtext/menu/rich-text-slash-menu.svelte";
 	import { hasRichTextFeature } from "@plugin-richtext/field/rich-text-config";
 	import {
@@ -48,15 +64,14 @@
 		authoring,
 		i18n,
 	}: PluginFieldProps<RichTextDocument<unknown>, RichTextConfig> = $props();
-	const field = $derived(binding.schema);
-	const editingBlocked = $derived(binding.readOnly);
-	const issues = $derived(binding.issues);
+	const { schema: field, readOnly: editingBlocked, issues } = $derived(binding);
 	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
+		editingBlocked
+			? i18n.t("plugin.richtext:editor.empty")
+			: i18n.t("plugin.richtext:editor.placeholder")
 	);
 	let canvasElement = $state<HTMLElement | null>(null);
 	// A mounted field hydrates once; the parent remounts it for schema/revision/locale changes.
@@ -79,38 +94,45 @@
 
 	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",
+			h1: "ridu-richtext-heading ridu-richtext-h1",
+			h2: "ridu-richtext-heading ridu-richtext-h2",
+			h3: "ridu-richtext-heading ridu-richtext-h3",
+			h4: "ridu-richtext-heading ridu-richtext-h4",
+			h5: "ridu-richtext-heading ridu-richtext-h5",
+			h6: "ridu-richtext-heading ridu-richtext-h6",
 		},
-		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]",
+		code: "ridu-richtext-code-block",
+		hr: "ridu-richtext-rule",
 		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",
+		link: "ridu-richtext-link",
 		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",
+			checklist: "ridu-richtext-checklist",
+			listitemChecked: "ridu-richtext-list-item-checked",
 			listitemUnchecked: "ridu-richtext-list-item-unchecked",
-			listitem: "ridu-richtext-list-item ps-1",
+			listitem: "ridu-richtext-list-item",
+			olDepth: [
+				"ridu-richtext-list-ordered",
+				"ridu-richtext-list-alpha-upper",
+				"ridu-richtext-list-alpha-lower",
+				"ridu-richtext-list-roman-upper",
+				"ridu-richtext-list-roman-lower",
+			],
 			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",
+			ol: "ridu-richtext-list-ordered",
+			ul: "ridu-richtext-list-unordered",
 		},
-		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",
+		paragraph: "ridu-richtext-paragraph",
+		quote: "ridu-richtext-quote",
 		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",
+			bold: "ridu-richtext-bold",
+			code: "ridu-richtext-inline-code",
+			italic: "ridu-richtext-italic",
 			subscript: "ridu-richtext-subscript",
 			superscript: "ridu-richtext-superscript",
-			strikethrough: "ridu-richtext-strikethrough line-through",
-			underline: "ridu-richtext-underline underline underline-offset-[0.15em]",
+			strikethrough: "ridu-richtext-strikethrough",
+			underline: "ridu-richtext-underline",
 		},
-		upload: "ridu-richtext-upload m-0",
+		upload: "ridu-richtext-upload",
 	};
 
 	// The extension tree is identity-bearing and belongs to this field instance.
@@ -125,8 +147,38 @@
 		dependencies: [
 			RichTextExtension,
 			HistoryExtension,
-			...(hasRichTextFeature(config, "lists") ? [ListExtension] : []),
+			...(hasRichTextFeature(config, "lists") ? [ListExtension, CheckListExtension] : []),
 		],
+		register: (editor) =>
+			mergeRegister(
+				registerMarkdownShortcuts(editor, [
+					...richTextMarkdownTransformers(config),
+					...(hasRichTextFeature(config, "horizontal-rule")
+						? DEFAULT_TRANSFORMERS.filter(
+								(transformer) =>
+									transformer.type === "element" &&
+									transformer.dependencies.includes(HorizontalRuleNode)
+							)
+						: []),
+				]),
+				// The upstream horizontal-rule plugin treats a cross-block drag's root click
+				// as a gap click and collapses the range; Lexical handles gap clicks itself.
+				...(hasRichTextFeature(config, "horizontal-rule")
+					? [
+							editor.registerCommand(
+								INSERT_HORIZONTAL_RULE_COMMAND,
+								() => {
+									const selection = $getSelection();
+									if (!$isRangeSelection(selection)) return false;
+									$insertNodeToNearestRoot($createHorizontalRuleNode());
+									return true;
+								},
+								COMMAND_PRIORITY_EDITOR
+							),
+						]
+					: []),
+				...(hasRichTextFeature(config, "links") ? [registerSafeLinkTransform(editor)] : [])
+			),
 		name: "@riducms/plugin-richtext/editor",
 		namespace: `ridu-${field.id}`,
 		nodes: [
@@ -153,6 +205,7 @@
 			)
 		);
 	}
+
 	function exportDocument() {
 		const url = URL.createObjectURL(
 			new Blob([JSON.stringify(initialValue, null, 2)], { type: "application/json" })
@@ -173,20 +226,18 @@
 		readOnly={field.admin.readOnly}
 		description={field.admin.description}
 		errors={issues.map((issue) => issue.message)}
-		class="min-w-0"
+		class="ridu-richtext-field"
 	>
 		<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]",
+				"ridu-richtext-editor",
 				issues.length > 0 && "has-error",
-				field.admin.readOnly && "is-read-only",
+				editingBlocked && "is-read-only",
 			]}
 			aria-invalid={inputARIA["aria-invalid"]}
 		>
 			{#if recoveryIssue !== undefined}
-				<p role="alert" class="my-3 text-sm text-destructive">
+				<p role="alert" class="ridu-richtext-recovery">
 					{i18n.t("plugin.richtext:editor.recovery", { path: `${field.path}.${recoveryIssue}` })}
 				</p>
 				<Button variant="outline" onclick={exportDocument}>
@@ -194,41 +245,38 @@
 				</Button>
 			{:else}
 				<LexicalExtensionComposer {extension} contentEditable={null}>
-					<div class="relative" bind:this={canvasElement}>
+					<div class="ridu-richtext-canvas" 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",
-							]}
+							class="ridu-richtext-content"
 							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-keyshortcuts={editingBlocked
+								? undefined
+								: hasRichTextFeature(config, "links")
+									? "Alt+Shift+ArrowUp Alt+Shift+ArrowDown Control+K Meta+K"
+									: "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",
-									]}
-								>
+								<span class="ridu-richtext-placeholder">
 									{visiblePlaceholder}
 								</span>
 							{/snippet}
 						</ContentEditable>
 					</div>
-					{#if hasRichTextFeature(config, "links")}<LinkPlugin />{/if}
-					{#if hasRichTextFeature(config, "horizontal-rule")}<HorizontalRulePlugin />{/if}
+					{#if hasRichTextFeature(config, "links")}
+						<LinkPlugin />
+					{/if}
 					{#if !editingBlocked}
 						<RichTextSlashMenu {authoring} {config} />
-						<RichTextFloatingToolbar />
+						<RichTextFloatingToolbar {config} />
+						{#if hasRichTextFeature(config, "links")}
+							<RichTextLinkPlugin />
+						{/if}
 						{#if canvasElement !== null}
 							<RichTextBlockToolbar anchorElement={canvasElement} {authoring} {config} />
 						{/if}
@@ -242,7 +290,7 @@
 					<RichTextEditabilityPlugin readOnly={editingBlocked} />
 					<RichTextBlocksPlugin {authoring} {field} />
 					<OnChangePlugin onChange={changed} ignoreSelectionChange />
-					<RichTextFooter readOnly={field.admin.readOnly === true} />
+					<RichTextFooter readOnly={editingBlocked} />
 				</LexicalExtensionComposer>
 			{/if}
 		</div>

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

@@ -1,17 +1,13 @@
 <script lang="ts">
 	import { getAdminI18n } from "@riducms/plugin";
 	import { useLexicalComposerContext, useLexicalEditable } from "@hvniel/lexical-svelte";
-	import {
-		$createParagraphNode,
-		$getRoot,
-		$getSelection,
-		$isParagraphNode,
-		$isRangeSelection,
-	} from "lexical";
+	import { $createParagraphNode, $getRoot, $isParagraphNode } from "lexical";
 
 	const editor = useLexicalComposerContext()[0];
 	const isEditable = useLexicalEditable();
 	const i18n = getAdminI18n();
+	const componentID = $props.id();
+	const hintID = `${componentID}-hint`;
 	let { readOnly = false }: { readOnly?: boolean } = $props();
 
 	function focusAtEnd() {
@@ -27,8 +23,6 @@
 							: $createParagraphNode();
 					if (paragraph.getParent() === null) root.append(paragraph);
 					paragraph.selectEnd();
-					const selection = $getSelection();
-					if ($isRangeSelection(selection)) selection.insertText("/");
 				});
 			},
 			{ defaultSelection: "rootEnd" }
@@ -38,14 +32,15 @@
 
 {#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 disabled:cursor-not-allowed disabled:opacity-45"
+		class="ridu-richtext-footer"
 		type="button"
 		disabled={!isEditable()}
+		aria-label={i18n.t("plugin.richtext:editor.insertParagraph")}
+		aria-describedby={hintID}
 		onclick={focusAtEnd}
 	>
 		<span aria-hidden="true">+</span>
-		{i18n.t("plugin.richtext:editor.addBlock")}
-		<span class="text-foreground-sub max-[34rem]:hidden">
+		<span id={hintID} class="ridu-richtext-announcement">
 			{i18n.t("plugin.richtext:editor.footerHint")}
 		</span>
 	</button>

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

@@ -0,0 +1,62 @@
+import {
+	BOLD_ITALIC_STAR,
+	BOLD_ITALIC_UNDERSCORE,
+	BOLD_STAR,
+	BOLD_UNDERSCORE,
+	CHECK_LIST,
+	CODE,
+	HEADING,
+	INLINE_CODE,
+	ITALIC_STAR,
+	ITALIC_UNDERSCORE,
+	LINK,
+	ORDERED_LIST,
+	QUOTE,
+	STRIKETHROUGH,
+	UNORDERED_LIST,
+	type TextMatchTransformer,
+	type Transformer,
+} from "@lexical/markdown";
+import { $isLinkNode } from "@lexical/link";
+
+import { hasRichTextFeature, type RichTextConfig } from "@plugin-richtext/field/rich-text-config";
+import { normalizeLinkURL } from "@plugin-richtext/link/link-url";
+
+const safeLink: TextMatchTransformer = {
+	...LINK,
+	replace(textNode, match) {
+		// Match Lexical's CommonMark unescaping before validation. Pass the original
+		// match to its transformer so escaped text/title are still decoded only once.
+		const decoded = (match[2] ?? "")
+			.replace(/\\([!-/:-@[-`{-~])/g, "$1")
+			.replace(/&#(\d+);/g, (_, codePoint: string) => {
+				const value = Number(codePoint);
+				return value <= 0x10ffff ? String.fromCodePoint(value) : "\0";
+			});
+		const url = normalizeLinkURL(decoded);
+		if (url === undefined) return;
+
+		const replacement = LINK.replace?.(textNode, match);
+		const link = replacement?.getParent();
+		if ($isLinkNode(link)) link.setURL(url);
+		return replacement;
+	},
+};
+
+/** Shortcuts produce only nodes enabled by this field's canonical configuration. */
+export function richTextMarkdownTransformers(config: RichTextConfig): Transformer[] {
+	return [
+		HEADING,
+		QUOTE,
+		...(hasRichTextFeature(config, "lists") ? [CHECK_LIST, UNORDERED_LIST, ORDERED_LIST] : []),
+		...(hasRichTextFeature(config, "code") ? [CODE, INLINE_CODE] : []),
+		BOLD_ITALIC_STAR,
+		BOLD_ITALIC_UNDERSCORE,
+		BOLD_STAR,
+		BOLD_UNDERSCORE,
+		ITALIC_STAR,
+		ITALIC_UNDERSCORE,
+		STRIKETHROUGH,
+		...(hasRichTextFeature(config, "links") ? [safeLink] : []),
+	];
+}

package/src/link/link-url.ts

@@ -0,0 +1,30 @@
+import { formatUrl } from "@lexical/link";
+import { renderableRichTextURL } from "@plugin-richtext/link-url-policy";
+
+const relativeURL = /^(?:\/|\.|#)/;
+
+/** Normalize an author-entered URL while rejecting schemes browsers could execute. */
+export function normalizeLinkURL(value: string): string | undefined {
+	const trimmed = value.trim();
+	if (trimmed === "" || /[\u0000-\u001f\u007f\s]/.test(trimmed)) return undefined;
+
+	const normalized = formatUrl(trimmed);
+	const safeURL = renderableRichTextURL(normalized);
+	if (safeURL === undefined) return undefined;
+
+	try {
+		const parsed = new URL(safeURL, "https://ridu.invalid");
+		if (
+			!relativeURL.test(safeURL) &&
+			(parsed.protocol === "http:" || parsed.protocol === "https:") &&
+			parsed.hostname === ""
+		)
+			return undefined;
+		if ((parsed.protocol === "mailto:" || parsed.protocol === "tel:") && parsed.pathname === "")
+			return undefined;
+	} catch {
+		return undefined;
+	}
+
+	return safeURL;
+}