-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
add soft line breaks #4565
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
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:
Delta
s 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
inDelta
s 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 newSoftBreak
blot, and changes the definition of the existingBreak
blot. The existingBreak
blot is still a zero-length blot that exists only for rendering purposes. The currentBreak
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.