I am working on a Word add-in which gets selected data as HTML, makes some changes, and sets it back as HTML. It works as expected with MS Word on Windows but on the web version it changes font of the selected text from Calibri to Segoe UI. Also, again only with the web version, it inserts an extra new line at the end. Any idea how to fix the issue?
var html = '';
// https://stackoverflow.com/questions/41539946/how-to-replace-text-with-a-ms-word-web-add-in-by-preserving-the-formatting
Office.context.document.getSelectedDataAsync(Office.CoercionType.Html, function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed) {
write('Action failed. Error: ' + asyncResult.error.message);
}
else {
html = asyncResult.value;
//Make some corrections on the text without touching the formatting.
let new_html = html.replace('is an', 'is a');
Office.context.document.setSelectedDataAsync(new_html, { 'coercionType': Office.CoercionType.Html }, function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed) {
write(asyncResult.error.message);
}
else{
console.log('success');
}
});
}
});
Note: The reason I'm using HTML coercion type is that I don't want to lose formatting. I've tried the same thing with OOXML coercion type which doesn't have the same problem but it clears undo/redo stack and undoing the change done by add-in is impossible.
Before:
After:
HTML Before:
<HTML>
<HEAD></HEAD>
<BODY>
<div class="OutlineGroup">
<div class="OutlineElement Ltr">
<div class="ParaWrappingDiv">
<p class="Paragraph" xml:lang="EN-US" lang="EN-US" paraid="0" paraeid="{3cf43d0f-1abb-48c2-bf39-9f6530096a44}{206}" style="font-weight: normal; font-style: normal; vertical-align: baseline; font-family: "Segoe UI", Tahoma, Verdana, Sans-Serif; background-color: transparent; color: windowtext; text-align: left; margin: 0px 0px 10.6667px; padding-left: 0px; padding-right: 0px; text-indent: 0px; font-size: 6pt;">
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;">
<span class="NormalTextRun" style="background-color: inherit;">This </span>
</span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-weight: bold; font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;">
<span class="NormalTextRun" style="background-color: inherit;">is an</span>
</span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;">
<span class="NormalTextRun" style="background-color: inherit;"> test.</span>
</span>
<span class="EOP" style="font-size: 11pt; line-height: 19.425px; font-family: WordVisiPilcrow_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;"> </span>
</p>
</div>
</div>
</div>
<span class="WACImageGroupContainer"></span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;"></span>
<span class="NormalTextRun" style="background-color: inherit;"></span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-weight: bold; font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;"></span>
</BODY>
</HTML>
HTML After:
<HTML>
<HEAD></HEAD>
<BODY>
<div class="OutlineGroup">
<div class="OutlineElement Ltr">
<div class="ParaWrappingDiv">
<p class="Paragraph" xml:lang="EN-US" lang="EN-US" paraid="0" paraeid="{3cf43d0f-1abb-48c2-bf39-9f6530096a44}{206}" style="font-weight: normal; font-style: normal; vertical-align: baseline; font-family: "Segoe UI", Tahoma, Verdana, Sans-Serif; background-color: transparent; color: windowtext; text-align: left; margin: 0px 0px 10.6667px; padding-left: 0px; padding-right: 0px; text-indent: 0px; font-size: 6pt;">
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;">
<span class="NormalTextRun" style="background-color: inherit;">This </span>
</span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-weight: bold; font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;">
<span class="NormalTextRun" style="background-color: inherit;">is a</span>
</span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;">
<span class="NormalTextRun" style="background-color: inherit;"> test.</span>
</span>
<span class="EOP" style="font-size: 11pt; line-height: 19.425px; font-family: WordVisiPilcrow_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif;"> </span>
</p>
</div>
</div>
</div>
<span class="WACImageGroupContainer"></span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;"></span>
<span class="NormalTextRun" style="background-color: inherit;"></span>
<span data-contrast="auto" class="TextRun" xml:lang="EN-US" lang="EN-US" style="font-weight: bold; font-size: 11pt; font-family: WordVisi_MSFontService, Calibri, Calibri_EmbeddedFont, Calibri_MSFontService, sans-serif; font-kerning: none; line-height: 19.425px;"></span>
</BODY>
</HTML>