var menu = document.createElement('div');
module.exports = menu;

menu.id = 'editor-menu';
var currentEditor;
var mouseDown = false;
var lastSelectionEvent;
menu.innerHTML = '<button onclick="dabble.activeEditor.toggleBlockType(\'header2\')">H1</button><button onclick="dabble.activeEditor.toggleBlockType(\'header3\')">H2</button><div class="editor-button-separator"></div><button onclick="dabble.activeEditor.toggleMarkup(\'bold\')">B</button><button style="font-style:italic" onclick="dabble.activeEditor.toggleMarkup(\'italic\')">I</button>';




menu.reposition = function() {
  var rect = currentEditor.selection.rect;
  var offsetParent = currentEditor.element.offsetParent || document.documentElement;
  var containerRect = offsetParent.getBoundingClientRect();
  menu.style.left = Math.floor(rect.left - containerRect.left - (menu.offsetWidth - rect.width)/2) + 'px';
  menu.style.top = (rect.top - containerRect.top - menu.offsetHeight - 6) + 'px';
};

menu.show = function() {
  currentEditor.element.parentNode.insertBefore(menu, currentEditor.element.nextSibling);
  requestAnimationFrame(function() {
    menu.classList.add('active');
  });
};

menu.hide = function() {
  menu.remove();
  menu.classList.remove('active');
};


document.addEventListener('editorselectionchanged', updateSelection);
document.addEventListener('mousedown', function() {
  mouseDown = true;
});
document.addEventListener('mouseup', function() {
  mouseDown = false;
  if (lastSelectionEvent) {
    updateSelection(lastSelectionEvent);
    lastSelectionEvent = null;
  }
});

function updateSelection(event) {
  currentEditor = event.editor;

  if (mouseDown) {
    lastSelectionEvent = event;
  }

  if (currentEditor.selection.type !== 'text' || currentEditor.selection.isCollapsed || mouseDown) {
    menu.hide();
  } else {
    menu.show();
    menu.reposition();
  }
}

@@ -167,17 +167,18 @@
 rHTML = 
-'
+%60%0A
 %3Cbutton 
@@ -229,16 +229,47 @@
 (%5C'h
-eader2%5C'
+2%5C');dabble.activeEditor.element.focus(
 )%22%3EH
@@ -270,32 +270,33 @@
 s()%22%3EH1%3C/button%3E
+%0A
 %3Cbutton onclick=
@@ -339,16 +339,47 @@
 (%5C'h
-eader3%5C'
+3%5C');dabble.activeEditor.element.focus(
 )%22%3EH
@@ -388,16 +388,17 @@
 /button%3E
+%0A
 %3Cdiv cla
@@ -432,16 +432,17 @@
 %22%3E%3C/div%3E
+%0A
 %3Cbutton 
@@ -489,14 +489,52 @@
 p(%5C'
-bold%5C'
+strong%5C');dabble.activeEditor.element.focus(
 )%22%3EB
@@ -542,16 +542,17 @@
 /button%3E
+%0A
 %3Cbutton 
@@ -625,16 +625,48 @@
 p(%5C'
-italic%5C'
+em%5C');dabble.activeEditor.element.focus(
 )%22%3EI
@@ -674,17 +674,18 @@
 /button%3E
-'
+%0A%60
 ;%0A%0A%0A%0A%0Ame
@@ -723,62 +723,72 @@
 var 
-rect = currentEditor.selection.rect;%0A  var offsetParen
+container = menu.parentNode;%0A  if (!container) return;%0A  var rec
 t = 
@@ -805,55 +805,21 @@
 tor.
+s
 ele
-ment.offsetParent %7C%7C document.documentElemen
+ction.rec
 t;%0A 
@@ -843,20 +843,17 @@
 t = 
-offsetParent
+container
 .get
@@ -936,16 +936,39 @@
 ct.left 
++ container.scrollLeft 
 - (menu.
@@ -1053,16 +1053,38 @@
 ect.top 
++ container.scrollTop 
 - menu.o
@@ -1134,24 +1134,39 @@
 nction() %7B%0A 
+ var scroller =
  currentEdit
@@ -1179,72 +1179,283 @@
 ment
-.parentNode.insertBefore(menu, currentEditor.element.nextSibling
+;%0A  while (scroller) %7B%0A    var overflow = getComputedStyle(scroller).overflow;%0A    if (overflow === 'scroll' %7C%7C overflow === 'auto' %7C%7C scroller.parentNode.nodeType !== Node.ELEMENT_NODE) %7B%0A      break;%0A    %7D%0A    scroller = scroller.parentNode;%0A  %7D%0A  scroller.appendChild(menu
 );%0A 
@@ -1664,17 +1664,16 @@
 onchange
-d
 ', updat
@@ -1685,16 +1685,76 @@
 ction);%0A
+document.addEventListener('editorchange', menu.reposition);%0A
 document

Update temp menu