Skip to content
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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

add soft line breaks #4565

wants to merge 3 commits into from

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 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.

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.

1 participant