Improvements/fixes for detachable editor drag handling

src/editor/Editor.jsx

@@ -169,8 +169,11 @@ const Editor = props => {
     !widgets.some(isReadOnlyWidget);  // every widget is deletable
 
   return (
-    <Draggable onStart={() => setDragged(true)}>
-      <div ref={element} className="r6o-editor">
+    <Draggable 
+      cancel=".r6o-btn, .r6o-nodrag" 
+      onDrag={() => setDragged(true)}>
+
+      <div ref={element} className={dragged ? 'r6o-editor dragged' : 'r6o-editor'}>
         <div className="r6o-arrow" />
         <div className="r6o-editor-inner">
           {widgets.map(widget => 
@@ -215,6 +218,7 @@ const Editor = props => {
           )}
         </div>
       </div>
+
     </Draggable>
   )
 

src/editor/widgets/comment/Comment.jsx

@@ -66,7 +66,7 @@ const Comment = props => {
           /> } 
           
       <div 
-        className={isMenuVisible ? "r6o-icon r6o-arrow-down r6o-menu-open" : "r6o-icon r6o-arrow-down"} 
+        className={isMenuVisible ? "r6o-icon r6o-arrow-down r6o-nodrag r6o-menu-open" : "r6o-icon r6o-arrow-down r6o-nodrag"} 
         onClick={() => setIsMenuVisible(!isMenuVisible)}>
         <ChevronDownIcon width={12} />
       </div>

src/editor/widgets/comment/DropdownMenu.jsx

@@ -10,7 +10,7 @@ const DropdownMenu = props => {
   useClickOutside(ref, () => props.onClickOutside());
 
   return (
-    <ul ref={ref} className="r6o-comment-dropdown-menu">
+    <ul ref={ref} className="r6o-comment-dropdown-menu r6o-nodrag">
       <li onClick={props.onEdit}>{i18n.t('Edit')}</li>
       <li onClick={props.onDelete}>{i18n.t('Delete')}</li>
     </ul>

src/editor/widgets/comment/TextEntryField.jsx

@@ -22,7 +22,7 @@ export default class TextEntryField extends Component {
     return (
       <TextareaAutosize
         ref={this.onRender}
-        className="r6o-editable-text" 
+        className={this.props.editable ? 'r6o-editable-text r6o-nodrag' : 'r6o-editable-text'} 
         value={this.props.content}
         placeholder={this.props.placeholder || i18n.t('Add a comment...')}
         disabled={!this.props.editable}

src/editor/widgets/tag/TagWidget.jsx

@@ -59,7 +59,7 @@ const TagWidget = props => {
   }
 
   return (
-    <div className="r6o-widget r6o-tag">
+    <div className="r6o-widget r6o-tag r6o-nodrag">
       { tags.length > 0 &&
         <ul className="r6o-taglist">
           { tags.map(tag =>

themes/default/editor/_editor.scss

@@ -116,7 +116,7 @@
 
 }
 
-.r6o-editor.react-draggable-dragged .r6o-arrow {
+.r6o-editor.dragged .r6o-arrow {
   display:none;
 }