Deleting a line break causes a font issue in Safari and Chrome

[dmzza]

Steps to reproduce

1. Create a content-editable component styled with a non-default font (i.e. Georgia)
2. Type first half, press enter to make a line break, then type second half
3. Move the cursor to the beginning of second half and then press backspace so that first half second half is now on the same line.

Actual Result

4. first half is still using the Georgia font, but now second half is using the system default font.

If you inspect the markup, you can see what the browser does to the text. I won't explain it here.

Expected Result

4. first half and second half should both still be using the Georgia font.

[st-h]

@dmzza Thank you for reporting this. However, I am unable to reproduce this using Safari 12.0.3 on the demo page: https://st-h.github.io/test/linebreak.mp4
Are you sure this is an issue with the add-on? As far as I remember, we do not manage any details how the browser constructs the DOM or manages/renders the actual contenteditable element.
However, I'll happily submit a PR if you are able to find out what is going on.

[dmzza]

@st-h I neglected to mention that this was happening to me when I was using content-editable inside of a <foreignObject> inside of an SVG.

<svg>
  <g>
    <foreignObject width="100% height="100%" font-size="26" font-family="Georgia" font-weight="normal">
      <ContentEditable @value={{this.label}} @placeholder="Editable" />
    </foreignObject>
  </g>
</svg>

That may explain the difference between my issue and your demo.

You're right that this addon doesn't manage the way the browser constructs the DOM, but one css property appears to make all the difference. See #84.