JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="//rawgit.com/mar10/jquery-ui-contextmenu/master/jquery.ui-contextmenu.js"></script>
<div class="editor" style="width: 440px; overflow:scroll; height: 300px;">
<pre>This is an example but would contain a large 
section of pre formated text. The user will 
highlight a word and somehow put that word 
into a specific form field below.</pre>
</div>
<form>
Field1: <input type="text" name="field1" id="field1"> | Field2: <input type="text" name="field2" id="field2">
</form>

JavaScript

$(document).ready(function(){
 
 	$("pre").bind("mouseup",function(e){
  	var mytext = selHTML();
    $("div.editor").contextmenu('open',$("pre"));	
  });
  
  $("div.editor").contextmenu({
    delegate: "pre",
    menu: [
      {title: "Field 1", cmd: "f1", uiIcon: "ui-icon-copy"},
      {title: "Field 2", cmd: "f2", uiIcon: "ui-icon-copy"}
    ],
    select: function(event, ui) {
      //alert("select " + ui.cmd + " on " + ui.target.text());
      var mytext = selHTML();
      if(ui.cmd === "f1"){
        $("#field1").val(mytext);
      } else if(ui.cmd === "f2"){
        $("#field2").val(mytext);
      }

    }
  });  
  
  
});



function selHTML() {
		    try {
		        if (window.ActiveXObject) {
		            var c = document.selection.createRange();
		            return c.htmlText;
		        }

		        var nNd = document.createElement("span");
		        var w = getSelection().getRangeAt(0);
		        w.surroundContents(nNd);
		        return nNd.innerHTML;
		    } catch (e) {
		        if (window.ActiveXObject) {
		            return document.selection.createRange();
		        } else {
		            return getSelection();
		        }
		    }

		}