Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Office.context.mailbox.item.body.getAsync returns incorrect HTML for nested lists on Mac Outlook Desktop app #5253

Open
dbrar-tf opened this issue Jan 8, 2025 · 0 comments
Open

Office.context.mailbox.item.body.getAsync returns incorrect HTML for nested lists on Mac Outlook Desktop app #5253

dbrar-tf opened this issue Jan 8, 2025 · 0 comments
Assignees
@exextoc
Labels
Area: Outlook Issue related to Outlook add-ins Needs: attention 👋 Waiting on Microsoft to provide feedback

Comments

@dbrar-tf
Copy link

dbrar-tf commented Jan 8, 2025

Environment

Platform: Mac Desktop
Host: Outlook
Office version number: Microsoft Outlook for Mac Version 16.92 (License: Microsoft 365 Subscription)
Operating System: macOS 15.2 (24C101)
Browser (if using Office on the web): Not applicable

Expected behavior

When using Office.context.mailbox.item.body.getAsync to retrieve the HTML of the email body, the output should preserve the correct formatting of lists, including nested lists (up to third level and beyond). This is what i get from web version of outlook

For example:

<ol start="1" data-editing-info="{&quot;applyListStyleFromLevel&quot;:true}" style="list-style-type: decimal;">
   <li style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
      <div class="elementToProof">val1</div>
   </li>
   <li style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
      <div class="elementToProof">val2</div>
   </li>
   <ol start="1" data-editing-info="{&quot;applyListStyleFromLevel&quot;:true}" style="list-style-type: lower-alpha;">
      <li style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
         <div class="elementToProof">val3</div>
      </li>
      <li style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
         <div class="elementToProof">val4</div>
      </li>
      <ol start="1" data-editing-info="{&quot;applyListStyleFromLevel&quot;:true}" style="list-style-type: lower-roman;">
         <li style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
            <div class="elementToProof">val5</div>
         </li>
      </ol>
   </ol>
   <li style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
      <div class="elementToProof">val6</div>
   </li>
</ol>
<div class="elementToProof" style="font-family: Aptos, Aptos_EmbeddedFont, Aptos_MSFontService, Calibri, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">thanks</div>

The output should not break the list structure when a third-level list item is present.

Current behavior

When using Office.context.mailbox.item.body.getAsync on the Mac Desktop Outlook app, the HTML output breaks nested lists at the third level. Instead of preserving the correct list structure, the third-level item is wrapped in a

tag, causing a new list to be started incorrectly.

Example output:

<body lang=EN-CA link="#467886" vlink="#96607D" style='tab-interval:36.0pt;word-wrap:break-word'>
      <div class=WordSection1>
         <div>
            <ol style='margin-top:0cm' start=1 type=1>
               <li class=MsoListParagraph style='margin-left:0cm;mso-list:l0 level1 lfo1'>
                  <span style='mso-fareast-font-family:"Times New Roman"'>
                     Val1
                     <o:p></o:p>
                  </span>
               </li>
               <li class=MsoListParagraph style='margin-left:0cm;mso-list:l0 level1 lfo1'>
                  <span style='mso-fareast-font-family:"Times New Roman"'>
                     Val2
                     <o:p></o:p>
                  </span>
               </li>
            </ol>
            <ol style='margin-top:0cm' start=2 type=1>
               <ol style='margin-top:0cm' start=1 type=a>
                  <li class=MsoListParagraph style='margin-left:0cm;mso-list:l0 level2 lfo1'>
                     <span style='mso-fareast-font-family:"Times New Roman"'>
                        Val3
                        <o:p></o:p>
                     </span>
                  </li>
                  <li class=MsoListParagraph style='margin-left:0cm;mso-list:l0 level2 lfo1'>
                     <span style='mso-fareast-font-family:"Times New Roman"'>
                        Val4
                        <o:p></o:p>
                     </span>
                  </li>
               </ol>
            </ol>
            <p class=MsoListParagraph style='margin-left:108.0pt;text-indent:-108.0pt;mso-text-indent-alt:-9.0pt;mso-list:l0 level3 lfo1'>
               <![if !supportLists]><span style='mso-fareast-font-family:Aptos'><span style='mso-list:Ignore'><span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>i.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>
               <span style='mso-fareast-font-family:"Times New Roman"'>
                  Val5
                  <o:p></o:p>
               </span>
            </p>
            <ol style='margin-top:0cm' start=3 type=1>
               <li class=MsoListParagraph style='margin-left:0cm;mso-list:l0 level1 lfo1'>
                  <span style='mso-fareast-font-family:"Times New Roman"'>
                     Val6
                     <o:p></o:p>
                  </span>
               </li>
            </ol>
            <p class=MsoNormal>
               <span style='mso-fareast-font-family:"Times New Roman"'>
                  <o:p>&nbsp;</o:p>
               </span>
            </p>
            <p class=MsoNormal>
               <span style='mso-fareast-font-family:"Times New Roman"'>
                  thanks
                  <o:p></o:p>
               </span>
            </p>
         </div>
      </div>
   </body>

This behavior only occurs on the Mac Desktop app. The Outlook Web version handles nested lists correctly.

Steps to reproduce

  1. Open the Mac Desktop Outlook app.
  2. Create an email with a nested list up to the third level.
  3. Use the following code to retrieve the email body:
Office.context.mailbox.item.body.getAsync("html", function (result) {
    console.log(result.value);
});

Inspect the retrieved HTML and observe that the third-level list item is incorrectly wrapped in a

tag.

Link to live example(s)

Not applicable (no live link, but repro steps provided above).

Provide additional details

This issue occurs only on the Mac Desktop Outlook app. The issue does not occur when using Outlook on the Web.

Context

I am working on an add-in that processes the HTML body of emails. The incorrect formatting of nested lists disrupts the handling of email content. It leads to unintended list breaks and affects how lists are displayed in our application.

This issue is critical for maintaining consistency between desktop and web versions of our add-in.

Useful logs

  1. Console errors: No console errors, but the HTML output is incorrect.
  2. Screenshots: input

image

  1. Test file: Not applicable.
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: triage 🔍 New issue, needs PM on rotation to triage ASAP label Jan 8, 2025
@exextoc exextoc added Needs: attention 👋 Waiting on Microsoft to provide feedback Area: Outlook Issue related to Outlook add-ins and removed Needs: triage 🔍 New issue, needs PM on rotation to triage ASAP labels Jan 8, 2025
@exextoc exextoc self-assigned this Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@exextoc exextoc

Labels
Area: Outlook Issue related to Outlook add-ins Needs: attention 👋 Waiting on Microsoft to provide feedback
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@exextoc @dbrar-tf