email-block-editor → content-editor + createEmailFeatures

// Before
<EmailBlockEditor
	blocks={blocks}
	document={document}
	onDocumentChange={setDocument}
/>
 
// After
const FEATURES = createEmailFeatures({ currencies: ["EUR", "USD"] });
 
<ContentEditor.Root
	features={FEATURES}
	appearance="email"
	value={value}
	onValueChange={setValue}
/>

import type {
	ContentColumnsNode,
	ContentText,
	ContentValue,
} from "@voila.dev/ui/content-editor/reader";
 
const VOID = [{ text: "" }] as const;
const VARIABLES = ["firstName", "lastName", "email"] as const;
const PLACEHOLDER = new RegExp(`(\\{\\{(?:${VARIABLES.join("|")})\\}\\})`);
 
const LIST_STYLE = { bullet: "disc", number: "decimal", badge: "badge" } as const;
 
// `LegacyDocument`, `LegacyBlock` and `LegacySpan` are the shapes you stored:
// `{ version: 1, blocks: [...] }` with the blocks listed in the table above.
// Copy them from your own schema, the kit no longer exports them.
 
const marks = (span: LegacySpan) => ({
	...(span.bold === true ? { bold: true } : {}),
	...(span.italic === true ? { italic: true } : {}),
	...(span.underline === true ? { underline: true } : {}),
});
 
/** A `{{firstName}}` typed in a text becomes a variable node. */
const withVariables = (text: string, textMarks: Omit<ContentText, "text">) =>
	text
		.split(PLACEHOLDER)
		.filter((part, index) => part !== "" || index === 0)
		.map((part) =>
			PLACEHOLDER.test(part)
				? { type: "variable", name: part.slice(2, -2), children: VOID }
				: { text: part, ...textMarks },
		);
 
const spanInlines = (span: LegacySpan) => {
	const children = withVariables(span.text, marks(span));
	return span.href === undefined
		? children
		: [{ type: "a", url: span.href, children }];
};
 
const inlines = (spans: ReadonlyArray<LegacySpan>) => {
	const children = spans.flatMap(spanInlines);
	return children.length === 0 ? [{ text: "" }] : children;
};
 
const plain = (text: string) => inlines([{ text }]);
 
/** A list is a run of paragraphs, numbered from the second item on. */
const listItems = (block: LegacyListBlock) => {
	const listStyleType = LIST_STYLE[block.marker];
	return block.items.map((item, index) => ({
		type: "p",
		id: `${block.id}-${index}`,
		indent: 1,
		listStyleType,
		...(listStyleType !== "disc" && index > 0 ? { listStart: index + 1 } : {}),
		children: inlines(item.spans),
	}));
};
 
const cell = (type: "td" | "th", text: string) => ({
	type,
	children: [{ type: "p", children: [{ text }] }],
});
 
const table = (block: LegacyTableBlock) => {
	const row = (cells: ReadonlyArray<string>, type: "td" | "th") => ({
		type: "tr",
		children: block.columns.map((_, index) => cell(type, cells[index] ?? "")),
	});
	return {
		type: "table",
		id: block.id,
		columns: block.columns.map((column) => ({ align: column.align })),
		headerRow: block.headerRow,
		children: [
			...(block.headerRow ? [row(block.columns.map((c) => c.label), "th")] : []),
			...block.rows.map((cells) => row(cells, "td")),
		],
	};
};
 
/** One block in, its nodes out: the switch is exhaustive on the legacy union. */
const leafNodes = (block: LegacyLeafBlock): ReadonlyArray<unknown> => {
	switch (block.type) {
		case "heading":
			return [{ type: block.level === 1 ? "h1" : "h2", id: block.id, children: plain(block.text) }];
		case "paragraph":
			return [{ type: "p", id: block.id, children: inlines(block.spans) }];
		case "list":
			return listItems(block);
		case "highlight":
			return [{ type: "highlight", id: block.id, align: block.align, children: plain(block.text) }];
		case "finePrint":
			return [{ type: "fine-print", id: block.id, children: inlines(block.spans) }];
		case "rating":
			return [{
				type: "rating",
				id: block.id,
				style: block.style,
				lowLabel: block.lowLabel,
				highLabel: block.highLabel,
				href: block.href,
				children: inlines(block.question),
			}];
		case "button":
			return [{
				type: "button",
				id: block.id,
				label: block.label,
				href: block.href,
				variant: block.variant,
				align: block.align,
				children: VOID,
			}];
		case "image":
			return [{
				type: "image",
				id: block.id,
				url: block.src,
				alt: block.alt,
				href: block.href,
				size: block.width,
				overlay: block.overlay,
				children: VOID,
			}];
		case "divider":
			return [{ type: "hr", id: block.id, children: VOID }];
		case "stat":
			return [{
				type: "stat",
				id: block.id,
				value: block.value,
				label: block.label,
				description: block.description,
				align: block.align,
				children: VOID,
			}];
		case "table":
			return [table(block)];
		case "article":
		case "product":
		case "offer":
			return [{ ...block, children: VOID }];
	}
};
 
/**
 * A grid held any number of cells; a `columns` node holds one row. Cut the
 * cells into rows of `desktopColumns`, the first row keeping the grid's id.
 */
const columnRows = (block: LegacyGridBlock) => {
	const rows: Array<ContentColumnsNode> = [];
	for (let start = 0; start < block.children.length; start += block.desktopColumns) {
		rows.push({
			type: "columns",
			id: rows.length === 0 ? block.id : `${block.id}-${rows.length}`,
			desktopColumns: block.desktopColumns,
			mobileColumns: block.mobileColumns,
			children: block.children
				.slice(start, start + block.desktopColumns)
				.map((child) => ({ type: "column", children: leafNodes(child) })),
		} as ContentColumnsNode);
	}
	return rows;
};
 
export const legacyDocumentToValue = (document: LegacyDocument): ContentValue =>
	document.blocks.flatMap((block) =>
		block.type === "grid" ? columnRows(block) : leafNodes(block),
	) as ContentValue;