diff --git a/dev-docs/RFCs/v1.0/customized-mode.md b/dev-docs/RFCs/v1.0/customized-mode.md
deleted file mode 100644
index 12cbe4e68..000000000
--- a/dev-docs/RFCs/v1.0/customized-mode.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# [MiniRFC] react-map-gl-draw: Support customized modes
-
-- **Authors**: Xintong Xia
-- **Date**: March 2020
-- **Status**: Draft
-
-
-## Summary
-
-`react-map-gl-draw` gets more and more public interests, some users requested new drawing modes, i.e. drawing circle,
-some want to customize drawing and editing behaviors, i.e. disable dragging while editing, drawing rectangle without releasing mouse.
-Current API is not scalable to support customizations. Additionally Nebula.gl already support customized modes. 
-
-## Proposal
-
-Change the options `mode` type to be a `ModeHandler` object. And expose all the existing modes, and a method to allow user re-deregister events. 
-
-- `mode` (Object, Optional)
-  - default to `null`
-   
-  - `EditorModes.SELECT` - Lets you select features.
-  - `EditorModes.EDITTING` - Lets you select and drag vertices; and drag features.
-  - `EditorModes.DRAW_PATH` - Lets you draw a GeoJson `LineString` feature.
-  - `EditorModes.DRAW_POLYGON` - Lets you draw a GeoJson `Polygon` feature.
-  - `EditorModes.DRAW_POINT` - Lets you draw a GeoJson `Point` feature.
-  - `EditorModes.DRAW_RECTANGLE` - Lets you draw a `Rectangle` (represented as GeoJson `Polygon` feature) with two clicks - start drawing on first click, and finish drawing on second click .
-  - `EditorModes.DRAW_RECTANGLE_ONE_CLICK` - Lets you draw a `Rectangle` (represented as GeoJson `Polygon` feature) with one click - start drawing when mouse down and finish drawing when mouse released.
-
-Customized edit mode should follow [BaseMode](https://github.com/uber/nebula.gl/blob/master/modules/react-map-gl-draw/src/edit-modes/base-mode.js)
diff --git a/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md b/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md
index 90d6fde0a..0c195f899 100644
--- a/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md
+++ b/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md
@@ -128,7 +128,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -165,9 +165,10 @@ export default class App extends Component {
 
 **Advanced example: multiple draw modes and editing drawn features**
 
+[codesandbox](https://codesandbox.io/s/react-map-gl-draw-example-5n97w?file=/src/app.js)
+
 ```js
 import React, { Component } from 'react';
-import { render } from 'react-dom';
 import MapGL from 'react-map-gl';
 import {
   Editor,
@@ -190,7 +191,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/modules/react-map-gl-draw/README.md b/modules/react-map-gl-draw/README.md
index 90d6fde0a..0c195f899 100644
--- a/modules/react-map-gl-draw/README.md
+++ b/modules/react-map-gl-draw/README.md
@@ -128,7 +128,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -165,9 +165,10 @@ export default class App extends Component {
 
 **Advanced example: multiple draw modes and editing drawn features**
 
+[codesandbox](https://codesandbox.io/s/react-map-gl-draw-example-5n97w?file=/src/app.js)
+
 ```js
 import React, { Component } from 'react';
-import { render } from 'react-dom';
 import MapGL from 'react-map-gl';
 import {
   Editor,
@@ -190,7 +191,7 @@ const DEFAULT_VIEWPORT = {
   zoom: 14,
 };
 
-export default class App extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/modules/react-map-gl-draw/src/mode-handler.tsx b/modules/react-map-gl-draw/src/mode-handler.tsx
index d05d14bbc..5efd1938f 100644
--- a/modules/react-map-gl-draw/src/mode-handler.tsx
+++ b/modules/react-map-gl-draw/src/mode-handler.tsx
@@ -56,6 +56,7 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
 
     this._events = {
       anyclick: (evt) => this._onEvent(this._onClick, evt, true),
+      dblclick: (evt) => this._onEvent(this._onDblclick, evt, false),
       click: (evt) => evt.stopImmediatePropagation(),
       pointermove: (evt) => this._onEvent(this._onPointerMove, evt, true),
       pointerdown: (evt) => this._onEvent(this._onPointerDown, evt, true),
@@ -215,7 +216,7 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
 
     switch (editType) {
       case EDIT_TYPE.ADD_FEATURE:
-        this.props.onSelect({
+        this._onSelect({
           selectedFeature: null,
           selectedFeatureIndex: null,
           selectedEditHandleIndex: null,
@@ -308,6 +309,12 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
     this._modeHandler.handleClick(event, modeProps);
   };
 
+  _onDblclick = (event: BaseEvent) => {
+    if (isNumeric(this._getSelectedFeatureIndex())) {
+      event.sourceEvent.stopImmediatePropagation();
+    }
+  };
+
   _onPointerMove = (event: BaseEvent) => {
     // hovering
     const hovered = this._getHoverState(event);
@@ -348,15 +355,16 @@ export default class ModeHandler extends PureComponent<EditorProps, EditorState>
   };
 
   _onPointerDown = (event: BaseEvent) => {
+    const isDragging = event.picks && event.picks[0];
     const startDraggingEvent = {
       ...event,
-      isDragging: true,
+      isDragging,
       pointerDownScreenCoords: event.screenCoords,
       pointerDownMapCoords: event.mapCoords,
     };
 
     const newState = {
-      isDragging: true,
+      isDragging,
       pointerDownPicks: event.picks,
       pointerDownScreenCoords: event.screenCoords,
       pointerDownMapCoords: event.mapCoords,