Shows how to scroll to a range with and without selection. - Shared with Script Lab

Scroll to range.yaml

name: Scroll to range
description: Shows how to scroll to a range with and without selection.
author: jipyua
host: WORD
api_set: {}
script:
    content: |-
        $("#getrange").click(() => tryCatch(getRange));
        $("#inserttext-crash").click(() => tryCatch(insertText));


        async function getRange() {
            await Word.run(async (context) => {
                var range = context.document.getSelection();

                await context.sync();
            });
        }

        async function insertText() {
            await Word.run(async (context) => {
                var range = context.document.getSelection();
                range.insertText("123", "replace");

                await context.sync();
            });
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: |4
          <h2 class="ms-font-m">This sample demonstrates how to operate a range.</h2>


            <div id="samples-container">
                <p class="ms-font-m">Sample snippets to try:</p>
                <button id="getrange" class="ms-Button">
                    <span class="ms-Button-label">Get IP range</span>
                </button>
                <button id="inserttext-crash" class="ms-Button">
                    <span class="ms-Button-label">Insert Text and crash</span>
                </button>
           
            </div>
    language: html
style:
    content: |4
            body {
                margin: 0;
                padding: 10px;
            }


            /* Button customization, including overwriting some Fabric defaults */

            .ms-Button, .ms-Button:focus {
                background: #217346;
                border: #217346;
            }

                .ms-Button > .ms-Button-label,
                .ms-Button:focus > .ms-Button-label,
                .ms-Button:hover > .ms-Button-label {
                    color: white;
                }

                .ms-Button:hover, .ms-Button:active {
                    background: #164b2e;
                }

                .ms-Button.is-disabled, .ms-Button:disabled {
                    background-color: #f4f4f4;
                    border-color: #f4f4f4;
                }

                .ms-Button.is-disabled .ms-Button-label,
                .ms-Button:disabled .ms-Button-label {
                    color: #a6a6a6;
                }

            #setup.ms-Button, #setup.ms-Button:focus {
                background: darkred;
                border: darkred;
            }

                #setup.ms-Button:hover, #setup.ms-Button:active {
                    background: red;
                }

            #samples-container {
                margin-top: 20px;
            }

            #samples-container .ms-Button {
                display: block;
                margin-bottom: 5px;
            }

            #samples-container .ms-Button, #setup-container .ms-Button {
                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