Skip to content

Conversation

@DeanWay
Copy link

@DeanWay DeanWay commented Jan 13, 2025

This PR proposes to add the ability to insert "soft" line breaks. A "soft" line break is defined as a line break that continues the current block formatting.

So, to use markdown as an example, the first bullet point here includes a soft line break, whereas there is a hard line break between the first and second bullet blocks:

  • this is
    the first bullet block
  • this is the second bullet block

This implementation represents soft breaks in 2 ways:

  • in the data layer, soft breaks are represented in Deltas as regular text, with each soft break being a single \u2028 character. This character was chosen because a line break within a paragraph seems to be its intended use (see https://codepoints.net/U+2028?lang=en), and given this character exists, a special case embed insert shape for soft line breaks is not necessary in a Delta. Using a character also allows for inserts to be combined more often, resulting in less duplication of attributes, and less overall operations for the same delta. This mirrors the use of \n in Deltas to represent hard line breaks.
  • in the view layer, soft breaks are represented as <br class="soft-break" />.

So, for example, the Delta:

[{insert: "Hello\u2028World"}, {insert: "\n", attributes: {list: 'ordered'}}]

would be rendered as:

<ol>
  <li data-list="ordered">
    Hello
    <br class="soft-break">
    World
   </li>
</ol>

In order to represent soft breaks as <br class="soft-break" /> in the DOM, this implementation introduces a new SoftBreak blot, and changes the definition of the existing Break blot. The existing Break blot is still a zero-length blot that exists only for rendering purposes. The current Break blot is only rendered when a block is empty. This PR changes that to also include the case when a block ends with a soft break. This allows a soft break at the end of a block to be properly rendered, since the browser always ignores an "end of line-breaking element" <br /> tag.

This PR also adds a keyboard binding of SHIFT+ENTER to insert a soft line break. This keyboard binding is consistent with many text editors and with many of the feature request issues made on this subject.

if (child instanceof Break) {
child.optimize();
}
});
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found it was necessary to add these calls to optimize here since it seems that optimize is not called when using the editor methods to modify text (i.e. applyDelta, insertText, etc.). This appears to be the case because the existing call to optimize in ScrollBlot depends on there being 1 or more mutations causing the change, which only happens when the editor contents is changed through some user action in the browser.

If there is some better way of accomplishing this than what I've done here, please let me know.

@jason-nabooki
Copy link

This would resolve the following issues (possibly many more)

#4248
#4412
#2872
#2469
#2872

It would be amazing if this gets merged, it's such an important feature for an editor.

@Anisy91
Copy link

Anisy91 commented Feb 5, 2025

It would be great to have this as soon as possible. A lot of frustration in not being able to have list items with content in between them :(

@brusch
Copy link

brusch commented Feb 26, 2025

Great addition 👍♥️

@MevenIDM
Copy link

MevenIDM commented Apr 4, 2025

Hello Dean,

Thank you for your PR. I struggled all day to recreate a line break while keeping all other functionalities working (undo, redo, paste, etc.). I found some other examples that recreate the <br> behavior, but they all start to break when using undo/redo. Your PR manages to handle all of this.
For now, I'll be compiling your branch until it is merged to master.
Thank you again.

@VictoriaVasys
Copy link

any updates here? would be very helpful to have semantic line breaks 🙏🏼

@vincentdchan
Copy link

vincentdchan commented May 21, 2025

Hi! @DeanWay This PR is awesome!
Would you like to change the target to my fork version: https://github.com/vincentdchan/quill-next which published as quill-next
I'll keep maintaining Quill and adding new features.

@xcrap
Copy link

xcrap commented May 21, 2025

I've just tried quill (after some years) to replace ckeditor, but without this is pointless. I see this was debated over years.. is the project still going on or should i find an alternative?!

@DeanWay
Copy link
Author

DeanWay commented May 21, 2025

any updates here?

It appears that the maintainers of this project have been working on other things, and haven't focused on contributions here in a while. This is waiting for their review.

I have merged this change into my company's fork of Quill. It's been working for us in production without any known issues.

Would you like to change the target to my fork version

@vincentdchan I'm not currently interested in contributing to any other fork, but if you want to clone this change and add it to your fork, you're welcome to do so 🙂

@vincentdchan
Copy link

Sounds good to me. Thanks @DeanWay
This change has been merged to quill-next package and published as [email protected] thanks to @kozi in 32
For anyone interested in using this feature, this package is worth checking out!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants