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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@voila.dev/ui-email-block-editor",
-	"version": "1.1.9",
+	"version": "1.1.10",
 	"type": "module",
 	"description": "The email template editor that lives in your app, not someone else's SaaS.",
 	"license": "MIT",

package/src/blocks/article-block.tsx

@@ -32,18 +32,18 @@ function ArticleBlockView({
 	return (
 		<EmailCardShell image={block.image}>
 			<BlockTextInput
-				ariaLabel="Titre de l'article"
+				ariaLabel="Article title"
 				value={block.title}
-				placeholder="Titre de l'article"
+				placeholder="Article title"
 				onChange={(title) => onChange({ ...block, title })}
 				className="font-bold text-[17px] leading-[1.3]"
 				style={{ color: EMAIL_COLOR.brand }}
 			/>
 			{meta === "" ? null : <EmailCardMeta>{meta}</EmailCardMeta>}
 			<textarea
-				aria-label="Résumé de l'article"
+				aria-label="Article summary"
 				value={block.description}
-				placeholder="Le résumé de l'article."
+				placeholder="The article summary."
 				rows={2}
 				onChange={(event) =>
 					onChange({ ...block, description: event.target.value })
@@ -61,33 +61,33 @@ function ArticleBlockSettings({
 }: EmailBlockComponentProps<EmailEditorArticleBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<TextOption
-					label="Titre"
+					label="Title"
 					value={block.title}
 					onChange={(title) => onChange({ ...block, title })}
 				/>
 				<TextAreaOption
-					label="Résumé"
+					label="Summary"
 					value={block.description}
 					onChange={(description) => onChange({ ...block, description })}
 				/>
 				<TextOption
-					label="Auteur"
+					label="Author"
 					value={block.author}
 					onChange={(author) => onChange({ ...block, author })}
 				/>
 				<TextOption
-					label="Date de publication"
+					label="Publication date"
 					value={block.publishDate}
 					onChange={(publishDate) => onChange({ ...block, publishDate })}
 					placeholder="2026-07-20"
-					description="Format AAAA-MM-JJ ; la date est écrite dans la langue du destinataire à l'envoi."
+					description="YYYY-MM-DD format; the date is written in the recipient's language at send time."
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<TextOption
-					label="Adresse de l'image"
+					label="Image URL"
 					value={block.image.src}
 					onChange={(src) =>
 						onChange({ ...block, image: { ...block.image, src } })
@@ -95,18 +95,18 @@ function ArticleBlockSettings({
 					placeholder="https://"
 				/>
 				<TextOption
-					label="Texte alternatif"
+					label="Alt text"
 					value={block.image.alt}
 					onChange={(alt) =>
 						onChange({ ...block, image: { ...block.image, alt } })
 					}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Lien">
+			<BlockOptionSection title="Link">
 				<LinkOption
 					value={block.href}
 					onChange={(href) => onChange({ ...block, href })}
-					description="La carte entière renvoie vers cette adresse."
+					description="The whole card links to this address."
 				/>
 			</BlockOptionSection>
 		</>

package/src/blocks/block-definitions.tsx

@@ -47,7 +47,7 @@ export interface EmailBlockComponentProps<
 export interface EmailBlockDefinition<
 	B extends EmailEditorBlock = EmailEditorBlock,
 > {
-	/** French label shown in the add-block menu. */
+	/** Label shown in the add-block menu. */
 	readonly label: string;
 	readonly icon: Icon;
 	/** The WYSIWYG rendering, edited in place on the canvas. */

package/src/blocks/button-block.tsx

@@ -21,8 +21,8 @@ const VARIANT_OPTIONS: ReadonlyArray<{
 	readonly value: EmailEditorButtonVariant;
 	readonly label: string;
 }> = [
-	{ value: "primary", label: "Plein (couleur de marque)" },
-	{ value: "secondary", label: "Contour" },
+	{ value: "primary", label: "Filled (brand color)" },
+	{ value: "secondary", label: "Outline" },
 ];
 
 /** Flexbox equivalents of the email's `align` attribute. */
@@ -53,12 +53,12 @@ function ButtonBlockView({
 				}}
 			>
 				<input
-					aria-label="Libellé du bouton"
+					aria-label="Button label"
 					value={block.label}
 					onChange={(event) =>
 						onChange({ ...block, label: event.target.value })
 					}
-					placeholder="Votre bouton"
+					placeholder="Your button"
 					className="min-w-16 max-w-full border-none bg-transparent p-0 text-center font-semibold text-[15px] leading-none outline-none [field-sizing:content] placeholder:opacity-50"
 					style={{
 						fontFamily: EMAIL_FONT,
@@ -76,14 +76,14 @@ function ButtonBlockSettings({
 }: EmailBlockComponentProps<EmailEditorButtonBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<TextOption
-					label="Libellé"
+					label="Label"
 					value={block.label}
 					onChange={(label) => onChange({ ...block, label })}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<AlignmentOption
 					value={block.align}
 					onChange={(align) => onChange({ ...block, align })}
@@ -95,12 +95,12 @@ function ButtonBlockSettings({
 					onChange={(variant) => onChange({ ...block, variant })}
 					description={
 						block.variant === "secondary"
-							? "Outlook (moteur Word) ignore les coins arrondis : le contour y sera à angles droits."
+							? "Outlook (Word engine) ignores rounded corners: the outline will have square corners there."
 							: undefined
 					}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Lien">
+			<BlockOptionSection title="Link">
 				<LinkOption
 					value={block.href}
 					onChange={(href) => onChange({ ...block, href })}
@@ -112,7 +112,7 @@ function ButtonBlockSettings({
 
 export const buttonBlockDefinition: EmailBlockDefinition<EmailEditorButtonBlock> =
 	{
-		label: "Bouton",
+		label: "Button",
 		icon: CursorClickIcon,
 		View: ButtonBlockView,
 		Settings: ButtonBlockSettings,

package/src/blocks/divider-block.tsx

@@ -12,7 +12,7 @@ function DividerBlockView() {
 
 export const dividerBlockDefinition: EmailBlockDefinition<EmailEditorDividerBlock> =
 	{
-		label: "Séparateur",
+		label: "Divider",
 		icon: MinusIcon,
 		View: DividerBlockView,
 		Settings: null,

package/src/blocks/grid-block.tsx

@@ -34,7 +34,7 @@ const MOBILE_COLUMN_OPTIONS: ReadonlyArray<{
 
 /**
  * The layout shell of a multi-column row. The cells themselves — the child
- * block rows and the « ajouter » slot — are composed by the canvas and slotted
+ * block rows and the add slot — are composed by the canvas and slotted
  * in as `children`, so the grid owns the layout and nothing else.
  *
  * The cells mirror the count the reader will actually get in the previewed
@@ -65,22 +65,22 @@ function GridBlockSettings({
 	onChange,
 }: EmailBlockComponentProps<EmailEditorGridBlock>) {
 	return (
-		<BlockOptionSection title="Apparence">
+		<BlockOptionSection title="Appearance">
 			<SegmentedOption
-				label="Colonnes (ordinateur)"
+				label="Columns (desktop)"
 				value={block.desktopColumns}
 				options={DESKTOP_COLUMN_OPTIONS}
 				onChange={(desktopColumns) => onChange({ ...block, desktopColumns })}
 			/>
 			<SegmentedOption
-				label="Colonnes (mobile)"
+				label="Columns (mobile)"
 				value={block.mobileColumns}
 				options={MOBILE_COLUMN_OPTIONS}
 				onChange={(mobileColumns) => onChange({ ...block, mobileColumns })}
 				description={
 					block.mobileColumns === block.desktopColumns
 						? undefined
-						: "Un nombre de colonnes différent sur mobile repose sur une media query : l'application Gmail sur compte tiers l'ignore et repasse à une colonne."
+						: "A different column count on mobile relies on a media query: the Gmail app on a third-party account ignores it and falls back to one column."
 				}
 			/>
 		</BlockOptionSection>
@@ -88,7 +88,7 @@ function GridBlockSettings({
 }
 
 export const gridBlockDefinition: EmailBlockDefinition<EmailEditorGridBlock> = {
-	label: "Colonnes",
+	label: "Columns",
 	icon: ColumnsIcon,
 	View: GridBlockView,
 	Settings: GridBlockSettings,

package/src/blocks/heading-block.tsx

@@ -19,8 +19,8 @@ export const EMAIL_HEADING_STYLE: {
 		readonly label: string;
 	};
 } = {
-	1: { fontSize: "22px", label: "Titre principal (H1)" },
-	2: { fontSize: "17px", label: "Sous-titre (H2)" },
+	1: { fontSize: "22px", label: "Main title (H1)" },
+	2: { fontSize: "17px", label: "Subtitle (H2)" },
 };
 
 const HEADING_LEVEL_OPTIONS: ReadonlyArray<{
@@ -42,10 +42,10 @@ function HeadingBlockView({
 }: EmailBlockComponentProps<EmailEditorHeadingBlock>) {
 	return (
 		<BlockTextInput
-			ariaLabel="Titre"
+			ariaLabel="Heading"
 			value={block.text}
 			onChange={(text) => onChange({ ...block, text })}
-			placeholder="Votre titre"
+			placeholder="Your heading"
 			className="font-bold leading-[1.3]"
 			style={{
 				fontFamily: EMAIL_FONT,
@@ -63,12 +63,12 @@ function HeadingBlockSettings({
 	return (
 		<>
 			<TextOption
-				label="Texte"
+				label="Text"
 				value={block.text}
 				onChange={(text) => onChange({ ...block, text })}
 			/>
 			<SelectOption
-				label="Niveau"
+				label="Level"
 				value={block.level}
 				options={HEADING_LEVEL_OPTIONS}
 				onChange={(level) => onChange({ ...block, level })}
@@ -79,7 +79,7 @@ function HeadingBlockSettings({
 
 export const headingBlockDefinition: EmailBlockDefinition<EmailEditorHeadingBlock> =
 	{
-		label: "Titre",
+		label: "Heading",
 		icon: TextHIcon,
 		View: HeadingBlockView,
 		Settings: HeadingBlockSettings,

package/src/blocks/image-block.tsx

@@ -34,16 +34,16 @@ const WIDTH_OPTIONS: ReadonlyArray<{
 	readonly value: EmailEditorImageWidth;
 	readonly label: string;
 }> = [
-	{ value: "full", label: "Pleine largeur" },
-	{ value: "contained", label: "Largeur réduite (centrée)" },
+	{ value: "full", label: "Full width" },
+	{ value: "contained", label: "Reduced width (centered)" },
 ];
 
 const OVERLAY_OPTIONS: ReadonlyArray<{
 	readonly value: EmailEditorImageOverlay;
 	readonly label: string;
 }> = [
-	{ value: "none", label: "Aucune" },
-	{ value: "play", label: "Bouton lecture (vignette vidéo)" },
+	{ value: "none", label: "None" },
+	{ value: "play", label: "Play button (video thumbnail)" },
 ];
 
 /** The play badge composited over a video thumbnail. */
@@ -135,7 +135,7 @@ function ImageDropZone({
 				}}
 			>
 				<ImageIcon size={24} aria-hidden />
-				{uploading ? "Téléversement en cours…" : "Ajouter une image"}
+				{uploading ? "Uploading…" : "Add an image"}
 			</button>
 			<input
 				ref={fileInputRef}
@@ -172,7 +172,7 @@ function ImageUploadButton({
 				onClick={() => fileInputRef.current?.click()}
 			>
 				<UploadSimpleIcon aria-hidden />
-				{block.src === "" ? "Téléverser une image" : "Remplacer l'image"}
+				{block.src === "" ? "Upload an image" : "Replace the image"}
 			</Button>
 			<input
 				ref={fileInputRef}
@@ -198,15 +198,15 @@ function ImageBlockSettings({
 }: EmailBlockComponentProps<EmailEditorImageBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<TextOption
-					label="Texte alternatif"
+					label="Alt text"
 					value={block.alt}
 					onChange={(alt) => onChange({ ...block, alt })}
-					description="Affiché quand l'image est bloquée par la messagerie."
+					description="Shown when the email client blocks the image."
 				/>
 				<TextOption
-					label="Adresse de l'image"
+					label="Image URL"
 					value={block.src}
 					onChange={(src) => onChange({ ...block, src })}
 					placeholder="https://"
@@ -219,36 +219,36 @@ function ImageBlockSettings({
 					/>
 				) : null}
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<SelectOption
-					label="Largeur"
+					label="Width"
 					value={block.width}
 					options={WIDTH_OPTIONS}
 					onChange={(width) => onChange({ ...block, width })}
 				/>
 				<SelectOption
-					label="Superposition"
+					label="Overlay"
 					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."
+							? "No email client plays an embedded video: the thumbnail links to the URL below. Outlook shows the badge under the image."
 							: undefined
 					}
 				/>
 				<ToggleOption
-					label="Coins arrondis"
+					label="Rounded corners"
 					checked={block.rounded}
 					onChange={(rounded) => onChange({ ...block, rounded })}
-					description="Outlook (moteur Word) affiche toujours des angles droits."
+					description="Outlook (Word engine) always renders square corners."
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Lien">
+			<BlockOptionSection title="Link">
 				<LinkOption
 					value={block.href}
 					onChange={(href) => onChange({ ...block, href })}
-					description="Laissez vide pour une image non cliquable."
+					description="Leave empty for a non-clickable image."
 				/>
 			</BlockOptionSection>
 		</>

package/src/blocks/list-block.tsx

@@ -17,9 +17,9 @@ 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" },
+	{ value: "bullet", label: "Bullet" },
+	{ value: "number", label: "Number" },
+	{ value: "badge", label: "Numbered badge" },
 ];
 
 /** The marker shown before an item, mirroring the domain `emailList`. */
@@ -109,9 +109,9 @@ function ListItemRow({
 			<div className="flex min-w-0 flex-1 flex-col">
 				{showTitle ? (
 					<input
-						aria-label={`Titre de l'élément ${index + 1}`}
+						aria-label={`Item ${index + 1} title`}
 						value={item.title ?? ""}
-						placeholder="Titre (optionnel)"
+						placeholder="Title (optional)"
 						onChange={(event) =>
 							onChange({ ...item, title: event.target.value })
 						}
@@ -122,8 +122,8 @@ function ListItemRow({
 				<RichTextEditable
 					spans={item.spans}
 					onChange={(spans) => onChange({ ...item, spans })}
-					ariaLabel={`Élément ${index + 1}`}
-					placeholder="Votre texte"
+					ariaLabel={`Item ${index + 1}`}
+					placeholder="Your text"
 					className="text-[16px] leading-[1.6]"
 					style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
 				/>
@@ -139,13 +139,13 @@ function ListBlockSettings({
 	return (
 		<>
 			<SelectOption
-				label="Marqueur"
+				label="Marker"
 				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>
+				<span className="font-medium text-sm">Items</span>
 				{block.items.map((item, index) => (
 					<div
 						key={index}
@@ -157,12 +157,12 @@ function ListBlockSettings({
 									.map((span) => span.text)
 									.join("")
 									.trim() ||
-								`Élément ${index + 1}`}
+								`Item ${index + 1}`}
 						</span>
 						<Button
 							variant="ghost"
 							size="icon-sm"
-							aria-label={`Supprimer l'élément ${index + 1}`}
+							aria-label={`Remove item ${index + 1}`}
 							disabled={block.items.length === 1}
 							onClick={() =>
 								onChange({
@@ -183,19 +183,18 @@ function ListBlockSettings({
 					}
 				>
 					<PlusIcon aria-hidden />
-					Ajouter un élément
+					Add an item
 				</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.
+				Each item's text is formatted from the block toolbar, like a paragraph.
 			</p>
 		</>
 	);
 }
 
 export const listBlockDefinition: EmailBlockDefinition<EmailEditorListBlock> = {
-	label: "Liste",
+	label: "List",
 	icon: ListBulletsIcon,
 	View: ListBlockView,
 	Settings: ListBlockSettings,

package/src/blocks/offer-block.tsx

@@ -78,9 +78,9 @@ function OfferHeader({
 				</span>
 			)}
 			<BlockTextInput
-				ariaLabel="Nom de l'offre"
+				ariaLabel="Offer name"
 				value={block.name}
-				placeholder="Nom de l'offre"
+				placeholder="Offer name"
 				onChange={(name) => onChange({ ...block, name })}
 				className="font-bold text-[17px] leading-[1.3]"
 				style={{ color: EMAIL_COLOR.brand }}
@@ -100,7 +100,7 @@ function OfferHeader({
 	);
 }
 
-/** The ticked « points inclus », mirroring the bulleted list the renderer
+/** The ticked included features, mirroring the bulleted list the renderer
  * emits for them. */
 function OfferFeatureList({ features }: { features: ReadonlyArray<string> }) {
 	if (features.length === 0) {
@@ -135,11 +135,11 @@ function OfferFeatureSettings({
 }) {
 	return (
 		<div className="flex flex-col gap-2">
-			<span className="font-medium text-sm">Points inclus</span>
+			<span className="font-medium text-sm">Included features</span>
 			{block.features.map((feature, index) => (
 				<div key={index} className="flex items-center gap-2">
 					<input
-						aria-label={`Point inclus ${index + 1}`}
+						aria-label={`Included feature ${index + 1}`}
 						value={feature}
 						onChange={(event) =>
 							onChange({
@@ -154,7 +154,7 @@ function OfferFeatureSettings({
 					<Button
 						variant="ghost"
 						size="icon-sm"
-						aria-label={`Supprimer le point ${index + 1}`}
+						aria-label={`Remove feature ${index + 1}`}
 						onClick={() =>
 							onChange({
 								...block,
@@ -174,7 +174,7 @@ function OfferFeatureSettings({
 				}
 			>
 				<PlusIcon aria-hidden />
-				Ajouter un point
+				Add a feature
 			</Button>
 		</div>
 	);
@@ -186,29 +186,29 @@ function OfferBlockSettings({
 }: EmailBlockComponentProps<EmailEditorOfferBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<TextOption
-					label="Surtitre"
+					label="Eyebrow"
 					value={block.eyebrow}
 					onChange={(eyebrow) => onChange({ ...block, eyebrow })}
-					placeholder="Le plus choisi"
+					placeholder="Most popular"
 				/>
 				<TextOption
-					label="Nom"
+					label="Name"
 					value={block.name}
 					onChange={(name) => onChange({ ...block, name })}
 				/>
 				<MoneyOption
-					label="Prix"
+					label="Price"
 					value={block.price}
 					onChange={(price) => onChange({ ...block, price })}
 				/>
 				<TextOption
-					label="Périodicité"
+					label="Billing period"
 					value={block.period}
 					onChange={(period) => onChange({ ...block, period })}
-					placeholder="par mois"
-					description="Laissez vide pour un tarif unique."
+					placeholder="per month"
+					description="Leave empty for a one-off price."
 				/>
 				<TextAreaOption
 					label="Description"
@@ -217,37 +217,37 @@ function OfferBlockSettings({
 				/>
 				<OfferFeatureSettings block={block} onChange={onChange} />
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<ToggleOption
-					label="Mettre en avant"
+					label="Highlight"
 					checked={block.highlighted}
 					onChange={(highlighted) => onChange({ ...block, highlighted })}
-					description="Encadre la carte dans la couleur de marque. Outlook (moteur Word) affiche des angles droits."
+					description="Frames the card in the brand color. Outlook (Word engine) renders square corners."
 				/>
 				<TextOption
-					label="Adresse de l'image"
+					label="Image URL"
 					value={block.image.src}
 					onChange={(src) =>
 						onChange({ ...block, image: { ...block.image, src } })
 					}
 					placeholder="https://"
-					description="Laissez vide pour une offre sans visuel."
+					description="Leave empty for an offer without a visual."
 				/>
 				<TextOption
-					label="Texte alternatif"
+					label="Alt text"
 					value={block.image.alt}
 					onChange={(alt) =>
 						onChange({ ...block, image: { ...block.image, alt } })
 					}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Lien">
+			<BlockOptionSection title="Link">
 				<TextOption
-					label="Libellé du bouton"
+					label="Button label"
 					value={block.buttonLabel}
 					onChange={(buttonLabel) => onChange({ ...block, buttonLabel })}
-					placeholder="Choisir cette offre"
-					description="Laissez vide pour une carte sans bouton."
+					placeholder="Choose this offer"
+					description="Leave empty for a card without a button."
 				/>
 				<LinkOption
 					value={block.buttonHref}
@@ -260,7 +260,7 @@ function OfferBlockSettings({
 
 export const offerBlockDefinition: EmailBlockDefinition<EmailEditorOfferBlock> =
 	{
-		label: "Offre",
+		label: "Offer",
 		icon: SealPercentIcon,
 		View: OfferBlockView,
 		Settings: OfferBlockSettings,

package/src/blocks/paragraph-block.tsx

@@ -20,8 +20,8 @@ function ParagraphBlockView({
 		<RichTextEditable
 			spans={block.spans}
 			onChange={(spans) => onChange({ ...block, spans })}
-			ariaLabel="Paragraphe"
-			placeholder="Votre texte. Utilisez {{firstName}} pour personnaliser."
+			ariaLabel="Paragraph"
+			placeholder="Your text. Use {{firstName}} to personalize."
 			className="text-[16px] leading-[1.6]"
 			style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
 		/>
@@ -32,7 +32,7 @@ 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."
+				"Format the text (bold, italic, underline, link) from the block toolbar. Personalize with {{firstName}}, {{lastName}} or {{email}}; the contact's value is substituted at send time."
 			}
 		</p>
 	);
@@ -40,7 +40,7 @@ function ParagraphBlockSettings() {
 
 export const paragraphBlockDefinition: EmailBlockDefinition<EmailEditorParagraphBlock> =
 	{
-		label: "Paragraphe",
+		label: "Paragraph",
 		icon: TextAlignLeftIcon,
 		View: ParagraphBlockView,
 		Settings: ParagraphBlockSettings,