[BUG] br tags are not exported on empty p tags

[grimly]

I'm submitting a

• [ ] Regression (a behavior that used to work and stopped working in a new release)
• [x] Bug report
• [ ] Enhancement
• [ ] Feature request
• [ ] Documentation issue or request

Description

When you add new empty lines on the editor, the editor uses <br> tags to have the empty lines still show up. When emitting the user input on (ngModelChange), these <br> tags are not in the emitted html. This results in the absence of any vertical spacing (through empty lines) the user would want to use.

In the reproduction app below is the editor this library offers, a direct preview throught angular [innerHtml] directive and the html code as is in a <pre>. Add some text and empty lines, the empty lines will not show up in the exported html code.

I also added a transformation adding back these <br> tags but this only work in the output binding direction.

A two way binding with the code below in the html setter creates weird behaviors on the editor and the exported value.

    this.html$ = html.replace(/<p><\/p>/ig, '<p><br><\/p>');

Version Information

ngx-editor: 11.1.0
angular: 12.2.7

Reproduction

https://stackblitz.com/edit/ngx-editor-with-preview

Browser

• [x] Chrome - 88
• [ ] Mozilla Firefox - x.x.x
• [ ] Opera - x.x.x
• [ ] Microsoft Edge - x.x.x

[sibiraj-s]

@grimly this is expected. the br tags are added by ProseMirror avoid some weird cursor issues with empty blocks. For ProseMirror this enables editing empty blocks. That is why it is not part of the document and ignored in the output.

Either you should not rely on br tags for vertical spacing. or use a proper serializer.

IMO. what you have done

html.replace(/<p><\/p>/ig, '<p><br><\/p>')

is simple and enough.

Feel free to continue the discussion, If you have any questions.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in the thread.