codemirror toolbar

_.md

[ Launch: codemirror toolbar ] 5565314 by enjalot

config.json

{"description":"codemirror toolbar","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/OZeH5RO.png"}

inlet.js

var options = {
  mode: 'javascript',
  lineNumbers: true,
  viewportMargin: Infinity,
  theme: 'vibrant-ink'
}

var display = d3.select("#display")
var editor = display.append("div").classed("editor", true)
.classed("test-editor", true);

var cm = CodeMirror(editor.node(), options);
cm.setValue("var x = 5\nconsole.log(\"x\",x);\nx = 1337;\nconsole.log(\"x\", x, x+42);")

cm.on("cursorActivity", function() {
  //clear();
})
editor.on("click", function() {
  //console.log("editor click", arguments);
  // clear();
})
var ___t = 4;

var text = "hello"
var widget = display.append("div")
  .text(text)
  .classed("log-widget", true)
var lwidget = cm.addLineWidget(0, widget.node(), {above:true});

style.css

.test-editor {
  width: 400px;
  height: 400px;
}

.test-editor .CodeMirror {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}

.log-widget {
  border: 1px solid red;
  background: rgba(240,240,240,0.5);
}