New to Telerik UI for Blazor? Download free 30-day trial

Line Breaks instead of Paragraphs on Editor Enter


Product Editor for Blazor


How to configure the Editor to use line breaks (single line spacing), instead of paragraphs (double line spacing)? Users wish to go to the next line when they press the Enter key, with no extra white space in-between.

Is it possible to change the default behavior of [Enter] to output a <br /> tag? It's easier, compared to using [Shift] + [Enter].

Current Behavior

The Blazor Editor does not have a setting to switch between new paragraphs (<p>) and new lines (<br />) on [Enter]. The built-in behavior is:

  • [Enter] produces a new paragraph (or list item, etc.).
  • [Shift] + [Enter] produces a new line break.

Here is some more context.

ProseMirror Engine

The Telerik Blazor Editor uses the ProseMirror engine. The [Enter] behavior depends on the engine.

The Editor will be able to render <br /> tags instead of <p> tags when we enable developers to implement ProseMirror plugins that tweak the engine behavior.

We recommend following this feature request for future updates.

Side Effects

Our experience with rich HTML Editors shows that using <br /> tags instead of <p> tags can be a fragile feature with unexpected side effects. A lot of core engine functionality relies on paragraphs (or block wrappers in general). That's why we have not been pushing this as a built-in feature so far (the demand is very low too).

Possible Workarounds

If your concern is mainly related to the empty space around paragraphs, these can easily be removed with CSS styles, even when the Editor is in Iframe mode and the editable content is in a separate web document.

Other alternatives may be:

  • Hint end users to use [Shift] + [Enter] instead of [Enter] for <br /> tags.
  • Strip the <p> tags from the Editor value after submit, and replace them with <br />'s. In this case, test the resulting HTML content with the Editor again and see how all enabled tools behave.
In this article