Cosmetic fixes to auto-position + dragging behavior

src/editor/Editor.jsx

@@ -316,6 +316,7 @@ export default class Editor extends Component {
       <Draggable 
         disabled={!this.props.detachable}
         handle=".r6o-draggable" 
+        cancel=".r6o-btn, .r6o-btn *"
         onDrag={() => this.setState({ dragged: true })}>
 
         <div ref={this.element} className={this.state.dragged ? 'r6o-editor dragged' : 'r6o-editor'}>

src/editor/setPosition.js

@@ -1,3 +1,5 @@
+const MARGIN_VERTICAL = 14;
+
 /** Sets the editor position and determines a proper orientation **/
 const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
   // Container element bounds
@@ -8,7 +10,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
 
   // Default orientation (upwards arrow, at bottom-left of shape)
   const { left, top, right, bottom } = selectedEl.getBoundingClientRect();
-  editorEl.style.top = `${bottom - containerBounds.top}px`;
+  editorEl.style.top = `${bottom - containerBounds.top + MARGIN_VERTICAL}px`;
   editorEl.style.left = `${left - containerBounds.left}px`;
 
   if (autoPosition) {
@@ -29,7 +31,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
       editorEl.classList.add('r6o-arrow-bottom');
       
       const editorHeight = editorEl.children[1].getBoundingClientRect().height;
-      editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
+      editorEl.style.top = `${top - containerBounds.top - editorHeight - MARGIN_VERTICAL}px`;
     }
 
     // Get bounding box in current orientation for next tests

themes/default/editor/_editor.scss

@@ -6,7 +6,6 @@
 .r6o-editor {
   position:absolute;
   z-index:99999;
-  margin-top:18px;
   margin-left:-14px;
   width:400px;
   color:$standard-type;
@@ -107,7 +106,6 @@
 }
 
 .r6o-editor.r6o-arrow-bottom {
-  margin-top:-14px;
 
   .r6o-arrow {
     display:block;
@@ -127,10 +125,6 @@
   display:none;
 }
 
-.r6o-editor.r6o-arrow-bottom.pushed.down {
-  margin-top:4px;
-}
-
 .r6o-editor .r6o-draggable {
   cursor:move;
 }