const htmlSample1 = '''
AppFlowy Editor is a highly customizable rich-text editor
Here is an example your you can give a try
Span element
Span element two
Span element three
This is a quote!
Code block
Italic one
Italic two
Bold tag
You can also use AppFlowy Editor as a component to build your own app.
If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!
'''; 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 = '''a | c |
b | d |
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 @lexical/react. Try typing in some text with different formats.
Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!
If you'd like to find out more about Lexical, you can:

Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.
'''; 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 = '''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.