Scriptlab demo of Word Online Content Control Issues

ScriptLab.yml

name: Insertion order test
description: trying to demo a bug
host: WORD
api_set: {}
script:
  content: |
    var counter = 1;
    Word['run'](async function (context) {
      var doc = context.document;
      var ccs = doc.contentControls.getByTag("EXAMPLE_TAG1");
      ccs.load('appearance,' +
        'cannotDelete,' +
        'cannotEdit,' +
        'color,' +
        'id,' +
        'placeHolderText,' +
        'removeWhenEdited,' +
        'title,' +
        'text,' +
        'type,' +
        'style,' +
        'tag,' +
        'font/size,' +
        'font/name,' +
        'font/color');
      await context.sync();
      var cc = null;
      console.log(" Found "+ccs.items.length+" content controls")
      if (ccs.items.length > 0) cc = ccs.items[ccs.items.length - 1]; //always get the last one - should only ever actually be one, but just in case...
      
      if (!cc) {
        console.log("No content control found")
        let doc = context.document;
        let endOfBodyRange = doc.body.getRange(Word.RangeLocation.end);

        let ccRange = endOfBodyRange.insertParagraph('', Word.InsertLocation.after);
        let ccParagraph = ccRange.insertParagraph("", Word.InsertLocation.after);
        await context.sync();
        //Find end after adding this and add another paragraph or else the insertion of the content control fails...
        endOfBodyRange = doc.body.getRange(Word.RangeLocation.end);
        var emptyParagraph = endOfBodyRange.insertParagraph("", Word.InsertLocation.after);

        cc = ccParagraph.insertContentControl();
        cc.cannotDelete = false;
        cc.title = "Test Content Control";
        cc.tag = "EXAMPLE_TAG1";
        cc.cannotEdit = true;
        try {
          await context.sync();
          return fillContent(context, cc);
        } catch (e) {
          console.error("Failed to create content control during sync", e)
        }
      } else {
        console.log("Existing content control found")
        return fillContent(context, cc);
      }
    });



    async function fillContent(context, cc) {
      console.log("fillContent start")
      cc.cannotEdit = false;
      for (let i = 0; i < 4; i++) {
        let entryId = counter++;
        let entryPara = cc.insertParagraph("" + entryId + ": ", Word.InsertLocation.end);
        entryPara.alignment = Word.Alignment.left;
        entryPara.lineSpacing = 2 * 12;
        entryPara.firstLineIndent = -36;
        entryPara.leftIndent = 36;
        let exampleText = "Example Text entry " + entryId + ". All work and no play makes Jack a dull boy.   <b>All work and no play makes Jack a dull boy.</b>   All work and no play makes Jack a dull boy.   <i>All work and no play makes Jack a dull boy.</i>   All work and no play makes Jack a dull boy.   <u>All work and no play makes Jack a dull boy.</u>";
        entryPara.insertHtml(exampleText, Word.InsertLocation.end);
      }
      cc.cannotEdit = true;
      try {
        await context.sync();
        console.log("fillContent completed")
      } catch (e) {
        console.error("fillContent: sync failed", e);
      }
    }
  language: typescript
template:
  content: |
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run</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