// blocks.jsx — email content renderers + selectable block shell
const SOCIAL_SVGS = {
facebook: (
),
instagram: (
),
whatsapp: (
),
linkedin: (
),
};
function socialUrl(key, value) {
if (!value || !value.trim()) return null;
const v = value.trim();
if (v.startsWith('http')) return v;
if (key === 'facebook') return 'https://facebook.com/' + v;
if (key === 'instagram') return 'https://instagram.com/' + v;
if (key === 'whatsapp') return 'https://wa.me/' + v;
if (key === 'linkedin') return 'https://linkedin.com/in/' + v;
return v;
}
const TYPE_META = {
header: { label: "Header", settings: "Header settings" },
offer: { label: "Offer", settings: "Offer settings" },
cruise: { label: "Cruise", settings: "Cruise settings" },
text: { label: "Text", settings: "Text settings" },
image: { label: "Image", settings: "Image settings" },
video: { label: "Video", settings: "Video settings" },
footer: { label: "Footer", settings: "Footer settings" },
};
// ---- individual renderers (read from block.props) ----
function HeaderBlock({ p }) {
const { Phone } = window.Icons;
const bg = p.bgColor || '#0A6E6E';
const fg = p.textColor || '#ffffff';
const socials = p.socials || {};
const socialLinks = ['facebook', 'instagram', 'whatsapp', 'linkedin']
.map(k => ({ key: k, url: socialUrl(k, socials[k]) }))
.filter(e => e.url);
return (
{(p.logoUrl && p.logoUrl.trim())
?
:
{p.logoText || p.brand || 'Brand name'}
}
{p.tagline ?
{p.tagline}
: null}
{p.phone ? (
{p.phone}
) : null}
{socialLinks.length > 0 && (
)}
{p.badge ? {p.badge} : null}
{!hasImg && (
Holiday image
)}
{p.destination || "Destination"}
{p.price ? {p.price} : null}
{p.headline ?
{p.headline}
: null}
{p.availability ? (
{p.availability}
) : null}
{p.buttonText || "View this offer"}
{p.operator ?
Operated by {p.operator}
: null}
);
}
function CruiseBlock({ p }) {
const { Cruise } = window.Icons;
const hasImg = p.imageUrl && p.imageUrl.trim();
const detailParts = [
p.departureDate,
p.duration && `${p.duration} nights`,
p.departurePort,
p.regions,
].filter(Boolean);
return (
{p.promoBadge ? (
{p.promoBadge}
) : null}
{!hasImg && (
Cruise image
)}
{p.cruiseName || "Cruise name"}
{p.price ? {p.price} : null}
{p.operatorLine ?
{p.operatorLine}
: null}
{detailParts.length > 0 ?
{detailParts.join(' · ')}
: null}
{p.teaser ?
{p.teaser}
: null}
View cruise
{p.operatorLine ?
Operated by {p.operatorLine.split('·')[0].trim()}
: null}
);
}
const _fmtBtnStyle = {
background: 'none', border: 'none', color: '#ffffff',
width: '28px', height: '28px', borderRadius: '4px',
cursor: 'pointer', fontSize: '13px', fontWeight: '600',
display: 'flex', alignItems: 'center', justifyContent: 'center',
};
function FormatToolbar({ position, onFormat, onLinkModeChange }) {
const [linkMode, setLinkMode] = React.useState(false);
const [linkUrl, setLinkUrl] = React.useState('https://');
const inputRef = React.useRef(null);
React.useEffect(() => {
if (linkMode && inputRef.current) inputRef.current.focus();
}, [linkMode]);
if (!position) return null;
const enterLink = () => { setLinkMode(true); onLinkModeChange && onLinkModeChange(true); };
const exitLink = () => { setLinkMode(false); setLinkUrl('https://'); onLinkModeChange && onLinkModeChange(false); };
const applyLink = () => { onFormat('link', linkUrl); exitLink(); };
const toolbarStyle = {
position: 'fixed',
top: position.top - 44,
left: position.left,
zIndex: 1000,
background: '#1a1918',
borderRadius: '6px',
padding: '4px 6px',
display: 'flex',
alignItems: 'center',
gap: '4px',
boxShadow: '0 2px 8px rgba(0,0,0,0.35)',
transform: 'translateX(-50%)',
};
if (linkMode) {
return (
setLinkUrl(e.target.value)}
onMouseDown={e => e.stopPropagation()}
onKeyDown={e => {
if (e.key === 'Enter') { applyLink(); }
if (e.key === 'Escape') { exitLink(); }
}}
placeholder="https://"
style={{
background: '#2c2c2a', border: '1px solid #4a4a48', borderRadius: '4px',
color: '#ffffff', padding: '3px 8px', fontSize: '12px',
width: '200px', outline: 'none', fontFamily: 'inherit',
}}
/>
);
}
return (
);
}
function TextBlock({ p, onChange }) {
const ref = React.useRef(null);
const [toolbarPos, setToolbarPos] = React.useState(null);
const linkActiveRef = React.useRef(false);
React.useLayoutEffect(() => {
if (ref.current) ref.current.innerHTML = p.html || '';
}, []);
React.useEffect(() => {
const el = ref.current;
if (el && document.activeElement !== el) el.innerHTML = p.html || '';
}, [p.html]);
const handleSelect = () => {
const sel = window.getSelection();
if (!sel || sel.isCollapsed) { setToolbarPos(null); return; }
const rect = sel.getRangeAt(0).getBoundingClientRect();
if (rect.width === 0) { setToolbarPos(null); return; }
setToolbarPos({ top: rect.top, left: rect.left + rect.width / 2 });
};
const handleFormat = (command, value = null) => {
if (command === 'link') {
if (value) document.execCommand('createLink', false, value);
} else {
document.execCommand(command, false, null);
}
if (ref.current && onChange) onChange('html', ref.current.innerHTML);
setToolbarPos(null);
};
return (
e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
onBlur={() => setTimeout(() => { if (!linkActiveRef.current) setToolbarPos(null); }, 150)}
onInput={(e) => onChange && onChange('html', e.currentTarget.innerHTML)}
style={{ outline: 'none', minHeight: '3em', cursor: 'text' }}
/>
{toolbarPos && ReactDOM.createPortal(
{ linkActiveRef.current = active; }} />,
document.body
)}
);
}
function ImageBlock({ p }) {
const Image = window.Icons.Image;
const hasImg = p.imageUrl && p.imageUrl.trim();
return (
{!hasImg && Image — set a URL}
);
}
function VideoBlock({ p }) {
const Video = window.Icons.Video;
const hasImg = p.thumbUrl && p.thumbUrl.trim();
return (
{p.title ? {p.title} : null}
);
}
function FooterBlock({ p }) {
const bg = p.bgColor || '#F0F1F4';
const fg = p.textColor || '#4D4A44';
return (
{p.company || "Company name"}
{p.address ?
{p.address}
: null}
);
}
const RENDERERS = {
header: HeaderBlock, offer: OfferBlock, cruise: CruiseBlock, text: TextBlock,
image: ImageBlock, video: VideoBlock, footer: FooterBlock,
};
// ---- selectable shell with action rail ----
function BlockShell({ block, index, total, selected, onSelect, onMove, onDup, onDelete, onChange }) {
const R = RENDERERS[block.type];
const { ArrowUp, ArrowDown, Copy, Trash } = window.Icons;
return (
{ e.stopPropagation(); onSelect(block.id); }}>
{selected &&
{TYPE_META[block.type].label}}
onChange(block.id, key, val) : undefined} />
{selected && (
e.stopPropagation()}>
);
}
window.TYPE_META = TYPE_META;
window.BlockShell = BlockShell;