Comments (23)
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
from medium-editor.
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.
from medium-editor.
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.
from medium-editor.
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>")
}
}
from medium-editor.
Other editors, but not Medium.
from medium-editor.
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.
from medium-editor.
+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>
from medium-editor.
@litera is shift+enter is adding a br tag when using medium editor ?
from medium-editor.
@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.
from medium-editor.
@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.
from medium-editor.
@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.
from medium-editor.
@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
from medium-editor.
@hellocosmin it does not on safari through. no line breaks possibles.
from medium-editor.
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?
from medium-editor.
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.
from medium-editor.
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
?
from medium-editor.
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.
from medium-editor.
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.
from medium-editor.
This has also been talked about in other issues, such as #34 and #251
from medium-editor.
@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.
from medium-editor.
@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))
from medium-editor.
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?
from medium-editor.
This
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. #1119Any idea as to how to keep the
<p>
tag after the<br>
on soft return?
Also this adds a <br>
but doesnt move the user cursor after the br
, any idea how to do that ?
from medium-editor.
Related Issues (20)
- Toolbar not showing on selecting text.
- Allow linebreaks instead of paragraphs for copy-pasted code HOT 2
- Import for sveltekit HOT 1
- uploadCompleted option issue
- Handling bi-directional text RTL mixed with LTR HOT 3
- Update your list of plugins
- Usage with React? HOT 3
- Use inside `ShadowRoot`: Framework LitElement
- No placeholder on elements added to editor
- Can't add images HOT 1
- Let H1 - H6 Button Icons work with fontawesome v5 & v6
- How to disable undo/redo ?
- Is it possible to reduce the amount of times a user can 'Indent'
- Duplication of First letter in Korean
- Any way to add photo through plus button like medium??
- Is there a way to always show the plus icon for the new line instead of on hovering? HOT 1
- paste with cleanPastedHTML=true dont keep line break
- Project Status HOT 3
- value goes missing when we style it second time in iframe
- Question: Is it possbile to have two toolbars on the same class? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from medium-editor.