Empty paragraphs messing up CSS numbering

[guicapanema]

Hello there! First of all thanks for making ContentTools -- it's pretty awesome.

I'm developing a personal project where I'd like my paragraphs to be numbered (I'm using CSS counters for that). Mostly everything works fine, except for an edge case where an empty paragraph is left when saving a document:

In editor view:

After saving:

I'm using the sample sandbox code and tried adding editor._emptyRegionsAllowed = false; to it. Here's how I'm initializing the editor:

window.onload = function() {
var FIXTURE_TOOLS, editor, req;
ContentTools.IMAGE_UPLOADER = cloudinaryImageUploader;
ContentTools.StylePalette.add([new ContentTools.Style('By-line', 'article__by-line', ['p']), new ContentTools.Style('Caption', 'article__caption', ['p']), new ContentTools.Style('Example', 'example', ['pre']), new ContentTools.Style('Example + Good', 'example--good', ['pre']), new ContentTools.Style('Example + Bad', 'example--bad', ['pre'])]);
editor = ContentTools.EditorApp.get();

editor.init('[data-editable], [data-fixture]', 'data-name');
editor._emptyRegionsAllowed = false;

Etc. Am I doing something wrong?

Thanks again! Guilherme

[anthonyjb]

Hi @guicapanema - that's an interesting one - could you send me a snapshot of the page HTML from the DOM/element inspector after the save when this glitch is visible.

Re. _emptyRegionsAllowed I don't believe setting this would help in this situation as it's to do with the whole region being empty not a single paragraph.

[guicapanema]

Hi @anthonyjb ! Thanks for answering and sorry for the delay.

This is what the HTML looks like:

<div class="section" id="conclusion" data-editable="" data-name="conclusion"><h2 class="section-title">
    Conclusão
</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>

</p>
<p>
    Morbi aliquet leo sit amet nisl luctus facilisis sit amet sit amet eros.
</p>
</div>

And this is the result:

From what I see the problem is the empty <p> tag is left in the DOM. It has the CSS's :before attached to it, which is what messes up the numbering. Not a huge deal, but should be an easy fix, right?

[anthonyjb]

@guicapanema so you can remove that behaviour by changing the CSS of course however the default CSS uses an :after pseudo element for empty elements, see here: https://github.com/GetmeUK/ContentEdit/blob/master/src/styles/content-edit.scss#L164

So the before bit is confusing me a little bit.

[guicapanema]

Hi @anthonyjb . Actually, I didn't explain myself well. I added the :before element because I need paragraphs to be numbered, and that's where I'm putting my counters. In a normal situation (that is, with no empty <p> tags), that should work fine.

The main thing here is that I would like the editor to remove empty paragraphs before saving to the database. When I reported this, I was thinking no one would like empty <p>s, but that was really shortsighted.

Perhaps adding an option?

[anthonyjb]

@guicapanema ahh I see - misunderstood initially, this is definitely a bug, the editor should not be leaving those empty paragraphs in the DOM on save by default.

[anthonyjb]

OK new release pushed resolving this issue (1.5.6)