[Bug] markdown to document newline & image in paragraph

[g-apparence]

Bug Description

When converting a document to markdown we have this

line1
line2

line3
![](https://...img.jpg)

After creating a document from markdown
Appflowy editor renders

line1
line2
line3

How to Reproduce

create a new editor from markdown with the previous content.

• Newline is skipped.
• Images are skipped

Expected Behavior

The empty line should be rendered
THe image should be rendered

Note : the newline is correctly rendered by markdown renderer when exporting markdown from editor.

Operating System

android, ios

AppFlowy Editor Version(s)

latest

Screenshots

No response

Additional Context

No response

[g-apparence]

After searching for a fast solution I found the root error

markdown_paragraph_parser is actually skipping images
Images in markdown seems to be included potentially in a paragraph.
So when this is the case the parser is not including it

instead we should keep images

List<List<md.Node>> _splitByBrTag(List<md.Node> nodes) {
  return nodes
      .fold<List<List<md.Node>>>(
        [[]],
        (acc, node) {
          if (node is md.Element && node.tag == 'br') {
            acc.add([]);
          } else if (node is md.Element && node.tag == 'img') {
            acc.add([node]);
          } else {
            acc.last.add(node);
          }
          return acc;
        },
      )
      .where((group) => group.isNotEmpty)
      .toList();
}

After that if a node is an image inside a paragraph we should include it.
Maybe we could make this a bit more clean but I tried it and it seems to work.
Trying to find some edge cases.

[adnan-nazir]

Same Issue I'm facing while converting Markdown to Document.

Markdown String

### Check the photos from underground clubs all around the world
![image](https://images.unsplash.com/photo-1589421425262-7dd8880e1685?ixid=Mnw4MDgwOXwwfDF8c2VhcmNofDE3N3x8bnVkZXxlbnwwfHx8fDE2NjI3MTM1NTU&ixlib=rb-1.2.1)
These are just a few highlights from the exhibition you can attend this autumn.

After Conversion:

{document: {type: page, children: [{type: heading, data: {delta: [{insert: Check the photos from underground clubs all around the world}], level: 3}}, {type: paragraph, data: {delta: [{insert: 
These are just a few highlights from the exhibition you can attend this autumn.}]}}]}}

IMAGE is missing after conversion.

[adnan-nazir]

But this issue is not only for the images but for the Code Blocks also.

Now I tried Image and Code block

```\nif line.isNotEmpty {\n\tresults.append(.paragraphLine(line))\n}\n```
![image](https://images.unsplash.com/photo-1589421425262-7dd8880e1685?ixid=Mnw4MDgwOXwwfDF8c2VhcmNofDE3N3x8bnVkZXxlbnwwfHx8fDE2NjI3MTM1NTU&ixlib=rb-1.2.1)

And this time image parsed success fully but Code block is missing.

{document: {type: page, children: [
{type: image, data: {url: https://images.unsplash.com/photo-1589421425262-7dd8880e1685?ixid=Mnw4MDgwOXwwfDF8c2VhcmNofDE3N3x8bnVkZXxlbnwwfHx8fDE2NjI3MTM1NTU&ixlib=rb-1.2.1, align: center}}
]}}

[LucasXu0]

@adnan-nazir For the code block markdown parser, you need to import the appflowy_editor_plugins.

Example code:

Document customMarkdownToDocument(String markdown) {
  return markdownToDocument(
    markdown,
    markdownParsers: [
      const MarkdownCodeBlockParser(),
      const MarkdownSimpleTableParser(),
    ],
  );
}