appflowy-editor/test/plugins/html/decoder/_samples.dart

const htmlSample1 =
    '''<h1>AppFlowyEditor</h1><h2>👋 <strong>Welcome to</strong>   <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span></h2><p>AppFlowy Editor is a <strong>highly customizable</strong>   <i>rich-text editor</i></p><p>   <u>Here</u> is an example <del>your</del> you can give a try</p><p>   <span style="font-weight: bold; font-style: italic">Span element</span></p><p>   <u>Span element two</u></p><p>   <span style="font-weight: bold; text-decoration: line-through">Span element three</span></p><p>   <a href="https://appflowy.io">This is an anchor tag!</a></p><h3>Features!</h3><ul><li>[x] Customizable</li><li>[x] Test-covered</li><li>[ ] more to come!</li><li>First item</li><li>Second item</li><li>List element</li></ul><blockquote>This is a quote!</blockquote><p><code> Code block</code></p><p>   <i>Italic one</i></p><p>   <i>Italic two</i></p><p>   <strong>Bold tag</strong></p><p>You can also use <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span> as a component to build your own app. </p><h3>Awesome features</h3><p>If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!</p><p></p><p></p>''';

const documentSample1 = {
  'document': {
    'type': 'page',
    'children': [
      {
        'type': 'heading',
        'data': {
          'level': 1,
          'delta': [
            {'insert': 'AppFlowyEditor'},
          ],
        },
      },
      {
        'type': 'heading',
        'data': {
          'level': 2,
          'delta': [
            {'insert': '👋 '},
            {
              'insert': 'Welcome to',
              'attributes': {'bold': true},
            },
            {'insert': '   '},
            {
              'insert': 'AppFlowy Editor',
              'attributes': {'bold': true, 'italic': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': 'AppFlowy Editor is a '},
            {
              'insert': 'highly customizable',
              'attributes': {'bold': true},
            },
            {'insert': '   '},
            {
              'insert': 'rich-text editor',
              'attributes': {'italic': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Here',
              'attributes': {'underline': true},
            },
            {'insert': ' is an example '},
            {
              'insert': 'your',
              'attributes': {'strikethrough': true},
            },
            {'insert': ' you can give a try'},
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Span element',
              'attributes': {'bold': true, 'italic': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Span element two',
              'attributes': {'underline': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Span element three',
              'attributes': {'bold': true, 'strikethrough': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'This is an anchor tag!',
              'attributes': {'href': 'https://appflowy.io'},
            }
          ],
        },
      },
      {
        'type': 'heading',
        'data': {
          'level': 3,
          'delta': [
            {'insert': 'Features!'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': '[x] Customizable'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': '[x] Test-covered'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': '[ ] more to come!'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'First item'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'Second item'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'List element'},
          ],
        },
      },
      {
        'type': 'quote',
        'data': {
          'delta': [
            {'insert': 'This is a quote!'},
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {
              'insert': ' Code block',
              'attributes': {'code': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Italic one',
              'attributes': {'italic': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Italic two',
              'attributes': {'italic': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': '   '},
            {
              'insert': 'Bold tag',
              'attributes': {'bold': true},
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {'insert': 'You can also use '},
            {
              'insert': 'AppFlowy Editor',
              'attributes': {'bold': true, 'italic': true},
            },
            {'insert': ' as a component to build your own app. '},
          ],
        },
      },
      {
        'type': 'heading',
        'data': {
          'level': 3,
          'delta': [
            {'insert': 'Awesome features'},
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {
              'insert':
                  'If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!',
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {'delta': []},
      },
      {
        'type': 'paragraph',
        'data': {'delta': []},
      }
    ],
  },
};

const htmlSample2 =
    '''<table><tr><td><h2>a</h2></td><td><p><i>c</i></p></td></tr><tr><td><p><strong>b</strong></p></td><td><p>d</p></td></tr></table>''';
const documentSample2 = {
  "document": {
    "type": "page",
    "children": [
      {
        "type": "table",
        "children": [
          {
            "type": "table/cell",
            "children": [
              {
                "type": "heading",
                "data": {
                  "delta": [
                    {"insert": "a"},
                  ],
                  "level": 2,
                },
              }
            ],
            "data": {
              "colPosition": 0,
              "rowPosition": 0,
              "height": 40.0,
              "width": 160.0,
            },
          },
          {
            "type": "table/cell",
            "children": [
              {
                "type": "paragraph",
                "data": {
                  "delta": [
                    {
                      "insert": "c",
                      "attributes": {"italic": true},
                    }
                  ],
                },
              }
            ],
            "data": {
              "colPosition": 1,
              "rowPosition": 0,
              "height": 40.0,
              "width": 160.0,
            },
          },
          {
            "type": "table/cell",
            "children": [
              {
                "type": "paragraph",
                "data": {
                  "delta": [
                    {
                      "insert": "b",
                      "attributes": {"bold": true},
                    }
                  ],
                },
              }
            ],
            "data": {
              "colPosition": 0,
              "rowPosition": 1,
              "height": 40.0,
              "width": 160.0,
            },
          },
          {
            "type": "table/cell",
            "children": [
              {
                "type": "paragraph",
                "data": {
                  "delta": [
                    {"insert": "d"},
                  ],
                },
              }
            ],
            "data": {
              "colPosition": 1,
              "rowPosition": 1,
              "height": 40.0,
              "width": 160.0,
            },
          }
        ],
        "data": {
          "rowsLen": 2,
          "colsLen": 2,
          "colDefaultWidth": 160,
          "rowDefaultHeight": 40,
          "colMinimumWidth": 40,
        },
      }
    ],
  },
};

const htmlSample3 =
    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <a href="https://appflowy.io"><i><strong>some text</strong></i></a> with <i>different</i> formats.</blockquote><img src="https://richtexteditor.com/images/editor-image.png" align="center"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you'd like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li></ul><ul><li><img src="https://richtexteditor.com/images/editor-image.png" align="center"></li></ul><ul><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li></ul><ul><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><ul><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li></ul><ul><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
const documentSample3 = {
  'document': {
    'type': 'page',
    'children': [
      {
        'type': 'heading',
        'data': {
          'level': 1,
          'delta': [
            {'insert': 'Welcome to the playground'},
          ],
        },
      },
      {
        'type': 'quote',
        'data': {
          'delta': [
            {
              'insert':
                  'In case you were wondering what the black box at the bottom is – it\'s the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with ',
            },
            {
              'insert': '@lexical/react',
              'attributes': {'code': true},
            },
            {'insert': '. Try typing in '},
            {
              'insert': 'some text',
              'attributes': {
                'bold': true,
                "italic": true,
                'href': 'https://appflowy.io',
              },
            },
            {'insert': ' with '},
            {
              'insert': 'different',
              'attributes': {'italic': true},
            },
            {'insert': ' formats.'},
          ],
        },
      },
      {
        'type': 'image',
        'data': {
          'url': 'https://richtexteditor.com/images/editor-image.png',
          'align': 'center',
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {
              'insert':
                  'Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!',
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {'delta': []},
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {
              'insert':
                  'If you\'d like to find out more about Lexical, you can:',
            }
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'Visit the '},
            {
              'insert': 'Lexical website',
              'attributes': {'href': 'https://lexical.dev/'},
            },
            {'insert': ' for documentation and more information.'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'children': [
          {
            'type': 'image',
            'data': {
              'url': 'https://richtexteditor.com/images/editor-image.png',
              'align': 'center',
            },
          }
        ],
        'data': {'delta': []},
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'Check out the code on our '},
            {
              'insert': 'GitHub repository',
              'attributes': {'href': 'https://github.com/facebook/lexical'},
            },
            {'insert': '.'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'Playground code can be found '},
            {
              'insert': 'here',
              'attributes': {
                'href':
                    'https://github.com/facebook/lexical/tree/main/packages/lexical-playground',
              },
            },
            {'insert': '.'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'Join our '},
            {
              'insert': 'Discord Server',
              'attributes': {'href': 'https://discord.com/invite/KmG4wQnnD9'},
            },
            {'insert': ' and chat with the team.'},
          ],
        },
      },
      {
        'type': 'bulleted_list',
        'data': {
          'delta': [
            {'insert': 'Playground code can be found '},
            {
              'insert': 'here',
              'attributes': {
                'href':
                    'https://github.com/facebook/lexical/tree/main/packages/lexical-playground',
              },
            },
            {'insert': '.'},
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {
          'delta': [
            {
              'insert':
                  'Lastly, we\'re constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.',
            }
          ],
        },
      },
      {
        'type': 'paragraph',
        'data': {'delta': []},
      }
    ],
  },
};

const htmlSample4 = '''<meta charset='utf-8'>
<h1>Problem</h1>
<ol>
    <li>Checkout conversion is too low: only 18% of users who click on “Book” checkout. Comparable funnels for hotel booking sites achieve ~30%(<span></span><a
            href="https://skift.com/2014/03/18/online-booking-abandonment-is-huge-in-travel-as-consumers-comparison-shop/">source</a><span></span>).We are missing out!</li>
    <li>No clear dropout reason: prior support tickets and survey results show a long tail of possible issues (questions on amenities, fees, checkout time), no clear categories.</li>
    <li>Adding help content didn’t do much: last quarter we A/B tested content and UI to better point to help content and booking info. This nudged conversion by 1.5% points.</li>
    <p>I highly recommend bullets for readability. Use bold words to quickly convey the gist of each point, and limit bullets to 2-3 lines. I prefer numbered lists so one can refer to a point verbally.</p>
</ol>''';
const documentSample4 = {
  "document": {
    "type": "page",
    "children": [
      {
        "type": "heading",
        "data": {
          "delta": [
            {"insert": "Problem"},
          ],
          "level": 1,
        },
      },
      {
        "type": "numbered_list",
        "data": {
          "delta": [
            {
              "insert":
                  "Checkout conversion is too low: only 18% of users who click on “Book” checkout. Comparable funnels for hotel booking sites achieve ~30%(",
            },
            {
              "insert": "source",
              "attributes": {
                "href":
                    "https://skift.com/2014/03/18/online-booking-abandonment-is-huge-in-travel-as-consumers-comparison-shop/",
              },
            },
            {"insert": ").We are missing out!"},
          ],
        },
      },
      {
        "type": "numbered_list",
        "data": {
          "delta": [
            {
              "insert":
                  "No clear dropout reason: prior support tickets and survey results show a long tail of possible issues (questions on amenities, fees, checkout time), no clear categories.",
            }
          ],
        },
      },
      {
        "type": "numbered_list",
        "data": {
          "delta": [
            {
              "insert":
                  "Adding help content didn’t do much: last quarter we A/B tested content and UI to better point to help content and booking info. This nudged conversion by 1.5% points.",
            }
          ],
        },
      },
      {
        "type": "numbered_list",
        "data": {
          "delta": [
            {
              "insert":
                  "I highly recommend bullets for readability. Use bold words to quickly convey the gist of each point, and limit bullets to 2-3 lines. I prefer numbered lists so one can refer to a point verbally.",
            }
          ],
        },
      }
    ],
  },
};