Inconsistent host behavior with Office JS insertHTML and paragraph formatting

Question

I've noticed an inconsistency in office-js between Word 2016, Word for Mac and Word Online.

When inserting a single <p> element with block/paragraph formatting, it seems that Word 2016 does not apply the paragraph formatting as defined in the style attribute of the <p> element. I can reproduce this both in the body of the document and in a Content Control.

When I execute this snippet in an empty document on Word 2016 or Word for Mac:

await Word.run(async (context) => {

    context.document.body.insertHtml(
        "<p style='text-align:right'>This should be right aligned!</p>",
        "replace");

    await context.sync();
});

the paragraph gets inserted but stays left aligned.

When I execute the same snippet on Word Online, the paragraph is right aligned, as expected.

ScriptLab Gist

An ugly workaround is to add a <br/> element after the <p> block:

"<p style='text-align:right'>This should be right aligned!</p><br/>",

This forces Word 2016 to apply the formatting of the <p> block, but we cannot apply this in all situations as it sometimes breaks the rest of the page. It's also not what we expect to have to do.

Is there another way to insert HTML that contains a single paragraph formatted <p> block that works on all hosts?

Answer 1

This is a known bug. Until it is fixed, you've found what is probably the best workaround, which is to add the <br/> (or and empty <p></p>).