Adding preventDefault to stop text being highlighted when resizing do…

…wnwards.

plutus-playground-client/src/Editor/State.purs

@@ -17,6 +17,7 @@ import Monaco (Editor, getModel, layout, focus, setPosition, setValue) as Monaco
 import Prelude (Unit, bind, discard, not, pure, show, unit, void, (+), (-), ($), (<$>), (==))
 import Types (ChildSlots, _editorSlot)
 import Web.Event.Extra (preventDefault, readFileFromDragEvent)
+import Web.UIEvent.MouseEvent (pageY)
 
 initialState :: forall m. MonadEffect m => m State
 initialState =
@@ -74,7 +75,9 @@ handleAction bufferLocalStorageKey (HandleDropEvent event) = do
   void $ query _editorSlot unit $ tell $ Monaco.SetPosition { column: 1, lineNumber: 1 }
   saveBuffer bufferLocalStorageKey contents
 
-handleAction _ (SetFeedbackPaneDragStart feedbackPaneDragStart) = assign _feedbackPaneDragStart feedbackPaneDragStart
+handleAction _ (SetFeedbackPaneDragStart event) = do
+  liftEffect $ preventDefault event
+  assign _feedbackPaneDragStart $ Just $ pageY event
 
 handleAction _ ClearFeedbackPaneDragStart = do
   feedbackPaneExtend <- use _feedbackPaneExtend

plutus-playground-client/src/Editor/Types.purs

@@ -14,6 +14,7 @@ import LocalStorage (Key(..))
 import Monaco (IPosition)
 import Prelude (bottom, top, (<<<))
 import Web.HTML.Event.DragEvent (DragEvent)
+import Web.UIEvent.MouseEvent (MouseEvent)
 
 data Action
   = Init
@@ -23,7 +24,7 @@ data Action
   | ScrollTo IPosition
   | SetKeyBindings KeyBindings
   | ToggleFeedbackPane
-  | SetFeedbackPaneDragStart (Maybe Int)
+  | SetFeedbackPaneDragStart MouseEvent
   | ClearFeedbackPaneDragStart
   | FixFeedbackPaneExtend Int
 

plutus-playground-client/src/Editor/View.purs

@@ -85,7 +85,7 @@ editorPane initialContents bufferLocalStorageKey editorState@(State { keyBinding
     [ class_ (ClassName "code-editor")
     , onDragOver $ Just <<< HandleDragEvent
     , onDrop $ Just <<< HandleDropEvent
-    -- This is not the natural place to have these handlers. But see note [1] below.
+    -- This is not the natural place to have these listeners. But see note [1] below.
     , onMouseMove feedbackPaneResizeMouseMoveHandler
     , onMouseUp feedbackPaneResizeMouseUpHandler
     ]
@@ -104,15 +104,15 @@ editorFeedback :: forall p. State -> WebCompilationResult -> HTML p Action
 editorFeedback editorState@(State { currentCodeIsCompiled, feedbackPaneExtend, feedbackPaneMinimised }) compilationResult =
   div
     [ class_ $ ClassName "editor-feedback-container"
-    -- This is also not the natural place to have these handlers. But see note [1] below.
+    -- This is also not the natural place to have these listeners. But see note [1] below.
     , onMouseMove feedbackPaneResizeMouseMoveHandler
     , onMouseUp feedbackPaneResizeMouseUpHandler
     ]
     [ div
         [ classes feedbackPaneClasses ]
         [ div
             [ class_ $ ClassName "editor-feedback-resize-bar"
-            , onMouseDown $ \event -> Just $ SetFeedbackPaneDragStart $ Just $ pageY event
+            , onMouseDown $ \event -> Just $ SetFeedbackPaneDragStart event
             -- Note [1]: This is the natural place to have these listeners. But because the mouse
             -- can - and probably will - move faster than this resize bar, they also need to be on
             -- the editor pane (to catch when the mouse moves up faster), and on the feedback

plutus-playground-client/static/editor.scss

@@ -81,6 +81,10 @@
         &.minimised {
             height: $feedback-header-height + 1px; // +1 for the border
             overflow: hidden;
+
+            .editor-feedback-resize-bar {
+                height: 0;
+            }
         }
 
         a, a:hover {