diff options
Diffstat (limited to 'node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js')
-rw-r--r-- | node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js | 78 |
1 files changed, 48 insertions, 30 deletions
diff --git a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js index 3665ca1b..dc78816d 100644 --- a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js +++ b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js | |||
@@ -13,8 +13,7 @@ | |||
13 | var Montage = require("montage").Montage, | 13 | var Montage = require("montage").Montage, |
14 | RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, | 14 | RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, |
15 | Sanitizer = require("./rich-text-sanitizer").Sanitizer, | 15 | Sanitizer = require("./rich-text-sanitizer").Sanitizer, |
16 | MutableEvent = require("core/event/mutable-event").MutableEvent, | 16 | ChangeNotification = require("core/change-notification").ChangeNotification; |
17 | defaultEventManager = require("core/event/event-manager").defaultEventManager; | ||
18 | 17 | ||
19 | /** | 18 | /** |
20 | @classdesc The RichTextEditor component is a lightweight Montage component that provides basic HTML editing capability. It wraps the HTML5 <code>contentEditable</code> property and largely relies on the browser's support of <code><a href="http://www.quirksmode.org/dom/execCommand.html" target="_blank">execCommand</a></code>. | 19 | @classdesc The RichTextEditor component is a lightweight Montage component that provides basic HTML editing capability. It wraps the HTML5 <code>contentEditable</code> property and largely relies on the browser's support of <code><a href="http://www.quirksmode.org/dom/execCommand.html" target="_blank">execCommand</a></code>. |
@@ -130,9 +129,11 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
130 | overlayParent, | 129 | overlayParent, |
131 | overlayNextSibling; | 130 | overlayNextSibling; |
132 | 131 | ||
133 | if (this._dirtyValue) { | 132 | if (this._dirtyValue && !this._value_locked) { |
133 | this._value_locked = true; | ||
134 | |||
134 | if (contentNode) { | 135 | if (contentNode) { |
135 | // Temporary orphran the overlay slot while retrieving the content | 136 | // Temporary orphan the overlay slot while retrieving the content |
136 | overlayElement = contentNode.querySelector(".montage-editor-overlay"); | 137 | overlayElement = contentNode.querySelector(".montage-editor-overlay"); |
137 | if (overlayElement) { | 138 | if (overlayElement) { |
138 | overlayParent = overlayElement.parentNode; | 139 | overlayParent = overlayElement.parentNode; |
@@ -158,8 +159,14 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
158 | overlayParent.insertBefore(overlayElement, overlayNextSibling); | 159 | overlayParent.insertBefore(overlayElement, overlayNextSibling); |
159 | } | 160 | } |
160 | 161 | ||
161 | this._value = content; | 162 | if (this._value != content) { |
163 | this.dispatchPropertyChange("value", function(){ | ||
164 | this._value = content; | ||
165 | }); | ||
166 | } | ||
167 | |||
162 | this._dirtyValue = false; | 168 | this._dirtyValue = false; |
169 | this._value_locked = false; | ||
163 | } | 170 | } |
164 | return this._value; | 171 | return this._value; |
165 | }, | 172 | }, |
@@ -192,13 +199,16 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
192 | enumerable: true, | 199 | enumerable: true, |
193 | get: function() { | 200 | get: function() { |
194 | var contentNode = this._innerElement, | 201 | var contentNode = this._innerElement, |
202 | content = "", | ||
195 | overlayElement = null, | 203 | overlayElement = null, |
196 | overlayParent, | 204 | overlayParent, |
197 | overlayNextSibling; | 205 | overlayNextSibling; |
198 | 206 | ||
199 | if (this._dirtyTextValue) { | 207 | if (this._dirtyTextValue && !this._textValue_locked) { |
208 | this._textValue_locked = true; | ||
209 | |||
200 | if (contentNode) { | 210 | if (contentNode) { |
201 | // Temporary orphran the overlay slot in order to retrieve the content | 211 | // Temporary orphan the overlay slot in order to retrieve the content |
202 | overlayElement = contentNode.querySelector(".montage-editor-overlay"); | 212 | overlayElement = contentNode.querySelector(".montage-editor-overlay"); |
203 | if (overlayElement) { | 213 | if (overlayElement) { |
204 | overlayParent = overlayElement.parentNode; | 214 | overlayParent = overlayElement.parentNode; |
@@ -206,17 +216,22 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
206 | overlayParent.removeChild(overlayElement); | 216 | overlayParent.removeChild(overlayElement); |
207 | } | 217 | } |
208 | 218 | ||
209 | this._textValue = this._innerText(contentNode); | 219 | content = this._innerText(contentNode); |
210 | 220 | ||
211 | // restore the overlay | 221 | // restore the overlay |
212 | if (overlayElement) { | 222 | if (overlayElement) { |
213 | overlayParent.insertBefore(overlayElement, overlayNextSibling); | 223 | overlayParent.insertBefore(overlayElement, overlayNextSibling); |
214 | } | 224 | } |
215 | } else { | 225 | } |
216 | this._textValue = ""; | 226 | |
227 | if (this._textValue != content) { | ||
228 | this.dispatchPropertyChange("textValue", function(){ | ||
229 | this._textValue = content; | ||
230 | }); | ||
217 | } | 231 | } |
218 | 232 | ||
219 | this._dirtyTextValue = false; | 233 | this._dirtyTextValue = false; |
234 | this._textValue_locked = false; | ||
220 | } | 235 | } |
221 | return this._textValue; | 236 | return this._textValue; |
222 | }, | 237 | }, |
@@ -641,28 +656,31 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo | |||
641 | markDirty: { | 656 | markDirty: { |
642 | enumerable: false, | 657 | enumerable: false, |
643 | value: function() { | 658 | value: function() { |
644 | var thisRef = this, | 659 | var thisRef = this; |
645 | prevValue; | 660 | |
646 | var updateValues = function() { | 661 | var updateValues = function() { |
647 | clearTimeout(thisRef._forceUpdateValuesTimeout); | 662 | var value, |
648 | delete thisRef._forceUpdateValuesTimeout; | 663 | descriptor; |
649 | clearTimeout(thisRef._updateValuesTimeout); | 664 | |
650 | delete thisRef._updateValuesTimeout; | 665 | clearTimeout(thisRef._forceUpdateValuesTimeout); |
651 | 666 | delete thisRef._forceUpdateValuesTimeout; | |
652 | if (defaultEventManager.registeredEventListenersForEventType_onTarget_("change@value", thisRef)) { | 667 | clearTimeout(thisRef._updateValuesTimeout); |
653 | prevValue = thisRef._value; | 668 | delete thisRef._updateValuesTimeout; |
654 | if (thisRef.value !== prevValue) { | 669 | |
655 | thisRef.dispatchEvent(MutableEvent.changeEventForKeyAndValue("value" , prevValue).withPlusValue(thisRef.value)); | 670 | if (thisRef._dirtyValue) { |
656 | } | 671 | descriptor = ChangeNotification.getPropertyChangeDescriptor(thisRef, "value"); |
672 | if (descriptor) { | ||
673 | value = thisRef.value; // Will force to update the value and send a property change notification | ||
657 | } | 674 | } |
658 | if (defaultEventManager.registeredEventListenersForEventType_onTarget_("change@textValue", thisRef)) { | 675 | } |
659 | prevValue = thisRef._textValue; | 676 | if (thisRef._dirtyTextValue) { |
660 | if (thisRef.textValue !== prevValue) { | 677 | descriptor = ChangeNotification.getPropertyChangeDescriptor(thisRef, "textValue"); |
661 | thisRef.dispatchEvent(MutableEvent.changeEventForKeyAndValue("textValue" , prevValue).withPlusValue(thisRef.textValue)); | 678 | if (descriptor) { |
662 | } | 679 | value = thisRef.textValue; // Will force to update the value and send a property change notification |
663 | } | 680 | } |
664 | thisRef._dispatchEditorEvent("editorChange"); | 681 | } |
665 | }; | 682 | thisRef._dispatchEditorEvent("editorChange"); |
683 | }; | ||
666 | 684 | ||
667 | if (!this._needsAssingValue) { | 685 | if (!this._needsAssingValue) { |
668 | // Clear the cached value | 686 | // Clear the cached value |