AppFlowy-IO / appflowy-editor

A highly customizable rich-text editor for Flutter. The AppFlowy Editor project for AppFlowy and beyond.
https://pub.dev/packages/appflowy_editor
Other
457 stars 195 forks source link

[Bug] Editor Does not Display Html Email Template #492

Open asadamatic opened 1 year ago

asadamatic commented 1 year ago

Bug Description

I'm having a hard time figuring out why the following HTML template is not rendered by the editor.

Initially, I thought that there was some problem in this template that was causing the issue, but I tried to render it using an HTML Renderer from the pub and it worked.

How to Reproduce

Try to render this HTML Email template using htmlToDocument

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;padding-top:16px;background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tbody><tr><td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;padding:16px;background-color: white; color: #454748; border-collapse:separate;">
<tbody>
    <!-- HEADER -->
    <tr>
        <td align="center" style="min-width:590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
                <tbody><tr><td valign="middle">
                    <span style="font-size:10px;">Welcome to Odoo</span><br>
                    <span style="font-size:20px;font-weight: bold;">
                        ${object.name}
                    </span>
                </td><td valign="middle" align="right">
                    <img src="/logo.png?company=${object.company_id.id}" style="border-style:none;vertical-align:middle;padding:0px;margin: 0px; height: auto; width: 80px;" alt="${object.company_id.name}" width="80" height="35.1094">
                </td></tr>
                <tr><td colspan="2" style="text-align:center;">
                  <hr width="100%" style="margin:1rem 0 1rem 0;border-top-color:rgba(0, 0, 0, 0.1);border-top-style:solid;border-top-width:1px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;overflow-y:visible;overflow-x:visible;height:0px;box-sizing:content-box;background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;">
                </td></tr>
            </tbody></table>
        </td>
    </tr>
    <!-- CONTENT -->
    <tr>
        <td align="center" style="min-width:590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
                <tbody><tr><td valign="top" style="font-size:13px;">
                    <div style="font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;">
                        Dear ${object.name},<br><br>
                        You have been invited by ${object.create_uid.name} of ${object.company_id.name} to connect on Odoo.
                        <div style="font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;margin:16px 0px 16px 0px;">
                            <a href="${object.signup_url}" style="text-decoration:none;color:rgb(0, 135, 132);background-color:#875A7B;padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
                                Accept invitation
                            </a>
                        </div>
                        % set website_url = object.env['ir.config_parameter'].sudo().get_param('web.base.url')
                        Your Odoo domain is: <b style="font-weight:bolder;"><a href="${website_url}" style="text-decoration:none;background-color:transparent;color:rgb(0, 135, 132);">${website_url}</a></b><br>
                        Your sign in email is: <b style="font-weight:bolder;"><a href="/web/login?login=${object.email}" target="_blank" style="text-decoration:none;background-color:transparent;color:rgb(0, 135, 132);">${object.email}</a></b><br><br>
                        Never heard of Odoo? It’s an all-in-one business software loved by 3+ million users. It will considerably improve your experience at work and increase your productivity.
                        <br><br>
                        Have a look at the <a href="https://www.odoo.com/page/tour?utm_source=db&amp;utm_medium=auth" style="text-decoration:none;background-color:transparent;color:#875A7B;">Odoo Tour</a> to discover the tool.
                        <br><br>
                        Enjoy Odoo!<br>
                        --<br>The ${object.company_id.name} Team
                    </div>
                </td></tr>
                <tr><td style="text-align:center;">
                  <hr width="100%" style="margin:1rem 0 1rem 0;border-top-color:rgba(0, 0, 0, 0.1);border-top-style:solid;border-top-width:1px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;overflow-y:visible;overflow-x:visible;height:0px;box-sizing:content-box;background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;">
                </td></tr>
            </tbody></table>
        </td>
    </tr>
    <!-- FOOTER -->
    <tr>
        <td align="center" style="min-width:590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: white; font-size: 11px; padding: 0px 8px 0px 8px; border-collapse:separate;">
                <tbody><tr><td valign="middle" align="left">
                    ${object.company_id.name}
                </td></tr>
                <tr><td valign="middle" align="left" style="opacity:0.7;">
                    ${object.company_id.phone}
                    % if object.company_id.email
                        | <a href="'mailto:%s' % ${object.company_id.email}" style="text-decoration:none;background-color:transparent;color: #454748;">${object.company_id.email}</a>
                    % endif
                    % if object.company_id.website
                        | <a href="'%s' % ${object.company_id.website}" style="text-decoration:none;background-color:transparent;color: #454748;">
                        ${object.company_id.website}
                    </a>
                    % endif
                </td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody>
</table>
</td></tr>
<!-- POWERED BY -->
<tr><td align="center" style="min-width:590px;">
    <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
      <tbody><tr><td style="text-align:center;font-size: 13px;">
        Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&amp;utm_medium=auth" style="text-decoration:none;background-color:transparent;color:#875A7B;">Odoo</a>
      </td></tr>
    </tbody></table>
</td></tr>
</tbody></table>

Same Template with Dummy Data

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;padding-top:16px;background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tbody><tr><td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;padding:16px;background-color: white; color: #454748; border-collapse:separate;">
<tbody>

    <tr>
        <td align="center" style="min-width:590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
                <tbody><tr><td valign="middle">
                    <span style="font-size:10px;">Welcome to Odoo</span><br>
                    <span style="font-size:20px;font-weight: bold;">
                        John Doe
                    </span>
                </td><td valign="middle" align="right">
                    <img src="/logo.png?company=123" style="border-style:none;vertical-align:middle;padding:0px;margin: 0px; height: auto; width: 80px;" alt="Company ABC" width="80" height="35.1094">
                </td></tr>
                <tr><td colspan="2" style="text-align:center;">
                  <hr width="100%" style="margin:1rem 0 1rem 0;border-top-color:rgba(0, 0, 0, 0.1);border-top-style:solid;border-top-width:1px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;overflow-y:visible;overflow-x:visible;height:0px;box-sizing:content-box;background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;">
                </td></tr>
            </tbody></table>
        </td>
    </tr>
    <tr>
        <td align="center" style="min-width:590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
                <tbody><tr><td valign="top" style="font-size:13px;">
                    <div style="font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;">
                        Dear John Doe,<br><br>
                        You have been invited by Jane Smith of Company ABC to connect on Odoo.
                        <div style="font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;margin:16px 0px 16px 0px;">
                            <a href="#" style="text-decoration:none;color:rgb(0, 135, 132);background-color:#875A7B;padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
                                Accept invitation
                            </a>
                        </div>

                        Your Odoo domain is: <b style="font-weight:bolder;"><a href="#" style="text-decoration:none;background-color:transparent;color:rgb(0, 135, 132);">https://www.example.com</a></b><br>
                        Your sign in email is: <b style="font-weight:bolder;"><a href="/web/login?login=johndoe@example.com" target="_blank" style="text-decoration:none;background-color:transparent;color:rgb(0, 135, 132);">johndoe@example.com</a></b><br><br>
                        Never heard of Odoo? It’s an all-in-one business software loved by 3+ million users. It will considerably improve your experience at work and increase your productivity.
                        <br><br>
                        Have a look at the <a href="https://www.odoo.com/page/tour?utm_source=db&amp;utm_medium=auth" style="text-decoration:none;background-color:transparent;color:#875A7B;">Odoo Tour</a> to discover the tool.
                        <br><br>
                        Enjoy Odoo!<br>
                        --<br>The Company ABC Team
                    </div>
                </td></tr>
                <tr><td style="text-align:center;">
                  <hr width="100%" style="margin:1rem 0 1rem 0;border-top-color:rgba(0, 0, 0, 0.1);border-top-style:solid;border-top-width:1px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;overflow-y:visible;overflow-x:visible;height:0px;box-sizing:content-box;background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;">
                </td></tr>
            </tbody></table>
        </td>
    </tr>

    <tr>
        <td align="center" style="min-width:590px;">
            <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: white; font-size: 11px; padding: 0px 8px 0px 8px; border-collapse:separate;">
                <tbody><tr><td valign="middle" align="left">
                    Company ABC
                </td></tr>
                <tr><td valign="middle" align="left" style="opacity:0.7;">
                    +123-456-7890 | <a href="mailto:info@example.com" style="text-decoration:none;background-color:transparent;color: #454748;">info@example.com</a>

                        | <a href="https://www.example.com" style="text-decoration:none;background-color:transparent;color: #454748;">
                        https://www.example.com
                    </a>

                </td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody>
</table>
</td></tr>
<!-- POWERED BY -->
<tr><td align="center" style="min-width:590px;">
    <table border="0" cellpadding="0" cellspacing="0" width="590" style="border-collapse:collapse;min-width:590px;background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
      <tbody><tr><td style="text-align:center;font-size: 13px;">
        Powered by <a target="_blank" href="https://www.odoo.com?utm_source=db&amp;utm_medium=auth" style="text-decoration:none;background-color:transparent;color:#875A7B;">Odoo</a>
      </td></tr>
    </tbody></table>
</td></tr>
</tbody></table>

Expected Behavior

I expect this to render the email template, like this preview

Welcome to Odoo
${object.name}
${object.company_id.name}

Dear ${object.name},

You have been invited by ${object.create_uid.name} of ${object.company_id.name} to connect on Odoo. % set website_url = object.env['ir.config_parameter'].sudo().get_param('web.base.url') Your Odoo domain is: ${website_url}
Your sign in email is: ${object.email}

Never heard of Odoo? It’s an all-in-one business software loved by 3+ million users. It will considerably improve your experience at work and increase your productivity.

Have a look at the Odoo Tour to discover the tool.

Enjoy Odoo!
--
The ${object.company_id.name} Team

${object.company_id.name}
${object.company_id.phone} % if object.company_id.email | ${object.company_id.email} % endif % if object.company_id.website | ${object.company_id.website} % endif
Powered by Odoo

Operating System

IOS

AppFlowy Editor Version(s)

appflowy_editor: ^1.3.0

Screenshots

Email template rendered by flutter_widget_from_html

CleanShot 2023-09-21 at 11 58 44

Additional Context

No response

LucasXu0 commented 1 year ago

@asadamatic We don't support parsing the table html content yet. By the way, that's a helpful hint flutter_widget_from_html.

asadamatic commented 1 year ago

Is there a section in docs that lists HTML tags unsupported for parsing? It will be helpful!

LucasXu0 commented 1 year ago

the HTML tags supported for now are here.

class HTMLTags {
  static const h1 = 'h1';
  static const h2 = 'h2';
  static const h3 = 'h3';
  static const orderedList = 'ol';
  static const unorderedList = 'ul';
  static const list = 'li';
  static const paragraph = 'p';
  static const image = 'img';
  static const anchor = 'a';
  static const italic = 'i';
  static const em = 'em';
  static const bold = 'b';
  static const underline = 'u';
  static const strikethrough = 's';
  static const del = 'del';
  static const strong = 'strong';
  static const checkbox = 'input';
  static const span = 'span';
  static const code = 'code';
  static const blockQuote = 'blockquote';
  static const div = 'div';
  static const divider = 'hr';
  static const section = 'section';
  static const font = 'font';
  static const mark = 'mark';

  static List<String> formattingElements = [
    HTMLTags.anchor,
    HTMLTags.italic,
    HTMLTags.em,
    HTMLTags.bold,
    HTMLTags.underline,
    HTMLTags.del,
    HTMLTags.strong,
    HTMLTags.span,
    HTMLTags.code,
    HTMLTags.strikethrough,
    HTMLTags.font,
    HTMLTags.mark,
  ];

  static List<String> specialElements = [
    HTMLTags.h1,
    HTMLTags.h2,
    HTMLTags.h3,
    HTMLTags.unorderedList,
    HTMLTags.orderedList,
    HTMLTags.div,
    HTMLTags.list,
    HTMLTags.paragraph,
    HTMLTags.blockQuote,
    HTMLTags.checkbox,
    HTMLTags.image,
    HTMLTags.section,
  ];

  static bool isTopLevel(String tag) {
    return tag == h1 ||
        tag == h2 ||
        tag == h3 ||
        tag == checkbox ||
        tag == paragraph ||
        tag == div ||
        tag == blockQuote;
  }
}
annieappflowy commented 10 months ago

Hi @asadamatic , we're eager to gather valuable feedback from our users to better plan for 2024. Participants who complete this survey will gain priority access to our new launches. We appreciate your insights: https://tally.so/r/nW8qAQ.