JSFiddle - React, Tailwind, and code Playground

by bmh_ca

HTML

<input type="button" id='s' value="Save selection">
<input type="button" id='r' value="Restore selection">
<div id="editor" contenteditable="true">Please select some text and <b>press the button</b>

</div>

CoffeeScript

TEXT_NODE = document.TEXT_NODE

$.fn.getEditableCursorOffset = ->
  range = window.getSelection().getRangeAt(0)
  preSelRange = range.cloneRange()
  preSelRange.selectNodeContents(@[0])
  preSelRange.setEnd(range.startContainer, range.startOffset)
  start = preSelRange.toString().length
  return {
    start: start
    end: start + range.toString().length
  }

$.fn.setEditableCursorOffset = (offset) ->
  index = 0
  container = @[0]
  nodeStack = [container]
  foundStart = false
  stop = false
  range = document.createRange()
  console.log "offset", offset
  # range.setStart(container, 0)
  # range.collapse(true)
  while not stop and node = nodeStack.pop()
    if node.nodeType == TEXT_NODE
      nextIndex = index + node.length
      console.log "I", index, "S", offset.start, "N", nextIndex
      if not foundStart and index <= offset.start <= nextIndex
        range.setStart(node, offset.start - index)
        foundStart = true
      if foundStart and index <= offset.end <= nextIndex
        range.setEnd(node, offset.end - index)
        stop = true
      console.log "FS", foundStart, "STOP", stop
      index = nextIndex
    else
      i = node.childNodes.length
      nodeStack.push(node.childNodes[i]) while i--
  sel = window.getSelection()
  sel.removeAllRanges()
  sel.addRange(range)
  return @

offset = null
$("#s").mousedown ->
  offset = $("#editor").getEditableCursorOffset()
  return false

$("#r").mousedown ->
  if offset then $("#editor").setEditableCursorOffset(offset)        
  return false