[Word API 1.7] (Critique API) PC: Cannot add annotations in footnote/endnote

[NataliaKravcheniaTR]

Getting RichApi.Error when call insertAnnotations in footnote/endnote I've found a workaround and added it to an example.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: [PC desktop
• Host [Excel, Word, PowerPoint, etc.]: Word
• Office version number: 2408 Build 16.0.17928.20114
• Operating System: Windows

Expected behavior

The annotation is inserted without error and without workaround

Current behavior

The annotations is inserted only with workaround

Link to live example(s)

Load this script in Script Lab: Click 'Setup', 'Insert annotations'

name: Blank snippet
description: Description
host: WORD
api_set: {}
script:
  content: |
    $("#run").on("click", () => tryCatch(run));
    $("#insert").on("click", () => tryCatch(() => insert(false)));
    $("#insertV2").on("click", () => tryCatch(() => insert(true)));

    const bodyText = "body text";
    const footnoteText = "footnote text";

    let annIds = [];

    const insertAnnotation = async (
      paragraph: Word.Paragraph,
      text: string,
      applyWorkaround: boolean
    ): Promise<string[]> => {
      const start = paragraph.text.indexOf(text);

      // WORKAROUND
      let adjustStartIndex = 0;
      if (applyWorkaround && paragraph.text.startsWith("\x02")) {
        adjustStartIndex = -1;
      }

      const critique: Word.Critique = {
        colorScheme: Word.CritiqueColorScheme.blue,
        start: start + adjustStartIndex,
        length: text.length,
        popupOptions: {
          brandingTextResourceId: "PG.TabLabel",
          subtitleResourceId: "PG.HelpCommand.TipTitle",
          titleResourceId: "PG.HelpCommand.Label",
          suggestions: []
        }
      };
      const annotationSet: Word.AnnotationSet = {
        critiques: [critique]
      };

      const annotationIds = paragraph.insertAnnotations(annotationSet);

      await paragraph.context.sync();

      return annotationIds.value;
    };

    async function run() {
      await Word.run(async (context) => {
        const body = context.document.body;
        const range = body.insertText(bodyText, Word.InsertLocation.replace);

        const footnote = range.insertFootnote(footnoteText);

        await context.sync();
      });
    }

    async function insert(applyWorkaround) {
      await Word.run(async (context) => {
        const footnotes = context.document.body.footnotes;

        footnotes.load("items");

        await context.sync();

        const footnoteParagraphs = footnotes.items[0].body.paragraphs;
        footnoteParagraphs.load("items, text");

        await context.sync();

        annIds = [...annIds, ...(await insertAnnotation(footnoteParagraphs.items[0], "text", applyWorkaround))];

        await context.sync();
      });
    }

    // Default helper for invoking an action and handling errors.
    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }
  language: typescript
template:
  content: |-
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">setup</span>
    </button>

    <button id="insert" class="ms-Button">
        <span class="ms-Button-label">insert annotations</span>
    </button>

    <button id="insertV2" class="ms-Button">
        <span class="ms-Button-label">insert annotations with workaround</span>
    </button>
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1

Provide additional details

1. It's working as expected in Word Online

Useful logs

name: "RichApi.Error"
code: "GeneralException"
traceMessages: Array[0]
innerError: null
debugInfo: Object
code: "GeneralException"
message: "GeneralException"
toString: function toString()
errorLocation: "Paragraph.insertAnnotations"
statement: "v.insertAnnotations(...);"
surroundingStatements: Array[4]
0: "var v = context.root._getObjectByReferenceId("02A!000006FD");"
1: "// >>>>>"
2: "v.insertAnnotations(...);"
3: "// <<<<<"
fullStatements: Array[1]
httpStatusCode: 500
data: undefined

[microsoft-github-policy-service[bot]]

Thank you for letting us know about this issue. We will take a look shortly. Thanks.

[qinliuMSFT]

Thank you for reporting this issue, I can repro it. It has been put on our backlog #9471785 , the team will investigate and we will reply to you as soon as there is any progress. Thank you for your patience.

[cbouzmsft]

Hi. This is no bug in the annotation API. The issue is the provided index calculated using paragraph.text. This API has some limitations and is therefore not recommended to use with annotations. We were aware of this when designing the annotation API, which is why we have provided a new API (also in 1.7): paragraph.getText(), which should be used for index calculations.