mzechmeister/pseudo_editable_field.html

## pseudo_editable_field.html
<!DOCTYPE html>
<html>
<head>
<style>
#cursor {
    display: inline;
}

#cursor:not(.collapsed) {
    background-color: #acf;
}

#cursor.collapsed {
    animation: blink 1s;
    outline: 1px solid red;
    animation-iteration-count: infinite;
}

span {
    color: green;
    padding: 5px;
}

span:before {
    content: "5";
    vertical-align: super;
    font-size: smaller;
}

@keyframes blink {
    50% { outline-color: #ffffff00; }
}
</style>
</head>

<body>
<textarea id="ta" style="height:150px">$The top element is a textarea and the div at the bottom a pseudo editable field.$ Sometime mouse selection does not work.$</textarea>
<div id="cursor" ></div>
<div id="mydiv" onclick="let pos = getSelectionPosition(event); ta.setSelectionRange(...pos.sort()); ta.focus()"></div>

<script>
cursor = document.getElementById('cursor')

function parse(t) {
    return t.replace(/\$/g, '<span>X</span>')
}

ta.oninput = e => {
    mydiv.innerHTML = parse(ta.value)
}

function pseudoCursor(nodeA, posA, node,pos) {
    let range = document.createRange()
    range.setStart(nodeA, posA)
    range.setEnd(node, pos)
    cursor.classList.toggle('collapsed', range.collapsed);
    range.insertNode(cursor)
}

function getPos(node, offset) {
    pos = offset
    while (node = node.previousSibling)
        pos += (node.nodeType == Node.TEXT_NODE ? node : node.innerText).length
    return pos
}

function getSelectionPosition(e) {
    if (document.caretRangeFromPoint) {
        // edge, chrome, android
        range = document.caretRangeFromPoint(e.clientX, e.clientY)
        nodeA = range.startContainer
        posA  = range.startOffset
        var node = range.endContainer
        var pos  = range.endOffset
    } else {
        // firefox
        var node = e.rangeParent
        var pos = e.rangeOffset
    }

    posA = getPos(nodeA, posA)
    pos  = getPos(node, pos)
    return [posA, pos]
}

function posi(offset) {
    for (node of [...mydiv.childNodes]) {
        len = (node.nodeType == Node.TEXT_NODE ? node : node.innerText).length
        if (offset > len) {
            offset -= len
        } else break
    }
    return [node, offset]
}

function update() {
    // map ta selection to div selection
    selA = ta.selectionStart
    selB = ta.selectionEnd
    pseudoCursor(...posi(selA), ...posi(selB))
}

var mouse = false

mydiv.onmousedown = function(e) {
    mouse = true
    if (!document.caretRangeFromPoint) {
        // firefox, remember start selection
        nodeA = e.rangeParent
        posA = e.rangeOffset
    }
}

mydiv.onmouseup = function(e) {
    mouse = false
}

document.addEventListener("selectionchange", function(e) {
    !mouse && update()
})

// Firefox ~68 + enable dom.select_events.textcontrols.enabled
ta.addEventListener("selectionchange", function(e) {
    update()
    e.stopPropagation()
})

mydiv.innerHTML = parse(ta.value)

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#cursor {
	display: inline;
	}

	#cursor:not(.collapsed) {
	background-color: #acf;
	}

	#cursor.collapsed {
	animation: blink 1s;
	outline: 1px solid red;
	animation-iteration-count: infinite;
	}

	span {
	color: green;
	padding: 5px;
	}

	span:before {
	content: "5";
	vertical-align: super;
	font-size: smaller;
	}

	@keyframes blink {
	50% { outline-color: #ffffff00; }
	}
	</style>
	</head>

	<body>
	<textarea id="ta" style="height:150px">$The top element is a textarea and the div at the bottom a pseudo editable field.$ Sometime mouse selection does not work.$</textarea>
	<div id="cursor" ></div>
	<div id="mydiv" onclick="let pos = getSelectionPosition(event); ta.setSelectionRange(...pos.sort()); ta.focus()"></div>

	<script>
	cursor = document.getElementById('cursor')

	function parse(t) {
	return t.replace(/\$/g, '<span>X</span>')
	}

	ta.oninput = e => {
	mydiv.innerHTML = parse(ta.value)
	}

	function pseudoCursor(nodeA, posA, node,pos) {
	let range = document.createRange()
	range.setStart(nodeA, posA)
	range.setEnd(node, pos)
	cursor.classList.toggle('collapsed', range.collapsed);
	range.insertNode(cursor)
	}

	function getPos(node, offset) {
	pos = offset
	while (node = node.previousSibling)
	pos += (node.nodeType == Node.TEXT_NODE ? node : node.innerText).length
	return pos
	}

	function getSelectionPosition(e) {
	if (document.caretRangeFromPoint) {
	// edge, chrome, android
	range = document.caretRangeFromPoint(e.clientX, e.clientY)
	nodeA = range.startContainer
	posA = range.startOffset
	var node = range.endContainer
	var pos = range.endOffset
	} else {
	// firefox
	var node = e.rangeParent
	var pos = e.rangeOffset
	}

	posA = getPos(nodeA, posA)
	pos = getPos(node, pos)
	return [posA, pos]
	}

	function posi(offset) {
	for (node of [...mydiv.childNodes]) {
	len = (node.nodeType == Node.TEXT_NODE ? node : node.innerText).length
	if (offset > len) {
	offset -= len
	} else break
	}
	return [node, offset]
	}

	function update() {
	// map ta selection to div selection
	selA = ta.selectionStart
	selB = ta.selectionEnd
	pseudoCursor(...posi(selA), ...posi(selB))
	}

	var mouse = false

	mydiv.onmousedown = function(e) {
	mouse = true
	if (!document.caretRangeFromPoint) {
	// firefox, remember start selection
	nodeA = e.rangeParent
	posA = e.rangeOffset
	}
	}

	mydiv.onmouseup = function(e) {
	mouse = false
	}

	document.addEventListener("selectionchange", function(e) {
	!mouse && update()
	})

	// Firefox ~68 + enable dom.select_events.textcontrols.enabled
	ta.addEventListener("selectionchange", function(e) {
	update()
	e.stopPropagation()
	})

	mydiv.innerHTML = parse(ta.value)

	</script>

	</body>
	</html>