Select folds as the user clicks on it and expand them on double clicking

lib/ace/css/editor.css

@@ -154,6 +154,10 @@
     -webkit-box-sizing: border-box;
 }
 
+.ace_line .ace_fold {
+    cursor: pointer;
+}
+
 .ace_dragging .ace_marker-layer, .ace_dragging .ace_text-layer {
   cursor: move;
 }

lib/ace/mouse_handler.js

@@ -112,6 +112,13 @@ var MouseHandler = function(editor) {
             }
             return;
         } else {
+            // Select the fold as the user clicks it.
+            var fold = editor.session.getFoldAt(pos.row, pos.column, 1);
+            if (fold) {
+                editor.selection.setSelectionRange(fold.range);
+                return;
+            }
+
             inSelection = !editor.getReadOnly()
                 && !selectionEmpty
                 && selectionRange.contains(pos.row, pos.column);
@@ -255,10 +262,18 @@ var MouseHandler = function(editor) {
     };
 
     this.onMouseDoubleClick = function(e) {
+        var editor = this.editor;
         var pos = this.$getEventPosition(e);
-        this.editor.moveCursorToPosition(pos);
-        this.editor.selection.selectWord();
-        this.$clickSelection = this.editor.getSelectionRange();
+
+        // If the user dclicked on a fold, then expand it.
+        var fold = editor.session.getFoldAt(pos.row, pos.column, 1);
+        if (fold) {
+            editor.session.expandFold(fold);
+        } else {
+            editor.moveCursorToPosition(pos);
+            editor.selection.selectWord();
+            this.$clickSelection = editor.getSelectionRange();
+        }
     };
 
     this.onMouseTripleClick = function(e) {