Adding a heading right after an image removes the heading formatting

[bdcorps]

Describe the bug When you add a heading (say H2) right after an image, the markdown that's saved does not respect H2's formatting

To Reproduce Steps to reproduce the behavior:

1. Set this HTML content on the Tiptap editor:

<img src="https://cdn.engyne.ai/54992cd1-3bd0-412f-a2d3-e8fc25d31bf2.png"/>
 <h2>This should be an H2</h2>

2. Use tiptap-markdown to convert to Markdown
3. Set that markdown on the editor again
4. Notice that the formatting on the H2 is gone and has become plain text that says ## This should be an H2

Expected behavior The formatting should intact for any element added directly after an image.

Screenshots https://github.com/aguingand/tiptap-markdown/assets/6132555/9263c6ed-c7b0-4f0e-b7fb-2801a08b6d80

Desktop (please complete the following information):

• Chrome 120.0.6099.216

Additional context If I add a "new line" between the image and the heading, then the formatting stays intact.

Reproduction Here's the CodeSandbox.

[bdcorps]

As a workaround, I'm using Regex to detect image in the output markdown and add newlines after it.

[bdcorps]

You can see here that the Markdown output from tiptap-markdown emits the image without a "\n" causing the next element to not be separate.

[aguingand]

Can you provide a reproduction on Codesandbox or a github repo ?

As a sidenote, FYI the <img> must be wrapped inside a <p>

[bdcorps]

Added a CodeSandbox in the first message. I tried adding the p around the img in the repro but that didn't help.

[fgatti675]

Stumbled upon the same issue!

[booni3]

As a sidenote, FYI the <img> must be wrapped inside a <p>

Unless you set inline:true within the tiptap image extension, the images are not inside a p tag by default.

Image.configure({
    inline: true,
})

Using inline images caused some odd UX unless you actually want inline images. You have to press enter after adding an email to get out of the image's p tag and continue writing.

This is how the markdown is parsed if you do not use inline images.

# Title

![](https://image.png)## Subtitle

What we need is:

# Title

![](https://image.png)

## Subtitle

I am currently fixing this in php before DB save:

public function sanitizeMarkdown($content)
{
    $pattern = '/(!\[[^\]]*\]\([^)]+\))\\\\?(#+)/';
    $replacement = '$1' . PHP_EOL . '$2';
    return preg_replace($pattern, $replacement, $content);
}