node editor

index.html

<div id="helper">
  <div data-type="html">html</div>
  <div data-type="css">css</div>
  <div data-type="javascript">js</div>
  <div data-type="connector">fx</div>
</div>
<div class="stage"></div>
<div class="options"></div>

node editor.markdown

node editor

working draft — far from complete! Critics are always welcome : ) Any suggestions?

Forked from Sascha Sigl 's Pen node editor.

A Pen by Lanorise Cainion on CodePen.

License.

script.js

//------------------------------------------------------------- variables

var $selectedText;
var isDragging = false,
    $time = '.25s';
var $over;

//------------------------------------------------------------- helper

function eventContentEditable($el){
  $($el).bind({
      input: listener,
      DOMNodeInserted : listener,
      DOMNodeRemoved :listener,
      DOMCharacterDataModified:listener
  });
}

//Remove certain inline Styles
(function($){
    $.fn.removeStyle = function(style)
    {var search = new RegExp(style + '[^;]+;?', 'g');
        return this.each(function()
        {$(this).attr('style', function(i, style)
            {return style.replace(search, '');
            });
        });
    };
    $.fn.selectText = function(){
       var doc = document;
       var element = this[0];
       console.log(this, element);
       if (doc.body.createTextRange) {
           var range = document.body.createTextRange();
           range.moveToElementText(element);
           range.select();
       } else if (window.getSelection) {
           var selection = window.getSelection();      
           var range = document.createRange();
           range.selectNodeContents(element);
           selection.removeAllRanges();
           selection.addRange(range);
       }
    }
}(jQuery));

//------------------------------------------------------------- Node
function Node(id, type,title, $handler) {
  this.id = 'node-' + id;
  this.type = type;
  this.title = title;
  this.toggle = false;
  
  var header = '<header><h1 class="title" contenteditable>'+this.title+'</h1><span class="delete"></span><span class="toggle"></span><span class="nodepoint"></span></header>';
  //var code = '<pre class="col"><code class="code '+this.type+'" contenteditable></code></pre>';
  var code= '<textarea class="col"></textarea>';
  var handler = '<div class="handle"></div>';
  var sidebar = '<aside class="col"></aside>';
  var object = $('<article class="node code open '+this.type+'" id="' + this.id + '">'+header+'<div class="editor table">'+code+handler+sidebar+'</div></article>');
  
  $('.stage').append(object);  
  
  $(object).bind({
    click : function(event){    
      var target = $(event.target);
      $(this).addClass('active');
      
      if(target.hasClass('delete')){
        console.log('delete node' + this.id);
        jsPlumb.detachAllConnections($(this));
        $(this).remove();
      }
      
      if(target.hasClass('toggle')){
        this.toggle = !this.toggle;

        $(this).toggleClass('close','open').promise().done(function(){
          jsPlumb.repaintEverything();
        });
        if($(this).attr('style')){
          $(this).removeStyle('height');
        }
      }
    },
    dblclick:function(event){
      var target = $(event.target);

      if(target.hasClass('title')){
        $(object).find('h1').focus().selectText();
      }
    },
    mouseup: function() {
      isDragging = false;
      $(window).unbind("mousemove");
    },
    mousedown:function() {
      $(window).mousemove(function(event) {
          isDragging = true;
          $(object).addClass('active');
          $(window).unbind("mousemove");
      });
     },
    //Right Click menu
    contextmenu:function(event){
      event.preventDefault();
      var target = $(event.target);
        //event.preventDefault();
        if(target.hasClass('cm-string')){
          var $newValue = target.text().replace(/\"/g,'');
          
          if(contextMenu('',event,$newValue,this,target)){
            console.log('added new Variable');
          }
          else{
            console.log('nope');
          }
        }
        if(target.hasClass('cm-builtin')){
          var $newValue = target.text().replace(/\"/g,'');
          
          var $variable = target.parent().find('.cm-tag').text();
          console.log('$variable'+$variable);
          if(contextMenu($variable,event,$newValue,this,target)){
            console.log('added new Variable');
          }
          else{
            console.log('nope');
          }
        }
        else{
          return false;
        }
     }
})//end of bindA
    .resizable({
      alsoResize:$(this).find('.editor'),
       resize:function(e, ui) {
        jsPlumb.repaint(ui.helper);
      }
    }); //end of resizable()
  
  $(object).find('.CodeMirror').bind({
      mouseover : function(event){
        $over = event;
        console.log('over');
      },
      mouseout : function(event){
        $over = event;
      }
  });
  $(sidebar).bind({
      mouseover : function(){
        $over = $(this);
      },
      mouseout : function(){
        $over = '';
      }
  });
  
  var SourceDestination = {
       endpoint: "Rectangle",
       paintStyle:{lineWidth:2},
       endpointStyle:{fillStyle:'rgb(0,0,0)'},
       isSource: true,
       connector:[ "Straight" ],
       isTarget: false,
       maxConnections: 1,
       anchor:[ 1, 0, 0, 1, -10, 20 ]
   };
   var $dragOptions = {
    handle : $(object).find('header')
   };
  
  
  jsPlumb.draggable($(object),$dragOptions);
  jsPlumb.addEndpoint($(object),SourceDestination);
  
  
    $('.editor').resizable();
    $('.handle').drags();
    
    this.cm = CodeMirror.fromTextArea($(object).find('textarea')[0], {
     lineNumbers: true,
     matchBrackets: true,
     mode:  'text/'+type,
     theme: 'monokai'
   });
} // End of node



//------------------------------------------------ prototype
Node.prototype = {
  getID: function() {
    return this.id;
  },
  changeTitleTo: function($title){
    this.title = $title;
    $('#' + this.id + ' h1').text($title);
  },
  getTitle : function(){
    return this.title;
  },
  getType: function() {
    return this.type;
  }
};
//------------------------------------------------ Aside



//--------------------------------------------------------- Connector

//------------------------------------------------------------- Node
function fxNode(id, title, $handler) {

  this.id = 'fx-'+id;
  this.title = title;
  this.toggle = false;
  
  var header = '<header><h1 class="title" contenteditable>'+this.title+'</h1><span class="delete"></span><span class="toggle"></span><span class="nodepoint"></span></header>';
  var sidebar = '<aside class="col"></aside>';
  var addEndpoint = '<div class="addEndpoint">+</div>';
  var $endPointHolder = '<div class="holder"><div class="endpoint"></div></div>';
  
  var object = $('<article class="node code open fx" id="' + this.id + '">'+header+addEndpoint+$endPointHolder+'</article>');
 
  $('.stage').append(object);
  
  var TargetDestination = {
       endpoint: "Rectangle",
       paintStyle:{lineWidth:2,strokeStyle:'none',width:30,height:30},
    endpointStyle:{fillStyle:'rgb(243,229,0)'},
       connector:[ "Straight" ],    
       isSource: false,
       isTarget: true,
       maxConnections: 1,
       container:"endpoint",
       anchor:[ 0, 0, 0, 0, 15, 15 ]
   };
  var dragOption = {
    handle: $(object).find('header'),
    drag : function(e){
            $(this).find('._jsPlumb_endpoint_anchor_').each(function(i,e){ 
                if($(e).hasClass("connect"))
                    jsPlumb.repaint($(e).parent());
                else
                    jsPlumb.repaint($(e));
            });                                     
        }
   };
  
  jsPlumb.addEndpoint($(object).find('.endpoint'),TargetDestination);
  $(object).draggable(dragOption).resizable();
  
  $(object).bind({
    click:function(event){
      var target = $(event.target);
      if(target.hasClass('addEndpoint')){
        console.log('addEndpoint');
        var $newEndpoint = $('<div class="endpoint"></div>');
        $(this).find('.holder').append($newEndpoint);
        jsPlumb.addEndpoint($newEndpoint,TargetDestination);
        var minHeight = $(this).find('.endpoint').length * 40 + 100;
        console.log(minHeight);
        $(this).css({
          "min-height":minHeight+'px'
        })
      }
      
      if(target.hasClass('delete')){
        console.log('delete node' + this.id);
        jsPlumb.detachAllConnections($(this));
        $(this).remove();
      }
      if(target.hasClass('toggle')){
        this.toggle = !this.toggle;

        $(this).toggleClass('close','open').promise().done(function(){
          jsPlumb.repaintEverything();
        }).removeStyle('height').resizable({ 
          disabled: this.toggle,
          resize:function(e, ui) {
            jsPlumb.repaint(ui.helper);
          }
        });
      }
    },
     dblclick:function(event){
      var target = $(event.target);

      if(target.hasClass('title')){
        $(object).find('h1').focus().selectText();
      }
    }
  });
  
}

//fxNode(1,'fxNode','header');



//------------------------------------------------ Helper

$('#helper > div').on('click',function(){
  createNode($(this));
});

//------------------------------------------------ Stage Events


$('.stage').bind({
  click: function(event){
    var target = $(event.target);

    //Click on node
    if($(target).parents('.node').length > 0) {

    }
    else{
      $('.active').removeClass('active');
    }
  },
  
});

//----------------------------------------------------- Mousetrap
var $menu = new Menu();
Mousetrap.bind({
  
  'shift+a': function(e) {
    $menu.menu();
  },
  'esc': function(e) {
      $('.options').animate({opacity:0},$time).empty();
      return false;
    },
  'h': function(e) {
        e.target.className;
        console.log( e.target.className);
        $($over).slideUp();
        console.log('hide');
      $('.options').animate({opacity:0},$time).empty();
      return false;
    },
  'shift+g': function(e){    
      if($('.node.active').length>1){
        var $activeNodes = $('.node.active');
        var $posX = $activeNodes.css('left');
        var $posY = $activeNodes.css('top');
        console.log($posX);
        var $nodesToGroup = $activeNodes.clone().removeClass('active').removeClass('open').addClass('close').draggable({disabled:true}).attr('style','');
        var $group = new Group($nodesToGroup,$posX,$posY);
        $activeNodes.remove();
      }
    }
});



//------------------------------------------------------ Group Items
function Group($input,$x,$y){
  this.id = $('.group').length;
  this.title = 'Group '+ this.id;
  var $group = $('<article></article>');
  var $nodeHolder = $('<div class="nodes"></div>');
  var header = '<header><h1 class="title" contenteditable>'+this.title+'</h1><span class="delete"></span><span class="toggle"></span><span class="nodepoint"></span></header>';
  
  var TargetDestination = {
      endpoint: "Rectangle",
       paintStyle:{lineWidth:2},
       endpointStyle:{fillStyle:'rgb(0,0,0)'},
       isSource: true,
       connector:[ "Straight" ],
       isTarget: false,
       maxConnections: 1,
       anchor:[ 1, 0, 0, 1, -10, 20 ]
  }
  
    $nodeHolder.append($input)
      .sortable({
      connectWith: '.nodes',
      receive: function(event, ui){
          sortableIn = 1;
        },
        over: function(event, ui){
          sortableIn = 1;
        },
        out: function(event, ui){
          sortableIn = 0;
        },
        beforeStop: function(event, ui){
          if (sortableIn == 0)
          {       ui.item.clone(true).appendTo('.stage').toggleClass('close','open').addClass('active');
          }
        }
    });
    $group.addClass('group node open')
      .attr('id',$('.group').lenght)
      .html(header).append($nodeHolder).
    css({left:$x,top:$y})
      .draggable();
  $('.stage').append($group);
  
  jsPlumb.addEndpoint($($group).find('.nodepoint'),TargetDestination);;
  
  $($group).bind({
    click:function(e){
      var target = $(e.target);
      if(target.hasClass('delete')){
        console.log('delete node' + this.id);
        jsPlumb.detachAllConnections($(this));
        $(this).remove();
      }
      if(target.hasClass('toggle')){
         this.toggle = !this.toggle;

        $(this).toggleClass('close','open').promise().done(function(){
          jsPlumb.repaintEverything();
        }).removeStyle('height').resizable({ 
          disabled: this.toggle,
          resize:function(e, ui) {
            jsPlumb.repaint(ui.helper);
        }});
      }
    },
     dblclick:function(event){
      var target = $(event.target);

      if(target.hasClass('title')){
        $($group).find('h1').focus().selectText();
      }
    }
  })
}


//nodes on screen;
var nodes = [];

function Menu(){
  var $container = $('.options');
  var $bool = true;
  this.open = function(){
    $bool = !$bool;
    return $bool;
  }
  this.destroy = function(){
     $container.animate({opacity:0},$time).css('visibility','hidden').empty();
      $bool = this.open();
   }
  this.menu = function(){
    console.log(this.open());
    if(this.open()){
      var overlay = $('<div class="inner"></div>'),
        search = $('<input type="text" placeholder="search…">'),
        node_html = $('<div id="html" data-type="html">html</div>'),
        node_css = $('<div id="css" data-type="css">css</div>'),
        node_js = $('<div id="js" data-type="javascript">js</div>');
      
        nodes.push(node_css,node_html,node_js);
      $.each(nodes, function(){
        $(this).on('click',function(){
          createNode($(this));
        });
      });
        overlay.append(search,node_html,node_css,node_js);
        $container.append(overlay).css('visibility','visible').animate({opacity:1},$time);
       $bool = this.open();
    }
    else{
      this.destroy();
    }
    
  };
   
}

function createNode($el){
    var $type = $el.attr('data-type');
    var $id = $('.node').length;
  if($type == 'connector'){
    var fx = new fxNode($id,'fx','header');
  }
  else{
    var node = new Node($id,$type,$type+ ' node','header');
      nodes.push(node);
  }   
}

//----------------------------------------------------- Menu
//Get selected text



//------------------------------------------------------------- Custom ContextMenu

function contextMenu($variable,event,$selection,$parent,$textNode){
  var $x = event.pageX,
      $y = event.pageY;
  var $id = $('.modified').length;
 
  
    var $ctxt = $('<div></div>');
  
      $ctxt.attr('class','context')
          .css({
        left: $x,
        top: $y
      }).text('Add a Variable for: ' + $selection).click(function(){
         var type = $selection.split('');
        
          console.log($selection,type);
          if(type[0]==='#' || type[0]==='r' || type[0]==='h' ){
            type = 'color';
            colorPicker($id,$selection);
          }
         var newVariable = '<div class="variable"><span>$'+$variable+' </span><span contenteditable oninput="changeVariable(event);"  data-id="'+$id+'">'+$selection+'</span></div>';
          console.log('$variable '+ $variable);
        $($parent).find('aside').append(newVariable);
          eventContentEditable(newVariable);
        $(this).remove();
      });
      $('body').append($ctxt).click(function(e){
        if($(e.target).hasClass('context')){
          $($textNode).addClass('modified').attr('id','modified-'+$id);
          
          return true;
        }
        else{
          $($ctxt).remove();
          return false;
        }
      });
}


function colorPicker($id,$color){
  $('span[data-id="'+$id+'"]').ColorPicker({
	color: $color,
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
    $('span[data-id="'+$id+'"]:after').css('backgroundColor', '#' + hex);
	}
})
}

function changeVariable(event){
  var $id = $(event.target).attr('data-id');
  var newText = $(event.target).text();
 
  $('#modified-'+$id).text('"'+newText+'"');  
  console.log($id, newText,'modified-'+$id)
}

function listener(event){  
  changeVariable();
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/jquery.jsPlumb-1.6.2-min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/mousetrap.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/jquery.drag.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/codemirror.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/style.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/mousetrap-bind-dictionary.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/colorpicker.js"></script>

style.css

//----------------------------- Colors
$darkGrey: #1D1F20;
$dark:#262721;
$grey:#3F403B;
$lightGrey:#909288;

$green: rgb(118, 184, 52);

$html-color:#CD4436;
$css-color:#2B6BB1;
$js-color:#ECDF6C;


$height:40px;
//----------------------------- Reset

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{
  width:100%;
  height:100%;
}

body{
  background:$darkGrey;
  font-family: 'Roboto', sans-serif;
}
//--------------------------------- Nav
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

nav input{
  width:100%;
  height:$height;
  border-radius:4px;
}

//--------------------------------- UI
.ui-state-disabled { 
  opacity:1; 
}

.ui-resizable-e {
cursor: e-resize;
  //Not yet
}

.stage {
width: 100%;
height: 100%;
padding-top: 3em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
//----------------------------- Nav

nav div{
  padding:10px;
  background:$grey;
  cursor:pointer;
  
  &:hover{
    background:$lightGrey;
  }
}

//--------------------------------- Context
.context {
  background: #eee;
  padding: 0.3em;
  border-radius: 3px;
  position:absolute;
  z-index: 999999;
  cursor:pointer;
  &:hover{
   background:#ccc; 
  }
}

//--------------------------------- Nodes

article{
  min-width:200px;
  height:350px;
  margin:5px;
  position:absolute!important;
  z-index:10;
  background:$dark;
  box-shadow:0 0 1px 0 #000;
  display: flex;
  flex-direction: row;
  &.close{
    height:initial;
    & code{
     display:none;
   }
  }
  &.active{
    z-index: 100;
    box-shadow: 0 0 1px 0 rgba(255,255,255,.5);
  }
}

article header{
  width:100%;
  position:relative;
  top:0;
  left:0;
  height:$height;
  line-height:$height;
  background:$dark;
  color:#eee;
  z-index:99999;
  padding-left:1em;
}

article.open header{
  &:hover{
    & span.toggle{
      transform:translateX(-$height*.6) rotate(0deg);
    }
     & span.delete{
      transform:translateX(-$height*.6*2) rotate(0deg);
    }
  }
  & span.toggle, & span.delete{
    transform:translateX(0px) rotate(0deg);
  } 
}
article.close header{
  &:hover{
    & span.toggle{
      transform:translateX(-$height*.6) rotate(-90deg);
    }
    & span.delete{
      transform:translateX(-$height*.6*2);
    }
  }
  & span.toggle{
    transform:translateX(0px) rotate(-90deg);
  } 
  & span.delete{
    transform:translateX(0px);
  }
}

article header span{
  content:'';
  display:block;
  width:$height*.6;
  height:$height*.6;
  background:$grey;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  cursor:pointer;
  margin:auto;
  transition-duration:.15s;
  z-index:1;
  box-shadow:0 0 5px 0 $dark;
 
  
  
  &.toggle{
      background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/editor-16.svg);
      background-size:50%;
      background-repeat:no-repeat;
      background-position:center center;
  }
  &.delete{
      background-color:$html-color;
      opacity:.3;
    &:hover{
      opacity:1;
    }
    &:before{
      content:'x';
      display:block;
      width:100%;
      height:100%;
      color:$dark;
      line-height:$height/1.75;
      text-align:center;
    }
  }
}

.nodepoint{
  display:block;
  width:$height*.6;
  height:$height*.6;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  z-index:5;
  cursor:pointer;
  margin:auto;
}

header{
  cursor:move;
  & h1{
    font-size:1em;
    font-weight:100;
    outline:none;
  }
  .html &{
    border-bottom:2px solid $html-color;
    & .nodepoint{
      background:$html-color;
    }
  }
  .scss &,.css &{
    border-bottom:2px solid $css-color;
    & .nodepoint{
      background:$css-color;
    }
  }
  .javascript &{
    border-bottom:2px solid $js-color;
    & .nodepoint{
      background:$js-color;
    }
  }
}

.editor {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:0;
}

aside{
  background:$grey;
  flex:0.3;
  padding:0!important;
}

.variable {
  background: $lightGrey;
  width: 100%;
  padding: 0 1em;
  margin: .2em 0;
  text-align: center;
  line-height: 1.5em;
}

//-------- Splitter
.table {  
  display: flex;
  width: 100%;
  margin: 0;
  height: 100%;
  position:absolute;
  overflow:hidden;
  top:0;
  padding-top: $height;
}

.table .col{
  position: relative;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}

.CodeMirror{
  flex:.7;
  height:100%;
}

.handle {
  width: 5px;
  text-align: center;
  position: relative;
  transition: all ease-in 0.1s;
  
  &:after{
    content: '';
    display: block;
    width: 1px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 2px;
    bottom: 0;
    margin: auto;
    z-index: 99;
    border-left:2px solid $grey;
    border-right:2px solid $dark;
  }
}

code {
   width: 100%;
  height: 100%;
  font-size: 1.5em;
  outline:none;
  top:0;
  left:0;
  position:absolute;
}

code::scrollbar { 
    display: none; 
}
code::-webkit-scrollbar{ 
    display: none; 
}

.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
position: absolute;
bottom: 0;
  
  &:after{
    content: '';
    display: block;
    width: 50%;
    height: 2px;
    bottom: 50%;
    left: 0;
    transform: rotate(-45deg);
    position: absolute;
    border-top: 2px solid $grey;
    border-bottom: 2px solid $grey;
    right: 0;
    margin: auto;
  }
}


//------------------------------------------------------ options
.options{
  width: 100%;
  height: 20%;
  position: absolute;
  display: table;
  opacity: 0;
  display:none;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999999999;
  min-height: 200px;
  bottom: 0;
}
.options .inner{
 // opacity:0;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}

input[type="text"] {
width: 80%;
height: 50px;
border-radius: 8px;
font-size: 1.2em;
line-height: 50px;
  padding:1em;
}
.options .inner > div {
width: 33.3%;
float: left;
margin-top: 4em;
background: $grey;
padding: 1em;
  cursor:pointer;
  
  &:hover{
    background:$lightGrey;
  }
}

//---------------------------------------------------------- fxNode 
.addEndpoint {
  position: absolute;
  bottom: 0;
  left: 0;
  color:$grey;
  background: $darkGrey;
  z-index: 999;
  padding: .2em 0.6em;
}
.node.fx {
  width: 125px;
  height:150px;
  min-width: 100px;
  min-height:125px;
}
.holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $grey;
}

.endpoint {
  position: relative;
  top: 40px;
  margin-top:0.2em;
  left: 0;
  width: 30px;
  height: 30px;
  background: $dark;
}

//---------------------------------------------------------- Group


.group .nodes {
position: absolute;
top: 0;
left: 0;
  background:$grey;
padding: $height 0 0 2px;
width: 100%;
height: 100%;
}
.group .nodes .node {
width: 100%;
min-width: inherit;
  position:relative!important;
margin: 3px 0;
}

.ui-sortable-placeholder{
  background:$dark;
  height:$height;
  position:absolute;
  visibility:visible!important;
}

article.group{
  &.close{
    & .nodes{
      height:0;
      overflow:hidden;
    }
  }
}

.group article{
  & .nodepoint {
    width: 4px;
  }
  & .toggle, & .delete{
    display:none;
  }
}

.group .nodepoint {
  background-color: $green;
}

//---------------------------------------------------------- jsplumb  
._jsPlumb_endpoint._jsPlumb_endpoint_anchor_.ui-draggable.ui-droppable {
  z-index: 99999999;
}

path {
stroke-width: 2px;
stroke: rgba(255,255,255,0.4);
}

//----------------------------- Theme


/* Based on Sublime Text's Monokai theme */

textarea.col, .CodeMirror{
  font-size:1.2em;
  line-height:1.5em;
}

.cm-s-monokai.CodeMirror {background: #272822; color: #f8f8f2;}
.cm-s-monokai div.CodeMirror-selected {background: #49483E !important;}
.cm-s-monokai .CodeMirror-gutters {background: #272822; border-right: 0px;}
.cm-s-monokai .CodeMirror-guttermarker { color: white; }
.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-monokai .CodeMirror-linenumber {color: #d0d0d0;}
.cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}

.cm-s-monokai span.cm-comment {color: #75715e;}
.cm-s-monokai span.cm-atom {color: #ae81ff;}
.cm-s-monokai span.cm-number {color: #ae81ff;}

.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {color: #a6e22e;}
.cm-s-monokai span.cm-keyword {color: #f92672;}
.cm-s-monokai span.cm-string {color: #e6db74;}

.cm-s-monokai span.cm-variable {color: #a6e22e;}
.cm-s-monokai span.cm-variable-2 {color: #9effff;}
.cm-s-monokai span.cm-def {color: #fd971f;}
.cm-s-monokai span.cm-bracket {color: #f8f8f2;}
.cm-s-monokai span.cm-tag {color: #f92672;}
.cm-s-monokai span.cm-link {color: #ae81ff;}
.cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}

.cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
.cm-s-monokai .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}


/*Menu*/
div#helper {
  width: 100%;
  position: absolute;
  padding:.5em;
  background:$grey;
  z-index: 999;
  border-bottom:1px solid $lightGrey;
}

div#helper > div{
  display:inline-block;
  border:1px solid $lightGrey;
  padding:.2em 1em;
  background:$grey;
  color:$lightGrey;
  border-radius:5px;
  cursor:pointer;
  
  &:hover{
    background:$lightGrey;
    color:$dark;    
  }
}

span.modified {
  border: 1px dashed #F436A9;
  padding: 0 0.3em;
  margin: 0 0.3em;
  border-radius: 6px;
  background-color: rgba(0,0,0,0.5);
}

span[data-id]{
  position:relative;
  &:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  }
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/codemirror.css" rel="stylesheet" />