\n \n \n ${values.content}\n \n \n \x3c!--[if mso]>`;\n \n return buttonHTML;\n }\n\n function generateNBIText(values) {\n const style = `\n ${cssAttr('color', values.textColor)}\n ${cssAttr('background-color', values.backgroundColor)}\n ${cssAttr('font-family', values.fontFamily?.value)}\n ${cssAttr('font-size', values.fontSize + 'px')}`;\n\n return ``;\n }\n\n\n function calculateButtonSize(values) {\n // Create a temp element for measuring the button size\n const tempDiv = document.createElement(\"div\");\n tempDiv.style.visibility = \"hidden\";\n tempDiv.style.position = \"absolute\";\n tempDiv.style.top = \"-9999px\";\n \n const buttonStyle = getNBIButtonStyle(values);\n const buttonHTML =\n `\n \n ${values.content}\n \n `;\n\n tempDiv.innerHTML = buttonHTML;\n const targetDiv = document.querySelector('#u_body');\n \n if (targetDiv) {\n targetDiv.appendChild(tempDiv);\n }\n else {\n document.body.appendChild(tempDiv);\n }\n\n // Get the width and height\n const buttonElement = tempDiv.querySelector(\"a\");\n const buttonWidth = buttonElement.offsetWidth;\n const buttonHeight = buttonElement.offsetHeight;\n\n tempDiv.remove();\n\n return { width: buttonWidth, height: buttonHeight };\n }\n\n /**\n * Note: after any changes to this file you must run `yarn unlayer-custom-tools` to create a bundle file\n */\n\n nbiTextConfig.options.text.options.content = {\n label: 'Content',\n defaultValue: 'NBI Text',\n widget: 'rich_text',\n };\n\n nbiButtonConfig.options.text.options.content = {\n label: 'Title',\n defaultValue: 'NBI Button',\n widget: 'text',\n };\n\n nbiButtonConfig.options.text.options.actionType = {\n label: 'Action Type',\n defaultValue: {\n url: '',\n target: '_blank'\n },\n widget: 'link'\n };\n\n nbiTextConfig.enabled = nbiButtonConfig.enabled = true;\n\n unlayer.registerTool(nbiTextConfig);\n unlayer.registerTool(nbiButtonConfig);\n\n}());\n",VIEWABLE_CUSTOM_TOOL="(function () {\n 'use strict';\n\n /**\n * Note: after any changes to this file you must run `yarn unlayer-custom-tools` to create a bundle file\n */\n\n const nbiTextConfig = {\n name: 'nbi_text',\n label: 'NBI Text',\n icon: 'fa-font-case',\n supportedDisplayModes: ['email'],\n options: {\n text: {\n title: 'Text Options',\n position: 1,\n options: {\n textColor: {\n label: 'Text Color',\n defaultValue: '',\n widget: 'color_picker',\n },\n backgroundColor: {\n label: 'Background Color',\n defaultValue: '',\n widget: 'color_picker',\n },\n fontFamily: {\n label: 'Font Family',\n defaultValue: {\n label: 'Lato',\n value: \"'Lato',sans-serif\"\n },\n widget: 'font_family',\n },\n fontSize: {\n label: 'Font Size',\n defaultValue: '14',\n widget: 'counter',\n },\n alignment: {\n label: 'Alignment',\n defaultValue: 'center',\n widget: 'alignment'\n }\n }\n }\n },\n values: {},\n renderer: {\n Viewer: unlayer.createViewer({\n render(values) {\n let hightlightContent = replaceTags(values.content);\n const style = `\n ${cssAttr('color', values.textColor)}\n ${cssAttr('background-color', values.backgroundColor)}\n ${cssAttr('font-family', values.fontFamily?.value)}\n ${cssAttr('font-size', values.fontSize + 'px')}`;\n\n return `\n
${hightlightContent}
\n
`;\n },\n }),\n exporters: {\n web: generateNBIText,\n email: generateNBIText,\n },\n head: {\n css: function (values) {},\n js: function (values) {},\n },\n }\n };\n\n\n const nbiButtonConfig = {\n name: 'nbi_button',\n label: 'NBI Button',\n icon: 'fa-rectangle-wide',\n supportedDisplayModes: ['email'],\n options: {\n text: {\n title: 'Options',\n position: 1,\n options: {\n textColor: {\n label: 'Text Color',\n defaultValue: '#fff',\n widget: 'color_picker',\n },\n backgroundColor: {\n label: 'Background Color',\n defaultValue: '#34495E',\n widget: 'color_picker',\n },\n fontFamily: {\n label: 'Font Family',\n defaultValue: {\n label: 'Lato',\n value: \"'Lato',sans-serif\"\n },\n widget: 'font_family',\n },\n fontWeight: {\n label: 'Font Weight',\n defaultValue: 'normal',\n widget: 'font_weight',\n },\n fontSize: {\n label: 'Font Size',\n defaultValue: '14',\n widget: 'counter',\n },\n alignment: {\n label: 'Alignment',\n defaultValue: 'center',\n widget: 'alignment'\n }\n },\n },\n },\n values: {},\n renderer: {\n Viewer: unlayer.createViewer({\n render(values) {\n return generateNBIButton(values);\n },\n }),\n exporters: {\n web: generateNBIButton,\n email: generateNBIButton\n },\n head: {\n css: function (values) {},\n js: function (values) {},\n },\n }\n };\n\n function replaceTags(str) {\n const regex = /(?');\n }\n\n function cssAttr(property, value) {\n return (value !== '') ? `${property}: ${value};` : '';\n }\n\n function tagAttr(attribute, value) {\n return (value) ? `${attribute}=\"${value}\"` : '';\n }\n\n function getNBIButtonStyle(values) {\n return `box-sizing:border-box; display:inline-block; text-decoration:none;\n -webkit-text-size-adjust:none; text-align:center; border-radius:4px;\n -webkit-border-radius:4px; -moz-border-radius:4px; width: auto;\n max-width:100%; overflow-wrap:break-word; word-break:break-word;\n word-wrap:break-word; mso-border-alt:none;\n ${cssAttr('color', values.textColor)} ${cssAttr('background-color', values.backgroundColor)}\n ${cssAttr('font-size', values.fontSize + 'px')} ${cssAttr('font-family', values.fontFamily?.value)} ${cssAttr('font-weight', values.fontWeight)}`;\n }\n\n function generateNBIButton(values) {\n const buttonSize = calculateButtonSize(values);\n const buttonStyle = getNBIButtonStyle(values);\n\n let url = values.actionType?.url == undefined ? values.actionType?.values?.href : values.actionType?.url;\n let target = values.actionType?.target == undefined ? values.actionType?.values?.target : values.actionType?.target;\n\n const buttonHTML = `\n \x3c!--[if mso]>\n \x3c!--[if mso]>\n \n \n \n \n ${values.content}\n \n \n \x3c!--[if mso]>`;\n \n return buttonHTML;\n }\n\n function generateNBIText(values) {\n const style = `\n ${cssAttr('color', values.textColor)}\n ${cssAttr('background-color', values.backgroundColor)}\n ${cssAttr('font-family', values.fontFamily?.value)}\n ${cssAttr('font-size', values.fontSize + 'px')}`;\n\n return ``;\n }\n\n\n function calculateButtonSize(values) {\n // Create a temp element for measuring the button size\n const tempDiv = document.createElement(\"div\");\n tempDiv.style.visibility = \"hidden\";\n tempDiv.style.position = \"absolute\";\n tempDiv.style.top = \"-9999px\";\n \n const buttonStyle = getNBIButtonStyle(values);\n const buttonHTML =\n `\n \n ${values.content}\n \n `;\n\n tempDiv.innerHTML = buttonHTML;\n const targetDiv = document.querySelector('#u_body');\n \n if (targetDiv) {\n targetDiv.appendChild(tempDiv);\n }\n else {\n document.body.appendChild(tempDiv);\n }\n\n // Get the width and height\n const buttonElement = tempDiv.querySelector(\"a\");\n const buttonWidth = buttonElement.offsetWidth;\n const buttonHeight = buttonElement.offsetHeight;\n\n tempDiv.remove();\n\n return { width: buttonWidth, height: buttonHeight };\n }\n\n /**\n * Note: after any changes to this file you must run `yarn unlayer-custom-tools` to create a bundle file\n */\n\n nbiTextConfig.enabled = nbiButtonConfig.enabled = false;\n\n unlayer.registerTool(nbiTextConfig);\n unlayer.registerTool(nbiButtonConfig);\n\n}());\n"