Is there a way to control the order of nested spans being created by styleToHTML

[maierson]

No description provided.

[maierson]

Hello,

Thank you for the good work on this library.

I am implementing background-color AND margin-top on inline styles. This creates 2 nested spans from the following styleToHTML function:

function styleToHTML(style) {
  if(style.startsWith("backgroundcolor-") { // the background color key
     return (
        <span style={{ 
            backgroundColor: style.replace("backgroundcolor-", "") , // the color value
            display: "inline-block", // force sizing
            overflow: "hidden" // keep content from spilling out (consistent line height with editor)
         }} />
      );
  }

  if(style.startsWith("margintop-") {
     return (
        <span
          style={{
            marginTop: `${style.replace("margintop-", "")}px`,
            display: "inline-block"
          }}
        />
    );
  }
}

The order of the created spans differs depending on when the user applies the styles so it can be either:
(the margin is only added to the bottom line)

#1 (good: add margin BEFORE background):

<span style="margin-top:10px">
  <span style="background-color:red">
     text
  </span>
</span>

#2 (bad: add margin AFTER background):

<span style="background-color:red">
  <span style="margin-top:10px">
     text
  </span>
</span>

The problem is that in option #2 the inner span margin will increase the height of the outer span so the red background height will be increased by the size of the margin. I want to consistently obtain option #1 regardless of the order in which the user assigns the color or the margin values. In other words always render the margin span on the outside.

Is this possible?

I've tried programmatically removing the background styles before setting the margin and then adding them back in after setting the margin but I get inconsistent results.

Thank you.

[jtabone16]

@maierson Ever figure this out? Running into the same issue

[maierson]

@jtabone16 To be honest I can't remember. We have a pretty huge codebase and this was a while ago. I know that I'll have to revisit this though in the next month or so. If I find a solution I'll post back. Wish I could be more helpful :/