React style error when using inline styles

[ThomWright]

I was about to try to align my img tag using inline styles, when the following error appeared in the preview:

Source

<img src="./simple-3-node-circuit.jpg" style="">

[zning1994]

You can delete the "style="" "and try again.

[ThomWright]

Well, sure, that stops the error, but I'm trying to use inline styles to horizontally centre an image. E.g.

<img src="../imgs/simple-3-node-circuit.jpg"
  style="display: block;
    margin-left: auto;
    margin-right: auto"/>

CSS from here.

[zning1994]

It seems that markdown couldn't use CSS to adjust the words in this display.

[znation]

React uses JS objects to express inline styles, and does not support strings (as shown above). See http://facebook.github.io/react/tips/inline-styles.html

[ThomWright]

Sure, but the fact that this is implemented with React shouldn't be exposed to the user.

[AaronO]

@ThomWright You're right, React should not be exposed to the user it's an implementation detail.

Just to give you an idea of why this happens, we apply virtual dom diffs when updating the preview pane to improve performance and prevent flickering.

The editor now uses React, in previous versions we used the virtual-dom library directly which worked extremely well, but when we switched to React for the rest of the editor it made sense to get the preview updating done via React's diffing library rather than including another virtual-dom library.

We'll fix this soon, there are 3 solutions that we should explore:

• When there's a React error, fallback to a full forced preview refresh
• Try and use React's lower level virtualdom library (I'm not sure this is possible)
• Switch back to our previous strategy (and use a separate virtualdom library)

I hope that explains things, if you have any thoughts I would love to hear them !

[SamyPesse]

Fixed in the new release.