From 2accc752f12fa1ea48919b4e05d4fe4978e2f8e9 Mon Sep 17 00:00:00 2001
From: Adrian Tobey <adrian.methoss@gmail.com>
Date: Wed, 14 Aug 2024 10:05:18 -0400
Subject: [PATCH] use LinkPicker component

---
 assets/js/admin/emails/email-block-editor.js  | 159 +++++++-----------
 .../js/admin/emails/email-block-editor.min.js |   6 +-
 2 files changed, 66 insertions(+), 99 deletions(-)

diff --git a/assets/js/admin/emails/email-block-editor.js b/assets/js/admin/emails/email-block-editor.js
index dc0290f06..36ec2c34d 100644
--- a/assets/js/admin/emails/email-block-editor.js
+++ b/assets/js/admin/emails/email-block-editor.js
@@ -751,7 +751,7 @@
   const pasteBlock = () => navigator.clipboard.readText().then(copiedText => {
     let blocks
     try {
-      blocks =  parseBlocksFromContent(copiedText)
+      blocks = parseBlocksFromContent(copiedText)
     }
     catch (e) {
       dialog({
@@ -771,7 +771,7 @@
 
     let newBlock
 
-    blocks.forEach( block => {
+    blocks.forEach(block => {
       newBlock = __replaceId(block)
       insertBlockAfter(newBlock, getActiveBlock().id)
       setActiveBlock(newBlock.id)
@@ -4879,11 +4879,11 @@
   const HTMLEditorNotice = () => `
       <p>
           ${ __('You can now import HTML email templates from third party platforms! Simply copy and paste the HTML code into the editor.',
-                  'groundhogg-pro') }</p>
+    'groundhogg-pro') }</p>
       <p><b>${ __('Here\'s what you need to know:', 'groundhogg-pro') }</b></p>
       <p>
           ${ __('The HTML you provide will not be validated or sanitized. So make sure you are using templates from trusted sources only.',
-                  'groundhogg-pro') }
+    'groundhogg-pro') }
       </p>
       <p>${ __('You will need to manually add any information required for compliance:', 'groundhogg-pro') }</p>
       <ul class="styled">
@@ -5410,16 +5410,16 @@
   }
 
   const ColumnGap = (gap = 10, height = 0, content = '') => gap > 0 ? Td({
-      className: 'email-columns-cell gap',
-      style    : {
-        width : `${ gap }px`,
-        height: `${ height || gap }px`,
-        textAlign: 'center'
-      },
-      height   : height || gap,
-      width    : gap,
-      align: 'center'
-    }, ! content ? '&nbsp;'.repeat(gap > 5 ? 3 : 1) : content ) : null
+    className: 'email-columns-cell gap',
+    style    : {
+      width    : `${ gap }px`,
+      height   : `${ height || gap }px`,
+      textAlign: 'center',
+    },
+    height   : height || gap,
+    width    : gap,
+    align    : 'center',
+  }, !content ? '&nbsp;'.repeat(gap > 5 ? 3 : 1) : content) : null
 
   const Column = ({
     blocks = [],
@@ -6470,6 +6470,25 @@
     })
   })
 
+  const LinkPicker = props => Autocomplete({
+    ...props,
+    fetchResults: async search => {
+      let pages = await ajax({
+        action             : 'wp-link-ajax',
+        _ajax_linking_nonce: groundhogg_nonces._ajax_linking_nonce,
+        term               : search,
+      })
+
+      return pages.map(({
+        title,
+        permalink,
+      }) => ( {
+        id  : permalink,
+        text: title,
+      } ))
+    },
+  })
+
   // Register the text vblock
   registerBlock('text', 'Text', {
     attributes: {
@@ -6691,24 +6710,7 @@
                 stacked: true,
               },
               InputWithReplacements({
-                inputCallback: (attributes) => Autocomplete({
-                  ...attributes,
-                  fetchResults: async search => {
-                    let pages = await ajax({
-                      action             : 'wp-link-ajax',
-                      _ajax_linking_nonce: groundhogg_nonces._ajax_linking_nonce,
-                      term               : search,
-                    })
-
-                    return pages.map(({
-                      title,
-                      permalink,
-                    }) => ( {
-                      id  : permalink,
-                      text: title,
-                    } ))
-                  },
-                }),
+                inputCallback: LinkPicker,
                 type         : 'text',
                 id           : 'button-link',
                 className    : 'full-width',
@@ -6960,7 +6962,7 @@
 
   registerBlock('menu', 'Menu', {
     attributes: {
-      links     : el => {
+      links    : el => {
         return [...el.querySelectorAll('a')].map(a => ( [
           a.innerText,
           a.getAttribute('href'),
@@ -6980,7 +6982,7 @@
       align = 'center',
       fontStyle = {},
       gap = 10,
-      separator = ''
+      separator = '',
     }) => {
       return [
         ControlGroup({
@@ -6998,24 +7000,7 @@
                 ...props,
                 placeholder: 'Link Text',
               }),
-              props => Autocomplete({
-                ...props,
-                fetchResults: async search => {
-                  let pages = await ajax({
-                    action             : 'wp-link-ajax',
-                    _ajax_linking_nonce: groundhogg_nonces._ajax_linking_nonce,
-                    term               : search,
-                  })
-
-                  return pages.map(({
-                    title,
-                    permalink,
-                  }) => ( {
-                    id  : permalink,
-                    text: title,
-                  } ))
-                },
-              }),
+              props => LinkPicker(props),
             ],
             onChange: links => updateBlock({
               links,
@@ -7025,18 +7010,18 @@
               label: 'Separator',
             },
             Select({
-              id        : 'menu-separator',
-              selected : separator,
-              options: {
-                '' : 'None',
-                '&vert;' : '&vert;',
-                '&Vert;' : '&Vert;',
+              id      : 'menu-separator',
+              selected: separator,
+              options : {
+                ''      : 'None',
+                '&vert;': '&vert;',
+                '&Vert;': '&Vert;',
                 // '&tilde;' : '&tilde;',
-                '&middot;' : '&middot;',
-                '&bull;' : '&bull;',
+                '&middot;': '&middot;',
+                '&bull;'  : '&bull;',
               },
-              onChange  : e => updateBlock({
-                separator: e.target.value
+              onChange: e => updateBlock({
+                separator: e.target.value,
               }),
             })),
           Control({
@@ -7076,13 +7061,13 @@
       fontStyle = {},
       gap = 10,
       align = 'center',
-      separator = ''
+      separator = '',
     }) => {
 
       const menuItem = (text, href) => Td({
         style: {
-          textAlign: 'center'
-        }
+          textAlign: 'center',
+        },
       }, makeEl('a', {
         href,
         style: {
@@ -7096,7 +7081,7 @@
 
         if (i > 0) {
 
-          let Gap = ColumnGap(gap, 10, separator);
+          let Gap = ColumnGap(gap, 10, separator)
           Gap.style.color = fontStyle.color
 
           cells.push(Gap)
@@ -7115,8 +7100,8 @@
           cellspacing: '0',
           cellpadding: '0',
           role       : 'presentation',
-          style: {
-            borderCollapse: 'collapse'
+          style      : {
+            borderCollapse: 'collapse',
           },
         },
         [
@@ -7129,11 +7114,11 @@
                 cellspacing: '0',
                 cellpadding: '0',
                 role       : 'presentation',
-                style: {
-                  borderCollapse: 'collapse'
+                style      : {
+                  borderCollapse: 'collapse',
                 },
                 width,
-              }, Tr({}, cells )))),
+              }, Tr({}, cells)))),
         ])
     },
     // edit: () => {},
@@ -7141,7 +7126,7 @@
       return links.map(([text, href]) => `[${ text }](${ href })`).join(' | ')
     },
     defaults : {
-      links     : [
+      links    : [
         [
           'Link 1',
           '',
@@ -7157,12 +7142,12 @@
       ],
       align    : 'center',
       fontStyle: {
-        fontSize: 13,
+        fontSize  : 13,
         fontFamily: 'system-ui, sans-serif',
-        fontWeight: 400
+        fontWeight: 400,
       },
       gap      : 20,
-      separator : ''
+      separator: '',
     },
   })
 
@@ -7226,25 +7211,7 @@
                 stacked: true,
               },
               InputWithReplacements({
-                inputCallback: (attributes) => Autocomplete({
-                  ...attributes,
-                  fetchResults: async search => {
-
-                    let pages = await ajax({
-                      action             : 'wp-link-ajax',
-                      _ajax_linking_nonce: groundhogg_nonces._ajax_linking_nonce,
-                      term               : search,
-                    })
-
-                    return pages.map(({
-                      title,
-                      permalink,
-                    }) => ( {
-                      id  : permalink,
-                      text: title,
-                    } ))
-                  },
-                }),
+                inputCallback: LinkPicker,
                 type         : 'text',
                 id           : 'image-link',
                 className    : 'full-width',
@@ -8283,9 +8250,9 @@
 
           ${ selector } .post-card .card-content td {
               ${ layout === 'cards' ? objectToStyle({
-                  padding: extract4(padding),
+        padding: extract4(padding),
 
-              }) : '' }
+      }) : '' }
           }
 
           ${ selector } li,
diff --git a/assets/js/admin/emails/email-block-editor.min.js b/assets/js/admin/emails/email-block-editor.min.js
index aed62a537..d1e85cea9 100644
--- a/assets/js/admin/emails/email-block-editor.min.js
+++ b/assets/js/admin/emails/email-block-editor.min.js
@@ -109,7 +109,7 @@
         h3 {
             ${fontStyle(h3)}
         }
-    `};const fontDefaults=style=>({lineHeight:"1.4",fontFamily:"system-ui, sans-serif",fontWeight:"normal",fontSize:13,fontStyle:"normal",textTransform:"none",...style});const fontStyle=style=>{return objectToStyle(fillFontStyle(style))};const fillFontStyle=({use:use="custom",color:color="",fontFamily:fontFamily="",fontSize:fontSize=16,...style})=>{if(GlobalFonts.has(use)){let font=GlobalFonts.get(use).style;if(font){return fillFontStyle({...font,color:color,fontFamily:fontFamily})}}return{...fontDefaults(style),color:color,fontSize:`${fontSize}px`,fontFamily:removeQuotes(fontFamily)}};const FontControls=(style={},onChange=style=>{},supports={})=>{supports={fontSize:true,fontFamily:true,fontWeight:true,lineHeight:true,fontStyle:true,textTransform:true,...supports};let{fontSize:fontSize="14",fontFamily:fontFamily="",fontWeight:fontWeight="normal",fontStyle:fontStyle="normal",textTransform:textTransform="none",lineHeight:lineHeight="1.4"}=fontDefaults(style);const fontDisplay=font=>Span({style:{fontFamily:font}},fontFamilies[font]);fontFamily=removeQuotes(fontFamily);return Div({className:"font-controls display-flex column gap-10"},[!supports.fontFamily?null:Control({label:__("Font Family","groundhogg"),stacked:true},ItemPicker({id:`font-family`,multiple:false,selected:{id:fontFamily,text:fontDisplay(fontFamily)},fetchOptions:search=>Promise.resolve(Object.keys(fontFamilies).filter(font=>fontFamilies[font].toLowerCase().includes(search.toLowerCase())).map(font=>({id:font,text:fontDisplay(font)}))),onChange:item=>{onChange({fontFamily:item.id})}})),!supports.fontSize?null:Control({label:__("Font Size","groundhogg")},NumberControl({id:`font-size`,name:`font_size`,className:"font-control control-input",unit:"px",min:0,value:fontSize,onInput:e=>onChange({fontSize:e.target.value})})),!supports.lineHeight?null:Control({label:__("Line Height","groundhogg")},NumberControl({id:`line-height`,name:`line_height`,className:"font-control control-input",value:lineHeight,step:.1,max:10,min:0,onInput:e=>onChange({lineHeight:e.target.value})})),!supports.fontWeight?null:Control({label:__("Font Weight","groundhogg")},Select({id:`font-weight`,name:`font_weight`,className:"font-control control-input",selected:fontWeight,options:fontWeights.map(i=>({value:i,text:i})),onChange:e=>onChange({fontWeight:e.target.value})})),!supports.fontStyle?null:Control({label:__("Font Style","groundhogg")},Select({id:`font-style`,name:`font_style`,className:"font-control control-input",selected:fontStyle,options:{normal:"Normal",italic:"Italic",oblique:"Oblique"},onChange:e=>onChange({fontStyle:e.target.value})})),!supports.textTransform?null:Control({label:__("Transform","groundhogg")},Select({id:`text-transform`,name:`text_transform`,className:"font-control control-input",selected:textTransform,options:{none:"None",capitalize:"Capitalize",uppercase:"Uppercase",lowercase:"Lowercase"},onChange:e=>onChange({textTransform:e.target.value})}))])};const TagFontControlGroup=(name,tag="",style={},updateBlock=()=>{},supports={})=>{let{use:use="global",color:color=""}=style;const updateStyle=newStyle=>{style={...getActiveBlock()[tag],...newStyle};updateBlock({[tag]:style})};const DisplayFont=(font,selected,close)=>{return Div({className:`select-font ${selected?"selected":""}`,id:font.id,onClick:e=>{use=font.id;updateStyle({use:use,...font.style});morphControls();close()}},Span({style:{...fillFontStyle(font.style)}},font.name))};return ControlGroup({name:name,id:tag},[Control({label:"Font"},Div({className:"gh-input-group"},[Button({id:`${tag}-use-global`,className:`gh-button small ${GlobalFonts.has(use)?"primary":"secondary"}`,onClick:e=>{MiniModal({selector:`#${tag}-use-global`,dialogClasses:"no-padding"},({close})=>Div({className:"display-flex column global-font-select"},[...GlobalFonts.fonts.map(font=>DisplayFont(font,use===font.id,close))]))}},Dashicon("admin-site")),Button({id:`${tag}-use-custom`,className:`gh-button small ${!GlobalFonts.has(use)?"primary":"secondary"}`,onClick:e=>{updateStyle({use:"custom"});morphControls();MiniModal({dialogClasses:"no-padding",selector:`#${tag}-use-custom`},Div({className:"display-flex column gap-10"},[FontControls(style,style=>{updateStyle(style)},supports)]))}},Dashicon("edit"))])),Control({label:__("Color","groundhogg")},ColorPicker({id:`${tag}-font-color`,value:color,onChange:color=>updateStyle({color:color})}))])};const inlineStyle=(doc,selector,style={},inherit=true)=>{if(inherit){style=fillFontStyle(style)}doc.querySelectorAll(selector).forEach(el=>{for(let attr in style){el.style[attr]=style[attr]}})};const textContent=({content,p,h1,h2,h3,a})=>{if(!content){return Div({className:"text-content-wrap"},"")}const parser=new DOMParser;const doc=parser.parseFromString(content,"text/html");inlineStyle(doc,"p",{...p,margin:"1em 0"});inlineStyle(doc,"li",p);inlineStyle(doc,"h1",h1);inlineStyle(doc,"h2",h2);inlineStyle(doc,"h3",h3);inlineStyle(doc,"a",a,false);inlineStyle(doc,"b,strong",{fontWeight:"bold"},false);inlineStyle(doc,"ul",{listStyle:"disc",paddingLeft:"30px"},false);inlineStyle(doc,"ol",{paddingLeft:"30px"},false);if(doc.body.firstElementChild){doc.body.firstElementChild.style.marginTop=0}if(doc.body.lastElementChild){doc.body.lastElementChild.style.marginBottom=0}return Div({className:"text-content-wrap"},doc.body.childNodes)};$(document).on("tinymce-editor-setup",function(event,editor){editor.settings.toolbar1+=",gh_replacements";editor.addButton("gh_replacements",{title:"Replacements",image:"",onclick:e=>{Groundhogg.element.replacementsWidget({target:e.target}).mount()}})});registerBlock("text","Text",{attributes:{content:el=>el.querySelector(".text-content-wrap").innerHTML},svg:`
+    `};const fontDefaults=style=>({lineHeight:"1.4",fontFamily:"system-ui, sans-serif",fontWeight:"normal",fontSize:13,fontStyle:"normal",textTransform:"none",...style});const fontStyle=style=>{return objectToStyle(fillFontStyle(style))};const fillFontStyle=({use:use="custom",color:color="",fontFamily:fontFamily="",fontSize:fontSize=16,...style})=>{if(GlobalFonts.has(use)){let font=GlobalFonts.get(use).style;if(font){return fillFontStyle({...font,color:color,fontFamily:fontFamily})}}return{...fontDefaults(style),color:color,fontSize:`${fontSize}px`,fontFamily:removeQuotes(fontFamily)}};const FontControls=(style={},onChange=style=>{},supports={})=>{supports={fontSize:true,fontFamily:true,fontWeight:true,lineHeight:true,fontStyle:true,textTransform:true,...supports};let{fontSize:fontSize="14",fontFamily:fontFamily="",fontWeight:fontWeight="normal",fontStyle:fontStyle="normal",textTransform:textTransform="none",lineHeight:lineHeight="1.4"}=fontDefaults(style);const fontDisplay=font=>Span({style:{fontFamily:font}},fontFamilies[font]);fontFamily=removeQuotes(fontFamily);return Div({className:"font-controls display-flex column gap-10"},[!supports.fontFamily?null:Control({label:__("Font Family","groundhogg"),stacked:true},ItemPicker({id:`font-family`,multiple:false,selected:{id:fontFamily,text:fontDisplay(fontFamily)},fetchOptions:search=>Promise.resolve(Object.keys(fontFamilies).filter(font=>fontFamilies[font].toLowerCase().includes(search.toLowerCase())).map(font=>({id:font,text:fontDisplay(font)}))),onChange:item=>{onChange({fontFamily:item.id})}})),!supports.fontSize?null:Control({label:__("Font Size","groundhogg")},NumberControl({id:`font-size`,name:`font_size`,className:"font-control control-input",unit:"px",min:0,value:fontSize,onInput:e=>onChange({fontSize:e.target.value})})),!supports.lineHeight?null:Control({label:__("Line Height","groundhogg")},NumberControl({id:`line-height`,name:`line_height`,className:"font-control control-input",value:lineHeight,step:.1,max:10,min:0,onInput:e=>onChange({lineHeight:e.target.value})})),!supports.fontWeight?null:Control({label:__("Font Weight","groundhogg")},Select({id:`font-weight`,name:`font_weight`,className:"font-control control-input",selected:fontWeight,options:fontWeights.map(i=>({value:i,text:i})),onChange:e=>onChange({fontWeight:e.target.value})})),!supports.fontStyle?null:Control({label:__("Font Style","groundhogg")},Select({id:`font-style`,name:`font_style`,className:"font-control control-input",selected:fontStyle,options:{normal:"Normal",italic:"Italic",oblique:"Oblique"},onChange:e=>onChange({fontStyle:e.target.value})})),!supports.textTransform?null:Control({label:__("Transform","groundhogg")},Select({id:`text-transform`,name:`text_transform`,className:"font-control control-input",selected:textTransform,options:{none:"None",capitalize:"Capitalize",uppercase:"Uppercase",lowercase:"Lowercase"},onChange:e=>onChange({textTransform:e.target.value})}))])};const TagFontControlGroup=(name,tag="",style={},updateBlock=()=>{},supports={})=>{let{use:use="global",color:color=""}=style;const updateStyle=newStyle=>{style={...getActiveBlock()[tag],...newStyle};updateBlock({[tag]:style})};const DisplayFont=(font,selected,close)=>{return Div({className:`select-font ${selected?"selected":""}`,id:font.id,onClick:e=>{use=font.id;updateStyle({use:use,...font.style});morphControls();close()}},Span({style:{...fillFontStyle(font.style)}},font.name))};return ControlGroup({name:name,id:tag},[Control({label:"Font"},Div({className:"gh-input-group"},[Button({id:`${tag}-use-global`,className:`gh-button small ${GlobalFonts.has(use)?"primary":"secondary"}`,onClick:e=>{MiniModal({selector:`#${tag}-use-global`,dialogClasses:"no-padding"},({close})=>Div({className:"display-flex column global-font-select"},[...GlobalFonts.fonts.map(font=>DisplayFont(font,use===font.id,close))]))}},Dashicon("admin-site")),Button({id:`${tag}-use-custom`,className:`gh-button small ${!GlobalFonts.has(use)?"primary":"secondary"}`,onClick:e=>{updateStyle({use:"custom"});morphControls();MiniModal({dialogClasses:"no-padding",selector:`#${tag}-use-custom`},Div({className:"display-flex column gap-10"},[FontControls(style,style=>{updateStyle(style)},supports)]))}},Dashicon("edit"))])),Control({label:__("Color","groundhogg")},ColorPicker({id:`${tag}-font-color`,value:color,onChange:color=>updateStyle({color:color})}))])};const inlineStyle=(doc,selector,style={},inherit=true)=>{if(inherit){style=fillFontStyle(style)}doc.querySelectorAll(selector).forEach(el=>{for(let attr in style){el.style[attr]=style[attr]}})};const textContent=({content,p,h1,h2,h3,a})=>{if(!content){return Div({className:"text-content-wrap"},"")}const parser=new DOMParser;const doc=parser.parseFromString(content,"text/html");inlineStyle(doc,"p",{...p,margin:"1em 0"});inlineStyle(doc,"li",p);inlineStyle(doc,"h1",h1);inlineStyle(doc,"h2",h2);inlineStyle(doc,"h3",h3);inlineStyle(doc,"a",a,false);inlineStyle(doc,"b,strong",{fontWeight:"bold"},false);inlineStyle(doc,"ul",{listStyle:"disc",paddingLeft:"30px"},false);inlineStyle(doc,"ol",{paddingLeft:"30px"},false);if(doc.body.firstElementChild){doc.body.firstElementChild.style.marginTop=0}if(doc.body.lastElementChild){doc.body.lastElementChild.style.marginBottom=0}return Div({className:"text-content-wrap"},doc.body.childNodes)};$(document).on("tinymce-editor-setup",function(event,editor){editor.settings.toolbar1+=",gh_replacements";editor.addButton("gh_replacements",{title:"Replacements",image:"",onclick:e=>{Groundhogg.element.replacementsWidget({target:e.target}).mount()}})});const LinkPicker=props=>Autocomplete({...props,fetchResults:async search=>{let pages=await ajax({action:"wp-link-ajax",_ajax_linking_nonce:groundhogg_nonces._ajax_linking_nonce,term:search});return pages.map(({title,permalink})=>({id:permalink,text:title}))}});registerBlock("text","Text",{attributes:{content:el=>el.querySelector(".text-content-wrap").innerHTML},svg:`
         <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 977.7 977.7" xml:space="preserve"
              viewBox="0 0 977.7 977.7">
         <path fill="currentColor"
@@ -117,10 +117,10 @@
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <path fill="currentColor"
                   d="m15.7 5.3-1-1c-.2-.2-.4-.3-.7-.3H1c-.6 0-1 .4-1 1v5c0 .3.1.6.3.7l1 1c.2.2.4.3.7.3h13c.6 0 1-.4 1-1V6c0-.3-.1-.5-.3-.7zM14 10H1V5h13v5z"/>
-        </svg>`,controls:({text,link,style,align,size,backgroundColor,borderStyle:borderStyle={},updateBlock:updateBlock=()=>{}})=>{return[ControlGroup({name:"Content"},[Control({label:"Text",stacked:true},InputWithReplacements({type:"text",id:"button-text",className:"full-width",value:text,onInput:e=>updateBlock({text:e.target.value})})),Control({label:"Link",stacked:true},InputWithReplacements({inputCallback:attributes=>Autocomplete({...attributes,fetchResults:async search=>{let pages=await ajax({action:"wp-link-ajax",_ajax_linking_nonce:groundhogg_nonces._ajax_linking_nonce,term:search});return pages.map(({title,permalink})=>({id:permalink,text:title}))}}),type:"text",id:"button-link",className:"full-width",value:link,onChange:e=>updateBlock({link:e.target.value})})),Control({label:"Size"},Select({id:"button-size",options:{sm:__("Small"),md:__("Medium"),lg:__("Large")},selected:size,onChange:e=>updateBlock({size:e.target.value})})),Control({label:"Alignment"},AlignmentButtons({id:"button-align",alignment:align,directions:["left","center","right","justify"],onChange:align=>updateBlock({align:align,morphControls:true})})),Control({label:__("Button Color","groundhogg")},ColorPicker({type:"text",id:"button-color",value:backgroundColor,onChange:backgroundColor=>updateBlock({backgroundColor:backgroundColor})}))]),BorderControlGroup({...borderStyle,onChange:newStyle=>updateBlock({borderStyle:{...getActiveBlock().borderStyle,...newStyle},morphControls:true})}),TagFontControlGroup("Font","style",style,updateBlock)]},html:({text,align,style,size,link,backgroundColor,borderStyle:borderStyle={}})=>{let padding;switch(size){case"sm":padding="8px 12px";break;case"md":padding="12px 18px";break;case"lg":padding="16px 24px";break}let width=align==="justify"?"100%":"auto";return Table({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",role:"presentation"},[Tr({},Td({align:align},Table({border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",width:width},Tr({},Td({className:"email-button",bgcolor:backgroundColor,width:width,style:{padding:padding,width:width,borderRadius:"3px",...addBorderStyle(borderStyle),backgroundColor:backgroundColor},align:"center"},makeEl("a",{href:link,style:{...style,fontSize:`${style.fontSize}px`,textDecoration:"none",display:"inline-block",verticalAlign:"middle",backgroundColor:backgroundColor}},text))))))])},edit:({text,align,style,size,backgroundColor,updateBlock,borderStyle:borderStyle={}})=>{let width=align==="justify"?"100%":"auto";let padding;switch(size){case"sm":padding="8px 12px";break;case"md":padding="12px 18px";break;case"lg":padding="16px 24px";break}const textUpdate=e=>{updateBlock({text:e.currentTarget.textContent,morphControls:true})};return Table({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",role:"presentation"},[Tr({},Td({align:align},Table({border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",width:width},Tr({},Td({className:"email-button",bgcolor:backgroundColor,width:width,style:{width:width,padding:padding,borderRadius:"3px",backgroundColor:backgroundColor,...addBorderStyle(borderStyle)},align:"center"},makeEl("a",{id:`text-edit-link`,contenteditable:true,style:{...style,fontSize:`${style.fontSize}px`,textDecoration:"none !important",display:"inline-block",verticalAlign:"middle",backgroundColor:backgroundColor},eventHandlers:{input:textUpdate}},text))))))])},plainText:({text,link:link=""})=>{return`[${text}](${link})`},gutenberg:({text,align,style,size,link})=>{return[]},defaults:{link:"",align:"center",text:"Click me!",size:"md",backgroundColor:"#dd3333",style:{color:"#ffffff",fontSize:20,fontWeight:"600",fontFamily:"Arial, sans-serif"}}});registerBlock("menu","Menu",{attributes:{links:el=>{return[...el.querySelectorAll("a")].map(a=>[a.innerText,a.getAttribute("href")])},fontStyle:el=>parseFontStyle(el.querySelector("a").style),gap:el=>parseInt(el.querySelector("td.gap")?.width),align:el=>el.querySelector("td[align]").getAttribute("align")},svg:`
+        </svg>`,controls:({text,link,style,align,size,backgroundColor,borderStyle:borderStyle={},updateBlock:updateBlock=()=>{}})=>{return[ControlGroup({name:"Content"},[Control({label:"Text",stacked:true},InputWithReplacements({type:"text",id:"button-text",className:"full-width",value:text,onInput:e=>updateBlock({text:e.target.value})})),Control({label:"Link",stacked:true},InputWithReplacements({inputCallback:LinkPicker,type:"text",id:"button-link",className:"full-width",value:link,onChange:e=>updateBlock({link:e.target.value})})),Control({label:"Size"},Select({id:"button-size",options:{sm:__("Small"),md:__("Medium"),lg:__("Large")},selected:size,onChange:e=>updateBlock({size:e.target.value})})),Control({label:"Alignment"},AlignmentButtons({id:"button-align",alignment:align,directions:["left","center","right","justify"],onChange:align=>updateBlock({align:align,morphControls:true})})),Control({label:__("Button Color","groundhogg")},ColorPicker({type:"text",id:"button-color",value:backgroundColor,onChange:backgroundColor=>updateBlock({backgroundColor:backgroundColor})}))]),BorderControlGroup({...borderStyle,onChange:newStyle=>updateBlock({borderStyle:{...getActiveBlock().borderStyle,...newStyle},morphControls:true})}),TagFontControlGroup("Font","style",style,updateBlock)]},html:({text,align,style,size,link,backgroundColor,borderStyle:borderStyle={}})=>{let padding;switch(size){case"sm":padding="8px 12px";break;case"md":padding="12px 18px";break;case"lg":padding="16px 24px";break}let width=align==="justify"?"100%":"auto";return Table({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",role:"presentation"},[Tr({},Td({align:align},Table({border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",width:width},Tr({},Td({className:"email-button",bgcolor:backgroundColor,width:width,style:{padding:padding,width:width,borderRadius:"3px",...addBorderStyle(borderStyle),backgroundColor:backgroundColor},align:"center"},makeEl("a",{href:link,style:{...style,fontSize:`${style.fontSize}px`,textDecoration:"none",display:"inline-block",verticalAlign:"middle",backgroundColor:backgroundColor}},text))))))])},edit:({text,align,style,size,backgroundColor,updateBlock,borderStyle:borderStyle={}})=>{let width=align==="justify"?"100%":"auto";let padding;switch(size){case"sm":padding="8px 12px";break;case"md":padding="12px 18px";break;case"lg":padding="16px 24px";break}const textUpdate=e=>{updateBlock({text:e.currentTarget.textContent,morphControls:true})};return Table({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",role:"presentation"},[Tr({},Td({align:align},Table({border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",width:width},Tr({},Td({className:"email-button",bgcolor:backgroundColor,width:width,style:{width:width,padding:padding,borderRadius:"3px",backgroundColor:backgroundColor,...addBorderStyle(borderStyle)},align:"center"},makeEl("a",{id:`text-edit-link`,contenteditable:true,style:{...style,fontSize:`${style.fontSize}px`,textDecoration:"none !important",display:"inline-block",verticalAlign:"middle",backgroundColor:backgroundColor},eventHandlers:{input:textUpdate}},text))))))])},plainText:({text,link:link=""})=>{return`[${text}](${link})`},gutenberg:({text,align,style,size,link})=>{return[]},defaults:{link:"",align:"center",text:"Click me!",size:"md",backgroundColor:"#dd3333",style:{color:"#ffffff",fontSize:20,fontWeight:"600",fontFamily:"Arial, sans-serif"}}});registerBlock("menu","Menu",{attributes:{links:el=>{return[...el.querySelectorAll("a")].map(a=>[a.innerText,a.getAttribute("href")])},fontStyle:el=>parseFontStyle(el.querySelector("a").style),gap:el=>parseInt(el.querySelector("td.gap")?.width),align:el=>el.querySelector("td[align]").getAttribute("align")},svg:`
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
             <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
-        </svg>`,controls:({links:links=[],align:align="center",fontStyle:fontStyle={},gap:gap=10,separator:separator=""})=>{return[ControlGroup({name:"Menu"},[Control({label:"Menu links",stacked:true},InputRepeater({id:"menu-link-editor",rows:links,sortable:true,cells:[props=>Input({...props,placeholder:"Link Text"}),props=>Autocomplete({...props,fetchResults:async search=>{let pages=await ajax({action:"wp-link-ajax",_ajax_linking_nonce:groundhogg_nonces._ajax_linking_nonce,term:search});return pages.map(({title,permalink})=>({id:permalink,text:title}))}})],onChange:links=>updateBlock({links:links})})),Control({label:"Separator"},Select({id:"menu-separator",selected:separator,options:{"":"None","&vert;":"&vert;","&Vert;":"&Vert;","&middot;":"&middot;","&bull;":"&bull;"},onChange:e=>updateBlock({separator:e.target.value})})),Control({label:"Alignment"},AlignmentButtons({id:"button-align",alignment:align,directions:["left","center","right","justify"],onChange:align=>updateBlock({align:align,morphControls:true})})),Control({label:"Gap"},NumberControl({id:"menu-item-gap",step:5,value:gap,unit:"px",onChange:e=>updateBlock({gap:e.target.value})}))]),TagFontControlGroup("Font","fontStyle",fontStyle,updateBlock)]},html:({links:links=[],fontStyle:fontStyle={},gap:gap=10,align:align="center",separator:separator=""})=>{const menuItem=(text,href)=>Td({style:{textAlign:"center"}},makeEl("a",{href:href,style:{...fontStyle,fontSize:`${fontStyle.fontSize}px`,textDecoration:"none"}},text));let cells=links.reduce((cells,[text,href],i)=>{if(i>0){let Gap=ColumnGap(gap,10,separator);Gap.style.color=fontStyle.color;cells.push(Gap)}cells.push(menuItem(text,href));return cells},[]);let width=align==="justify"?"100%":"auto";return Table({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",style:{borderCollapse:"collapse"}},[Tr({},Td({align:align},Table({border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",style:{borderCollapse:"collapse"},width:width},Tr({},cells))))])},plainText:({links:links=[]})=>{return links.map(([text,href])=>`[${text}](${href})`).join(" | ")},defaults:{links:[["Link 1",""],["Link 2",""],["Link 3",""]],align:"center",fontStyle:{fontSize:13,fontFamily:"system-ui, sans-serif",fontWeight:400},gap:20,separator:""}});registerBlock("image","Image",{attributes:{src:el=>el.querySelector("img").src,height:el=>parseInt(el.querySelector("img").height),width:el=>parseInt(el.querySelector("img").width),alt:el=>el.querySelector("img").alt,link:el=>el.querySelector("a")?.getAttribute("href"),borderStyle:el=>parseBorderStyle(el.querySelector("img").style),align:el=>el.querySelector(".img-container").style.getPropertyValue("text-align")},svg:icons.image,controls:({id,src,link:link="",width,height,alt:alt="",align:align="center",updateBlock,borderStyle:borderStyle={}})=>{return Fragment([ControlGroup({name:"Image"},[ImageControls({id:"image",src:src,alt:alt,width:width,maxWidth:document.getElementById(`b-${id}`).getBoundingClientRect().width,onChange:image=>{updateBlock({...image,morphControls:true})}}),Control({label:"Alignment"},AlignmentButtons({id:"image-align",alignment:align,onChange:align=>{updateBlock({align:align,morphControls:true})}})),Control({label:"Link",stacked:true},InputWithReplacements({inputCallback:attributes=>Autocomplete({...attributes,fetchResults:async search=>{let pages=await ajax({action:"wp-link-ajax",_ajax_linking_nonce:groundhogg_nonces._ajax_linking_nonce,term:search});return pages.map(({title,permalink})=>({id:permalink,text:title}))}}),type:"text",id:"image-link",className:"full-width",value:link,onChange:e=>updateBlock({link:e.target.value})}))]),BorderControlGroup({...borderStyle,onChange:newStyle=>updateBlock({borderStyle:{...getActiveBlock().borderStyle,...newStyle},morphControls:true})})])},edit:({src,width,height,alt:alt="",align:align="center",updateBlock,borderStyle:borderStyle={}})=>{return Div({className:"img-container full-width",style:{textAlign:align}},makeEl("img",{className:"resize-me",onCreate:el=>{setTimeout(()=>{let $el=$("img.resize-me");$el.resizable({aspectRatio:true,maxWidth:$el.parent().width(),stop:(e,ui)=>{updateBlock({width:Math.ceil(ui.size.width),morphControls:true,morphBlocks:false})}})},100)},src:src,alt:alt,width:width,height:"auto",style:{verticalAlign:"bottom",height:"auto",width:width,...addBorderStyle(borderStyle)}}))},html:({src,width,height,link:link="",alt:alt="",align:align="center",borderStyle:borderStyle={}})=>{let img=makeEl("img",{src:src,alt:alt,width:width,height:"auto",style:{boxSizing:"border-box",verticalAlign:"bottom",height:"auto",width:width,...addBorderStyle(borderStyle)}});if(link){img=makeEl("a",{href:link},img)}return Div({className:"img-container",style:{textAlign:align}},img)},plainText:({src:src="",alt:alt="",link:link=""})=>{return`${link?"[":""}![${alt||"image"}](${src})${link?`](${link})`:""}`},gutenberg:({src,width,link:link="",alt:alt="",align:align="center"})=>{return[`<!-- wp:image ${JSON.stringify({width:width,align:align})} -->`,`<figure class="wp-block-image align${align}">`,`<img src="${src}" alt="${alt}">`,`</figure>`,`<!-- /wp:image -->`].join("\n")},defaults:{src:"http://via.placeholder.com/600x338",alt:"placeholder image",title:"placeholder image",width:600,height:338,align:"center"}});registerBlock("spacer","Spacer",{attributes:{height:el=>parseInt(el.querySelector("td[height]").getAttribute("height"))},svg:`
+        </svg>`,controls:({links:links=[],align:align="center",fontStyle:fontStyle={},gap:gap=10,separator:separator=""})=>{return[ControlGroup({name:"Menu"},[Control({label:"Menu links",stacked:true},InputRepeater({id:"menu-link-editor",rows:links,sortable:true,cells:[props=>Input({...props,placeholder:"Link Text"}),props=>LinkPicker(props)],onChange:links=>updateBlock({links:links})})),Control({label:"Separator"},Select({id:"menu-separator",selected:separator,options:{"":"None","&vert;":"&vert;","&Vert;":"&Vert;","&middot;":"&middot;","&bull;":"&bull;"},onChange:e=>updateBlock({separator:e.target.value})})),Control({label:"Alignment"},AlignmentButtons({id:"button-align",alignment:align,directions:["left","center","right","justify"],onChange:align=>updateBlock({align:align,morphControls:true})})),Control({label:"Gap"},NumberControl({id:"menu-item-gap",step:5,value:gap,unit:"px",onChange:e=>updateBlock({gap:e.target.value})}))]),TagFontControlGroup("Font","fontStyle",fontStyle,updateBlock)]},html:({links:links=[],fontStyle:fontStyle={},gap:gap=10,align:align="center",separator:separator=""})=>{const menuItem=(text,href)=>Td({style:{textAlign:"center"}},makeEl("a",{href:href,style:{...fontStyle,fontSize:`${fontStyle.fontSize}px`,textDecoration:"none"}},text));let cells=links.reduce((cells,[text,href],i)=>{if(i>0){let Gap=ColumnGap(gap,10,separator);Gap.style.color=fontStyle.color;cells.push(Gap)}cells.push(menuItem(text,href));return cells},[]);let width=align==="justify"?"100%":"auto";return Table({width:"100%",border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",style:{borderCollapse:"collapse"}},[Tr({},Td({align:align},Table({border:"0",cellspacing:"0",cellpadding:"0",role:"presentation",style:{borderCollapse:"collapse"},width:width},Tr({},cells))))])},plainText:({links:links=[]})=>{return links.map(([text,href])=>`[${text}](${href})`).join(" | ")},defaults:{links:[["Link 1",""],["Link 2",""],["Link 3",""]],align:"center",fontStyle:{fontSize:13,fontFamily:"system-ui, sans-serif",fontWeight:400},gap:20,separator:""}});registerBlock("image","Image",{attributes:{src:el=>el.querySelector("img").src,height:el=>parseInt(el.querySelector("img").height),width:el=>parseInt(el.querySelector("img").width),alt:el=>el.querySelector("img").alt,link:el=>el.querySelector("a")?.getAttribute("href"),borderStyle:el=>parseBorderStyle(el.querySelector("img").style),align:el=>el.querySelector(".img-container").style.getPropertyValue("text-align")},svg:icons.image,controls:({id,src,link:link="",width,height,alt:alt="",align:align="center",updateBlock,borderStyle:borderStyle={}})=>{return Fragment([ControlGroup({name:"Image"},[ImageControls({id:"image",src:src,alt:alt,width:width,maxWidth:document.getElementById(`b-${id}`).getBoundingClientRect().width,onChange:image=>{updateBlock({...image,morphControls:true})}}),Control({label:"Alignment"},AlignmentButtons({id:"image-align",alignment:align,onChange:align=>{updateBlock({align:align,morphControls:true})}})),Control({label:"Link",stacked:true},InputWithReplacements({inputCallback:LinkPicker,type:"text",id:"image-link",className:"full-width",value:link,onChange:e=>updateBlock({link:e.target.value})}))]),BorderControlGroup({...borderStyle,onChange:newStyle=>updateBlock({borderStyle:{...getActiveBlock().borderStyle,...newStyle},morphControls:true})})])},edit:({src,width,height,alt:alt="",align:align="center",updateBlock,borderStyle:borderStyle={}})=>{return Div({className:"img-container full-width",style:{textAlign:align}},makeEl("img",{className:"resize-me",onCreate:el=>{setTimeout(()=>{let $el=$("img.resize-me");$el.resizable({aspectRatio:true,maxWidth:$el.parent().width(),stop:(e,ui)=>{updateBlock({width:Math.ceil(ui.size.width),morphControls:true,morphBlocks:false})}})},100)},src:src,alt:alt,width:width,height:"auto",style:{verticalAlign:"bottom",height:"auto",width:width,...addBorderStyle(borderStyle)}}))},html:({src,width,height,link:link="",alt:alt="",align:align="center",borderStyle:borderStyle={}})=>{let img=makeEl("img",{src:src,alt:alt,width:width,height:"auto",style:{boxSizing:"border-box",verticalAlign:"bottom",height:"auto",width:width,...addBorderStyle(borderStyle)}});if(link){img=makeEl("a",{href:link},img)}return Div({className:"img-container",style:{textAlign:align}},img)},plainText:({src:src="",alt:alt="",link:link=""})=>{return`${link?"[":""}![${alt||"image"}](${src})${link?`](${link})`:""}`},gutenberg:({src,width,link:link="",alt:alt="",align:align="center"})=>{return[`<!-- wp:image ${JSON.stringify({width:width,align:align})} -->`,`<figure class="wp-block-image align${align}">`,`<img src="${src}" alt="${alt}">`,`</figure>`,`<!-- /wp:image -->`].join("\n")},defaults:{src:"http://via.placeholder.com/600x338",alt:"placeholder image",title:"placeholder image",width:600,height:338,align:"center"}});registerBlock("spacer","Spacer",{attributes:{height:el=>parseInt(el.querySelector("td[height]").getAttribute("height"))},svg:`
         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
   <path fill="currentColor"
         d="M352 384h-48V128h48a16 16 0 0 0 11-27L267 5c-6-7-16-7-22 0l-96 96c-5 4-6 11-4 17 3 6 9 10 15 10h48v256h-48a16 16 0 0 0-11 27l96 96c6 7 16 7 22 0l96-96a16 16 0 0 0-11-27z"/>