Sending Email with Firebase (using template) - can you get html rendered when specified in a data field?

Question

When sending email with the firebase Trigger Email from Firestore Extension and using a template, is it possible to put html in data fields and have that be rendered?

I am trying to send email with Firebase using the extension Firebase provides, and I'm using a template. The template has an html body, and I pass in several data parameters.

In two cases, I want to render html from within the data field. I'm noticing two issues: in some cases, the html is not rendered (note: only the html from the data fields is not being rendered, the html from the template works just fine), and in others, it completely prevents the message from being sent.

When I add tags, as in the inviteMessage field, that is not rendered by the email:

(note: these screenshots are from two different tests, but you can see that the tags are displayed as raw strings instead of rendering the html.)

In a separate field, I am trying to render an entire section of a table (because this entire table cell is dependent on the data passed into the message). But adding this to a data field completely prevents the message from being sent:

<!-- Member Info Content -->
<td style="flex: 0 0 auto; display: flex; align-items: flex-start; flex-direction: column; justify-content: center;"
  class="details-member-info">
  <tr>
    <td><h2 style="font-family: 'Inter', sans-serif;">Members</h2></td>
  </tr>
  <tr>
    <td style="text-align: left; padding-left: 48px;">
      <ul style="position: relative; padding-inline-start: 0px;">
        <li style="height: 48px; list-style-type: none; padding: 8px;" class="member-li list-item">
          <img alt="image"
            src="https://firebasestorage.googleapis.com/v0/b/iron-accountability.appspot.com/o/userImages%2FoXC9rWMsUDezvKe0Vu09ON1NMc42%2FprofileImage.jpg?alt=media&amp;token=992e6a97-3755-463b-afab-87b89cc9f7a2"
            style="width: 48px; height: 48px; display: inline-block; vertical-align: middle; object-fit: cover; border-radius: 50%; border: 2px solid #000000;"
            class="member-image" />
          <span style="vertical-align: middle; display: inline-block; padding-left: 8px; font-size: 16px; font-weight: 700; font-family: 'Inter', sans-serif;"
            class="member-li-name">Charlie Page</span>
        </li>
        <li style="height: 48px; list-style-type: none; padding: 8px;" class="member-li list-item">
          <img alt="image" src="https://www.lattisapp.com/images/blank-avatar.jpg"
            style="width: 48px; height: 48px; display: inline-block; vertical-align: middle; object-fit: cover; border-radius: 50%; border: 2px solid #000000;"
            class="member-image" />
          <span style="vertical-align: middle; display: inline-block; padding-left: 8px; font-size: 16px; font-weight: 700; font-family: 'Inter', sans-serif;"
            class="member-li-name">Charlie Page</span>
        </li>
      </ul>
    </td>
  </tr>
</td>

Answer 1

You can check this out, it's about how to convert String into HTML-encoded string in Flutter(Dart).

const HtmlEscape htmlEscape = HtmlEscape();
String unescaped = 'Text & subject'; // Data you fetched from Firebase store datafields
String escaped = htmlEscape.convert(unescaped);
print(escaped); // Text & subject

unescaped = '10 > 1 and 1 < 10'; // Data you fetched from Firebase store datafields
escaped = htmlEscape.convert(unescaped);
print(escaped); // 10 &gt; 1 and 1 &lt; 10

unescaped = "Single-quoted: 'text'"; // Data you fetched from Firebase store datafields
escaped = htmlEscape.convert(unescaped);
print(escaped); // Single-quoted: &#39;text&#39;

unescaped = 'Double-quoted: "text"'; // Data you fetched from Firebase store datafields
escaped = htmlEscape.convert(unescaped);
print(escaped); // Double-quoted: &quot;text&quot;

unescaped = 'Path: /system/'; // Data you fetched from Firebase store datafields
escaped = htmlEscape.convert(unescaped);
print(escaped); // Path: &#47;system&#47;

https://api.flutter.dev/flutter/dart-convert/HtmlEscape-class.html