Update: inserting comments on words that are loaded from a infoList from the (fake) server

Comment Insertion updated version.WORD.yaml

name: Comment Insertion updated version
description: >-
  Update: inserting comments on words that are loaded from a infoList from the
  (fake) server
host: WORD
api_set: {}
script:
  content: |
    // Given the target word and the comment, insert an anchored comment.
    function addComment(paragraphIndex: number, targetWord: any) {
      return Word.run(async function(context) {
        // Load the document as a Word.ParagraphCollection.
        let paragraphs = context.document.body.paragraphs;
        paragraphs.load("items");
        await context.sync();

        // Search for the target word and load the result.
        let result = paragraphs.items[paragraphIndex].search(targetWord.word, { matchWholeWord: true });
        result.load("items");
        await context.sync();

        // Insert the comment into each occurrance of the target word.
        let targetWords = result.items;
        targetWords[0].getRange().insertComment(targetWord.comment);
      });
    }

    // Fetch data from the web server. NOT WORKING FOR SOME REASON.
    async function getComment() {
      let response = await fetch('https://dev7.kenarnold.org/generate');
      let data = await response.json();
      return data;
    }

    async function main2() {
      try {
        console.log(Office.context.host);
        Word.run(async function(context) {
          console.log('in word.run', Office.context.document);
        Office.context.document.addHandlerAsync("documentSelectionChanged", myHandler, function (result) { }
        );

        // Event handler function.
        function myHandler(eventArgs) {
          //write('Document Selection Changed');
          console.log('sel change')
        }

        // Function that writes to a div with id='message' on the page.
        function write(message) {
          document.getElementById('message').innerText += message;
        }
        });
      } catch (error) {
        console.log(error);
      }
    }

    // Main program.
    function main() {
      return Word.run(async function(context) {
        // Get the document as a Word.ParagraphCollection class.
        const documentParagraphs = context.document.body.paragraphs;
        documentParagraphs.load("items");
        await context.sync();

        // Iterate through paragraphs and sort all target words by paragraphs.
        const questionsForThisParagraph = await getComment();
        for (let i = 0; i < documentParagraphs.items.length; i++) {
          const targetWords = questionsForThisParagraph.filter(
            // Paragraph numbers start at 1 on server
            (q) => q.paragraph === i + 1
          )
          console.log(i, targetWords);

          // Insert comment into target words.
          for (let j = 0; j < targetWords.length; j++) {
            await addComment(i, targetWords[j]);
          }
        }
      });
    }
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\tComment insertion add-in using Microsoft Word API. <br>\n\t<li>Target words: words starting with letter 'q'. </li>\n\t<li>Comment: the length of the word. </li>\n</section>\n\n<button class=\"button\" onclick=main()>\n\tRun\n</button>\n\n<button class=\"button\" onclick=main2()>\n\tRun2\n</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;
    }

    .button {
      background-color: slategrey;
      padding: 10px 32px;
      font-size: 10px
    }
  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