58 files changed, 5353 insertions, 267 deletions

diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
new file mode 100644
index 00000000..1d0ad776
--- /dev/null
+++ b/js/components/editable.reel/editable.js
@@ -0,0 +1,250 @@
+/* ComputedStyleSubPanel.js */
+var Montage   = require("montage").Montage,
+    Component = require("montage/ui/component").Component;
+
+
+/*
+
+EDITABLE - Methods
+- startEdit
+- stopEdit
+- value
+- 
+- _suggest
+- _suggestNext
+- _suggestPrev
+- _clearSuggest
+- _accept
+- _revert
+- _setCaret
+
+*/
+
+
+exports.Editable = Montage.create(Component, {
+    hasTemplate: { value: false },
+
+    _element : { value : null },
+    element : {
+        get : function() {
+            return this._element;
+        },
+        set : function(el) {
+            this._element = el;
+            this._element.addEventListener('keydown', this, false);
+            this._element.addEventListener('input', this, false);
+            
+            if(this.startOnEvent) {
+                this._element.addEventListener(this.startOnEvent, this, false);
+            }
+            
+        }
+    },
+    _readOnly : {
+        value: false
+    },
+    readOnly : {
+        get : function() { return this._readOnly; },
+        set : function(makeReadOnly) {
+            var action = makeReadOnly ? 'add' : 'remove';
+            
+            this._element.classList[action](this.readOnlyClass);
+            
+            if(this.isEditable) {
+                this.stop();
+            }
+            this._readOnly = makeReadOnly;
+        }
+    },
+    _isEditable : {
+        value : false
+    },
+    isEditable : {
+        get : function() {
+            return this._isEditable;
+        },
+        set: function(makeEditable) {
+            if(this._readOnly && makeEditable) { return false; }
+            this._isEditable = makeEditable;
+        }
+    },
+    _isDirty : {
+        value: false
+    },
+    isDirty : {
+        get : function() {
+            return this._isDirty;
+        },
+        set : function(setDirty) {
+            if(setDirty) {
+                this._isDirty = true;
+                this._sendEvent('dirty');
+            } else {
+                this._isDirty = false;
+            }
+        }
+    },
+    value : {
+        get: function() {
+            return this._element.textContent;
+        },
+        set: function(str) {
+            this._element.textContent = str;
+        }
+    },
+
+    ///// Pre Edit Value
+    ///// Value stored when editing starts
+    ///// Useful for reverting to previous value
+    
+    _preEditValue : {
+        value : null
+    },
+    start : {
+        value: function() {
+            if(!this._readOnly) {
+                this._isEditable = this._element.contentEditable = true;
+                this._element.classList.add(this.editingClass);
+                
+                ///// Save the preEditValue
+                this._preEditValue = this.value;
+                
+                if(this.selectOnStart) {
+                    this.selectAll();
+                }
+                
+                if(this.stopOnBlur) {
+                    console.log('adding mousedown event listener');
+                    ///// Simulate blur on editable node by listening to the doc
+                    document.addEventListener('mouseup', this, false);
+                }
+                
+                this._sendEvent('start');
+            }
+            
+        }
+    },
+    stop : {
+        value: function() {
+            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');
+            }
+        }
+    },
+    selectAll : {
+        value : function() {
+            var range = document.createRange(),
+                sel   = window.getSelection();
+                
+            sel.removeAllRanges();
+            range.selectNodeContents(this._element);
+            sel.addRange(range);
+        }
+    },
+    setCursor : {
+        value : function(position) {
+            var index = position,
+                range, node, sel;