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

package/src/blocks/offer-block.tsx

@@ -0,0 +1,267 @@
+import {
+	CheckIcon,
+	PlusIcon,
+	SealPercentIcon,
+	XIcon,
+} from "@phosphor-icons/react";
+import { Button } from "@voila.dev/ui/components/button";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { BlockTextInput } from "#/blocks/block-text-input.tsx";
+import {
+	EmailCardButton,
+	EmailCardMeta,
+	EmailCardShell,
+} from "#/blocks/email-card-shell.tsx";
+import type { EmailEditorOfferBlock } from "#/document/types.ts";
+import { BlockOptionSection } from "#/sections/block-options/block-option-row.tsx";
+import {
+	formatPreviewPrice,
+	MoneyOption,
+} from "#/sections/block-options/money-option.tsx";
+import { ToggleOption } from "#/sections/block-options/select-option.tsx";
+import {
+	LinkOption,
+	TextAreaOption,
+	TextOption,
+} from "#/sections/block-options/text-option.tsx";
+import { EMAIL_COLOR } from "#/theme.ts";
+
+/**
+ * A pricing plan on the shared card shell: an eyebrow, a name, a price with an
+ * optional period, a feature list and a call to action. `highlighted` draws
+ * the recommended plan of a row in the brand colour.
+ */
+function OfferBlockView({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorOfferBlock>) {
+	return (
+		<EmailCardShell
+			image={block.image.src === "" ? undefined : block.image}
+			highlighted={block.highlighted}
+		>
+			<OfferHeader block={block} onChange={onChange} />
+			{block.description === "" ? null : (
+				<p
+					className="text-[15px] leading-[1.5]"
+					style={{ color: EMAIL_COLOR.ink }}
+				>
+					{block.description}
+				</p>
+			)}
+			<OfferFeatureList features={block.features} />
+			<EmailCardButton label={block.buttonLabel} />
+		</EmailCardShell>
+	);
+}
+
+/** The plan's identity: its optional surtitle, its name, and the price with
+ * its optional recurrence. */
+function OfferHeader({
+	block,
+	onChange,
+}: {
+	block: EmailEditorOfferBlock;
+	onChange: (block: EmailEditorOfferBlock) => void;
+}) {
+	return (
+		<>
+			{block.eyebrow === "" ? null : (
+				<span
+					className="font-semibold text-[11px] uppercase tracking-[0.06em]"
+					style={{ color: EMAIL_COLOR.brand }}
+				>
+					{block.eyebrow}
+				</span>
+			)}
+			<BlockTextInput
+				ariaLabel="Nom de l'offre"
+				value={block.name}
+				placeholder="Nom de l'offre"
+				onChange={(name) => onChange({ ...block, name })}
+				className="font-bold text-[17px] leading-[1.3]"
+				style={{ color: EMAIL_COLOR.brand }}
+			/>
+			<div className="flex items-baseline gap-1.5">
+				<span
+					className="font-bold text-[26px] leading-[1.1]"
+					style={{ color: EMAIL_COLOR.ink }}
+				>
+					{formatPreviewPrice(block.price)}
+				</span>
+				{block.period === "" ? null : (
+					<EmailCardMeta>{block.period}</EmailCardMeta>
+				)}
+			</div>
+		</>
+	);
+}
+
+/** The ticked « points inclus », mirroring the bulleted list the renderer
+ * emits for them. */
+function OfferFeatureList({ features }: { features: ReadonlyArray<string> }) {
+	if (features.length === 0) {
+		return null;
+	}
+	return (
+		<ul className="flex list-none flex-col gap-1 p-0">
+			{features.map((feature, index) => (
+				<li
+					key={index}
+					className="flex items-start gap-2 text-[14px] leading-[1.5]"
+					style={{ color: EMAIL_COLOR.ink }}
+				>
+					<CheckIcon
+						size={16}
+						aria-hidden
+						style={{ color: EMAIL_COLOR.brand, marginTop: 3 }}
+					/>
+					{feature}
+				</li>
+			))}
+		</ul>
+	);
+}
+
+function OfferFeatureSettings({
+	block,
+	onChange,
+}: {
+	block: EmailEditorOfferBlock;
+	onChange: (block: EmailEditorOfferBlock) => void;
+}) {
+	return (
+		<div className="flex flex-col gap-2">
+			<span className="font-medium text-sm">Points inclus</span>
+			{block.features.map((feature, index) => (
+				<div key={index} className="flex items-center gap-2">
+					<input
+						aria-label={`Point inclus ${index + 1}`}
+						value={feature}
+						onChange={(event) =>
+							onChange({
+								...block,
+								features: block.features.map((current, at) =>
+									at === index ? event.target.value : current,
+								),
+							})
+						}
+						className="h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+					/>
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						aria-label={`Supprimer le point ${index + 1}`}
+						onClick={() =>
+							onChange({
+								...block,
+								features: block.features.filter((_, at) => at !== index),
+							})
+						}
+					>
+						<XIcon aria-hidden />
+					</Button>
+				</div>
+			))}
+			<Button
+				variant="outline"
+				size="sm"
+				onClick={() =>
+					onChange({ ...block, features: [...block.features, ""] })
+				}
+			>
+				<PlusIcon aria-hidden />
+				Ajouter un point
+			</Button>
+		</div>
+	);
+}
+
+function OfferBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorOfferBlock>) {
+	return (
+		<>
+			<BlockOptionSection title="Contenu">
+				<TextOption
+					label="Surtitre"
+					value={block.eyebrow}
+					onChange={(eyebrow) => onChange({ ...block, eyebrow })}
+					placeholder="Le plus choisi"
+				/>
+				<TextOption
+					label="Nom"
+					value={block.name}
+					onChange={(name) => onChange({ ...block, name })}
+				/>
+				<MoneyOption
+					label="Prix"
+					value={block.price}
+					onChange={(price) => onChange({ ...block, price })}
+				/>
+				<TextOption
+					label="Périodicité"
+					value={block.period}
+					onChange={(period) => onChange({ ...block, period })}
+					placeholder="par mois"
+					description="Laissez vide pour un tarif unique."
+				/>
+				<TextAreaOption
+					label="Description"
+					value={block.description}
+					onChange={(description) => onChange({ ...block, description })}
+				/>
+				<OfferFeatureSettings block={block} onChange={onChange} />
+			</BlockOptionSection>
+			<BlockOptionSection title="Apparence">
+				<ToggleOption
+					label="Mettre en avant"
+					checked={block.highlighted}
+					onChange={(highlighted) => onChange({ ...block, highlighted })}
+					description="Encadre la carte dans la couleur de marque. Outlook (moteur Word) affiche des angles droits."
+				/>
+				<TextOption
+					label="Adresse de l'image"
+					value={block.image.src}
+					onChange={(src) =>
+						onChange({ ...block, image: { ...block.image, src } })
+					}
+					placeholder="https://"
+					description="Laissez vide pour une offre sans visuel."
+				/>
+				<TextOption
+					label="Texte alternatif"
+					value={block.image.alt}
+					onChange={(alt) =>
+						onChange({ ...block, image: { ...block.image, alt } })
+					}
+				/>
+			</BlockOptionSection>
+			<BlockOptionSection title="Lien">
+				<TextOption
+					label="Libellé du bouton"
+					value={block.buttonLabel}
+					onChange={(buttonLabel) => onChange({ ...block, buttonLabel })}
+					placeholder="Choisir cette offre"
+					description="Laissez vide pour une carte sans bouton."
+				/>
+				<LinkOption
+					value={block.buttonHref}
+					onChange={(buttonHref) => onChange({ ...block, buttonHref })}
+				/>
+			</BlockOptionSection>
+		</>
+	);
+}
+
+export const offerBlockDefinition: EmailBlockDefinition<EmailEditorOfferBlock> =
+	{
+		label: "Offre",
+		icon: SealPercentIcon,
+		View: OfferBlockView,
+		Settings: OfferBlockSettings,
+	};

package/src/blocks/paragraph-block.tsx

@@ -0,0 +1,47 @@
+import { TextAlignLeftIcon } from "@phosphor-icons/react";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { RichTextEditable } from "#/blocks/rich-text-editable.tsx";
+import type { EmailEditorParagraphBlock } from "#/document/types.ts";
+import { EMAIL_COLOR, EMAIL_FONT } from "#/theme.ts";
+
+/**
+ * A rich body paragraph, edited in place (bold, italic, underline and links
+ * via the block toolbar). Mirrors the domain `emailParagraph` component
+ * (16px ink).
+ */
+function ParagraphBlockView({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorParagraphBlock>) {
+	return (
+		<RichTextEditable
+			spans={block.spans}
+			onChange={(spans) => onChange({ ...block, spans })}
+			ariaLabel="Paragraphe"
+			placeholder="Votre texte. Utilisez {{firstName}} pour personnaliser."
+			className="text-[16px] leading-[1.6]"
+			style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
+		/>
+	);
+}
+
+function ParagraphBlockSettings() {
+	return (
+		<p className="text-muted-foreground text-xs">
+			{
+				"Mettez en forme le texte (gras, italique, souligné, lien) depuis la barre d'outils du bloc. Personnalisez avec {{firstName}}, {{lastName}} ou {{email}} ; la valeur du contact est substituée à l'envoi."
+			}
+		</p>
+	);
+}
+
+export const paragraphBlockDefinition: EmailBlockDefinition<EmailEditorParagraphBlock> =
+	{
+		label: "Paragraphe",
+		icon: TextAlignLeftIcon,
+		View: ParagraphBlockView,
+		Settings: ParagraphBlockSettings,
+	};

package/src/blocks/product-block.tsx

@@ -0,0 +1,155 @@
+import { TagIcon } from "@phosphor-icons/react";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { BlockTextInput } from "#/blocks/block-text-input.tsx";
+import { EmailCardButton, EmailCardShell } from "#/blocks/email-card-shell.tsx";
+import type { EmailEditorProductBlock } from "#/document/types.ts";
+import { BlockOptionSection } from "#/sections/block-options/block-option-row.tsx";
+import {
+	formatPreviewPrice,
+	MoneyOption,
+} from "#/sections/block-options/money-option.tsx";
+import { ToggleOption } from "#/sections/block-options/select-option.tsx";
+import {
+	LinkOption,
+	TextAreaOption,
+	TextOption,
+} from "#/sections/block-options/text-option.tsx";
+import { EMAIL_COLOR } from "#/theme.ts";
+
+/**
+ * A catalogue item on the shared card shell: visual, name, description, price
+ * with an optional struck-through « tarif de base », and a call to action.
+ */
+function ProductBlockView({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorProductBlock>) {
+	return (
+		<EmailCardShell image={block.image}>
+			<BlockTextInput
+				ariaLabel="Nom du produit"
+				value={block.name}
+				placeholder="Nom du produit"
+				onChange={(name) => onChange({ ...block, name })}
+				className="font-bold text-[17px] leading-[1.3]"
+				style={{ color: EMAIL_COLOR.brand }}
+			/>
+			<textarea
+				aria-label="Description du produit"
+				value={block.description}
+				placeholder="La description du produit."
+				rows={2}
+				onChange={(event) =>
+					onChange({ ...block, description: event.target.value })
+				}
+				className="w-full resize-none border-none bg-transparent p-0 text-[15px] leading-[1.5] outline-none [field-sizing:content] placeholder:opacity-40"
+				style={{ color: EMAIL_COLOR.ink }}
+			/>
+			<div className="flex items-baseline gap-2">
+				<span
+					className="font-bold text-[18px]"
+					style={{ color: EMAIL_COLOR.ink }}
+				>
+					{formatPreviewPrice(block.price)}
+				</span>
+				{block.compareAtPrice === null ? null : (
+					<span
+						className="text-[14px] line-through"
+						style={{ color: EMAIL_COLOR.muted }}
+					>
+						{formatPreviewPrice(block.compareAtPrice)}
+					</span>
+				)}
+			</div>
+			<EmailCardButton label={block.buttonLabel} />
+		</EmailCardShell>
+	);
+}
+
+function ProductBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorProductBlock>) {
+	return (
+		<>
+			<BlockOptionSection title="Contenu">
+				<TextOption
+					label="Nom"
+					value={block.name}
+					onChange={(name) => onChange({ ...block, name })}
+				/>
+				<TextAreaOption
+					label="Description"
+					value={block.description}
+					onChange={(description) => onChange({ ...block, description })}
+				/>
+				<MoneyOption
+					label="Prix"
+					value={block.price}
+					onChange={(price) => onChange({ ...block, price })}
+				/>
+				<ToggleOption
+					label="Tarif de base barré"
+					checked={block.compareAtPrice !== null}
+					onChange={(enabled) =>
+						onChange({
+							...block,
+							compareAtPrice: enabled ? { ...block.price } : null,
+						})
+					}
+					description="Affiche un prix barré à côté du prix courant."
+				/>
+				{block.compareAtPrice === null ? null : (
+					<MoneyOption
+						label="Tarif de base"
+						value={block.compareAtPrice}
+						onChange={(compareAtPrice) =>
+							onChange({ ...block, compareAtPrice })
+						}
+					/>
+				)}
+			</BlockOptionSection>
+			<BlockOptionSection title="Apparence">
+				<TextOption
+					label="Adresse de l'image"
+					value={block.image.src}
+					onChange={(src) =>
+						onChange({ ...block, image: { ...block.image, src } })
+					}
+					placeholder="https://"
+				/>
+				<TextOption
+					label="Texte alternatif"
+					value={block.image.alt}
+					onChange={(alt) =>
+						onChange({ ...block, image: { ...block.image, alt } })
+					}
+				/>
+			</BlockOptionSection>
+			<BlockOptionSection title="Lien">
+				<TextOption
+					label="Libellé du bouton"
+					value={block.buttonLabel}
+					onChange={(buttonLabel) => onChange({ ...block, buttonLabel })}
+					placeholder="Commander"
+					description="Laissez vide pour une carte sans bouton."
+				/>
+				<LinkOption
+					value={block.href}
+					onChange={(href) => onChange({ ...block, href })}
+				/>
+			</BlockOptionSection>
+		</>
+	);
+}
+
+export const productBlockDefinition: EmailBlockDefinition<EmailEditorProductBlock> =
+	{
+		label: "Produit",
+		icon: TagIcon,
+		View: ProductBlockView,
+		Settings: ProductBlockSettings,
+	};

package/src/blocks/rating-block.tsx

@@ -0,0 +1,121 @@
+import { StarIcon } from "@phosphor-icons/react";
+import type {
+	EmailBlockComponentProps,
+	EmailBlockDefinition,
+} from "#/blocks/block-definitions.tsx";
+import { RichTextEditable } from "#/blocks/rich-text-editable.tsx";
+import type {
+	EmailEditorRatingBlock,
+	EmailEditorRatingStyle,
+} from "#/document/types.ts";
+import { BlockOptionSection } from "#/sections/block-options/block-option-row.tsx";
+import { SelectOption } 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";
+
+/** The scale, mirroring the domain's `EMAIL_RATING_SCALE`. */
+const RATING_SCALE = [1, 2, 3, 4, 5] as const;
+
+const STYLE_OPTIONS: ReadonlyArray<{
+	readonly value: EmailEditorRatingStyle;
+	readonly label: string;
+}> = [
+	{ value: "filled", label: "Étoiles pleines" },
+	{ value: "outline", label: "Étoiles contour" },
+];
+
+/**
+ * A one-to-five satisfaction question. In the sent email each star is its own
+ * link carrying `?rating=N`, which makes the five steps five separately
+ * countable tracked links; on the canvas they are inert.
+ */
+function RatingBlockView({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorRatingBlock>) {
+	return (
+		<div className="flex flex-col items-center gap-3 text-center">
+			<RichTextEditable
+				spans={block.question}
+				onChange={(question) => onChange({ ...block, question })}
+				ariaLabel="Question"
+				placeholder="Que pensez-vous de votre dernière mission ?"
+				className="text-center text-[16px] leading-[1.6]"
+				style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
+			/>
+			<div className="flex items-center gap-2" aria-hidden>
+				{RATING_SCALE.map((rating) => (
+					<StarIcon
+						key={rating}
+						size={30}
+						weight={block.style === "filled" ? "fill" : "regular"}
+						color={EMAIL_COLOR.brand}
+					/>
+				))}
+			</div>
+			{block.lowLabel === "" && block.highLabel === "" ? null : (
+				<div
+					className="flex w-full max-w-[220px] justify-between text-[12px]"
+					style={{ color: EMAIL_COLOR.muted, fontFamily: EMAIL_FONT }}
+				>
+					<span>{block.lowLabel}</span>
+					<span>{block.highLabel}</span>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function RatingBlockSettings({
+	block,
+	onChange,
+}: EmailBlockComponentProps<EmailEditorRatingBlock>) {
+	return (
+		<>
+			<BlockOptionSection title="Contenu">
+				<p className="text-muted-foreground text-xs">
+					La question se saisit et se met en forme directement sur le bloc,
+					comme un paragraphe.
+				</p>
+				<TextOption
+					label="Libellé bas de l'échelle"
+					value={block.lowLabel}
+					onChange={(lowLabel) => onChange({ ...block, lowLabel })}
+					placeholder="Pas du tout"
+				/>
+				<TextOption
+					label="Libellé haut de l'échelle"
+					value={block.highLabel}
+					onChange={(highLabel) => onChange({ ...block, highLabel })}
+					placeholder="Tout à fait"
+				/>
+			</BlockOptionSection>
+			<BlockOptionSection title="Apparence">
+				<SelectOption
+					label="Style"
+					value={block.style}
+					options={STYLE_OPTIONS}
+					onChange={(style) => onChange({ ...block, style })}
+				/>
+			</BlockOptionSection>
+			<BlockOptionSection title="Lien">
+				<LinkOption
+					value={block.href}
+					onChange={(href) => onChange({ ...block, href })}
+					description="Chaque étoile pointe vers cette adresse avec « rating=1 » à « rating=5 » ajouté : les cinq notes sont donc comptées séparément dans les statistiques de clic."
+				/>
+			</BlockOptionSection>
+		</>
+	);
+}
+
+export const ratingBlockDefinition: EmailBlockDefinition<EmailEditorRatingBlock> =
+	{
+		label: "Notation",
+		icon: StarIcon,
+		View: RatingBlockView,
+		Settings: RatingBlockSettings,
+	};

package/src/blocks/rich-text-editable.tsx

@@ -0,0 +1,88 @@
+import { useLayoutEffect, useRef } from "react";
+import {
+	editorElementToTextSpans,
+	textSpansToEditorHtml,
+	textSpansToPlainText,
+} from "#/document/rich-text.ts";
+import type { EmailEditorTextSpan } from "#/document/types.ts";
+
+/**
+ * The in-place rich-text surface shared by every block that holds spans (the
+ * paragraph, a list item). Bold, italic, underline and links are applied from
+ * the block toolbar, which acts on the live selection — so this component only
+ * has to keep the DOM and the span model in sync.
+ *
+ * The DOM is rewritten only when the document changes from *outside* the
+ * editable, which is what keeps the caret from jumping while typing.
+ */
+export function RichTextEditable({
+	spans,
+	onChange,
+	ariaLabel,
+	placeholder,
+	className,
+	style,
+}: {
+	spans: ReadonlyArray<EmailEditorTextSpan>;
+	onChange: (spans: ReadonlyArray<EmailEditorTextSpan>) => void;
+	ariaLabel: string;
+	placeholder: string;
+	className?: string;
+	style?: React.CSSProperties;
+}) {
+	const editableRef = useRef<HTMLDivElement>(null);
+	const renderedHtmlRef = useRef<string | null>(null);
+	const html = textSpansToEditorHtml(spans);
+
+	useLayoutEffect(() => {
+		const editable = editableRef.current;
+		if (editable && html !== renderedHtmlRef.current) {
+			editable.innerHTML = html;
+			renderedHtmlRef.current = html;
+		}
+	}, [html]);
+
+	const handleInput = () => {
+		const editable = editableRef.current;
+		if (!editable) {
+			return;
+		}
+		const next = editorElementToTextSpans(editable);
+		// Remember the normalized serialization: when the parent echoes the
+		// change back, the effect sees the same html and leaves the DOM (and
+		// the caret) alone.
+		renderedHtmlRef.current = textSpansToEditorHtml(next);
+		onChange(next);
+	};
+
+	const empty = textSpansToPlainText(spans).trim() === "";
+
+	return (
+		// biome-ignore lint/a11y/useSemanticElements: rich text needs contentEditable; the div IS the text box.
+		// biome-ignore lint/a11y/useFocusableInteractive: contentEditable elements are natively focusable.
+		<div
+			ref={editableRef}
+			role="textbox"
+			aria-multiline="true"
+			aria-label={ariaLabel}
+			contentEditable
+			suppressContentEditableWarning
+			data-placeholder={placeholder}
+			onInput={handleInput}
+			className={
+				// `min-h-[1lh]` keeps one line of height while the box is empty: a
+				// collapsed contentEditable would let the absolutely-positioned
+				// placeholder spill over whatever follows the block.
+				`relative min-h-[1lh] w-full whitespace-pre-wrap break-words outline-none [&_a]:text-[#151b77] [&_a]:underline ${className ?? ""} ` +
+				(empty
+					? // `inset-x-0` matters: without horizontal offsets the pseudo-element
+						// takes its static position, which under a centred block starts at
+						// the middle of the line and wraps. Spanning the full width lets it
+						// inherit the block's own text alignment instead.
+						"before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:opacity-40 before:content-[attr(data-placeholder)]"
+					: "")
+			}
+			style={style}
+		/>
+	);
+}