Text Edit and Modify

by Brenton Strine

HTML

<div class="boo" contenteditable id="boo"></div>
<textarea wrap="soft"></textarea>
<p>As you can see, I've hit enter here twice... now this is a difficult concept, but I've actually just inserted FORMAThey TING where I should only be inserting content.</p><p> Hitting enter is nice but it is a purely VISUAL indicator of what is happening. To a person, it's easy to tell what that space means using context cues, so in this case, it looks like a new paragraph. However, that just isn't how computers work! SO what we really need to do is indicate that there is a new paragraph. Let's start by making the previous paragraph encoded as such, and then this one. </p>

CSS

.boo, textarea { width: 100%; height: 300px; border: double 3px grey; white-space: pre;}
#currentlySelected { 
    display: block;
    border: dashed 1px #ccc;
    margin: 5px;
    padding: 5px;
}

JavaScript

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};

$(document).ready(function(){
    log("------------------reloaded--------------------------");
    $(".boo").css("width", "100%");
    $(".boo").keypress(function(event){
        if (event.keyCode == 10 || event.keyCode == 13) {
            event.preventDefault();
             if (document.selection) {
                 var c = document.selection;
                 log(c);
             } else { //(document.getSelection() ){
                 var c = document.getSelection();
                 log(c);
             }
            log(c.type);
            log(c.anchorOffset);
            log(c.focusNode);
            var nodeText = c.focusNode.nodeValue;
            var cursorPos = c.anchorOffset;
            
            c.focusNode.nodeValue = nodeText.slice(0,cursorPos) + String.fromCharCode(182) + nodeText.slice(cursorPos);
            for (var i=0;i<=cursorPos;i++) {
                c.modify("move","forward","character");
            }
        }
        
    });
    $(".boo").on("contextmenu", function(button){
        if(button.which==3){
           
            
         if (document.selection) {
                var s = document.selection;
                log(range);
            } else if (document.getSelection() ){
                var s = document.getSelection();
                log(s);
            }
        var rng;
    
        if(!s) { return null; } 
        if (s.rangeCount > 0) {
            rng = s.getRangeAt(0);
        } else if ( typeof s.createRange ===...