<!DOCTYPE html>
<html>
<head>
	<title>HTML Editor - Full Version</title>
	<style type="text/css">pre {
            white-space: pre-wrap;
            white-space-collapse: pre-wrap;
        }

        .bold {
            font-weight: bold;
        }
	</style>
</head>
<body>
<p><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">Script Title</span></span></p>

<p contenteditable="“true”"><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;"><span courier="" font-size:=""><strong>INT. TOWER - NIGHT</strong></span><br />
<span courier="" font-size:="">It&rsquo;s the middle of the night. It&rsquo;s cold and nobody knows where anyone is.<br />
Henry and Jason are both very cold.</span></span></span></p>

<p><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">JASON</span><br />
<span style="font-family:courier new,courier,monospace;">What time is it?</span></span></p>

<p><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">HENRY</span><br />
<span style="font-family:courier new,courier,monospace;">I have no idea.</span></span></p>

<div>
<p><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">Henry does have an idea, but he isn&rsquo;t sure if it would work.</span></span></p>

<p><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">CUT TO:</span></span></p>
</div>

<p contenteditable="“true”"><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;"><strong>INT. TOWER - MORNING</strong></span></span><br />
<span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">It&rsquo;s the next day. You can hear birds chirping.</span></span></p>

<p contenteditable="“true”"><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">JASON</span></span><br />
<span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">Hey, look!</span></span><br />
<br />
<span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">He looks outside. It&rsquo;s clear.</span></span><br />
<br />
<span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">HENRY</span></span><br />
<span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">The rain is gone!</span></span><br />
&nbsp;</p>

<p contenteditable="“true”"><span style="font-size:12px;"><span style="font-family:courier new,courier,monospace;">FADE OUT:</span></span></p>
<script>
        document.addEventListener(‘input’, function (event) {
            if (event.target.getAttribute(‘contenteditable’) === ‘true’) {
                let innerHTML = event.target.innerHTML;
                let regex = /(.)(\w+)/g;
                let newHTML = innerHTML.replace(regex, (match, p1, p2) => {
                    return &lt;span class="bold"&gt;${p2}&lt;/span&gt;;
                });
                event.target.innerHTML = newHTML;

                placeCaretAtEnd(event.target);
            }
        });

        function placeCaretAtEnd(el) {
            el.focus();
            if (typeof window.getSelection != “undefined” &&
                typeof document.createRange != “undefined”) {
                var range = document.createRange();
                range.selectNodeContents(el);
                range.collapse(false);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (typeof document.body.createTextRange != “undefined”) {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(el);
                textRange.collapse(false);
                textRange.select();
            }
        }
    </script></body>
</html>


edit this code so that the user can edit the text, contenteditable