Medium.js

Medium.js copied to clipboard

Hey there, just looked around and found medium.js. On the example pages it says all the html behind the scenes are always correct. that's not true. e.g. in the example "Rich with Insert Html". If I wrote some text and pressed the button "Insert" afterwords a few time, it produces invalid html.

html result:

<div id="rich_with_insert_html" class="article demo Medium Medium-rich" contenteditable="true">sad asdasd
<p style="background-color: yellow;">   Happy day!  I can work with buttons too!
  <p style="background-color: yellow;"> Happy day!  I can work with buttons too!
    <p style="background-color: yellow;">   Happy day!  I can work with buttons too!
      <p style="background-color: yellow;"> Happy day!  I can work with buttons too!
      </p>
    </p>
   </p>
</p>
</div>

Seems it's because of tags: null in the Medium instance config, which means no (or less?) control over tags inserted/created.

Shift + Enter in the "Rich" example (which otherwise seems the closest to my desired results of all the examples) causes un-marked up text() nodes, unwrapped with p tags.

This is possibly up for debate but I'd say a paragraph of text not marked up with a paragraph tag is non-semantic. Indeed many of the examples generate divs and i'm struggling to think of a use for Medium where you'd ever want that, but still, you don't want to be too prescriptive.

Either way, from an styling perspective since p usually gets specific margin/padding in most designers' typesetting systems, the non-p nodes would be problematic to style.

@bonfish was right. What you are seeing is a special use case where we are using tags: null turns off clean up. I think for the docs I should probably correct this so it isn't so confusing. Thanks for the find!

I noticed that when I insert html that is block into a paragraph, it does in fact break the semantics, so that will need to be handled. A link on how it has been solved: http://jsbin.com/efegiz/2/edit?html,js,output