diff options
Diffstat (limited to 'node_modules/montage/ui/rich-text-editor/rich-text-editor.reel')
3 files changed, 156 insertions, 111 deletions
diff --git a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor-base.js b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor-base.js index e92da424..46e45926 100644 --- a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor-base.js +++ b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor-base.js | |||
@@ -907,10 +907,10 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
907 | handleInput: { | 907 | handleInput: { |
908 | enumerable: false, | 908 | enumerable: false, |
909 | value: function(event) { | 909 | value: function(event) { |
910 | if (!this._executingCommand && !this._nextInputIsNotTyping) { | 910 | if (!this._executingCommand && !this._ignoreNextInputEvent) { |
911 | this._startTyping(); | 911 | this._startTyping(); |
912 | } | 912 | } |
913 | delete this._nextInputIsNotTyping; | 913 | delete this._ignoreNextInputEvent; |
914 | 914 | ||
915 | if (this._hasSelectionChangeEvent === false) { | 915 | if (this._hasSelectionChangeEvent === false) { |
916 | this.handleSelectionchange(); | 916 | this.handleSelectionchange(); |
@@ -1149,7 +1149,7 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
1149 | if (this.undoManager) { | 1149 | if (this.undoManager) { |
1150 | this.undoManager.add("Move", this._undo, this, "Move", this._innerElement); | 1150 | this.undoManager.add("Move", this._undo, this, "Move", this._innerElement); |
1151 | } | 1151 | } |
1152 | this._nextInputIsNotTyping = true; | 1152 | this._ignoreNextInputEvent = true; |
1153 | 1153 | ||
1154 | this.handleDragend(event); | 1154 | this.handleDragend(event); |
1155 | this.handleSelectionchange(); | 1155 | this.handleSelectionchange(); |
@@ -1253,7 +1253,7 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
1253 | if (this.undoManager) { | 1253 | if (this.undoManager) { |
1254 | this.undoManager.add("Cut", this._undo, this, "Cut", this._innerElement); | 1254 | this.undoManager.add("Cut", this._undo, this, "Cut", this._innerElement); |
1255 | } | 1255 | } |
1256 | this._nextInputIsNotTyping = true; | 1256 | this._ignoreNextInputEvent = true; |
1257 | } | 1257 | } |
1258 | }, | 1258 | }, |
1259 | 1259 | ||
@@ -1389,34 +1389,10 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
1389 | doAction: { | 1389 | doAction: { |
1390 | enumerable: true, | 1390 | enumerable: true, |
1391 | value: function(action, value) { | 1391 | value: function(action, value) { |
1392 | var savedActiveElement = document.activeElement, | ||
1393 | editorElement = this._innerElement; | ||
1394 | |||
1395 | if (!editorElement) { | ||
1396 | return; | ||
1397 | } | ||
1398 | |||
1399 | // Make sure we are the active element before calling execCommand | ||
1400 | if (editorElement != savedActiveElement) { | ||
1401 | editorElement.focus(); | ||
1402 | } | ||
1403 | |||
1404 | if (value === undefined) { | ||
1405 | value = false; | ||
1406 | } | ||
1407 | |||
1408 | this.execCommand(action, false, value); | 1392 | this.execCommand(action, false, value); |
1409 | 1393 | ||
1410 | // Force an update states right away | 1394 | // Force an update states right away |
1411 | this._updateStates(); | 1395 | this._updateStates(); |
1412 | |||
1413 | this.handleSelectionchange(); | ||
1414 | this.markDirty(); | ||
1415 | |||
1416 | // Reset the focus | ||
1417 | if (editorElement != savedActiveElement) { | ||
1418 | savedActiveElement.focus(); | ||
1419 | } | ||
1420 | } | 1396 | } |
1421 | }, | 1397 | }, |
1422 | 1398 | ||
@@ -1427,6 +1403,7 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
1427 | var editorElement = this._innerElement; | 1403 | var editorElement = this._innerElement; |
1428 | if (!element || element === editorElement) { | 1404 | if (!element || element === editorElement) { |
1429 | this._doingUndoRedo = true; | 1405 | this._doingUndoRedo = true; |
1406 | this._ignoreNextInputEvent = true; | ||
1430 | document.execCommand("undo", false, null); | 1407 | document.execCommand("undo", false, null); |
1431 | this.markDirty(); | 1408 | this.markDirty(); |
1432 | if (this.undoManager) { | 1409 | if (this.undoManager) { |
@@ -1447,6 +1424,7 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
1447 | var editorElement = this._innerElement; | 1424 | var editorElement = this._innerElement; |
1448 | if (!element || element === editorElement) { | 1425 | if (!element || element === editorElement) { |
1449 | this._doingUndoRedo = true; | 1426 | this._doingUndoRedo = true; |
1427 | this._ignoreNextInputEvent = true; | ||
1450 | document.execCommand("redo", false, null); | 1428 | document.execCommand("redo", false, null); |
1451 | this.markDirty(); | 1429 | this.markDirty(); |
1452 | if (this.undoManager) { | 1430 | if (this.undoManager) { |
diff --git a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.html b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.html index 03724a92..cd180dcc 100644 --- a/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.html +++ b/node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.html | |||
@@ -11,8 +11,7 @@ | |||
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | "overlay": { | 13 | "overlay": { |
14 | "module": "montage/ui/slot.reel", | 14 | "prototype": "montage/ui/slot.reel", |
15 | "name": "Slot", | ||
16 | "properties": { | 15 | "properties": { |
17 | "element": {"#": "editor-slot"}, | 16 | "element": {"#": "editor-slot"}, |
18 | "delegate": {"@": "owner"} | 17 | "delegate": {"@": "owner"} |
@@ -20,8 +19,7 @@ | |||
20 | }, | 19 | }, |
21 | 20 | ||
22 | "owner": { | 21 | "owner": { |
23 | "module": "montage/ui/rich-text-editor/rich-text-editor.reel", | 22 | "prototype": "montage/ui/rich-text-editor/rich-text-editor.reel", |
24 | "name": "RichTextEditor", | ||
25 | "properties": { | 23 | "properties": { |
26 | "element": {"#": "rich-text-editor-container"}, | 24 | "element": {"#": "rich-text-editor-container"}, |
27 | "_overlaySlot": {"@": "overlay"} | 25 | "_overlaySlot": {"@": "overlay"} |
@@ -32,9 +30,9 @@ | |||
32 | 30 | ||
33 | </head> | 31 | </head> |
34 | <body> | 32 | <body> |
35 | <div id="rich-text-editor-container"> | 33 | <div data-montage-id="rich-text-editor-container"> |
36 | <div class="montage-editor" contenteditable="false"></div> | 34 | <div class="montage-editor" contenteditable="false"></div> |
37 | <div id="editor-slot" class="montage-editor-overlay"></div> | 35 | <div data-montage-id="editor-slot" class="montage-editor-overlay"></div> |
38 | </div> | 36 | </div> |
39 | </body> | 37 | </body> |
40 | </html> | 38 | </html> |
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 89af8eb3..a132b0ab 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 | |||
@@ -4,8 +4,11 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | /** | 6 | /** |
7 | @module "montage/ui/rich-text-editor.reel" | 7 | @module "montage/ui/rich-text-editor/rich-text-editor.reel" |
8 | @requires montage/core/core | 8 | @requires montage/core/core |
9 | @requires montage/core/event/mutable-event | ||
10 | @requires montage/core/event/event-manager | ||
11 | @requires rich-text-sanitizer | ||
9 | */ | 12 | */ |
10 | var Montage = require("montage").Montage, | 13 | var Montage = require("montage").Montage, |
11 | RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, | 14 | RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, |
@@ -14,15 +17,38 @@ var Montage = require("montage").Montage, | |||
14 | defaultEventManager = require("core/event/event-manager").defaultEventManager; | 17 | defaultEventManager = require("core/event/event-manager").defaultEventManager; |
15 | 18 | ||
16 | /** | 19 | /** |
17 | @class module:"montage/ui/rich-text-editor.reel".RichTextEditor | 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>. |
21 | @class module:"montage/ui/rich-text-editor/rich-text-editor.reel".RichTextEditor | ||
18 | @extends module:montage/ui/component.Component | 22 | @extends module:montage/ui/component.Component |
23 | @summary | ||
24 | The easiest way to create a RichTextEditor is with a serialization and a <div> tag:<p> | ||
25 | |||
26 | <em>Serialization</em> | ||
27 | <pre class="sh_javascript"> | ||