0

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: Before

After: 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: &quot;Segoe UI&quot;, 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;">&nbsp;</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: &quot;Segoe UI&quot;, 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;">&nbsp;</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>
Improve this question
2
  • 1
    Why haven't you just added an if condition for detecting the web client? Commented Oct 20, 2020 at 19:54
  • XML generated for web and desktop clients are not the same and I don't think they are compatible. Commented Oct 24, 2020 at 12:32
Related questions
2
How to change text font style in a Word 2013 Add-In
1
VBA Word Selection.TypeText changing font?
4
How to replace text with a MS Word web add-in by preserving the formatting?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.