question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for multiple line-breaks within a single paragraph

See original GitHub issue

Lines and paragraphs are not same things in typography. Usually, there’s a spacing between paragraphs, which less than the height of a full line, unless there are different elements involved like figures, headings,… And, sometimes, there’s a need to use multiple simple line-breaks for the same paragraph.

Steps for Reproduction

  1. Visit https://quilljs.com/ (demo editor),
  2. Experiment a bit with line breaks (single enter press, double enter press,…),
  3. Inspect class="ql-editor" component.

Expected behavior:

There can be produced output allowing multiple line-breaks within a single paragraph, like:

<p>Some text paragraph</p>
<p>
  Another text paragraph:<br/>
  with<br/>
  multiple<br/>
  lines
<p>
<p>Another paragraph</p>

Actual behavior:

Can’t produce output above.

Suggested behaviour

Simply: when an enter is pressed once, then a line-break is produced. When enter is pressed twice, then a new paragraph is produced.

Technically:

  • when enter is pressed after text (ie. single enter press), then a new line is produced,
  • when enter is pressed at the beginning of the line (ie. double enter press), then the line is converted to paragraph.
  • when delete is pressed on the beginning of the line, then line is merged with previous one,
  • when delete is pressed on the beginning of the paragraph, then paragraph is converted to line, and belongs to previous paragraph.

Not covered:

  • how to treat multiple successive empty lines/paragraphs.

Platforms:

$ uname -a
Linux miroslav-laptop 4.15.0-58-generic #64-Ubuntu SMP Tue Aug 6 11:12:41 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux
$ google-chrome --version
Google Chrome 78.0.3904.108 

Version:

The published one, when this issue is written.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:8
  • Comments:9

github_iconTop GitHub Comments

5reactions
npcolecommented, Jun 13, 2020

(Though whether this should be done automatically — or with a shift enter — is very much open to debate. Following most word processors, it should be the latter.)

4reactions
markleppkecommented, Jan 9, 2020

To support this issue, here is the HTML spec relating to semantic markup: https://www.w3.org/TR/html52/textlevel-semantics.html#elementdef-br

Read more comments on GitHub >

github_iconTop Results From Across the Web

Line and page breaks - Microsoft Support
Keep lines of a paragraph together on a page or in a column · Select the paragraphs that contain lines you want to...
Read more >
Paragraphs and Line Breaks - Mintox
Line Breaks - Hold Shift and Press Enter. When a line break is inserted the cursor moves down a single line, which is...
Read more >
The Dos and Don'ts of Adding an HTML Line Break
Below you'll see the same address rendered in two different ways. The first uses one paragraph element and multiple line breaks.
Read more >
Line Breaks : MGA - Web Development Tutorials
Multiple Line Breaks - TOP ... With <p> and <blockquote> tags, a single blank line appears before and after the enclosed indented text...
Read more >
How to Add a Line Break in WordPress (New Line Spacing)
In most Word processors, you can easily add extra blank line space by pressing the enter key a few times. You can also...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found