JSFiddle - React, Tailwind, and code Playground

by holf

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-textrange.js"></script>
<div contenteditable="true" id="myContent"></div>
<a id="dialogButton">Dialog!</a>

<div id="dialog-modal" title="Basic modal dialog">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

CSS

#dialog-modal {
    display: hidden;
}

JavaScript

var savedSel;

var containerElement = gEBI("myContent");

$('#dialog-modal').hide();

$('#dialogButton').click(
function () {
    $('#myContent').blur();

    savedSel = rangy.getSelection().saveCharacterRanges(containerElement);
    console.log(savedSel);
    
    $("#dialog-modal").dialog({
        height: 140,
        modal: true,
        close: function (event, ui) {
            
            console.log(savedSel);
            console.log(containerElement);
            
            containerElement.focus();
            rangy.getSelection().restoreCharacterRanges(containerElement, savedSel);
            
        }
    });


});

function gEBI(id) {
    return document.getElementById(id);
}