Cacher is the code snippet organizer for pro developers

name: Insert locations.
description: Shows how to insert content using the different available locations.
author: rramona2
host: WORD
api_set: {}
script:
    content: |-
        $("#setup").click(setup);
        $("#before").click(before);
        $("#start").click(start);
        $("#end").click(end);
        $("#after").click(after);
        $("#replace").click(replace);


        function before() {
            Word.run(function (context) {
                // lets insert before the first paragraph. 
                var range = context.document.body.paragraphs.getFirst().insertParagraph("This is Before", "before");
                range.font.highlightColor = "yellow";
                return context.sync()
                    .then(function () {
                        console.log("success");
                    })
            })
                .catch(OfficeHelpers.Utilities.log);
        }

        function start() {
            Word.run(function (context) {
                // This button assumes the before was clicked, so we get the next paragraph and insert text at the begining.Note that there are no-valid locations depending on  the object. For instance insertParagraph and "before" on a paragrpah object is not a valid combination.
                var range = context.document.body.paragraphs.getFirst().getNext().insertText("This is Start", "start");
                range.font.highlightColor = "blue";
                range.font.color = "white";
                return context.sync()
                    .then(function () {
                        console.log("success");
                    })
            })
                .catch(OfficeHelpers.Utilities.log);
        }

        function end() {
            Word.run(function (context) {
                // Here we go to insert on paragraph
                var range = context.document.body.paragraphs.getFirst().getNext().insertText(" This is End", "end");
                range.font.highlightColor = "green";
                range.font.color = "white";
                return context.sync()
                    .then(function () {
                        console.log("success");
                    })
            })
                .catch(OfficeHelpers.Utilities.log);
        }

        function after() {
            Word.run(function (context) {
                // Here we go to insert on paragraph
                var range = context.document.body.paragraphs.getFirst().getNext().insertParagraph("This is After", "after");
                range.font.highlightColor = "red";
                range.font.color = "white";
                return context.sync()
                    .then(function () {
                        console.log("success");
                    })
            })
                .catch(OfficeHelpers.Utilities.log);
        }

        function replace() {
            Word.run(function (context) {
                // Here we go to insert on paragraph
                var range = context.document.body.paragraphs.getLast().insertText("Just replaced the last paragraph!", "replace");
                range.font.highlightColor = "black";
                range.font.color = "white";
                return context.sync()
                    .then(function () {
                        console.log("success");
                    })
            })
                .catch(OfficeHelpers.Utilities.log);
        }

        function setup() {
            Word.run(function (context) {
                // lets insert a couple of paragraphs to illustrate the point..
                context.document.body.clear();
                context.document.body.insertParagraph("Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.", "start");
                context.document.body.paragraphs.getLast().insertText("To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.", "replace");
                return context.sync();
            })
                .catch(OfficeHelpers.Utilities.log);
        }
    language: typescript
template:
    content: |4
          <h2 class="ms-font-m">This sample demonstrates a variety of insert locations available in the API.</h2>


            <div id="setup-container">
                <p class="ms-font-m">Click "setup" to insert sample text and between runs to reset the sample.</p>

                <button id="setup" class="ms-Button">
                    <span class="ms-Button-label">Setup</span>
                </button>
            </div>


            <div id="samples-container">
                <p class="ms-font-m">Sample snippets to try. <b>Click buttons top-down.</b></p>

                <button id="before" class="ms-Button">
                    <span class="ms-Button-label">Before</span>
                </button>   
                <button id="start" class="ms-Button">
                    <span class="ms-Button-label">Start</span>
                </button>
                 <button id="end" class="ms-Button">
                    <span class="ms-Button-label">End</span>
                </button>   
                  <button id="after" class="ms-Button">
                    <span class="ms-Button-label">After</span>
                </button>   
                  <button id="replace" class="ms-Button">
                    <span class="ms-Button-label">Replace</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: |-
    // Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js

    // NPM libraries
    jquery@3.1.1
    office-ui-fabric-js@1.4.0/dist/js/fabric.min.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
    @microsoft/office-js-helpers@0.7.1/dist/office.helpers.min.js
    core-js@2.4.1/client/core.min.js

    // IntelliSense: Use dt~library_name for DefinitelyTyped or URLs to d.ts files
    @types/office-js
    @types/jquery
    @types/core-js
    @microsoft/office-js-helpers@0.7.1/dist/office.helpers.d.ts