From 242926ae8adae35882a83dd521e4ef20d4902023 Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Sat, 19 Jun 2021 18:12:14 +0200
Subject: [PATCH] Improvements/fixes for detachable editor drag handling

---
 src/editor/Editor.jsx                         | 8 ++++++--
 src/editor/widgets/comment/Comment.jsx        | 2 +-
 src/editor/widgets/comment/DropdownMenu.jsx   | 2 +-
 src/editor/widgets/comment/TextEntryField.jsx | 2 +-
 src/editor/widgets/tag/TagWidget.jsx          | 2 +-
 themes/default/editor/_editor.scss            | 2 +-
 6 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index ae3cb82..1fa4f90 100644
--- a/src/editor/Editor.jsx
+++ b/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>
   )
 
diff --git a/src/editor/widgets/comment/Comment.jsx b/src/editor/widgets/comment/Comment.jsx
index cc9b9dc..2369e35 100644
--- a/src/editor/widgets/comment/Comment.jsx
+++ b/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>
diff --git a/src/editor/widgets/comment/DropdownMenu.jsx b/src/editor/widgets/comment/DropdownMenu.jsx
index 43903f5..60b2d82 100644
--- a/src/editor/widgets/comment/DropdownMenu.jsx
+++ b/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>
diff --git a/src/editor/widgets/comment/TextEntryField.jsx b/src/editor/widgets/comment/TextEntryField.jsx
index 1585ea0..cbd5e46 100644
--- a/src/editor/widgets/comment/TextEntryField.jsx
+++ b/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}
diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx
index 289323c..ecbc9fb 100644
--- a/src/editor/widgets/tag/TagWidget.jsx
+++ b/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 =>
diff --git a/themes/default/editor/_editor.scss b/themes/default/editor/_editor.scss
index df6d3e5..89e0540 100644
--- a/themes/default/editor/_editor.scss
+++ b/themes/default/editor/_editor.scss
@@ -116,7 +116,7 @@
 
 }
 
-.r6o-editor.react-draggable-dragged .r6o-arrow {
+.r6o-editor.dragged .r6o-arrow {
   display:none;
 }