-
Notifications
You must be signed in to change notification settings - Fork 3.6k
add soft line breaks #4565
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
add soft line breaks #4565
Conversation
packages/quill/src/blots/block.ts
Outdated
| if (child instanceof Break) { | ||
| child.optimize(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
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.
|
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 :( |
…element when a soft break is the last leaf in a block nested in some inline parent
|
Great addition 👍 |
…break to be semantically a soft break given its position in a line
|
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. |
|
any updates here? would be very helpful to have semantic line breaks 🙏🏼 |
|
Hi! @DeanWay This PR is awesome! |
|
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?! |
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.
@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 🙂 |
|
Sounds good to me. Thanks @DeanWay |
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:
the first bullet block
This implementation represents soft breaks in 2 ways:
Deltas as regular text, with each soft break being a single\u2028character. 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\ninDeltas to represent hard line breaks.<br class="soft-break" />.So, for example, the Delta:
would be rendered as:
In order to represent soft breaks as
<br class="soft-break" />in the DOM, this implementation introduces a newSoftBreakblot, and changes the definition of the existingBreakblot. The existingBreakblot is still a zero-length blot that exists only for rendering purposes. The currentBreakblot 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.