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

package/src/blocks/heading-block.tsx

@@ -0,0 +1,86 @@
+import { TextHIcon } from "@phosphor-icons/react";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { BlockTextInput } from "#/blocks/block-text-input.tsx";
+import type {
+	EmailEditorHeadingBlock,
+	EmailEditorHeadingLevel,
+} from "#/document/types.ts";
+import { SelectOption } from "#/sections/block-options/select-option.tsx";
+import { TextOption } from "#/sections/block-options/text-option.tsx";
+import { EMAIL_COLOR, EMAIL_FONT } from "#/theme.ts";
+
+/** The two heading sizes, mirroring the domain `emailHeading` component. */
+export const EMAIL_HEADING_STYLE: {
+	readonly [Level in EmailEditorHeadingLevel]: {
+		readonly fontSize: string;
+		readonly label: string;
+	};
+} = {
+	1: { fontSize: "22px", label: "Titre principal (H1)" },
+	2: { fontSize: "17px", label: "Sous-titre (H2)" },
+};
+
+const HEADING_LEVEL_OPTIONS: ReadonlyArray<{
+	readonly value: EmailEditorHeadingLevel;
+	readonly label: string;
+}> = [
+	{ value: 1, label: EMAIL_HEADING_STYLE[1].label },
+	{ value: 2, label: EMAIL_HEADING_STYLE[2].label },
+];
+
+/**
+ * A title line, edited in place. Mirrors the domain `emailHeading` component
+ * (bold, brand-colored) so the canvas matches the sent email; the level picks
+ * between the email's own title and a section heading.
+ */
+function HeadingBlockView({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorHeadingBlock>) {
+	return (
+		<BlockTextInput
+			ariaLabel="Titre"
+			value={block.text}
+			onChange={(text) => onChange({ ...block, text })}
+			placeholder="Votre titre"
+			className="font-bold leading-[1.3]"
+			style={{
+				fontFamily: EMAIL_FONT,
+				color: EMAIL_COLOR.brand,
+				fontSize: EMAIL_HEADING_STYLE[block.level].fontSize,
+			}}
+		/>
+	);
+}
+
+function HeadingBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorHeadingBlock>) {
+	return (
+		<>
+			<TextOption
+				label="Texte"
+				value={block.text}
+				onChange={(text) => onChange({ ...block, text })}
+			/>
+			<SelectOption
+				label="Niveau"
+				value={block.level}
+				options={HEADING_LEVEL_OPTIONS}
+				onChange={(level) => onChange({ ...block, level })}
+			/>
+		</>
+	);
+}
+
+export const headingBlockDefinition: EmailBlockDefinition<EmailEditorHeadingBlock> =
+	{
+		label: "Titre",
+		icon: TextHIcon,
+		View: HeadingBlockView,
+		Settings: HeadingBlockSettings,
+	};

package/src/blocks/image-block.tsx

@@ -0,0 +1,264 @@
+import { ImageIcon, PlayIcon, UploadSimpleIcon } from "@phosphor-icons/react";
+import { Button } from "@voila.dev/ui/components/button";
+import { useRef, useState } from "react";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import type {
+	EmailEditorImageBlock,
+	EmailEditorImageOverlay,
+	EmailEditorImageWidth,
+} 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 {
+	LinkOption,
+	TextOption,
+} from "#/sections/block-options/text-option.tsx";
+import { EMAIL_COLOR, EMAIL_FONT } from "#/theme.ts";
+
+/**
+ * How much of the card's inner width each option occupies. `contained` is the
+ * option for a visual that should not bleed edge to edge (a logo, a portrait);
+ * the renderer uses the same ratio against the 536px content width.
+ */
+export const EMAIL_IMAGE_WIDTH_RATIO: {
+	readonly [W in EmailEditorImageWidth]: number;
+} = { full: 1, contained: 0.6 };
+
+const WIDTH_OPTIONS: ReadonlyArray<{
+	readonly value: EmailEditorImageWidth;
+	readonly label: string;
+}> = [
+	{ value: "full", label: "Pleine largeur" },
+	{ value: "contained", label: "Largeur réduite (centrée)" },
+];
+
+const OVERLAY_OPTIONS: ReadonlyArray<{
+	readonly value: EmailEditorImageOverlay;
+	readonly label: string;
+}> = [
+	{ value: "none", label: "Aucune" },
+	{ value: "play", label: "Bouton lecture (vignette vidéo)" },
+];
+
+/** The play badge composited over a video thumbnail. */
+function PlayOverlay() {
+	return (
+		<span
+			className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex size-14 items-center justify-center rounded-full"
+			style={{ backgroundColor: EMAIL_COLOR.brand }}
+			aria-hidden
+		>
+			<PlayIcon size={24} weight="fill" color="#ffffff" />
+		</span>
+	);
+}
+
+/**
+ * A content image. Without a source it renders a dashed drop zone that opens a
+ * file picker; the actual upload is delegated to the host through
+ * `onUploadImage` (the admin wires its ticketed upload). Mirrors the domain
+ * `emailImage` component (width, radius and play overlay all follow the
+ * block's options).
+ */
+function ImageBlockView({
+	block,
+	onChange,
+	onUploadImage,
+}: EmailBlockComponentProps<EmailEditorImageBlock>) {
+	if (block.src !== "") {
+		return (
+			<div
+				className="relative mx-auto"
+				style={{
+					width: `${EMAIL_IMAGE_WIDTH_RATIO[block.width] * 100}%`,
+				}}
+			>
+				<img
+					src={block.src}
+					alt={block.alt}
+					className={block.rounded ? "block w-full rounded-lg" : "block w-full"}
+				/>
+				{block.overlay === "play" ? <PlayOverlay /> : null}
+			</div>
+		);
+	}
+
+	return (
+		<ImageDropZone
+			onUploadImage={onUploadImage}
+			onUploaded={(src) => onChange({ ...block, src })}
+		/>
+	);
+}
+
+/** The empty state: a dashed zone that opens the file picker. The upload
+ * itself is the host's job, so without `onUploadImage` it is simply inert. */
+function ImageDropZone({
+	onUploadImage,
+	onUploaded,
+}: {
+	onUploadImage?: (file: File) => Promise<string>;
+	onUploaded: (src: string) => void;
+}) {
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	const [uploading, setUploading] = useState(false);
+
+	const upload = async (file: File) => {
+		if (!onUploadImage) {
+			return;
+		}
+		setUploading(true);
+		try {
+			onUploaded(await onUploadImage(file));
+		} finally {
+			setUploading(false);
+		}
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => fileInputRef.current?.click()}
+				disabled={onUploadImage === undefined || uploading}
+				className="flex w-full flex-col items-center gap-2 rounded-lg border border-dashed px-4 py-10 text-[14px] disabled:cursor-not-allowed"
+				style={{
+					borderColor: EMAIL_COLOR.muted,
+					color: EMAIL_COLOR.muted,
+					fontFamily: EMAIL_FONT,
+				}}
+			>
+				<ImageIcon size={24} aria-hidden />
+				{uploading ? "Téléversement en cours…" : "Ajouter une image"}
+			</button>
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept="image/*"
+				className="hidden"
+				onChange={(event) => {
+					const file = event.target.files?.[0];
+					if (file) {
+						void upload(file);
+					}
+					event.target.value = "";
+				}}
+			/>
+		</>
+	);
+}
+
+function ImageUploadButton({
+	block,
+	onChange,
+	onUploadImage,
+}: {
+	block: EmailEditorImageBlock;
+	onChange: (block: EmailEditorImageBlock) => void;
+	onUploadImage: (file: File) => Promise<string>;
+}) {
+	const fileInputRef = useRef<HTMLInputElement>(null);
+	return (
+		<>
+			<Button
+				variant="outline"
+				size="sm"
+				onClick={() => fileInputRef.current?.click()}
+			>
+				<UploadSimpleIcon aria-hidden />
+				{block.src === "" ? "Téléverser une image" : "Remplacer l'image"}
+			</Button>
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept="image/*"
+				className="hidden"
+				onChange={(event) => {
+					const file = event.target.files?.[0];
+					if (file) {
+						void onUploadImage(file).then((src) => onChange({ ...block, src }));
+					}
+					event.target.value = "";
+				}}
+			/>
+		</>
+	);
+}
+
+function ImageBlockSettings({
+	block,
+	onChange,
+	onUploadImage,
+}: EmailBlockComponentProps<EmailEditorImageBlock>) {
+	return (
+		<>
+			<BlockOptionSection title="Contenu">
+				<TextOption
+					label="Texte alternatif"
+					value={block.alt}
+					onChange={(alt) => onChange({ ...block, alt })}
+					description="Affiché quand l'image est bloquée par la messagerie."
+				/>
+				<TextOption
+					label="Adresse de l'image"
+					value={block.src}
+					onChange={(src) => onChange({ ...block, src })}
+					placeholder="https://"
+				/>
+				{onUploadImage ? (
+					<ImageUploadButton
+						block={block}
+						onChange={onChange}
+						onUploadImage={onUploadImage}
+					/>
+				) : null}
+			</BlockOptionSection>
+			<BlockOptionSection title="Apparence">
+				<SelectOption
+					label="Largeur"
+					value={block.width}
+					options={WIDTH_OPTIONS}
+					onChange={(width) => onChange({ ...block, width })}
+				/>
+				<SelectOption
+					label="Superposition"
+					value={block.overlay}
+					options={OVERLAY_OPTIONS}
+					onChange={(overlay) => onChange({ ...block, overlay })}
+					description={
+						block.overlay === "play"
+							? "Aucune messagerie ne lit une vidéo intégrée : la vignette renvoie vers le lien ci-dessous. Outlook affiche la pastille sous l'image."
+							: undefined
+					}
+				/>
+				<ToggleOption
+					label="Coins arrondis"
+					checked={block.rounded}
+					onChange={(rounded) => onChange({ ...block, rounded })}
+					description="Outlook (moteur Word) affiche toujours des angles droits."
+				/>
+			</BlockOptionSection>
+			<BlockOptionSection title="Lien">
+				<LinkOption
+					value={block.href}
+					onChange={(href) => onChange({ ...block, href })}
+					description="Laissez vide pour une image non cliquable."
+				/>
+			</BlockOptionSection>
+		</>
+	);
+}
+
+export const imageBlockDefinition: EmailBlockDefinition<EmailEditorImageBlock> =
+	{
+		label: "Image",
+		icon: ImageIcon,
+		View: ImageBlockView,
+		Settings: ImageBlockSettings,
+	};

package/src/blocks/list-block.tsx

@@ -0,0 +1,202 @@
+import { ListBulletsIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { Button } from "@voila.dev/ui/components/button";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { RichTextEditable } from "#/blocks/rich-text-editable.tsx";
+import type {
+	EmailEditorListBlock,
+	EmailEditorListItem,
+	EmailEditorListMarker,
+} from "#/document/types.ts";
+import { SelectOption } from "#/sections/block-options/select-option.tsx";
+import { EMAIL_COLOR, EMAIL_FONT } from "#/theme.ts";
+
+const MARKER_OPTIONS: ReadonlyArray<{
+	readonly value: EmailEditorListMarker;
+	readonly label: string;
+}> = [
+	{ value: "bullet", label: "Puce" },
+	{ value: "number", label: "Numéro" },
+	{ value: "badge", label: "Pastille numérotée" },
+];
+
+/** The marker shown before an item, mirroring the domain `emailList`. */
+function ListMarker({
+	marker,
+	index,
+}: {
+	marker: EmailEditorListMarker;
+	index: number;
+}) {
+	if (marker === "badge") {
+		return (
+			<span
+				className="flex size-6 shrink-0 items-center justify-center rounded-full font-semibold text-[12px] text-white"
+				style={{ backgroundColor: EMAIL_COLOR.brand }}
+				aria-hidden
+			>
+				{index + 1}
+			</span>
+		);
+	}
+	return (
+		<span
+			className="w-6 shrink-0 text-[16px] leading-[1.6]"
+			style={{ color: EMAIL_COLOR.muted }}
+			aria-hidden
+		>
+			{marker === "number" ? `${index + 1}.` : "•"}
+		</span>
+	);
+}
+
+/**
+ * A bulleted, numbered or badge list. Each item is the same rich-text surface
+ * the paragraph uses, so the toolbar's bold/italic/underline/link controls act
+ * on the focused item with no extra wiring. The optional bold lead-in stays
+ * out of the way until the item is hovered or focused.
+ */
+function ListBlockView({
+	block,
+	selected,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorListBlock>) {
+	const replaceItem = (index: number, item: EmailEditorListItem) =>
+		onChange({
+			...block,
+			items: block.items.map((current, at) => (at === index ? item : current)),
+		});
+
+	return (
+		<ul className="flex list-none flex-col gap-2 p-0">
+			{block.items.map((item, index) => (
+				<ListItemRow
+					key={index}
+					item={item}
+					index={index}
+					marker={block.marker}
+					showTitle={selected || (item.title ?? "") !== ""}
+					onChange={(next) => replaceItem(index, next)}
+				/>
+			))}
+		</ul>
+	);
+}
+
+/**
+ * One entry. The lead-in is optional, so an empty one only takes up room while
+ * the block is selected — otherwise the canvas would not match the email.
+ * Selection (not hover) drives it, so the field is reachable on a touch screen.
+ */
+function ListItemRow({
+	item,
+	index,
+	marker,
+	showTitle,
+	onChange,
+}: {
+	item: EmailEditorListItem;
+	index: number;
+	marker: EmailEditorListMarker;
+	showTitle: boolean;
+	onChange: (item: EmailEditorListItem) => void;
+}) {
+	return (
+		<li className="flex items-start gap-2">
+			<ListMarker marker={marker} index={index} />
+			<div className="flex min-w-0 flex-1 flex-col">
+				{showTitle ? (
+					<input
+						aria-label={`Titre de l'élément ${index + 1}`}
+						value={item.title ?? ""}
+						placeholder="Titre (optionnel)"
+						onChange={(event) =>
+							onChange({ ...item, title: event.target.value })
+						}
+						className="max-w-full border-none bg-transparent p-0 font-semibold text-[16px] leading-[1.6] outline-none [field-sizing:content] placeholder:opacity-30"
+						style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
+					/>
+				) : null}
+				<RichTextEditable
+					spans={item.spans}
+					onChange={(spans) => onChange({ ...item, spans })}
+					ariaLabel={`Élément ${index + 1}`}
+					placeholder="Votre texte"
+					className="text-[16px] leading-[1.6]"
+					style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
+				/>
+			</div>
+		</li>
+	);
+}
+
+function ListBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorListBlock>) {
+	return (
+		<>
+			<SelectOption
+				label="Marqueur"
+				value={block.marker}
+				options={MARKER_OPTIONS}
+				onChange={(marker) => onChange({ ...block, marker })}
+			/>
+			<div className="flex flex-col gap-2">
+				<span className="font-medium text-sm">Éléments</span>
+				{block.items.map((item, index) => (
+					<div
+						key={index}
+						className="flex items-center justify-between gap-2 text-sm"
+					>
+						<span className="truncate text-muted-foreground">
+							{item.title?.trim() ||
+								item.spans
+									.map((span) => span.text)
+									.join("")
+									.trim() ||
+								`Élément ${index + 1}`}
+						</span>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							aria-label={`Supprimer l'élément ${index + 1}`}
+							disabled={block.items.length === 1}
+							onClick={() =>
+								onChange({
+									...block,
+									items: block.items.filter((_, at) => at !== index),
+								})
+							}
+						>
+							<XIcon aria-hidden />
+						</Button>
+					</div>
+				))}
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() =>
+						onChange({ ...block, items: [...block.items, { spans: [] }] })
+					}
+				>
+					<PlusIcon aria-hidden />
+					Ajouter un élément
+				</Button>
+			</div>
+			<p className="text-muted-foreground text-xs">
+				Le texte de chaque élément se met en forme depuis la barre d'outils du
+				bloc, comme un paragraphe.
+			</p>
+		</>
+	);
+}
+
+export const listBlockDefinition: EmailBlockDefinition<EmailEditorListBlock> = {
+	label: "Liste",
+	icon: ListBulletsIcon,
+	View: ListBlockView,
+	Settings: ListBlockSettings,
+};