JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<textarea>
  <div id="document_root">
    <p><strong class="mceNonEditable">Some field: </strong>&nbsp;</p>
    <p><strong class="mceNonEditable">Another one: </strong>&nbsp;</p>
    <p><strong class="mceNonEditable">This field is like the others, but has better grain: </strong>&nbsp;</p>
    <p><strong class="mceNonEditable">yeah this grain is super golden: </strong>&nbsp;</p>
  </div>
</textarea>

JavaScript

//prevent delete, because I don't have a CDN.  Updated to commit commit 0ebd7764d435ec1d3a9dab5040ec9a6cb4d36afd
(function() {
	Array.prototype.contains = function (e) {
		return this.indexOf(e) > -1
	}

	function PreventDelete() {
		var self = this

		//Returns whether val is within the range specified by min/max
		function r(val, min, max) {
			return val >= min && val <= max
		}
		//Returns whether there is any non-space characters in the specified direction relative to the position
		function hasText(str, pos, left) {
			//160 is &nbsp, 32 is ' '
			left = left === false ? false : true

			for (var i = left ? pos-1 : pos; left ? i > 0 : i < str.length; left ? i-- : i++) {
				if ([160, 32].contains(str.charCodeAt(i)))
					continue
				else
					return true
			}
			return false
		}
		//This just returns true if there is relevant text that would stop ctrl back/del from propogating farther than this string
		function hasStopText(str, pos, left) {
			var text = false
			var space = false
			left = left === false ? false : true

			for (var i = left ? pos-1 : pos; left ? i > 0 : i < str.length; left ? i-- : i++) {
				var isSpace = [160, 32].contains(str.charCodeAt(i))
				if (!space && isSpace)
					space = true
				else if (!text && !isSpace)
					text = true

				if (space && text)
					return true
			}
			return false
		}

		this.nextElement = function(elem) {
			var cont = elem
			var next = cont.nextSibling

			while (!next) {
				cont = cont.parentElement

				if (cont.id === 'document_root')
					return false

				next = cont.nextSibling
			}
			return next
		}
		this.prevElement = function(elem) {
			var cont = elem
			var prev = cont.previousSibling

			while (!prev) {
				cont = cont.parentElement

				if (cont.id === 'document_root')
					return false

				prev = cont.previousSibling
			}
			return prev
		}

		this.keyWillDelete = function(evt) {
			/*
			In trying to figure out how to detect if a key was relevant, I appended all the keycodes for keys...