1 files changed, 107 insertions, 59 deletions

diff --git a/node_modules/labs/rich-text-editor.reel/rich-text-editor.js b/node_modules/labs/rich-text-editor.reel/rich-text-editor.js
index 3fece294..b88d5868 100644
--- a/node_modules/labs/rich-text-editor.reel/rich-text-editor.js
+++ b/node_modules/labs/rich-text-editor.reel/rich-text-editor.js
@@ -12,6 +12,8 @@ var Montage = require("montage/core/core").Montage,
     MutableEvent = require("montage/core/event/mutable-event").MutableEvent,
     Resizer = require("node_modules/labs/rich-text-editor.reel/rich-text-resizer").Resizer,
     Sanitizer = require("node_modules/labs/rich-text-editor.reel/rich-text-sanitizer").Sanitizer;
+    Point = require("montage/core/geometry/point").Point;
+
 
 /**
     @class module:"montage/ui/rich-text-editor.reel".RichTextEditor
@@ -148,7 +150,6 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
                 if (this._resizer) {
                     this._needsHideResizer = true;
                 }
-
                 if (this._sanitizer) {
                     value = this._sanitizer.willSetValue(value, this._uniqueId);
                 }
@@ -296,7 +297,9 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
     states: {
         enumerable: true,
         get: function() {
-            this.updateStates();
+            if (this._statesDirty || !this._states) {
+                this.updateStates();
+            }
             return this._states;
         }
     },
@@ -313,7 +316,6 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
                 action,
                 states,
                 state,
-                statesChanged = false,
                 hasFocus = this._hasFocus;
 
             if (this._states == null || this._statesDirty) {
@@ -339,16 +341,8 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
 
                         if (states[key] !== state) {
                             states[key] = state;
-                            statesChanged = true;
                         }
                     }
-
-                    if (statesChanged) {
-                        this._states = states;
-                        // As we do not use a setter, we need to manually dispatch a change event
-                        this.dispatchEvent(MutableEvent.changeEventForKeyAndValue("states" , this._states));
-                    }
-
                 }
             }
 
@@ -388,6 +382,10 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
         enumerable: false,
         value: {
             bold: {enabled: true, needsValue:false, status: true},
+            justifyleft: {enabled: true, needsValue:false, status: true},
+            justifycenter: {enabled: true, needsValue:false, status: true},
+            justifyright: {enabled: true, needsValue:false, status: true},
+            justifyfull: {enabled: true, needsValue:false, status: true},
             italic: {enabled: true, needsValue:false, status: true},
             underline: {enabled: true, needsValue:false, status: true},
             strikethrough: {enabled: true, needsValue:false, status: true},
@@ -536,6 +534,7 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
                 }
 
                 this._adjustPadding();
+                this._markDirty();
                 delete this._needsResetContent;
             }
 
@@ -1011,6 +1010,12 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
             event.preventDefault();
             event.stopPropagation();
 
+            // Remove the link popup
+            if (this._needsActiveLinkOn === false && this._activeLink) {
+                this._needsActiveLinkOn = null;
+                this.needsDraw = true;
+            }
+
             // Update the caret
             if (event.x !== this._dragOverX || event.y !== this._dragOverY) {
                 this._dragOverX = event.x;
@@ -1365,9 +1370,11 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
                     thisRef._dispatchEditorEvent("editorChange");
                 };
 
-            // Clear the cached value
-            this._dirtyValue = true;
-            this._dirtyTextValue = true;
+            if (!this._needsResetContent) {
+                // Clear the cached value
+                this._dirtyValue = true;
+                this._dirtyTextValue = true;
+            }
 
             if (!this._forceUpdateValuesTimeout) {
                 this._forceUpdateValuesTimeout = setTimeout(updateValues, 1000);
@@ -1519,60 +1526,85 @@ exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/
                 popup,
                 parentNode,
                 nextSibling,
-                w, h, l, t, docH, docW,
-                maxWidth,
+                w, h, l, t,
+                left, right, leftWidth, rightWidth,
                 style,
                 popupExtraWidth = 53; // This is depending of the popup css
 
+            var offsetLeft,
+                offsetTop,
+                _findOffset = function(node) {
+                    offsetLeft = node.offsetLeft;
+                    offsetTop = node.offsetTop;
+
+                    while ((node = node.offsetParent) && node != editorElement) {
+                        offsetLeft += node.offsetLeft;
+                        offsetTop += node.offsetTop;
+                    }
+                };
+
+
             if (this._activeLink != element) {
                 this._hideActiveLink();
                 if (element) {
+
+                    _findOffset(element);
+
                     parentNode = element.parentNode;
                     nextSibling = element.nextSibling;
 
-                    // sanity check: make sure we don't already have a popup installed for that element
-                    if (!nextSibling || nextSibling.tagName !== "DIV" || !nextSibling.classList.contains("montage-link-popup")) {
+                    oh = editorElement.offsetHeight;
+                    ow = editorElement.offsetWidth;
+                    st = editorElement.scrollTop;
+                    sl = editorElement.scrollLeft;
 
-                        oh = editorElement.offsetHeight;
-                        ow = editorElement.offsetWidth;
-                        st = editorElement.scrollTop;
-                        sl = editorElement.scrollLeft;
+                    w  = element.offsetWidth -1,
+                    h  = element.offsetHeight -1,
+                    l  = offsetLeft,
+                    t  = offsetTop,
 
-                        w  = element.offsetWidth -1,
-                        h  = element.offsetHeight -1,
-                        l  = element.offsetLeft,
-                        t  = element.offsetTop,
+                    style = "";
 
-                        style = "";
-                        if (t > 60 && t - st + h + 50 > oh) {
-                            style = "bottom: " + (oh - t + 5) + "px;";
-                        } else {
-                            style = "top: " + (t + h + 5 ) + "px;";
-                        }
+                    // Should we display the popup on top or below the element?
+                    if (t > 60 && t - st + h + 50 > oh) {
+                        style = "bottom: " + (oh - t + 5) + "px;";
+                    } else {
+                        style = "top: " + (t + h + 5 ) + "px;";
+                    }
 
-                        var maxWidth = ow - l - popupExtraWidth + sl;
-                        if (maxWidth < 150) {
-                            maxWidth = 150;
+                    // Should we display the popup aligned on the left or right of the element?
+                    left = sl;
+                    right = sl + ow;