@voila.dev/ui-email-block-editor 1.1.9

package/src/blocks/stat-block.tsx

@@ -0,0 +1,113 @@
+import { ChartBarIcon } from "@phosphor-icons/react";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { BlockTextInput } from "#/blocks/block-text-input.tsx";
+import type {
+	EmailEditorAlignment,
+	EmailEditorStatBlock,
+} from "#/document/types.ts";
+import { AlignmentOption } from "#/sections/block-options/alignment-option.tsx";
+import { BlockOptionSection } from "#/sections/block-options/block-option-row.tsx";
+import {
+	TextAreaOption,
+	TextOption,
+} from "#/sections/block-options/text-option.tsx";
+import { EMAIL_COLOR, EMAIL_FONT } from "#/theme.ts";
+
+const TEXT_ALIGN: {
+	readonly [A in EmailEditorAlignment]: "left" | "center" | "right";
+} = { left: "left", center: "center", right: "right" };
+
+/**
+ * One figure with its caption. A row of three is a three-column grid of stat
+ * blocks — the block never invents its own multi-column layout (§1.5 of the
+ * editor plan). Every field is edited in place.
+ */
+function StatBlockView({
+	block,
+	selected,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorStatBlock>) {
+	const textAlign = TEXT_ALIGN[block.align];
+	return (
+		<div
+			className="flex flex-col gap-1"
+			style={{ textAlign, fontFamily: EMAIL_FONT }}
+		>
+			<BlockTextInput
+				ariaLabel="Valeur"
+				value={block.value}
+				placeholder="128"
+				onChange={(value) => onChange({ ...block, value })}
+				className="font-bold text-[30px] leading-[1.1]"
+				style={{ color: EMAIL_COLOR.brand, textAlign }}
+			/>
+			<BlockTextInput
+				ariaLabel="Libellé"
+				value={block.label}
+				placeholder="Missions pourvues"
+				onChange={(label) => onChange({ ...block, label })}
+				className="font-semibold text-[12px] uppercase leading-[1.4] tracking-[0.04em]"
+				style={{ color: EMAIL_COLOR.muted, textAlign }}
+			/>
+			{/* The description is optional, so an empty one only takes up room
+			    while the block is selected — otherwise the canvas would show a
+			    line the email will not have. */}
+			{selected || block.description !== "" ? (
+				<BlockTextInput
+					ariaLabel="Description"
+					value={block.description}
+					placeholder="Description (optionnelle)"
+					onChange={(description) => onChange({ ...block, description })}
+					className="text-[14px] leading-[1.5]"
+					style={{ color: EMAIL_COLOR.ink, textAlign }}
+				/>
+			) : null}
+		</div>
+	);
+}
+
+function StatBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorStatBlock>) {
+	return (
+		<>
+			<BlockOptionSection title="Contenu">
+				<TextOption
+					label="Valeur"
+					value={block.value}
+					onChange={(value) => onChange({ ...block, value })}
+					placeholder="128"
+				/>
+				<TextOption
+					label="Libellé"
+					value={block.label}
+					onChange={(label) => onChange({ ...block, label })}
+					placeholder="Missions pourvues"
+				/>
+				<TextAreaOption
+					label="Description"
+					value={block.description}
+					onChange={(description) => onChange({ ...block, description })}
+					rows={2}
+				/>
+			</BlockOptionSection>
+			<BlockOptionSection title="Apparence">
+				<AlignmentOption
+					value={block.align}
+					onChange={(align) => onChange({ ...block, align })}
+				/>
+			</BlockOptionSection>
+		</>
+	);
+}
+
+export const statBlockDefinition: EmailBlockDefinition<EmailEditorStatBlock> = {
+	label: "Chiffre clé",
+	icon: ChartBarIcon,
+	View: StatBlockView,
+	Settings: StatBlockSettings,
+};

package/src/blocks/table-block.tsx

@@ -0,0 +1,257 @@
+import { PlusIcon, TableIcon, XIcon } from "@phosphor-icons/react";
+import { Button } from "@voila.dev/ui/components/button";
+import { cn } from "@voila.dev/ui/lib/utils";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { BlockTextInput } from "#/blocks/block-text-input.tsx";
+import type {
+	EmailEditorTableBlock,
+	EmailEditorTableColumn,
+} from "#/document/types.ts";
+import { BlockOptionSection } from "#/sections/block-options/block-option-row.tsx";
+import {
+	SelectOption,
+	ToggleOption,
+} from "#/sections/block-options/select-option.tsx";
+import { EMAIL_COLOR, EMAIL_FONT } from "#/theme.ts";
+
+const ALIGN_OPTIONS: ReadonlyArray<{
+	readonly value: EmailEditorTableColumn["align"];
+	readonly label: string;
+}> = [
+	{ value: "left", label: "À gauche" },
+	{ value: "right", label: "À droite" },
+];
+
+/** Mirrors `emailLineItemsTable`'s `flushEdges`: the first and last columns
+ * lose their outer padding, so the table's text lines up with the blocks above
+ * and below it. */
+const cellPaddingClassName = (index: number, columnCount: number): string =>
+	cn(
+		"py-2",
+		index === 0 ? "pl-0" : "pl-[10px]",
+		index === columnCount - 1 ? "pr-0" : "pr-[10px]",
+	);
+
+/** A row padded (or trimmed) to the current column count. */
+const rowOfWidth = (
+	row: ReadonlyArray<string>,
+	width: number,
+): ReadonlyArray<string> =>
+	Array.from({ length: width }, (_, index) => row[index] ?? "");
+
+/**
+ * A plain-text data table — an order recap, a schedule, a price list. Mirrors
+ * the domain `emailLineItemsTable` component: header rules, row separators and
+ * per-column alignment. Cells are edited in place.
+ */
+function TableBlockView({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorTableBlock>) {
+	const setCell = (rowIndex: number, columnIndex: number, value: string) =>
+		onChange({
+			...block,
+			rows: block.rows.map((row, at) =>
+				at === rowIndex
+					? rowOfWidth(row, block.columns.length).map((cell, column) =>
+							column === columnIndex ? value : cell,
+						)
+					: row,
+			),
+		});
+
+	return (
+		<table
+			className="w-full border-collapse"
+			style={{ fontFamily: EMAIL_FONT }}
+		>
+			{block.headerRow ? (
+				<thead>
+					<tr>
+						{block.columns.map((column, columnIndex) => (
+							<th
+								key={columnIndex}
+								className={cellPaddingClassName(
+									columnIndex,
+									block.columns.length,
+								)}
+								style={{
+									borderBottom: `2px solid ${EMAIL_COLOR.border}`,
+									textAlign: column.align,
+								}}
+							>
+								<BlockTextInput
+									ariaLabel={`Titre de la colonne ${columnIndex + 1}`}
+									value={column.label}
+									placeholder="Colonne"
+									onChange={(label) =>
+										onChange({
+											...block,
+											columns: block.columns.map((current, at) =>
+												at === columnIndex ? { ...current, label } : current,
+											),
+										})
+									}
+									className="font-semibold text-[11px] uppercase leading-[1.3] tracking-[0.04em]"
+									style={{ color: EMAIL_COLOR.muted, textAlign: column.align }}
+								/>
+							</th>
+						))}
+					</tr>
+				</thead>
+			) : null}
+			<tbody>
+				{block.rows.map((row, rowIndex) => (
+					<tr key={rowIndex}>
+						{rowOfWidth(row, block.columns.length).map((cell, columnIndex) => (
+							<td
+								key={columnIndex}
+								className={cellPaddingClassName(
+									columnIndex,
+									block.columns.length,
+								)}
+								style={{ borderBottom: `1px solid ${EMAIL_COLOR.border}` }}
+							>
+								<BlockTextInput
+									ariaLabel={`Ligne ${rowIndex + 1}, colonne ${columnIndex + 1}`}
+									value={cell}
+									onChange={(value) => setCell(rowIndex, columnIndex, value)}
+									className="text-[14px] leading-[1.4]"
+									style={{
+										color: EMAIL_COLOR.ink,
+										textAlign: block.columns[columnIndex]?.align ?? "left",
+									}}
+								/>
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}
+
+function TableColumnSettings({
+	block,
+	onChange,
+}: {
+	block: EmailEditorTableBlock;
+	onChange: (block: EmailEditorTableBlock) => void;
+}) {
+	return (
+		<>
+			{block.columns.map((column, index) => (
+				<div key={index} className="flex items-end gap-2">
+					<div className="flex-1">
+						<SelectOption
+							label={column.label.trim() || `Colonne ${index + 1}`}
+							value={column.align}
+							options={ALIGN_OPTIONS}
+							onChange={(align) =>
+								onChange({
+									...block,
+									columns: block.columns.map((current, at) =>
+										at === index ? { ...current, align } : current,
+									),
+								})
+							}
+						/>
+					</div>
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						aria-label={`Supprimer la colonne ${index + 1}`}
+						disabled={block.columns.length === 1}
+						onClick={() =>
+							onChange({
+								...block,
+								columns: block.columns.filter((_, at) => at !== index),
+								rows: block.rows.map((row) =>
+									row.filter((_, at) => at !== index),
+								),
+							})
+						}
+					>
+						<XIcon aria-hidden />
+					</Button>
+				</div>
+			))}
+			<Button
+				variant="outline"
+				size="sm"
+				onClick={() =>
+					onChange({
+						...block,
+						columns: [...block.columns, { label: "", align: "left" }],
+						rows: block.rows.map((row) => [...row, ""]),
+					})
+				}
+			>
+				<PlusIcon aria-hidden />
+				Ajouter une colonne
+			</Button>
+		</>
+	);
+}
+
+function TableBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorTableBlock>) {
+	return (
+		<>
+			<BlockOptionSection title="Contenu">
+				<div className="flex items-center justify-between gap-2 text-sm">
+					<span className="text-muted-foreground">
+						{block.rows.length} ligne{block.rows.length > 1 ? "s" : ""}
+					</span>
+					<div className="flex gap-1">
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							aria-label="Supprimer la dernière ligne"
+							disabled={block.rows.length === 1}
+							onClick={() =>
+								onChange({ ...block, rows: block.rows.slice(0, -1) })
+							}
+						>
+							<XIcon aria-hidden />
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() =>
+								onChange({
+									...block,
+									rows: [...block.rows, block.columns.map(() => "")],
+								})
+							}
+						>
+							<PlusIcon aria-hidden />
+							Ligne
+						</Button>
+					</div>
+				</div>
+			</BlockOptionSection>
+			<BlockOptionSection title="Apparence">
+				<ToggleOption
+					label="Ligne d'en-tête"
+					checked={block.headerRow}
+					onChange={(headerRow) => onChange({ ...block, headerRow })}
+				/>
+				<TableColumnSettings block={block} onChange={onChange} />
+			</BlockOptionSection>
+		</>
+	);
+}
+
+export const tableBlockDefinition: EmailBlockDefinition<EmailEditorTableBlock> =
+	{
+		label: "Tableau",
+		icon: TableIcon,
+		View: TableBlockView,
+		Settings: TableBlockSettings,
+	};

package/src/dnd/sortable-block-list.tsx

@@ -0,0 +1,263 @@
+import {
+	type CollisionDetection,
+	DndContext,
+	type DragEndEvent,
+	type DraggableAttributes,
+	type DraggableSyntheticListeners,
+	KeyboardSensor,
+	PointerSensor,
+	pointerWithin,
+	rectIntersection,
+	useDroppable,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import {
+	rectSortingStrategy,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	useSortable,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { ReactNode } from "react";
+import {
+	type EmailEditorContainerId,
+	emailEditorContainerBlocks,
+	emailEditorContainerOf,
+} from "#/document/reducer.ts";
+import {
+	type EmailEditorBlock,
+	isEmailEditorGridBlock,
+} from "#/document/types.ts";
+
+/**
+ * Containers are droppable in their own right — that is how a block lands in
+ * an empty grid, or below the last block of the document. Their droppable ids
+ * are namespaced so they never collide with the block ids of the sortables.
+ */
+const CONTAINER_PREFIX = "container:";
+const ROOT_CONTAINER = `${CONTAINER_PREFIX}root`;
+
+const containerDroppableId = (containerId: EmailEditorContainerId): string =>
+	containerId === null ? ROOT_CONTAINER : `${CONTAINER_PREFIX}${containerId}`;
+
+const containerIdFromDroppable = (
+	droppableId: string,
+): EmailEditorContainerId | undefined => {
+	if (!droppableId.startsWith(CONTAINER_PREFIX)) {
+		return undefined;
+	}
+	return droppableId === ROOT_CONTAINER
+		? null
+		: droppableId.slice(CONTAINER_PREFIX.length);
+};
+
+/**
+ * What a sortable item hands to its drag handle: spread `attributes` and
+ * `listeners` on the handle element and pass it `setActivatorNodeRef`, so the
+ * drag starts from the handle only (keyboard included) and the block's inputs
+ * stay freely clickable.
+ */
+export interface SortableBlockHandle {
+	readonly attributes: DraggableAttributes;
+	readonly listeners: DraggableSyntheticListeners;
+	readonly setActivatorNodeRef: (element: HTMLElement | null) => void;
+	readonly isDragging: boolean;
+}
+
+/**
+ * Rank a droppable by how specific it is, so the deepest target under the
+ * pointer wins: a block nested in a grid beats that grid's own drop area,
+ * which beats a root-level block (the grid's sortable node is one), which
+ * beats the document root. Without this a drop aimed inside a grid would land
+ * beside it.
+ */
+const droppableDepth = (
+	blocks: ReadonlyArray<EmailEditorBlock>,
+	droppableId: string,
+): number => {
+	if (droppableId === ROOT_CONTAINER) {
+		return 3;
+	}
+	if (droppableId.startsWith(CONTAINER_PREFIX)) {
+		return 1;
+	}
+	return emailEditorContainerOf(blocks, droppableId) === null ? 2 : 0;
+};
+
+/**
+ * The dnd-kit context for the whole document: one instance at the editor root,
+ * one `SortableContext` per container below it. Reordering is announced
+ * through `onMove` with the dragged block id and its destination container and
+ * index; the document itself stays owned by the editor reducer.
+ */
+export function EmailEditorDndContext({
+	blocks,
+	onMove,
+	children,
+}: {
+	blocks: ReadonlyArray<EmailEditorBlock>;
+	onMove: (
+		blockId: string,
+		toContainerId: EmailEditorContainerId,
+		toIndex: number,
+	) => void;
+	children: ReactNode;
+}) {
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		}),
+	);
+
+	const collisionDetection: CollisionDetection = (args) => {
+		const found = pointerWithin(args);
+		const collisions = found.length > 0 ? found : rectIntersection(args);
+		return [...collisions].sort(
+			(left, right) =>
+				droppableDepth(blocks, String(left.id)) -
+				droppableDepth(blocks, String(right.id)),
+		);
+	};
+
+	// fallow-ignore-next-line complexity -- one destination resolution with its guards; cognitive complexity is 7.
+	const handleDragEnd = (event: DragEndEvent) => {
+		const { active, over } = event;
+		if (over === null || active.id === over.id) {
+			return;
+		}
+		const activeId = String(active.id);
+		const overId = String(over.id);
+		const overContainer = containerIdFromDroppable(overId);
+
+		const destination =
+			overContainer !== undefined
+				? {
+						containerId: overContainer,
+						index: (emailEditorContainerBlocks(blocks, overContainer) ?? [])
+							.length,
+					}
+				: resolveDropOnBlock(blocks, overId);
+		if (destination === undefined) {
+			return;
+		}
+
+		// A grid cannot nest: aiming one at something inside another grid drops
+		// it beside that grid instead of doing nothing.
+		const activeBlock = blocks.find((block) => block.id === activeId);
+		if (
+			activeBlock !== undefined &&
+			isEmailEditorGridBlock(activeBlock) &&
+			destination.containerId !== null
+		) {
+			const rootIndex = blocks.findIndex(
+				(block) => block.id === destination.containerId,
+			);
+			onMove(activeId, null, rootIndex === -1 ? blocks.length : rootIndex);
+			return;
+		}
+		onMove(activeId, destination.containerId, destination.index);
+	};
+
+	return (
+		<DndContext
+			sensors={sensors}
+			collisionDetection={collisionDetection}
+			onDragEnd={handleDragEnd}
+		>
+			{children}
+		</DndContext>
+	);
+}
+
+/** The container and index of a block that was dropped onto. */
+const resolveDropOnBlock = (
+	blocks: ReadonlyArray<EmailEditorBlock>,
+	blockId: string,
+): { containerId: EmailEditorContainerId; index: number } | undefined => {
+	const containerId = emailEditorContainerOf(blocks, blockId);
+	if (containerId === undefined) {
+		return undefined;
+	}
+	const siblings = emailEditorContainerBlocks(blocks, containerId) ?? [];
+	return {
+		containerId,
+		index: siblings.findIndex((block) => block.id === blockId),
+	};
+};
+
+/**
+ * One container's sortable children. `layout` picks the sorting strategy: a
+ * vertical list for the document root, a rectangular one for a grid's cells.
+ * The wrapper is itself droppable, which is what lets a block land in an empty
+ * grid or in the blank space under the last block.
+ */
+export function SortableBlockContainer({
+	containerId,
+	blockIds,
+	layout,
+	className,
+	style,
+	children,
+}: {
+	containerId: EmailEditorContainerId;
+	blockIds: ReadonlyArray<string>;
+	layout: "list" | "grid";
+	className?: string;
+	style?: React.CSSProperties;
+	children: ReactNode;
+}) {
+	const { setNodeRef } = useDroppable({
+		id: containerDroppableId(containerId),
+	});
+	return (
+		<SortableContext
+			items={[...blockIds]}
+			strategy={
+				layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy
+			}
+		>
+			<div ref={setNodeRef} className={className} style={style}>
+				{children}
+			</div>
+		</SortableContext>
+	);
+}
+
+/** One draggable row; renders its content through a render prop that receives
+ * the drag handle to attach to the block toolbar. */
+export function SortableBlockItem({
+	blockId,
+	className,
+	children,
+}: {
+	blockId: string;
+	className?: string;
+	children: (handle: SortableBlockHandle) => ReactNode;
+}) {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: blockId });
+
+	return (
+		<div
+			ref={setNodeRef}
+			className={className}
+			style={{
+				transform: CSS.Transform.toString(transform),
+				transition,
+				...(isDragging && { opacity: 0.6, zIndex: 1, position: "relative" }),
+			}}
+		>
+			{children({ attributes, listeners, setActivatorNodeRef, isDragging })}
+		</div>
+	);
+}