Ckeditor5: Configuration to make "enter" insert soft-break instead of paragraph

[zadam]

🆕 Feature request
When user presses enter, CKEditor inserts a new paragraph - i.e. a new line with extra padding on top. Recently with the addition of soft-break feature, user can press shift-enter and a line-break is added (with no extra padding).

This is great, but I believe that certain use cases are more "line oriented" rather than "paragraph oriented" and would benefit from having enter produce line break instead of new paragraph since it would be far more common user action. I think some editors do this by default - e.g. when I press enter in LibreOffice, I get new line without any extra padding (so it appears it's not paragraph).

I know about simple workaround to zero padding/margin of p elements so that they appear as just line-breaks - in fact that's what I'm using right now, but that breaks interoperatibility - copy&paste from ckeditor into other editors (plain or rich text) introduces a lot of vertical padding between "lines" (because they are actually paragraphs).

To summarize in simple terms - what I'd like to see is the possibility to switch keyboard mapping between enter and shift-enter so that enter produces soft-break and shift-enter paragraph.

[Reinmar]

Hi!

If pressing Enter in the editor would enter <br>s, then most people would create such a content:

<p>
    When user presses enter, CKEditor inserts a new paragraph - i.e. a new line with extra padding on top. Recently with the addition of soft-break feature, user can press shift-enter and a line-break is added (with no extra padding).
    <br>
    This is great, but I believe that certain use cases are more "line oriented" rather than "paragraph oriented" and would benefit from having enter produce line break instead of new paragraph since it would be far more common user action. I think some editors do this by default - e.g. when I press enter in LibreOffice, I get new line without any extra padding (so it appears it's not paragraph).
    <br>
    I know about simple workaround to zero padding/margin of p elements so that they appear as just line-breaks - in fact that's what I'm using right now, but that breaks interoperatibility - copy&paste from ckeditor into other editors (plain or rich text) introduces a lot of vertical padding between "lines" (because they are actually paragraphs).
</p>

Yes, the entire content would still be wrapped with a paragraph. That's one thing. Second, if you'd like to turn the first "line" into a heading you'd get:

<h1>
    When user presses enter, CKEditor inserts a new paragraph - i.e. a new line with extra padding on top. Recently with the addition of soft-break feature, user can press shift-enter and a line-break is added (with no extra padding).
    <br>
    This is great, but I believe that certain use cases are more "line oriented" rather than "paragraph oriented" and would benefit from having enter produce line break instead of new paragraph since it would be far more common user action. I think some editors do this by default - e.g. when I press enter in LibreOffice, I get new line without any extra padding (so it appears it's not paragraph).
    <br>
    I know about simple workaround to zero padding/margin of p elements so that they appear as just line-breaks - in fact that's what I'm using right now, but that breaks interoperatibility - copy&paste from ckeditor into other editors (plain or rich text) introduces a lot of vertical padding between "lines" (because they are actually paragraphs).
</h1>

Yes, all 3 lines would be turned into one giant heading. I guess that's not what they'd expect.

CKEditor 4 has a configuration option called config.enterMode. It can be set to ENTER_BR and then the behaviour of the editor changes, so in the above case you'd get:

<h1>
    When user presses enter, CKEditor inserts a new paragraph - i.e. a new line with extra padding on top. Recently with the addition of soft-break feature, user can press shift-enter and a line-break is added (with no extra padding).
</h1>
This is great, but I believe that certain use cases are more "line oriented" rather than "paragraph oriented" and would benefit from having enter produce line break instead of new paragraph since it would be far more common user action. I think some editors do this by default - e.g. when I press enter in LibreOffice, I get new line without any extra padding (so it appears it's not paragraph).
<br>
I know about simple workaround to zero padding/margin of p elements so that they appear as just line-breaks - in fact that's what I'm using right now, but that breaks interoperatibility - copy&paste from ckeditor into other editors (plain or rich text) introduces a lot of vertical padding between "lines" (because they are actually paragraphs).

However nice this seems, it's a road to hell. Mixing inline content and block content creates many inconsistencies and edge cases which the editor needs to handled. You can find some of them in https://github.com/ckeditor/ckeditor5/issues/617.

Therefore, in the past we made a decision that we won't implement this option in CKEditor 5. Today I think that CKEditor 5's architecture would make it easier to implement something similar to this feature, but we still don't plan that.

---

If you'd still like to rehook enter and shift+enter, then it'd look like this:

        editor.editing.view.document.on( 'enter', ( evt, data ) => {
            if ( data.isSoft ) {
                editor.execute( 'enter' );
            } else {
                editor.execute( 'shiftEnter' );
                        }

            data.preventDefault();
            evt.stop();
            editor.editing.view.scrollToTheSelection();
        }, { priority: 'high' } );

[zadam]

I appreciate your comprehensive response. I (kind of) understand the increased complexity of mixed block and inline elements however I still think the use case itself is valid.

After further experimentation I won't be trying to rehook the enter and shift-enter as that might be confusing for the user as well (because of the soft-break behavior in e.g. headings). Since the only trouble I have is with the clipboard interop I'll take a look if I can make things to better behave in the ckeditor5-clipboard.

[Reinmar]

Great job my me – after writing all that I forgot to mention that I'd indeed focus on the integration with clipboard. You can change how the HTML is turned into plain text by CKEditor. Check out the Clipboard's plugin code for some hints. I can help you more tomorrow.

[Reinmar]

OK, here's the bit responsible for the default behaviour:

https://github.com/ckeditor/ckeditor5-clipboard/blob/b0f41adb467f96eacc43ba4e750a9717709970a4/src/clipboard.js#L203-L212

You can easily replace that logic by hooking your listener like this:

editor.editing.view.on( 'clipboardInput', ( evt, data ) => {
   // Your logic goes here...

   // Prevent the default listener from being executed. 
   evt.stop();
} );

[zadam]

Thank you @Reinmar, I've been looking at this code. I'll experiment with it a bit and share my results (if any) here ...

[abdalhadi]

i face the same issue with vue js (corestyles_bold not used)