Medium-editor: Add option for return key adding line break, and double enter adding new paragraph

[sathishmanohar]

Currently pressing the return key once creates new paragraph, which I feel is counter intuitive. By defaulting to line breaks on single return and paragraphs on double returns, It'll feel lot more intuitive, since many other editors and word processors use the same pattern.

[websirnik]

Other editors, but not Medium.

[sathishmanohar]

In that case a configuration to achieve the same would be sufficient. Since, this is going to be used in many projects, of which most users won't be familiar with medium editor's way of doing things.

[litera]

Basically _other editors and word processors_ i.e. Word use single ENTER to create new paragraphs. Same as here. Soft returns have always been implemented using SHIFT+ENTER keyboard combination. And even here in Medium editor this creates a <br/> tag. To me this is perfectly correct, consistent and _intuitive_ because it doesn't introduce new behaviour.

• ENTER is new <p></p>
• SHIFT+ENTER is <br/>

Current behaviour: Correct and the way it should stay.

The only thing that can be discussed here is some configuration addition to break this widely acknowledged consistency.

[jhiver]

+1 here... I'm trying to use medium editor in a personal project but paragraphs are really annoying.

It would be nice to have some options to map single enter, double enter, and even triple enter to something else, i.e.

enter: <br>
double enter: <p>
triple enter: <hr>

[benbonnet]

@litera is shift+enter is adding a br tag when using medium editor ?

[cossssmin]

@bbnnt yes it does, you can check the demo using a browser inspection tool.

Since someone brought this up, I have another (related) concern. Here's the scenario:

• I have a .editable on which I use ME; this element is a block level (h1, div...)
• using Shift+Enter correctly adds a <br>
• hitting Backspace to undo/remove that <br/> wraps the entire .editable contents inside a <p></p>

This results in incorrect formatting, since I now have a paragraph inside my h1, for example. Might be a smaller issue for web view, but in email design this is a nightmare.
I know there are ways of dealing with this (like unwrapping the contents or using something like jQuery htmlclean() plugin ), but could we consider a possible option for ME, by which we can turn paragraph wrapping on/off?

ME can be used in so many applications and it would be a really useful option to have (especially in email layout editors), instead of having to manually clean HTML or removing some code in the core.

[litera]

@bbnnt As @hellocosmin pointed out, the answer to your question is yes, Shift + ENTER creates a <br />.

@hellocosmin: This issue you're having is very likely due to editable behaviour of specific browser. You can check individual browsers if they all act the same. but in order to solve your issue you can always _unwrap_ your content if wrapping is inside a p element.

I've had an issue with Chrome browser creating span elements with inline styles that was particularly annoying because it was setting font-size style. So I added my code that unwrapped span content and everything's ok now. You can do the same for your paragraph wrapping.

[cossssmin]

@litera Checked in both Chrome and Firefox, it does exactly the same thing.

Commenting out this line, makes it work fine (i.e. not wrapping the contents in a paragraph):
https://github.com/daviferreira/medium-editor/blob/master/dist/js/medium-editor.js#L1799

Edit: just tested IE11, it does not have this behavior. I still think that entire if statement should be left as a choice/option for the user to turn on.

[benbonnet]

@litera @hellocosmin thanks a lot lot for your hints
unfortunately, the shift+enter does creates a br :/
hope I'll get over this
I'll check this span thing that occurs on my side that is extremely (!!) annoying

[benbonnet]

@hellocosmin it does not on safari through. no line breaks possibles.

[nmielnik]

To clarify this issue, I believe the correct way to summarize this would be:

Expose option to have pressing ENTER insert a <br> tag, instead of creating a new <p> by default.

Something like a singleEnterBlockElement option, which is true by default, but when turned off, will insert a <br> for single ENTER, and a <p> for ENTER x 2

[frankrousseau]

Hello there,

Thank you for Medium-editor, it's really a nice and beautiful editor. So good, that our team integrated to the webmail we are building. Because it's a webmail we would like to have the behavior of shift+enter when only enter is typed. I wanted to modify directly the source code of the version we embed, but I can't find what should be changed.

Commenting https://github.com/yabwe/medium-editor/blob/master/src/js/core.js#L142 and https://github.com/yabwe/medium-editor/blob/master/src/js/core.js#L153 doesn't change anything.

Do you have any idea of what should be changed for return key adding line break?

[nmielnik]

So https://github.com/yabwe/medium-editor/blob/master/src/js/core.js#L14 is closer along the lines of what you would want to do. This is where the code handles preventing newlines when ENTER is pressed (disableEnter and disableDoubleEnter).

Your custom code could manually subscribe to editableKeydownEnter like we do here which is where we detect if disableEnter or disableDoubleEnter options have been added.

Once you've detected SHIFT + ENTER, you'll want to call preventDefault() and then add your logic for adding a linebreak the way you want.

If you get this working, this is definitely something that we would love to have in MediumEditor. As you can see by this issue, there have definitely been requests for it. We would just want a new Option so that you could toggle it on and off.

Hope that helps.

[frankrousseau]

Thank you for your detailed answer. I already tried to comment these lines and add a insertHTML command with <br> inside. It works but it messes up everything with the focus and the br tag is not located where I would like.
What I noticed is that when you do shift + enter, it's the expected behavior. So my question is how can I bind this behavior directly with enter?

[nmielnik]

Outside of handling keydown on ENTER and inserting the HTML yourself, I'm not sure of a way to do this. I don't believe you can mimic the browser's built-in handling of SHIFT + ENTER but it could be worth doing a little searching to see how others may have handled it.

[frankrousseau]

Ok it's the browser which performs the change not the editor. I understand now why I didn't find the code for it. So, I will go that way. Thank you.

[nmielnik]

This has also been talked about in other issues, such as #34 and #251

[sedletsky]

I'm trying to implement Medium editor behavior: I need to insert line break (<br>) on Shift+Enter and clone paragraph (<p>) on Enter. I have editable section with paragraphs. I wrote these code:

var e = new MediumEditor("[contenteditable=true]")
e.subscribe("editableKeydownEnter", function (event, element) {
    if (event.shiftKey) {
        event.preventDefault()
        var node = MediumEditor.selection.getSelectionStart(this.options.ownerDocument)
        MediumEditor.util.insertHTMLCommand(this.options.ownerDocument, "<br>")
    }
}.bind(e))

It doesn't work properly (inserting and p and br and everything is buggy). Where is mistake? I losing a hope.

[nmielnik]

@sedletsky can you verify that this wasn't the default behavior that browsers implemented?

As far as I've seen and heard, when you hit ENTER inside a contenteditable element, the browsers inserted new <p> elements, and when you hit SHIFT + ENTER it would insert a <br/>. Based on that, it doesn't seem like you would need to add any functionality.

[lordmaul]

@sedletsky Try the following. It should work

editor.subscribe("editableKeydownEnter", function (event, element) {
                if (event.shiftKey) {

                    var node = MediumEditor.selection.getSelectionStart(editor.options.ownerDocument)
                    MediumEditor.util.insertHTMLCommand(editor.options.ownerDocument, "gello")
                    event.preventDefault()
                }
            }.bind(e))

[timurguseynov]

This might work:

```javascript var e = new MediumEditor("[contenteditable=true]")
e.subscribe("editableKeydownEnter", (event, element) => {
if (event.shiftKey) {
event.preventDefault()
event.stopPropagation()
MediumEditor.selection.getSelectionStart(this.options.ownerDocument)
MediumEditor.util.insertHTMLCommand(this.options.ownerDocument, "
")
}
}

[yepecece]

This might work:

e.subscribe("editableKeydownEnter", (event, element) => {
    if (event.shiftKey) {
        event.preventDefault()
        event.stopPropagation()
        MediumEditor.selection.getSelectionStart(this.options.ownerDocument)
        MediumEditor.util.insertHTMLCommand(this.options.ownerDocument, "<br>")
    }
}

This correctly adds a <br> but it closes the <p> tag before inserting it (in safari).
I'm trying to fix the soft return bug in safari with this. #1119

Any idea as to how to keep the <p> tag after the <br> on soft return?