Trix: Extra <br> tags added before lists and blockquotes

[radcliff]

I am noticing that the Trix parser is adding extra <br> tags before lists and blockquotes when parsing pre-existing HTML. This seems to be the same issue as #84, except I am noticing it even when the elements are not nested. Maybe I am doing something wrong? Using version 0.9.5. Would appreciate any help/direction with this :smile: thanks

Here is a screen shot:

Here is the raw HTML in the hidden input

<input type="hidden" name="content" id="trix-editor-input" value="
<p>Here is a list:</p>
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<p>How about a numbered list</p>
<ol>
  <li>ya</li>
  <li>yo</li>
  <li>yeah</li>
</ol>
<p>Here is a sentence.</p>
<blockquote>
  <p>And here is a blockquote</p>
</blockquote>
<p><strong>Here is a bold sentence.</strong></p>
<blockquote>
  <p>And here is a block quote</p>
</blockquote>
<p>Here is a sentence.<br>
Here is another sentence.</p>">

Here is the HTML shown in the editor. Note <br> tags inserted

<div>
    <!--block-->Here is a list:
    <br>
    <br>
  </div>
  <ul>
    <li><!--block-->item 1</li>
    <li><!--block-->item 2</li>
    <li><!--block-->item 3</li>
  </ul>
  <div>
    <!--block-->How about a numbered list
    <br>
    <br>
  </div>
  <ol>
    <li><!--block-->ya</li>
    <li><!--block-->yo</li>
    <li><!--block-->yeah</li>
  </ol>
  <div>
    <!--block-->Here is a sentence.
    <br>
    <br>
  </div>
  <blockquote>
    <!--block-->And here is a blockquote
  </blockquote>
  <div>
    <!--block--><strong>Here is a bold sentence.<br></strong>
    <br>
  </div>
  <blockquote>
    <!--block-->And here is a block quote
  </blockquote>
  <div>
    <!--block-->Here is a sentence.<br>
    Here is another sentence.<br>
    <br>
    <br>
  </div>

[javan]

Trix's HTML parser loosely translates block element margins into <br>s to visually preserve the spacing between them. So those extra <br> tags are from the <p>s in your HTML, which I'm guessing have a bottom margin in your CSS.

// p { margin: 1em 0 0 0; }
element.editor.insertHTML("<p>a</p>")
element.value // <div><br>a</div>

// p { margin: 0 0 1em 0; }
element.editor.insertHTML("<p>a</p>")
element.value // <div>a<br><br></div>

// p { margin: 1em 0 1em 0; }
element.editor.insertHTML("<p>a</p>")
element.value // <div><br>a<br><br></div>

// p { margin: 0; }
element.editor.insertHTML("<p>a</p>")
element.value // <div>a</div>

[javan]

If you're finding the behavior problematic in some way, let me know. Closing for now.

[radcliff]

@javan thanks for the quick response! This is definitely the issue. I don't think I would have ever been able to figure that out!

I suppose that it is strange that a css style will become an element that the user can interact with. Because the <br> is editable, it is possible to focus it, which makes it seem more like a p to me. I can even delete it by pressing backspace, which will change the arrangement of the elements in the editor but have no effect on the underlying data. This behavior seems confusing and unintended to me -- perhaps there is a better way

[aletorrado]

This is very annoying to me. How can I make trix to output regular <p> paragraphs?

[danielpuglisi]

@javan is there a way to remove the <br> tags from the last element? p:first-child { margin: 0 } works but p:last-child { margin: 0 } doesn't.