react-email-builder
Version:
A simple React drag and drop email builder.
66 lines (65 loc) • 2.78 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.buttonBlock = void 0;
const react_1 = __importDefault(require("react"));
const Icon_1 = require("../../components/Icon");
const ButtonBlock_1 = require("./ButtonBlock");
const ButtonBlockEditor_1 = require("./ButtonBlockEditor");
const utils_1 = require("../../utils");
const mjml_1 = require("../../utils/mjml");
function buttonBlock() {
return {
type: 'button',
name: 'Button',
icon: react_1.default.createElement(Icon_1.Icon, { name: 'button' }),
createBlock: (base, config) => {
const block = base;
const fonts = config.fonts || (0, utils_1.getDefaultFonts)();
block.attrs = {
text: 'Button',
padding: [10, 25, 10, 25],
bgColor: '#117CEE',
color: '#FFFFFF',
align: 'center',
block: 'no',
borderRadius: 3,
fontSize: 14,
fontWeight: 'normal',
letterSpacing: 0,
lineHeight: 120,
target: '_blank',
textDecoration: 'none',
fontFamily: fonts?.[0].value
};
return block;
},
blockComponent: ButtonBlock_1.ButtonBlock,
editorComponent: ButtonBlockEditor_1.ButtonBlockEditor,
renderMJML: (block) => {
const attrs = block.attrs;
return (0, mjml_1.renderTag)('mj-button', {
children: block.attrs.text,
attrs: (0, mjml_1.createBlockAttrs)(block, {
href: attrs.url ? (0, utils_1.normalizeUrl)(attrs.url) : null,
target: attrs.target,
width: attrs.block === 'yes' ? '100%' : null,
color: (0, mjml_1.color)(attrs.color),
'background-color': (0, mjml_1.color)(attrs.bgColor),
'font-family': attrs.fontFamily,
'font-size': (0, mjml_1.px)(attrs.fontSize),
'line-height': (attrs.lineHeight || 100) + '%',
'letter-spacing': (0, mjml_1.px)(attrs.letterSpacing),
'font-weight': attrs.fontWeight === 'bold' ? '700' : null,
'text-decoration': attrs.textDecoration,
align: attrs.align || 'center',
'inner-padding': (0, mjml_1.padding)(attrs.padding),
'border-radius': (0, mjml_1.px)(attrs.borderRadius)
})
});
}
};
}
exports.buttonBlock = buttonBlock;