Add SoftBreakExtension for opt-in soft line break behavior#738
Add SoftBreakExtension for opt-in soft line break behavior#738flavorjones wants to merge 1 commit into
Conversation
Single Enter inserts a <br> instead of a paragraph break, double
Enter converts to a paragraph break, and Backspace at a paragraph
start merges with a <br>. This allows apps like BC5 and Fizzy to
use proper paragraph spacing CSS while preserving the expected
typing experience.
Consumers opt in via:
import { configure, SoftBreakExtension } from "lexxy"
configure({ global: { extensions: [SoftBreakExtension] } })
flavorjones
force-pushed
the
flavorjones/soft-line-breaks
branch
from
b5e9926 to
e176435
Compare
samuelpecher
left a comment
samuelpecher
left a comment
There was a problem hiding this comment.
I like this, especially fitting with Lexical's $ convention.
As I was reviewing, I paused as I noticed the commands seem to be overriding two in-built Element node behaviors: insertNewParagraph and collapseAtStart. I wonder if an overriden ParagraphNode with node replacement might be more natural?
| KEY_ENTER_COMMAND, | ||
| (event) => handleEnterKey(event), | ||
| COMMAND_PRIORITY_NORMAL | ||
| ) | ||
|
|
||
| editor.registerCommand( | ||
| KEY_BACKSPACE_COMMAND, |
There was a problem hiding this comment.
I think the better move here is to move an abstraction level up and handle INSERT_PARAGRAPH_COMMAND and DELETE_CHARACTER_COMMAND (with backwards=true) unless you really need to handle the event.
| let currentNode = node | ||
| while (currentNode) { | ||
| if ($isParagraphNode(currentNode)) { | ||
| return currentNode | ||
| } | ||
| currentNode = currentNode.getParent() | ||
| } | ||
| return null |
There was a problem hiding this comment.
this pattern can usually be collapsed into $getNearestNodeOfType(node, ParagraphNode) or $findMatchingParent(node, $isParagraphNode) ( I prefer n ° 1 😉)
There's a few of these in the code due to be tightened
| secondChildren.forEach(child => { | ||
| firstParagraph.append(child) | ||
| }) |
There was a problem hiding this comment.
Very nittish: append can take a destructed array
| secondChildren.forEach(child => { | |
| firstParagraph.append(child) | |
| }) | |
| firstParagraph.append(...secondChildren) |
OR a step further
| secondChildren.forEach(child => { | |
| firstParagraph.append(child) | |
| }) | |
| firstParagraph.append(lineBreak, ...secondChildren) |
| export default class SoftBreakExtension extends LexxyExtension { | ||
| get lexicalExtension() { | ||
| return SoftBreakExtensionDefinition | ||
| } | ||
| } |
There was a problem hiding this comment.
As a user of Lexxy Extensions, does the API feel right?
|
Please see #741 for an alternative approach. |
|
Closing in favor of #741 which is simpler, more extensible, and doesn't modify the editing experience. |
2 participants
When loaded, the
SoftBreakExtensionchanges some keystrokes to preserve true markdown-style vertical whitespace:<br>instead of a paragraph break,<br>.This allows apps like BC5 and Fizzy to format pasted Markdown properly while preserving the application-specific typing experience.
Consumers opt in via:
ref: https://app.3.basecamp.com/2914079/buckets/44335813/messages/9589745694