Injection To Live Preview

inject.js

// Here You can type your custom JavaScript...
let template = '<div class="livepreview-wrapper">' +
        '<a id="minimizer"><span class="fa fa-minus"></span></a>' +
        '<a id="copy">Copy To Clipboard</a>' +
        '<div id="textarea-livepreview" rows="4"></div>' +
    '</div>';
let style = '<style>#textarea-livepreview { width: 100%; height: 100%; position: relative }</style>'

$('body').append(template);
$('body').append(style);
let a = 0;
$('body').append('<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>')

setTimeout(function() {
    $('.livepreview-wrapper').css({
        'position': 'fixed',
        'left': 0,
        'bottom': 0,
        'width': '100vw',
        'border-top': '1px solid #d0d0d0',
        'padding': '40px 20px 20px',
        'height': '50vh',
        'background': '#fff',
        'z-index': '10'
    });
  
    $('#copy').css({
        'color': '#fff',
        'background-color': '#28a745',
        'background-image': 'linear-gradient(-180deg, #34d058 0%, #28a745 90%)',
        'border-radius': '0.25em',
        'position': 'absolute',
        'right': '40px',
        'top': '5px',
        'padding': '6px 12px'
    });

    $('.livepreview-wrapper #minimizer').css({
       'position': 'absolute',
       'right': '20px',
       'top': '10px'
    });

    var editor = ace.edit("textarea-livepreview", {
        mode: "ace/mode/html",
        selectionStyle: "text",
        theme: "ace/theme/monokai"
    });

    editor.session.on('change', function(delta) {
        $('.content .static_cms.static-page-area').html(editor.getValue());
    });

    $('body').on('click', '#minimizer', function() {
        a = !a;
        setTimeout(function() {
           if (a) {
               $('.livepreview-wrapper').animate({height: "100px"}, 500)
           } else {
               $('.livepreview-wrapper').animate({height: "50vh"}, 500)
           }
        }, 10);
    }).on('click', '#copy', function() {
        editor.selectAll();
        editor.focus();
        document.execCommand('copy');
    });

}, 1000)