mjml-rb 0.2.1

data/lib/mjml-rb/components/section.rb

@@ -0,0 +1,331 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Section < Base
+      TAGS = %w[mj-section mj-wrapper].freeze
+
+      SECTION_ALLOWED_ATTRIBUTES = {
+        "background-color" => "color",
+        "border" => "string",
+        "border-bottom" => "string",
+        "border-left" => "string",
+        "border-radius" => "unit(px,%){1,4}",
+        "border-right" => "string",
+        "border-top" => "string",
+        "direction" => "enum(ltr,rtl)",
+        "padding" => "unit(px,%){1,4}",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "padding-top" => "unit(px,%)",
+        "text-align" => "enum(left,center,right)"
+      }.freeze
+
+      WRAPPER_ALLOWED_ATTRIBUTES = SECTION_ALLOWED_ATTRIBUTES.merge(
+        "full-width" => "enum(full-width)"
+      ).freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "direction"  => "ltr",
+        "padding"    => "20px 0",
+        "text-align" => "center"
+      }.freeze
+
+      class << self
+        def allowed_attributes_for(tag_name)
+          tag_name == "mj-wrapper" ? WRAPPER_ALLOWED_ATTRIBUTES : SECTION_ALLOWED_ATTRIBUTES
+        end
+
+        def allowed_attributes
+          SECTION_ALLOWED_ATTRIBUTES
+        end
+      end
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        case tag_name
+        when "mj-wrapper"
+          render_wrapper(node, context, attrs)
+        else
+          render_section(node, context, attrs)
+        end
+      end
+
+      private
+
+      # ── Shared helpers ──────────────────────────────────────────────────────
+
+      def parse_px(value)
+        value.to_s.to_i
+      end
+
+      def parse_border_width(border_str)
+        return 0 if border_str.nil? || border_str.to_s.strip.empty? || border_str.to_s.strip == "none"
+
+        border_str =~ /(\d+(?:\.\d+)?)\s*px/ ? $1.to_i : 0
+      end
+
+      def parse_padding_value(str)
+        return 0 if str.nil? || str.to_s.strip.empty?
+
+        str =~ /(\d+(?:\.\d+)?)\s*px/ ? $1.to_i : 0
+      end
+
+      def parse_padding_side(attrs, side)
+        specific = attrs["padding-#{side}"]
+        return parse_padding_value(specific) if specific && !specific.to_s.empty?
+
+        shorthand = attrs["padding"]
+        return 0 unless shorthand
+
+        parts = shorthand.to_s.strip.split(/\s+/)
+        case parts.size
+        when 1 then parse_padding_value(parts[0])
+        when 2
+          side == "left" || side == "right" ? parse_padding_value(parts[1]) : parse_padding_value(parts[0])
+        when 3
+          case side
+          when "top"         then parse_padding_value(parts[0])
+          when "right", "left" then parse_padding_value(parts[1])
+          when "bottom"      then parse_padding_value(parts[2])
+          else 0
+          end
+        when 4
+          idx = {"top" => 0, "right" => 1, "bottom" => 2, "left" => 3}[side]
+          parse_padding_value(parts[idx] || "0")
+        else
+          0
+        end
+      end
+
+      # Merge adjacent Outlook conditional comments.  Applied locally within
+      # each section/wrapper to avoid incorrectly merging across sibling sections.
+      def merge_outlook_conditionals(html)
+        html.gsub(/<!\[endif\]-->\s*<!--\[if mso \| IE\]>/m, "")
+      end
+
+      # Build an attribute string for Outlook conditional comment tags.
+      # Always renders every pair (including class="") and appends a trailing
+      # space before the > to match MJML's htmlAttributes output.
+      def outlook_attrs(pairs)
+        parts = pairs.map { |(key, value)| %(#{key}="#{escape_attr(value.to_s)}") }
+        " #{parts.join(' ')} "
+      end
+
+      # ── mj-section ─────────────────────────────────────────────────────────
+
+      def render_section(node, context, attrs)
+        a            = self.class.default_attributes.merge(attrs)
+        container_px = parse_px(context[:container_width] || "600px")
+        css_class    = a["css-class"]
+        bg_color     = a["background-color"]
+        border_radius = a["border-radius"]
+
+        # Box width: container minus horizontal padding and borders
+        border_left  = parse_border_width(a["border-left"] || a["border"])
+        border_right = parse_border_width(a["border-right"] || a["border"])
+        pad_left     = parse_padding_side(a, "left")
+        pad_right    = parse_padding_side(a, "right")
+        box_width    = container_px - pad_left - pad_right - border_left - border_right
+
+        # renderBefore — Outlook outer wrapper table
+        outlook_class = css_class ? "#{css_class}-outlook" : ""
+        before_pairs = [
+          ["align",       "center"],
+          ["border",      "0"],
+          ["cellpadding", "0"],
+          ["cellspacing", "0"],
+          ["class",       outlook_class],
+          ["role",        "presentation"],
+          ["style",       "width:#{container_px}px;"],
+          ["width",       container_px.to_s]
+        ]
+        before_pairs << ["bgcolor", bg_color] if bg_color
+
+        render_before = %(<!--[if mso | IE]><table#{outlook_attrs(before_pairs)}><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->)
+
+        # Section div, table, td
+        div_style = style_join(
+          "background"       => bg_color,
+          "background-color" => bg_color,
+          "margin"           => "0px auto",
+          "max-width"        => "#{container_px}px"
+        )
+
+        border_val = a["border"]
+        border_val = nil if border_val.nil? || border_val.to_s.strip.empty? || border_val.to_s.strip == "none"
+
+        td_style = style_join(
+          "border"         => border_val,
+          "border-top"     => a["border-top"],
+          "border-right"   => a["border-right"],
+          "border-bottom"  => a["border-bottom"],
+          "border-left"    => a["border-left"],
+          "border-radius"  => border_radius,
+          "background"     => bg_color,
+          "background-color" => bg_color,
+          "direction"      => a["direction"],
+          "font-size"      => "0px",
+          "padding"        => a["padding"],
+          "padding-top"    => a["padding-top"],
+          "padding-right"  => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left"   => a["padding-left"],
+          "text-align"     => a["text-align"]
+        )
+
+        table_style = style_join(
+          "background"       => bg_color,
+          "background-color" => bg_color,
+          "border-radius"    => border_radius,
+          "width"            => "100%"
+        )
+
+        div_attrs = {"class" => css_class, "style" => div_style}
+        table_attrs = {
+          "align" => "center",
+          "border" => "0",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "role" => "presentation",
+          "style" => table_style,
+          "width" => "100%"
+        }
+        td_attrs = {
+          "align" => a["text-align"],
+          "bgcolor" => bg_color,
+          "style" => td_style
+        }
+        inner = merge_outlook_conditionals(render_section_columns(node, context, box_width))
+
+        section_html =
+          %(<div#{html_attrs(div_attrs)}>) +
+          %(<table#{html_attrs(table_attrs)}>) +
+          %(<tbody><tr><td#{html_attrs(td_attrs)}>#{inner}</td></tr></tbody></table></div>)
+
+        render_after = %(<!--[if mso | IE]></td></tr></table><![endif]-->)
+
+        "#{render_before}\n#{section_html}\n#{render_after}"
+      end
+
+      # Generate Outlook IE conditional wrappers around each column/group.
+      def render_section_columns(node, context, box_width)
+        columns = node.element_children.select { |e| %w[mj-column mj-group].include?(e.tag_name) }
+        return render_children(node, context, parent: "mj-section") if columns.empty?
+
+        widths = renderer.send(:compute_column_widths, columns, context)
+
+        open_table  = %(<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->)
+        open_tr     = %(<!--[if mso | IE]><tr><![endif]-->)
+        close_tr    = %(<!--[if mso | IE]></tr><![endif]-->)
+        close_table = %(<!--[if mso | IE]></table><![endif]-->)
+
+        col_parts = columns.each_with_index.map do |col, i|
+          col_attrs = resolved_attributes(col, context)
+          v_align   = col_attrs["vertical-align"] || "top"
+          col_px    = (box_width.to_f * widths[i] / 100.0).round
+
+          td_open  = %(<!--[if mso | IE]><td class="" style="vertical-align:#{v_align};width:#{col_px}px;" ><![endif]-->)
+          td_close = %(<!--[if mso | IE]></td><![endif]-->)
+
+          col_html = if col.tag_name == "mj-group"
+                       renderer.send(:render_group, col, context, widths[i])
+                     else
+                       context[:_column_width_pct] = widths[i]
+                       render_node(col, context, parent: "mj-section")
+                     end
+
+          "#{td_open}\n#{col_html}\n#{td_close}"
+        end
+
+        ([open_table, open_tr] + col_parts + [close_tr, close_table]).join("\n")
+      end
+
+      # ── mj-wrapper ─────────────────────────────────────────────────────────
+
+      def render_wrapper(node, context, attrs)
+        a            = self.class.default_attributes.merge(attrs)
+        container_px = parse_px(context[:container_width] || "600px")
+        css_class    = a["css-class"]
+        bg_color     = a["background-color"]
+        full_width   = a["full-width"] == "full-width"
+
+        # renderBefore — same structure as section
+        outlook_class = css_class ? "#{css_class}-outlook" : ""
+        before_pairs = [
+          ["align",       "center"],
+          ["border",      "0"],
+          ["cellpadding", "0"],
+          ["cellspacing", "0"],
+          ["class",       outlook_class],
+          ["role",        "presentation"],
+          ["style",       "width:#{container_px}px;"],
+          ["width",       container_px.to_s]
+        ]
+        before_pairs << ["bgcolor", bg_color] if bg_color
+
+        render_before = %(<!--[if mso | IE]><table#{outlook_attrs(before_pairs)}><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->)
+
+        div_style = style_join(
+          "background"       => bg_color,
+          "background-color" => bg_color,
+          "margin"           => "0px auto",
+          "max-width"        => (full_width ? nil : "#{container_px}px")
+        )
+
+        table_style = style_join(
+          "background"       => bg_color,
+          "background-color" => bg_color,
+          "width"            => "100%"
+        )
+
+        td_style = style_join(
+          "direction"      => a["direction"],
+          "font-size"      => "0px",
+          "padding"        => a["padding"],
+          "padding-top"    => a["padding-top"],
+          "padding-right"  => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left"   => a["padding-left"],
+          "text-align"     => a["text-align"]
+        )
+
+        div_attrs = {"class" => css_class, "style" => div_style}
+        inner = merge_outlook_conditionals(render_wrapped_children_wrapper(node, context, container_px))
+
+        wrapper_html =
+          %(<div#{html_attrs(div_attrs)}>) +
+          %(<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="#{table_style}" width="100%">) +
+          %(<tbody><tr><td style="#{td_style}">#{inner}</td></tr></tbody></table></div>)
+
+        render_after = %(<!--[if mso | IE]></td></tr></table><![endif]-->)
+
+        "#{render_before}\n#{wrapper_html}\n#{render_after}"
+      end
+
+      # Wrap each child mj-section/mj-wrapper in an Outlook conditional <td>.
+      def render_wrapped_children_wrapper(node, context, container_px)
+        children = node.element_children.select { |e| %w[mj-section mj-wrapper].include?(e.tag_name) }
+        return render_children(node, context, parent: "mj-wrapper") if children.empty?
+
+        open_table  = %(<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->)
+        open_tr     = %(<!--[if mso | IE]><tr><![endif]-->)
+        close_tr    = %(<!--[if mso | IE]></tr><![endif]-->)
+        close_table = %(<!--[if mso | IE]></table><![endif]-->)
+
+        section_parts = children.map do |child|
+          td_open  = %(<!--[if mso | IE]><td class="" width="#{container_px}px" ><![endif]-->)
+          td_close = %(<!--[if mso | IE]></td><![endif]-->)
+          child_html = render_node(child, context, parent: "mj-wrapper")
+          "#{td_open}\n#{child_html}\n#{td_close}"
+        end
+
+        ([open_table, open_tr] + section_parts + [close_tr, close_table]).join("\n")
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/social.rb

@@ -0,0 +1,303 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Social < Base
+      TAGS = %w[mj-social mj-social-element].freeze
+
+      IMG_BASE_URL = "https://www.mailjet.com/images/theme/v1/icons/ico-social/".freeze
+
+      SOCIAL_NETWORKS = {
+        "facebook"  => { "share-url" => "https://www.facebook.com/sharer/sharer.php?u=[[URL]]",   "background-color" => "#3b5998", "src" => "#{IMG_BASE_URL}facebook.png" },
+        "twitter"   => { "share-url" => "https://twitter.com/intent/tweet?url=[[URL]]",           "background-color" => "#55acee", "src" => "#{IMG_BASE_URL}twitter.png" },
+        "x"         => { "share-url" => "https://twitter.com/intent/tweet?url=[[URL]]",           "background-color" => "#000000", "src" => "#{IMG_BASE_URL}twitter-x.png" },
+        "google"    => { "share-url" => "https://plus.google.com/share?url=[[URL]]",              "background-color" => "#dc4e41", "src" => "#{IMG_BASE_URL}google-plus.png" },
+        "pinterest" => { "share-url" => "https://pinterest.com/pin/create/button/?url=[[URL]]&media=&description=", "background-color" => "#bd081c", "src" => "#{IMG_BASE_URL}pinterest.png" },
+        "linkedin"  => { "share-url" => "https://www.linkedin.com/shareArticle?mini=true&url=[[URL]]&title=&summary=&source=", "background-color" => "#0077b5", "src" => "#{IMG_BASE_URL}linkedin.png" },
+        "instagram" => { "background-color" => "#3f729b", "src" => "#{IMG_BASE_URL}instagram.png" },
+        "web"       => { "background-color" => "#4BADE9", "src" => "#{IMG_BASE_URL}web.png" },
+        "snapchat"  => { "background-color" => "#FFFA54", "src" => "#{IMG_BASE_URL}snapchat.png" },
+        "youtube"   => { "background-color" => "#EB3323", "src" => "#{IMG_BASE_URL}youtube.png" },
+        "tumblr"    => { "share-url" => "https://www.tumblr.com/widgets/share/tool?canonicalUrl=[[URL]]", "background-color" => "#344356", "src" => "#{IMG_BASE_URL}tumblr.png" },
+        "github"    => { "background-color" => "#000000", "src" => "#{IMG_BASE_URL}github.png" },
+        "xing"      => { "share-url" => "https://www.xing.com/app/user?op=share&url=[[URL]]",     "background-color" => "#296366", "src" => "#{IMG_BASE_URL}xing.png" },
+        "vimeo"     => { "background-color" => "#53B4E7", "src" => "#{IMG_BASE_URL}vimeo.png" },
+        "medium"    => { "background-color" => "#000000", "src" => "#{IMG_BASE_URL}medium.png" },
+        "soundcloud" => { "background-color" => "#EF7F31", "src" => "#{IMG_BASE_URL}soundcloud.png" },
+        "dribbble"  => { "background-color" => "#D95988", "src" => "#{IMG_BASE_URL}dribbble.png" }
+      }.tap do |networks|
+        # Build -noshare variants (share-url becomes [[URL]] i.e. pass-through)
+        networks.keys.each do |key|
+          networks["#{key}-noshare"] = networks[key].merge("share-url" => "[[URL]]")
+        end
+      end.freeze
+
+      # Attributes Social parent passes down to its mj-social-element children
+      INHERITED_ATTRS = %w[
+        border-radius color font-family font-size font-weight font-style
+        icon-size icon-height icon-padding text-padding line-height text-decoration
+      ].freeze
+
+      SOCIAL_DEFAULTS = {
+        "align"           => "center",
+        "border-radius"   => "3px",
+        "color"           => "#333333",
+        "font-family"     => "Ubuntu, Helvetica, Arial, sans-serif",
+        "font-size"       => "13px",
+        "icon-size"       => "20px",
+        "line-height"     => "22px",
+        "mode"            => "horizontal",
+        "padding"         => "10px 25px",
+        "text-decoration" => "none"
+      }.freeze
+
+      ELEMENT_DEFAULTS = {
+        "alt"             => "",
+        "align"           => "left",
+        "icon-position"   => "left",
+        "color"           => "#000",
+        "border-radius"   => "3px",
+        "font-family"     => "Ubuntu, Helvetica, Arial, sans-serif",
+        "font-size"       => "13px",
+        "line-height"     => "1",
+        "padding"         => "4px",
+        "text-padding"    => "4px 4px 4px 0",
+        "target"          => "_blank",
+        "text-decoration" => "none",
+        "vertical-align"  => "middle"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        case tag_name
+        when "mj-social"
+          render_social(node, context, attrs)
+        when "mj-social-element"
+          # Direct dispatch (no parent attrs merging) — fallback for standalone use
+          render_social_element(node, ELEMENT_DEFAULTS.merge(attrs))
+        end
+      end
+
+      private
+
+      # ── mj-social ──────────────────────────────────────────────────────────
+
+      def render_social(node, context, attrs)
+        a = SOCIAL_DEFAULTS.merge(attrs)
+
+        outer_td_style = style_join(
+          "background"     => a["container-background-color"],
+          "font-size"      => "0px",
+          "padding"        => a["padding"],
+          "padding-top"    => a["padding-top"],
+          "padding-right"  => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left"   => a["padding-left"],
+          "word-break"     => "break-word"
+        )
+        outer_td_attrs = {
+          "align"          => a["align"],
+          "vertical-align" => a["vertical-align"],
+          "class"          => a["css-class"],
+          "style"          => outer_td_style
+        }
+
+        mode = a["mode"] == "vertical" ? "vertical" : "horizontal"
+        inner = if mode == "vertical"
+                  render_vertical(node, context, a)
+                else
+                  render_horizontal(node, context, a)
+                end
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{inner}</td></tr>)
+      end
+
+      def social_element_children(node)
+        node.element_children.select { |c| c.tag_name == "mj-social-element" }
+      end
+
+      # Compute the attributes Social passes down to its children
+      def inherited_attrs(social_attrs)
+        base = {}
+        base["padding"] = social_attrs["inner-padding"] if social_attrs["inner-padding"]
+
+        INHERITED_ATTRS.each_with_object(base) do |attr, h|
+          val = social_attrs[attr]
+          h[attr] = val unless val.nil?
+        end
+      end
+
+      def render_horizontal(node, context, social_attrs)
+        align     = social_attrs["align"]
+        inherited = inherited_attrs(social_attrs)
+        elements  = social_element_children(node)
+        return "" if elements.empty?
+
+        outlook_open  = %(<!--[if mso | IE]><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr>)
+        outlook_close = %(</tr></table><![endif]-->)
+
+        children_html = elements.map.with_index do |child, idx|
+          child_attrs  = resolved_attributes(child, context)
+          merged_attrs = ELEMENT_DEFAULTS.merge(inherited).merge(child_attrs)
+          el_html      = render_social_element(child, merged_attrs)
+
+          outlook_td_open  = idx == 0 ? "<td>" : "</td><td>"
+          %(#{outlook_td_open}<![endif]--><table align="#{escape_attr(align)}" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"><tbody>#{el_html}</tbody></table><!--[if mso | IE]>)
+        end.join
+
+        %(#{outlook_open}#{children_html}</td>#{outlook_close})
+      end
+
+      def render_vertical(node, context, social_attrs)
+        inherited = inherited_attrs(social_attrs)
+        elements  = social_element_children(node)
+
+        children_html = elements.map do |child|
+          child_attrs  = resolved_attributes(child, context)
+          merged_attrs = ELEMENT_DEFAULTS.merge(inherited).merge(child_attrs)
+          render_social_element(child, merged_attrs)
+        end.join
+
+        %(<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0px;"><tbody>#{children_html}</tbody></table>)
+      end
+
+      # ── mj-social-element ──────────────────────────────────────────────────
+
+      def render_social_element(node, attrs)
+        a        = attrs # already merged with defaults by caller
+        net_name = node.attributes["name"]
+        network  = SOCIAL_NETWORKS[net_name] || {}
+
+        # Resolve href: if network has a share-url, substitute [[URL]] with the raw href
+        raw_href    = a["href"]
+        share_url   = network["share-url"]
+        final_href  = if raw_href && share_url
+                        share_url.gsub("[[URL]]", raw_href)
+                      else
+                        raw_href
+                      end
+        has_link = !raw_href.nil?
+
+        # Resolve icon attrs (element overrides network defaults)
+        icon_size   = a["icon-size"]  || network["icon-size"]
+        icon_height = a["icon-height"] || network["icon-height"]
+        bg_color    = a["background-color"] || network["background-color"]
+        src         = a["src"] || network["src"]
+        srcset      = a["srcset"] || network["srcset"]
+        sizes_attr  = a["sizes"]  || network["sizes"]
+        icon_width  = icon_size ? icon_size.to_i.to_s : nil
+
+        border_radius  = a["border-radius"]
+        icon_position  = a["icon-position"] || "left"
+        padding        = a["padding"]
+        text_padding   = a["text-padding"]
+        vertical_align = a["vertical-align"]
+        align_val      = a["align"]
+        alt_val        = a["alt"] || ""
+        target_val     = a["target"]
+        rel_val        = a["rel"]
+        title_val      = a["title"]
+        icon_padding   = a["icon-padding"]
+        icon_h         = icon_height || icon_size
+
+        td_style = style_join(
+          "padding"        => padding,
+          "padding-top"    => a["padding-top"],
+          "padding-right"  => a["padding-right"],
+          "padding-bottom" => a["padding-bottom"],
+          "padding-left"   => a["padding-left"],
+          "vertical-align" => vertical_align
+        )
+
+        inner_table_style = style_join(
+          "background"    => bg_color,
+          "border-radius" => border_radius,
+          "width"         => icon_size
+        )
+
+        icon_td_style = style_join(
+          "padding"        => icon_padding,
+          "font-size"      => "0",
+          "height"         => icon_h,
+          "vertical-align" => "middle",
+          "width"          => icon_size
+        )
+
+        img_style = style_join(
+          "border-radius" => border_radius,
+          "display"       => "block"
+        )
+
+        # alt must always be rendered (even as alt=""), so build img tag manually
+        img_tag = build_img_tag(
+          alt: alt_val, title: title_val, src: src,
+          style: img_style, width: icon_width, sizes: sizes_attr, srcset: srcset
+        )
+
+        if has_link
+          link_attrs_str = html_attrs({ "href" => final_href, "rel" => rel_val, "target" => target_val })
+          icon_content = %(<a#{link_attrs_str}>#{img_tag}</a>)
+        else
+          icon_content = img_tag
+        end
+
+        icon_td = %(<td style="#{icon_td_style}">#{icon_content}</td>)
+
+        icon_cell = <<~HTML.strip
+          <td style="#{td_style}"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="#{inner_table_style}"><tbody><tr>#{icon_td}</tr></tbody></table></td>
+        HTML
+
+        # Content cell (text)
+        content = node.text_content.strip
+        content_cell = if content.empty?
+                         ""
+                       else
+                         td_text_style = style_join(
+                           "vertical-align" => "middle",
+                           "padding"        => text_padding,
+                           "text-align"     => align_val
+                         )
+                         text_style = style_join(
+                           "color"           => a["color"],
+                           "font-size"       => a["font-size"],
+                           "font-weight"     => a["font-weight"],
+                           "font-style"      => a["font-style"],
+                           "font-family"     => a["font-family"],
+                           "line-height"     => a["line-height"],
+                           "text-decoration" => a["text-decoration"]
+                         )
+
+                         inner_text = " #{escape_html(content)} "
+                         text_elem = if has_link
+                                       link_attrs_str = html_attrs({ "href" => final_href, "style" => text_style, "rel" => rel_val, "target" => target_val })
+                                       %(<a#{link_attrs_str}>#{inner_text}</a>)
+                                     else
+                                       %(<span style="#{text_style}">#{inner_text}</span>)
+                                     end
+                         %(<td style="#{td_text_style}">#{text_elem}</td>)
+                       end
+
+        cells = icon_position == "right" ? "#{content_cell} #{icon_cell}" : "#{icon_cell} #{content_cell}"
+        css_class = a["css-class"]
+        tr_class  = css_class ? %( class="#{escape_attr(css_class)}") : ""
+
+        %(<tr#{tr_class}>#{cells}</tr>)
+      end
+
+      # Build an <img> tag where alt is always rendered (even as alt="")
+      def build_img_tag(alt:, title:, src:, style:, width:, sizes:, srcset:)
+        parts = [%( alt="#{escape_attr(alt.to_s)}")]
+        parts << %( title="#{escape_attr(title)}") unless title.nil? || title.to_s.empty?
+        parts << %( src="#{escape_attr(src)}") unless src.nil? || src.to_s.empty?
+        parts << %( style="#{style}") unless style.nil? || style.empty?
+        parts << %( width="#{escape_attr(width)}") unless width.nil? || width.to_s.empty?
+        parts << %( sizes="#{escape_attr(sizes)}") unless sizes.nil? || sizes.to_s.empty?
+        parts << %( srcset="#{escape_attr(srcset)}") unless srcset.nil? || srcset.to_s.empty?
+        "<img#{parts.join} />"
+      end
+    end
+  end
+end