<!-- template holds HTML 'Add Image' button. It stops the form from submitting and calls the 'rdb_add_image()' function below-->
<template id="reedybear_buttons">
    <button class="rdb_image_adder" onclick="event.preventDefault();rdb_add_image();">Add image</button>
</template>

<!-- Template holds a `code` node to hold the markdown image code. Next to it is a button to copy that code to your clipboard. -->
<template id="reedybear_copyable_text">
    <code class="rdb_copyable_text">## Sample h2 Header</code>
    <button onclick="event.preventDefault();rdb_copy_to_clipboard();">Copy To Clipboard</button>
</template>

<script type="text/javascript">
    // add the 'Add image' button to the page.
    const sticky = document.querySelector('.sticky-controls');
    sticky.innerHTML += document.getElementById('reedybear_buttons').innerHTML;

    // Add the code/copy-to-clipboard nodes onto the page.
    const details = sticky.nextSibling;
    const copyable = document.createElement('div');
        copyable.innerHTML = document.getElementById('reedybear_copyable_text').innerHTML;
    sticky.parentNode.insertBefore(copyable, details);

    /** prompt for image url & description, then write the image markdown code into the `code` node.*/
    function rdb_add_image(){
        const url = prompt("Image Url");
        const description = prompt("Image Description");
        const markdown = "!["+description+"]("+url+")";
        document.querySelector('.rdb_copyable_text').innerText = markdown;
    }

    /** Copy the `code` node's text into your clipboard */
    function rdb_copy_to_clipboard(){
        navigator.clipboard.writeText(
            document.querySelector('.rdb_copyable_text').innerText
        );
    }
</script>