// Custom "Social" tool for the Unlayer editor. // // The native social tool is disabled in our Unlayer project's server-side // configuration (project 202584) and tools.social.enabled in unlayer.init // cannot override that, so we register our own tool instead. This file is // injected into the editor iframe as an inline customJS string (URL-based // customJS is fetched by Unlayer's servers, which cannot reach localhost). // // Architecture: // * Links are stored as an ordered array on the `links` option: // [{ key: 'facebook', url: 'https://...' }, ...]. Array order == render // order. The legacy flat shape (values.facebook, values.instagram, ...) // is still read so old saved designs keep rendering. // * A custom property editor (`ms_social_links`) renders that array as a // drag-to-reorder list with per-row remove plus an "add network" picker, // replacing the old fixed set of eight text fields. // * All panel copy comes from the I18N object below, which the Rails helper // `unlayer_custom_tools_js` substitutes server-side from the request // locale. Brand names and URL placeholders are intentionally untranslated. // * Exporters emit an empty string when nothing is configured, so English // placeholder copy can never leak into a real email. // // Icons come from Unlayer's public CDN (the same assets the native tool // uses), so exported emails render identically to native social blocks. (function () { var I18N = {"label":"Social","links_title":"Social links","style_title":"Style","icon_style":"Icon style","style_circle":"Circle (brand colors)","style_circle_black":"Circle black","style_circle_white":"Circle white","style_rounded":"Rounded","style_squared":"Squared","icon_size":"Icon size","spacing":"Spacing","alignment":"Alignment","add_network":"Add network","remove":"Remove","drag_reorder":"Drag to reorder","empty_state":"Add social links from the panel on the right"}; var ICON_BASE = 'https://cdn.tools.unlayer.com/social/icons/'; var ICON_TYPES = ['circle', 'circle-black', 'circle-white', 'rounded', 'squared']; var ALIGNMENTS = ['left', 'center', 'right']; // Order here is the order of the "add network" picker. Every key below is // verified to exist on the Unlayer CDN for all five icon styles; do not add // keys without checking (e.g. twitch and website 404). var NETWORKS = [ { key: 'facebook', label: 'Facebook', placeholder: 'https://facebook.com/...' }, { key: 'instagram', label: 'Instagram', placeholder: 'https://instagram.com/...' }, { key: 'x', label: 'X (Twitter)', placeholder: 'https://x.com/...' }, { key: 'linkedin', label: 'LinkedIn', placeholder: 'https://linkedin.com/...' }, { key: 'youtube', label: 'YouTube', placeholder: 'https://youtube.com/...' }, { key: 'tiktok', label: 'TikTok', placeholder: 'https://tiktok.com/...' }, { key: 'whatsapp', label: 'WhatsApp', placeholder: 'https://wa.me/...' }, { key: 'telegram', label: 'Telegram', placeholder: 'https://t.me/...' }, { key: 'pinterest', label: 'Pinterest', placeholder: 'https://pinterest.com/...' }, { key: 'snapchat', label: 'Snapchat', placeholder: 'https://snapchat.com/...' }, { key: 'threads', label: 'Threads', placeholder: 'https://threads.net/...' }, { key: 'discord', label: 'Discord', placeholder: 'https://discord.gg/...' }, { key: 'reddit', label: 'Reddit', placeholder: 'https://reddit.com/...' }, { key: 'medium', label: 'Medium', placeholder: 'https://medium.com/...' }, { key: 'github', label: 'GitHub', placeholder: 'https://github.com/...' }, { key: 'email', label: 'Email', placeholder: 'mail@example.com' } ]; // Order the pre-array tool stored its URLs in, used to migrate old designs. var LEGACY_KEYS = [ 'facebook', 'instagram', 'x', 'linkedin', 'youtube', 'tiktok', 'whatsapp', 'pinterest' ]; var DEFAULT_LINKS = [ { key: 'facebook', url: 'https://www.facebook.com/' }, { key: 'instagram', url: 'https://www.instagram.com/' }, { key: 'x', url: 'https://x.com/' } ]; var NETWORK_BY_KEY = {}; for (var n = 0; n < NETWORKS.length; n++) { NETWORK_BY_KEY[NETWORKS[n].key] = NETWORKS[n]; } function esc(s) { return String(s == null ? '' : s) .replace(/&/g, '&') .replace(/"/g, '"') .replace(//g, '>'); } function tryParseJson(s) { try { return JSON.parse(s); } catch (e) { return null; } } function networkFor(key) { return NETWORK_BY_KEY[String(key || '')] || null; } function iconUrl(iconType, key) { return ICON_BASE + iconType + '/' + key + '.png'; } function normalizeLinks(value) { var links = Array.isArray(value) ? value : (typeof value === 'string' ? tryParseJson(value) : null) || []; var out = []; for (var i = 0; i < links.length; i++) { var link = links[i]; if (!link || typeof link !== 'object') continue; if (!networkFor(link.key)) continue; out.push({ key: String(link.key), url: link.url == null ? '' : String(link.url) }); } return out; } // Reads the links array off a tool's values, falling back to the legacy flat // shape (values.facebook = 'https://...') used by designs saved before the // array rewrite. function resolveLinks(values) { if (!values) return []; if (Array.isArray(values.links) || typeof values.links === 'string') { return normalizeLinks(values.links); } var out = []; for (var i = 0; i < LEGACY_KEYS.length; i++) { var key = LEGACY_KEYS[i]; var url = values[key]; if (typeof url === 'string' && url.trim()) out.push({ key: key, url: url }); } return out; } function normalizeUrl(key, url) { var value = String(url == null ? '' : url).trim(); if (!value) return ''; if (key === 'email') { return /^mailto:/i.test(value) ? value : 'mailto:' + value; } return /^https?:\/\//i.test(value) ? value : 'https://' + value; } // --------------------------------------------------------------------------- // Rendering / export // --------------------------------------------------------------------------- function msSocialHtml(values, forViewer) { values = values || {}; var iconType = ICON_TYPES.indexOf(values.iconType) >= 0 ? values.iconType : 'circle'; var size = parseInt(values.iconSize, 10) || 32; var spacing = parseInt(values.spacing, 10); if (isNaN(spacing) || spacing < 0) spacing = 10; var pad = Math.round(spacing / 2); var align = ALIGNMENTS.indexOf(values.align) >= 0 ? values.align : 'center'; var links = resolveLinks(values); var cells = []; for (var i = 0; i < links.length; i++) { var net = networkFor(links[i].key); if (!net) continue; var url = normalizeUrl(net.key, links[i].url); if (!url) continue; cells.push( '' + '' + '' + '

' + '' + '

' + '' ); } if (!cells.length) { // Exporters must stay empty: placeholder copy would otherwise be sent to // real recipients. Only the in-editor viewer shows the hint. if (!forViewer) return ''; return '

' + esc(I18N.empty_state) + '

'; } // MJML-style horizontal social markup: each icon sits in its own one-cell // inline-table so modern clients wrap the row when it exceeds the content // width (16 icons at 32px overflow a 600px email). Outlook ignores // display:inline-table, so the mso conditional comments hand it a single // outer table instead; padding lives only on the inner cell either way. // // The ms-soc/ms-soc-td classes on the ghost fragments exist for the OAuth // send lanes: Gmail API and Microsoft Graph strip every HTML comment, so // OutlookSafeEmailBody reveals these blocks into real markup first, and its // mark_tags stamps class="msr" on any revealed table/td that has no class // of its own. td.msr turns display:block on phones (the column-stacking // safety net), which would pile the icons vertically - a class of our own // keeps msr, and with it the stacking rule, off these cells. return '

' + '' + cells.join('') + '' + '

'; } // --------------------------------------------------------------------------- // Custom property editor: drag-to-reorder link list + network picker // --------------------------------------------------------------------------- var WIDGET_CSS_ID = 'ms-social-widget-css'; var WIDGET_CSS = [ '.msl-wrap{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:#111827;}', '.msl-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:5px 6px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;box-sizing:border-box;}', '.msl-row:last-child{margin-bottom:0;}', '.msl-row:hover{border-color:#d1d5db;background:#fafafa;}', '.msl-row.msl-dragging{opacity:.45;}', '.msl-row.msl-drop-before{box-shadow:inset 0 2px 0 0 #2563eb;}', '.msl-row.msl-drop-after{box-shadow:inset 0 -2px 0 0 #2563eb;}', '.msl-handle{flex:0 0 auto;cursor:grab;color:#9ca3af;font-size:14px;line-height:1;padding:2px 1px;-webkit-user-select:none;user-select:none;}', '.msl-handle:hover{color:#6b7280;}', '.msl-handle:active{cursor:grabbing;}', '.msl-icon{flex:0 0 auto;width:22px;height:22px;display:block;border:0;}', '.msl-url{flex:1 1 auto;min-width:0;border:1px solid #e5e7eb;border-radius:4px;padding:5px 7px;font-size:12px;font-family:inherit;color:#111827;background:#fff;outline:none;box-sizing:border-box;}', '.msl-url:focus{border-color:#2563eb;}', '.msl-remove{flex:0 0 auto;border:0;background:transparent;color:#9ca3af;font-size:16px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:4px;}', '.msl-remove:hover{color:#ef4444;background:#fef2f2;}', '.msl-empty{color:#9ca3af;font-size:12px;line-height:1.5;padding:2px 0 4px;}', '.msl-add{margin-top:12px;}', '.msl-add-label{color:#6b7280;font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;}', '.msl-add-grid{display:flex;flex-wrap:wrap;gap:6px;}', '.msl-add-btn{border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:3px;line-height:0;cursor:pointer;}', '.msl-add-btn:hover{border-color:#2563eb;background:#f8fafc;}', '.msl-add-btn img{width:26px;height:26px;display:block;border:0;}' ].join(''); // Set right before updateValue() when a network is added, consumed by the // next mount() so the freshly added row's input takes focus. var pendingFocusKey = null; var dragIndex = null; function ensureWidgetStyles() { try { if (document.getElementById(WIDGET_CSS_ID)) return; var style = document.createElement('style'); style.id = WIDGET_CSS_ID; style.appendChild(document.createTextNode(WIDGET_CSS)); (document.head || document.documentElement).appendChild(style); } catch (e) { /* styling is cosmetic; never break the editor over it */ } } function closestRow(el) { while (el && el.nodeType === 1) { if (el.className && String(el.className).split(' ').indexOf('msl-row') >= 0) return el; el = el.parentNode; } return null; } function rowIndexOf(el) { var row = closestRow(el); if (!row) return -1; var idx = parseInt(row.getAttribute('data-msl-index'), 10); return isNaN(idx) ? -1 : idx; } function clearIndicators(root) { var rows = root.querySelectorAll('.msl-row'); for (var i = 0; i < rows.length; i++) { rows[i].className = rows[i].className .replace(/\s*msl-drop-(before|after)/g, '') .replace(/\s*msl-dragging/g, ''); } } function setIndicator(row, position) { var base = row.className.replace(/\s*msl-drop-(before|after)/g, ''); row.className = base + ' msl-drop-' + position; } function renderWidget(value) { var links = normalizeLinks(value); var used = {}; var rows = []; for (var i = 0; i < links.length; i++) { var net = networkFor(links[i].key); if (!net) continue; used[net.key] = true; rows.push( '

' + '⠿' + '

' + '' + '' + '

' ); } var picker = []; for (var j = 0; j < NETWORKS.length; j++) { if (used[NETWORKS[j].key]) continue; picker.push( '' ); } var html = '

'; html += '

' + rows.join('') + '

'; if (!rows.length) { html += '

' + esc(I18N.empty_state) + '

'; } if (picker.length) { html += '

' + '

' + esc(I18N.add_network) + '

' + '

' + picker.join('') + '

' + '

'; } html += '

'; return html; } function mountWidget(node, value, updateValue) { if (!node) return; ensureWidgetStyles(); var links = normalizeLinks(value); // URL inputs commit on change (blur / Enter) rather than on every // keystroke: updateValue re-renders the whole widget, which would drop // focus mid-word if it fired per character. var inputs = node.querySelectorAll('[data-msl-url]'); for (var i = 0; i < inputs.length; i++) { (function (input) { input.addEventListener('change', function () { var idx = rowIndexOf(input); if (idx < 0 || !links[idx]) return; var next = links.slice(); next[idx] = { key: links[idx].key, url: input.value }; updateValue(next); }); input.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); input.blur(); } }); })(inputs[i]); } var removes = node.querySelectorAll('[data-msl-remove]'); for (var r = 0; r < removes.length; r++) { (function (button) { button.addEventListener('click', function (e) { e.preventDefault(); var idx = rowIndexOf(button); if (idx < 0 || !links[idx]) return; var next = links.slice(); next.splice(idx, 1); updateValue(next); }); })(removes[r]); } // Rows stay draggable=false so the URL input keeps normal text selection; // the handle flips the flag only for the duration of a drag. var rows = node.querySelectorAll('.msl-row'); for (var k = 0; k < rows.length; k++) { (function (row) { var handle = row.querySelector('[data-msl-handle]'); if (handle) { handle.addEventListener('mousedown', function () { row.draggable = true; }); } row.addEventListener('mouseup', function () { row.draggable = false; }); row.addEventListener('dragstart', function (e) { dragIndex = rowIndexOf(row); if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', String(dragIndex)); } catch (err) { /* IE-style dataTransfer restrictions; ordering still works */ } } row.className += ' msl-dragging'; }); row.addEventListener('dragover', function (e) { if (dragIndex === null) return; e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; var rect = row.getBoundingClientRect(); setIndicator(row, (e.clientY - rect.top) > rect.height / 2 ? 'after' : 'before'); }); row.addEventListener('dragleave', function () { row.className = row.className.replace(/\s*msl-drop-(before|after)/g, ''); }); row.addEventListener('drop', function (e) { e.preventDefault(); e.stopPropagation(); var from = dragIndex; var target = rowIndexOf(row); var rect = row.getBoundingClientRect(); var insertAt = (e.clientY - rect.top) > rect.height / 2 ? target + 1 : target; dragIndex = null; row.draggable = false; clearIndicators(node); if (from === null || from < 0 || target < 0) return; if (from === insertAt || from + 1 === insertAt) return; var next = links.slice(); var moved = next.splice(from, 1)[0]; if (from < insertAt) insertAt -= 1; next.splice(insertAt, 0, moved); updateValue(next); }); row.addEventListener('dragend', function () { dragIndex = null; row.draggable = false; clearIndicators(node); }); })(rows[k]); } var adders = node.querySelectorAll('[data-msl-add]'); for (var a = 0; a < adders.length; a++) { (function (button) { button.addEventListener('click', function (e) { e.preventDefault(); var key = button.getAttribute('data-msl-add'); if (!networkFor(key)) return; pendingFocusKey = key; updateValue(links.concat([{ key: key, url: '' }])); }); })(adders[a]); } if (pendingFocusKey) { var focusRow = node.querySelector('.msl-row[data-msl-key="' + pendingFocusKey + '"] [data-msl-url]'); pendingFocusKey = null; if (focusRow) { try { focusRow.focus(); } catch (e) { /* focus is a nicety, not a requirement */ } } } } unlayer.registerPropertyEditor({ name: 'ms_social_links', Widget: unlayer.createWidget({ render: function (value) { return renderWidget(value); }, mount: function (node, value, updateValue) { mountWidget(node, value, updateValue); } }) }); unlayer.registerTool({ name: 'ms_social', label: I18N.label, // Inline SVG data URI instead of a Font Awesome name: the FA share icons // only come solid, which clashes with the thin-outline style of the native // tool tiles. Source SVG: 33x33 share-nodes outline, 2px round strokes. icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGNpcmNsZSBjeD0iMjQuNSIgY3k9IjcuNSIgcj0iNCIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjE2LjUiIHI9IjQiLz48Y2lyY2xlIGN4PSIyNC41IiBjeT0iMjUuNSIgcj0iNCIvPjxwYXRoIGQ9Ik0xMyAxNEwyMCAxMC4xIi8+PHBhdGggZD0iTTEzIDE5TDIwIDIyLjkiLz48L3N2Zz4=', supportedDisplayModes: ['web', 'email'], options: { links: { title: I18N.links_title, position: 1, options: { links: { label: '', defaultValue: DEFAULT_LINKS, widget: 'ms_social_links' } } }, style: { title: I18N.style_title, position: 2, options: { iconType: { label: I18N.icon_style, defaultValue: 'circle', widget: 'dropdown', data: { options: [ { label: I18N.style_circle, value: 'circle' }, { label: I18N.style_circle_black, value: 'circle-black' }, { label: I18N.style_circle_white, value: 'circle-white' }, { label: I18N.style_rounded, value: 'rounded' }, { label: I18N.style_squared, value: 'squared' } ] } }, iconSize: { label: I18N.icon_size, defaultValue: 32, widget: 'counter' }, spacing: { label: I18N.spacing, defaultValue: 10, widget: 'counter' }, align: { label: I18N.alignment, defaultValue: 'center', widget: 'alignment' } } } }, values: {}, renderer: { Viewer: unlayer.createViewer({ render: function (values) { return msSocialHtml(values, true); } }), exporters: { web: function (values) { return msSocialHtml(values, false); }, email: function (values) { return msSocialHtml(values, false); } }, head: { css: function () { return ''; }, js: function () { return ''; } } } }); })();