Sample to show an office.js error. You have an empty content control and you focus it then run the sample - Shared with Script Lab

Error when clear and insert html while cc is focused.yaml

name: Error when clear and insert html while cc is focused
description: Sample to show an office.js error. You have an empty content control and you focus it then run the sample
author: barisbikmaz
host: WORD
api_set: {}
script:
    content: |-
        $("#run").click(() => tryCatch(run));
        $("#clear").click(() => tryCatch(clear));

        async function run() {
            await Word.run(async (context) => {
                const ccs = context.document.contentControls;
                ccs.load();

                await context.sync();

                const firstCC = ccs.items[0];
                const secondCC = ccs.items[1];

                firstCC.clear();
                firstCC.insertHtml('<p>First</p>', Word.InsertLocation.replace);

                secondCC.clear();
                secondCC.insertHtml('<p>Second</p>', Word.InsertLocation.replace);

                await context.sync();
            });
        }


        async function clear() {
            await Word.run(async (context) => {
                const ccs = context.document.contentControls;
                ccs.load();

                await context.sync();

                const firstCC = ccs.items[0];
                const secondCC = ccs.items[1];

                firstCC.clear();
                secondCC.clear();

                await context.sync();
            });
        }

        async function tryCatch(callback) {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: |-
        <button id="run" class="ms-Button">
            <span class="ms-Button-label">Run</span>
        </button>

        <button id="clear" class="ms-Button">
            <span class="ms-Button-label">Clear</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

    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts

    jquery@3.1.1
    @types/jquery@3.3.1