XD Plugins - part 3 finished code

main.js

/*
 * Sample plugin code for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */

var {Rectangle, Color} = require("scenegraph");

var dialog;

function createDialog() {
    dialog = document.createElement("dialog");
    dialog.innerHTML = `
        <style>
        .row {
            display: flex;
        }
        </style>
        <form method="dialog">
            <h1>Create Button Frame</h1>
            <hr>
            <div class="row">
                <input type="text" uxp-quiet="true" id="txtV" placeholder="V padding" />
                <input type="text" uxp-quiet="true" id="txtH" placeholder="H padding" />
            </div>
            <footer>
                <!-- Ok button is special: it will automatically close the dialog for us -->
                <button id="ok" type="submit" uxp-variant="cta">OK</button>
            </footer>
        </form>`;
    document.appendChild(dialog);
}

function showDialog(selection) {
    if (!dialog) createDialog();

    return dialog.showModal().then(function () {
        var valueV = dialog.querySelector("#txtV").value;
        var valueH = dialog.querySelector("#txtH").value;
        createRectangle(selection, parseFloat(valueV), parseFloat(valueH));
    });
}

function createRectangle(selection, paddingV, paddingH) {
    var textNode = selection.items[0];
    var bounds = textNode.boundsInParent;

    var shape = new Rectangle();
    shape.width = bounds.width + 2*paddingH;
    shape.height = bounds.height + 2*paddingV;
    shape.stroke = new Color("blue");

    selection.insertionParent.addChild(shape);
    shape.placeInParentCoordinates(
        {x: 0, y: 0},
        {x: bounds.x - paddingH, y: bounds.y - paddingV}
    );
}

module.exports = {
    commands: {
        myPluginCommand: showDialog
    }
};

manifest.json

{
    "name": "Sample Plugin: Create Button Frame",
    "id": "YOUR_ID_HERE",
    "version": "1.0.0",

    "description": "Sample plugin code for Adobe XD. Creates a rectangle around the selected text, with padding.",

    "host": {
        "app": "XD",
        "minVersion": "13.0.0"
    },

    "uiEntryPoints": [
        {
            "type": "menu",
            "label": "Create Button Frame",
            "commandId": "myPluginCommand"
        }
    ]
}