8 files changed, 288 insertions, 58 deletions

diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js
index 1e9222fd..cb95ca1d 100644
--- a/js/components/controllers/tree-controller.js
+++ b/js/components/controllers/tree-controller.js
@@ -23,6 +23,16 @@ var Montage = require("montage").Montage,
 */
 var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
 
+    _delegate : { value: null },
+    delegate : {
+        get: function() {
+            return this._delegate;
+        },
+        set: function(value) {
+            this._delegate = value;
+        }
+    },
+
     rootKey : {
         value: null
     },
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index dad93b31..103e418f 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -40,7 +40,9 @@ exports.Editable = Montage.create(Component, {
             this._element.addEventListener('keydown', this, false);
             this._element.addEventListener('keyup', this, false);
             this._element.addEventListener('input', this, false);
-            
+            this._element.addEventListener('paste', this, false);
+
+
             if(this.startOnEvent) {
                 this._element.addEventListener(this.startOnEvent, this, false);
             }
@@ -126,7 +128,7 @@ exports.Editable = Montage.create(Component, {
                 if(this.stopOnBlur) {
                     //console.log('adding mousedown event listener');
                     ///// Simulate blur on editable node by listening to the doc
-                    document.addEventListener('mouseup', this, false);
+                    document.addEventListener('mousedown', this, false);
                 }
                 
                 this._sendEvent('start');
@@ -135,16 +137,17 @@ exports.Editable = Montage.create(Component, {
         }
     },
     stop : {
-        value: function() {
+        value: function(eventData) {
             this._isEditable = this._element.contentEditable = false;
             this._element.classList.remove(this.editingClass);
-            
-            this._sendEvent('stop');
-            
+
             ///// if value is different than pre-edit val, call onchange method
             if(this._preEditValue !== this.value) {
                 this._sendEvent('change');
             }
+
+            this._sendEvent('stop', eventData);
+            document.removeEventListener('mousedown', this, false);
         }
     },
     selectAll : {
@@ -178,12 +181,11 @@ exports.Editable = Montage.create(Component, {
         }
     },
     blur : {
-        value : function() {
+        value : function(eventData) {
             if(this._hint) {
                 this.accept();
             }
-            this.stop();
-            document.removeEventListener('mouseup', this, false);
+            this.stop(eventData);
             this._sendEvent('blur');
         }
     },
@@ -212,15 +214,25 @@ exports.Editable = Montage.create(Component, {
             this._sendEvent('input');
         }
     },
-    handleMouseup : {
+    handleMousedown : {
         value : function(e) {
             //console.log('handle mouse down');
             ///// Listen for simulated blur event
             if(this.stopOnBlur && e._event.target !== this._element) {
-                this.blur();
+                this.blur({
+                    "originalEventType": "mousedown",
+                    "originalEvent": e
+                });
             }
         }
     },
+    handlePaste : {
+        value: function(e) {
+            e.preventDefault();
+            document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text"));
+            this._sendEvent('paste', e);
+        }
+    },
     handleEvent : {
         value : function(e) {
             //console.log("event type : " + e._event.type);
@@ -231,9 +243,9 @@ exports.Editable = Montage.create(Component, {
         }
     },
     _sendEvent : {
-        value : function(type) {
+        value : function(type, data) {
             var evt = document.createEvent("CustomEvent");
-            evt.initCustomEvent(type, true, true);
+            evt.initCustomEvent(type, true, true, data);
             this.dispatchEvent(evt);
         }
     },
@@ -257,10 +269,11 @@ exports.Editable = Montage.create(Component, {
     },
     keyActions : { 
         value : {
-            stop   : [27,9,13,186],
+            stop   : [27,9,13],
             revert : [27],
             backsp : [8]
-        }
+        },
+        distinct: true
     }
     
 });
\ No newline at end of file
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 6e3b2aaf..803770db 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -327,48 +327,8 @@ exports.Hintable = Montage.create(Editable, {
                 revert : [27],
                 backsp : [8]
             }
-        }
+        },
+        distinct: true
     }
     
-});
-
-// suggest : {
-//     value : function(hint) {
-//         ///// if no hint argument passed, clear suggestions
-//         if(!hint) {
-//             this.clearHint();
-//             return false;            
-//         }
-//         
-//         this._hint = hint;            
-// 
-//         ///// append span with suggested hint
-//         if(this.hintElement) {
-//             this.clearHint();
-//             
-//             ///// Set the hint element's text
-//             this._getFirstTextNode(this.hintElement).textContent = hint;
-// 
-//             ///// if hintElement was removed from the DOM, the object still
-//             ///// exists, so it needs to be re-appended
-//             if(this.hintElement.parentNode === null) {
-//                 this._element.appendChild(this.hintElement);
-//             }
-//         } else {
-//             /// Remove the phantom "<BR>" element that is generated when 
-//             /// content editable element is empty
-//             this._children(this._element, function(item) { 
-//                 return item.nodeName === 'BR';
-//             }).forEach(function(item) {
-//                 this._element.removeChild(item);
-//             }, this);
-// 
-//             this.hintElement = document.createElement('span');
-//             this.hintElement.classList.add(this.suggestClass);
-//             this.hintElement.appendChild(document.createTextNode(hint));
-//             this._element.appendChild(this.hintElement);
-//         }
-// 
-//         this._hint = hint;
-//     }
-// },
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
new file mode 100644
index 00000000..b765f636
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.css
@@ -0,0 +1,62 @@