JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<nav>
    <ul>
        <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a>

        </li>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a>

        </li>
        <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a>

        </li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a>

        </li>
        <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a>

        </li>
    </ul>
</nav>
<form action="#" method="post">
    <div>
        <label for="name">Text Input:</label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
    <div>
         <h4>Radio Button Choice</h4>

        <label for="radio-choice-1">Choice 1</label>
        <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
        <label for="radio-choice-2">Choice 2</label>
        <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
    </div>
    <div>
        <label for="select-choice">Select Dropdown Choice:</label>
        <select name="select-choice" id="select-choice">
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
        </select>
    </div>
    <div>
        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
    <div>
        <label for="checkbox">Checkbox:</label>
        <input type="checkbox" name="checkbox" id="checkbox" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>
<nav>
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Clients</a>

        </li>
        <li><a href="#">Contact Us</a>

        </li>
   ...

JavaScript

var frag;

window.addEventListener('keydown', function (e) {
    if (e.ctrlKey && e.keyCode === 67) {
        frag = getSelection().getRangeAt(0).cloneContents(true);

    }
    if (e.ctrlKey && e.keyCode === 88) {
        frag = getSelection().getRangeAt(0).extractContents(true);
    }
    if (e.ctrlKey && e.keyCode === 86 && frag) {
        var _frag = frag.cloneNode(true);
        var a = frag.querySelectorAll('*');
        if (!getSelection().baseNode) {
            document.body.appendChild(frag);
        } else {
            getSelection().baseNode.appendChild(frag);
        }
        frag = _frag;

    }
});