Issue with Inserting and Retrieving <hr> Tag in Word Using Office JS API

Platform : PC desktop Host: Word Office version number: Microsoft® Word for Microsoft 365 MSO (Version 2404 Build 16.0.17531.20140) 64-bit Operating System: Microsoft Windows 11 pro.

Hi team, I am facing an issue while using the Office.js API to insert and retrieve an \

tag in a Word document. The id attribute of the \

tag is not preserved, and the tag is placed under a different \

upon retrieval.

Below are the details of the problem and the code snippets I am using.

To Insert hr Tag:-

var selection = context.document.getSelection();
const pgCC = selection.insertContentControl();
var html = `<div id="pageNum"><h5 align="center" style="color:black">#</h5><hr id="${pgCC.tag}" style="margin-top: -22px;"></div>`;
pgCC.insertHtml(html, Word.InsertLocation.replace);

To retrieve hr Tag:-

var body = context.document.body;
var bodyHtml = body.getHtml();
await context.sync();
var parser = new DOMParser();
var doc = parser.parseFromString(bodyHtml.value, "text/html");

Issue:- 1.Tag Placement: When retrieving the HTML, the \

tag is placed under a different \

than the one I inserted. It does not maintain the same structure.

2.ID Attribute Missing: The id attribute of the \

tag is missing when I retrieve it back. It seems that the id assigned during insertion is not preserved.

Have attached Snapshot of doc for reference.

Could you please assist me with this issue and provide a proper resolution? Additionally, let me know if I'm doing anything incorrectly or if I should try a different approach.

Thanks.

GajananVadekar commented 2 months ago

I'm bit surprised to see the status of the ticket, as it hasn't been assigned to anyone yet.

GajananVadekar commented 2 weeks ago

Hi @michelleranmsft @jipyua , Is there any update on the above concern..?

RuizhiSunMS commented 1 week ago

@GajananVadekar , sorry for the last response. Looks we had a handover mistake. We will pick it up. Create an item #9513299 for us to track internally. We will involve experts in and will reply here if any update.

As for missing 'id' attribute, I wonder if you once set that attribute. I did a try like the below and it worked.

async function run() {
  await Word.run(async (context) => {
    var selection = context.document.getSelection();
    const pgCC = selection.insertContentControl();
    pgCC.tag = "123";
    pgCC.load("tag");
    await context.sync();
    console.log(pgCC.tag);
    var html = `<div id="pageNum"><h5 align="center" style="color:black">#</h5><hr id="${pgCC.tag}" style="margin-top: -22px;"></div>`;
    pgCC.insertHtml(html, Word.InsertLocation.replace);

    await context.sync();
  });
}

As for the unexpected tag, my result is like this I want to double confirm with you that, you are saying the h5 is missed?

GajananVadekar commented 1 week ago

@RuizhiSunMS , When retrieving the hr tag, I'm not getting its id attribute. I believe you used the code I provided earlier for retrieving the hr tag. Additionally, the structure should have the hr tag and an h5 element as a child of a div.

Regarding the h5 am getting it but the structure is not same have provided snapshot, please refer above.

RuizhiSunMS commented 1 week ago

@GajananVadekar then we only have the problem of missing h5 tag, can I understand it like this?

GajananVadekar commented 6 days ago

@RuizhiSunMS Yes you can check for the missing h5 tag.

GajananVadekar commented 5 days ago

@RuizhiSunMS Addition to it have raised another ticket which is related to hr Tag Height/Size Mismatch When Saving and Reloading Word Document.

https://github.com/OfficeDev/office-js/issues/5111

OfficeDev / office-js

Issue with Inserting and Retrieving <hr> Tag in Word Using Office JS API #4844