[Word API 1.7] (Critique API) WordOnline: Cannot delete an annotation located in a footnote/endnote

[NataliaKravcheniaTR]

Getting an RichApi.Error error when call annotation.delete() which located in footnote

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: Office on the web
• Host [Excel, Word, PowerPoint, etc.]: Word
• Operating System: Windows
• Browser (if using Office on the web): Chrome

Expected behavior

Inserted annotation is removed

Current behavior

Inserted annotations is not removed.

Steps to reproduce

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

name: Blank snippet
description: Creates a new snippet from a blank template.
host: WORD
api_set: {}
script:
  content: >
    $("#run").on("click", () => tryCatch(run));

    $("#insert").on("click", () => tryCatch(insert));

    $("#remove").on("click", () => tryCatch(remove));

    const bodyText = "body text";

    const footnoteText = "footnote text";

    let annIds = [];

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

      const critique: Word.Critique = {
        colorScheme: Word.CritiqueColorScheme.blue,
        start: start,
        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() {
      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"))];

        await context.sync();
      });
    }

    async function remove() {
      Word.run(async (context) => {
        console.log(annIds);
        for (const annotationId of annIds) {
          try {
            console.log(annotationId);

            const annotation = context.document.getAnnotationById(annotationId);
            annotation.delete();
            await context.sync();
          } catch (error) {
            console.error(error);
          }
        }
      }).catch(() => {});
    }

    // 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="remove" class="ms-Button">
        <span class="ms-Button-label">Remove annotations</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

Useful logs

name: "RichApi.Error"
code: "GeneralException"
traceMessages: Array[0]
innerError: null
debugInfo: Object
code: "GeneralException"
message: "Cannot read properties of null (reading 'la')"
toString: function toString()
errorLocation: "Document.getAnnotationById"
statement: "var annotationById = root.getAnnotationById(...);"
surroundingStatements: Array[6]
0: "var root = context.root;"
1: "// >>>>>"
2: "var annotationById = root.getAnnotationById(...);"
3: "// <<<<<"
4: "// Instantiate {annotationById}"
5: "annotationById.delete();"
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.