ContentControl on range with hyperlink fails when inserted in Desktop then opened in online

Message from office-js bot: We’re closing this issue because it has been inactive for a long time. We’re doing this to keep the issues list manageable and useful for everyone. If this issue is still relevant for you, please create a new issue. Thank you for your understanding and continued feedback.

Expected Behavior

That content controls and hyperlink do not fail when inserted in Word Desktop and then opened in Word Online

Current Behavior

When a contentControl is added to a Range (range obtained by searching) with a hyperlink in Word Desktop and the document is subsequently opened in Word Desktop the document Is broken and hyperlink and contentControl are not shown correctly.

Steps to Reproduce, or Live Example

I do not want to give scriptlab access to my github account so here is a sample code from script lab instead:

name: Basic API call (TypeScript)
description: Performs a basic Word API call using TypeScript.
host: WORD
api_set: {}
script:
  content: |
    $("#run").click(() => tryCatch(run));

    const ERRORSearchUrlBeforeCC = async (context) => {
      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
      paragraphs.load();
      await context.sync();

      const paragraph = paragraphs.items[0];

      const rangeOnes = paragraph.search("RPL", { matchCase: true });
      context.load(rangeOnes, "text");
      await context.sync();

      const rangeOne = rangeOnes.items[0];

      // not working when inserted in Word Desktop then opened in word online
      rangeOne.hyperlink = "ERRORSearchUrlBeforeCC";
      const contentControl = rangeOne.insertContentControl();

      await context.sync();
    };

    const OKSearchCCBeforeUrl = async (context) => {
      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
      paragraphs.load();
      await context.sync();

      const paragraph = paragraphs.items[0];

      const rangeOnes = paragraph.search("RPL", { matchCase: true });
      context.load(rangeOnes, "text");
      await context.sync();

      const rangeOne = rangeOnes.items[0];

      const contentControl = rangeOne.insertContentControl();
      rangeOne.hyperlink = "OKSearchCCBeforeUrl";

      await context.sync();
    };

    const OKGetRangeCCBeforeUrl = async (context) => {
      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
      paragraphs.load();
      await context.sync();

      const paragraph = paragraphs.items[0];
      const rangeOne = paragraph.getRange();

      context.load(rangeOne, "text");
      await context.sync();

      const contentControl = rangeOne.insertContentControl();
      rangeOne.hyperlink = "OKGetRangeCCBeforeUrl";

      await context.sync();
    };

    const OKGetRangeUrlBeforeCC = async (context) => {
      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
      paragraphs.load();
      await context.sync();

      const paragraph = paragraphs.items[0];
      const rangeOne = paragraph.getRange();

      context.load(rangeOne, "text");
      await context.sync();

      rangeOne.hyperlink = "OKGetRangeUrlBeforeCC";
      const contentControl = rangeOne.insertContentControl();

      await context.sync();
    };

    async function run() {
      await Word.run(async (context) => {
        await ERRORSearchUrlBeforeCC(context);
        //await OKGetRangeCCBeforeUrl(context);
        //await OKGetRangeUrlBeforeCC(context)
        //await OKSearchCCBeforeUrl(context)
      });
    }

    /** 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: |-
    <section class="ms-font-m">
        This sample executes a code snippet that prints the selected text to the console. Make sure to enter and select text before clicking "Print selection".
    </section>
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Print selection</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

To reproduce: 1) inserted the code from script lab in script lab in Word Desktop for Windows 2) type "RPL" in the document (this is a random string for which the code sample will search for). 3) run the code 4) save the document and open it in Word Online 5) observe that the hyperlink and contentControl is not shown correctly and that the document cannot be edited. (see screen shot below)

In the code sample I have provided three other functions where this error does not happen. In order for the error to arise you have to do all the following actions: 1) get range by searching paragraph, 2) insert hyperlink on Range before adding a contentControl to the range.

Context

In our add in customers were not able to use documents in Word Online which were enriched by our add in in Desktop Word.

Your Environment

Platform [PC desktop, Mac, iOS, Office on the web]: PC Desktop Windows and Word Online
Host [Excel, Word, PowerPoint, etc.]: Word
Office version number: version 2010 build 13328.20292
Operating System: Windows 10
Browser (if using Office on the web): Chrome

OfficeDev / office-js