Inner <p> on the element even if MediumEditor is applied to a text element

[brunomperes]

Version: 4.12.11

I am calling MediumEditor to this element:

<p>Lorem ipsum dolor sit amet consectetur.</p>

But after any key press, the element is transformed into:

<p><p>Lorem ipsum dolor sit amet consectetur.<p></p>

Same happens to h1 - h6.
The behaviour is probably caused because of this line. Which causes to call formatBlock, if node has no children.

Since I haven't seen any recommendation to only apply the Editor to wrapping divs, my guess is that it is not an expected behaviour.

I'm thinking that a verification before formatting the block to add a <p> inside should fix it.
Something like:

var skipFormattingTags = ['P', 'H1', 'H2', 'H3', 'H3', 'H4','H5', 'H6'];
if (skipFormattingTags.indexOf(node.tagName) === -1){
  if (node.getAttribute('data-medium-element') && node.children.length === 0) {
    this.options.ownerDocument.execCommand('formatBlock', false, 'p');
  }
}

I'd be happy to send a PR if the solution seems sufficient.

[nmielnik]

@brunomperes is there a reason why you wouldn't want to start with a <div> as the medium-editor element? Something like:

<div class="editor"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

where the <div> is what gets passed when initializing MediumEditor?

[brunomperes]

Actually, yes. There are two unwanted behaviours (not sure if contenteditable's or editor's):

1. When I have a wrapper div, and click at the end of the line and press delete, it deletes other tags. For instance, clicking on the final mark and pressing delete twice, it changes from:

<div class="editor"><p>Lorem ipsum dolor sit amet consectetur.</p><i class="fa fa-gear"></i><i class="fa fa-trash"></div>

To:

<div class="editor"><p>Lorem ipsum dolor sit amet consectetur.</p></div>

2. It removes the default element tag when all text is removed, then another backspace is pressed.
   So, when I have:

<div class="editor"><h2></h2></div>

Click to edit and delete, it changes to:

<div class="editor"><p></p></div>

So I noticed that when I applied medium-editor activation to the inner tag (<p> or <h2>), instead of the wrapper div, these behaviours didn't happen.

[nmielnik]

1), what are you trying to achieve with the <i> tags? Anything within the editor can be deleted, so if you're trying to add some sort of icons, perhaps you should have them outside of the editable content or try to achieve your goal via css? The editor will always users to delete content out of it, you can also try adding contenteditable=false to the <i> tags, but I've seen a fair amount of problems related to that approach (particularly while moving the cursor around these elements in firefox)

2. Try starting with a <br/> tag within your elements:

<div class="editor"><h2><br/></h2></div>

That should prevent the editor from converting it to a <p>

[brunomperes]

Thanks for the reply @nmielnik

1. I'm adding extra actions to that editable block, so I inject the <i> inside the wrapper tag and attach some event handlers to it, as in the attached image:
   
   I've tried setting contenteditable="false" to the <i> tags, but as you said there are some issues: it prevents the icons from being removed when delete is pressed at the end of the line, but not when all the content is removed and another backspace is pressed. :/

2. I've tried having a <br/> at the beginning but as soon as I add some text the <br/> disappears. Is it only on medium-editor v5?

[brunomperes]

On a side note, I've noticed a third behaviour, but it isn't fixed by the initial approach (which started this issue):
3) If I have

<div class="editor"><h2>Lorem ipsum</h2></div>

Then click at the end of the text, and press return, it creates a <p> element, instead of <h2>:

<div class="editor"><h2>Lorem ipsum</h2><p>asdfadf</p></div>

Is there a way that it uses the same tag on that .editor block?

[nmielnik]

For 1), I would recommend try using absolutely positioned elements, or pseudo-elements to get those icons in there, I think it will be a struggle to have them as actual elements inside the editor element.

2. I thought your concern was having the <h2> converted to a <p>? What's the side-effect of the <br/> being removed when you start typing?

3. This seems like something the browser is doing on its own, so it would require some new code to be added for it to work.

If possible, it might be worth trying out some of this stuff with version 5.0 and see if any of these issues might be resolved. I'm not sure if they would, but it could be worth investigating.