JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<div class="container">
  <div>
    <h2>Writer V2</h2>
    <hr>
    <div id='test'>
      hello
    </div>
  </div>
<div id='log'>

</div>
  <div class="dropdown tail">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Help with <span class="caret"></span>
            </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">

      <li class="dropdown-submenu">
        <a tabindex="-1" href="#" class="firsttext">Next phrase</a>
        <ul class="dropdown-menu">
          <li class="active"><a tabindex="-1">to show ...</a></li>
          <li class="dropdown-submenu">
            <a href="#" class="toshow">Contrast</a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level</a></li>
              <li><a href="#">3rd level</a></li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a href="#" class="toshow">Similarity</a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level</a></li>
            </ul>
          </li>
          <li><a href="#" class="toshow">Give example</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#" class="firsttext">Next sentence</a>
        <ul class="dropdown-menu">
          <li class="active"><a tabindex="-1">to show ...</a></li>
          <li class="dropdown-submenu">
            <a href="#" class="toshow">Contrast</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
  <div id="insertList">
    <div class="modal-header">
      <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h5 class="modal-title" id="popTitle"></h5>
   ...

CSS

.tail {
  width: 90px;
  position: absolute;
  display: none;
}

#insertList {
  background: #fff;
  width: 500px;
  min-height: 140px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  position: absolute;
  display: none;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 5px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;       
}

JavaScript

var firsttxt = ""
var secondtxt =""
var keepcoords
//run at start
$("#test").summernote({
	toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
})
//listen for hover events
$(".firsttext").hover(function() {
	firsttxt = $(this).text()
})
$(".note-editable").on('keyup mouseup', function() {
    if ($("#floatnav").is(':visible')) {
      $("#floatnav").hide('fast')
    }
		$('#insertList').hide()
    var coords = getSelectionCoords()
    keepcoords = coords
		
    $(".tail").show("fast")
    $('.tail').css({
      left: (coords.x - 45) + 'px',
      top: (coords.y - 40) + 'px'
    });
  })
  //get popup of selections
$(".toshow").on("click", function() {
	secondtxt = $(this).text()
	$("#popTitle").text(firsttxt + " to show " + secondtxt)
  $('#insertList').css({
    left: (keepcoords.x) + 'px',
    top: (keepcoords.y) + 'px'
  }).show("fast");
})
$(".close").on('click', function() {
    $("#insertList").hide("fast")
  });
	
//add to body with use btn
$("#insertList").on("click", ".use", function(){
	var toinsert = $(this).closest('p').find(".txt").text()
	var toinsert2 = $(this).closest('p').find(".txt").html()
		
	//insertText(toinsert, toinsert2)
	insertHtml(toinsert)
	$("#insertList").hide()
});
//FIX this - testing inserting text or html. text work on append, html replaces
function insertText(toinsert, htmltoinsert) {
	$('#test').summernote('insertText', " " + toinsert + " ");
	//$('#test').summernote('code', htmltoinsert);
}
function insertHtml(toinsert) {
	
  var selection = document.getSelection();
  var cursorPos = selection.anchorOffset;
	
  var oldContent = selection.anchorNode.nodeValue;
  var toInsert = toinsert
  var newContent = oldContent.substring(0, cursorPos) + toInsert + oldContent.substring(cursorPos);
  selection.anchorNode.nodeValue...