diff options
Diffstat (limited to 'node_modules/montage/ui/rich-text-editor/rich-text-editor.reel')
4 files changed, 192 insertions, 131 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 0bdf67e7..9791908f 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 | |||
@@ -9,13 +9,31 @@ | |||
9 | */ | 9 | */ |
10 | var Montage = require("montage").Montage, | 10 | var Montage = require("montage").Montage, |
11 | Component = require("ui/component").Component, | 11 | Component = require("ui/component").Component, |
12 | MutableEvent = require("core/event/mutable-event").MutableEvent, | ||
13 | Sanitizer = require("./rich-text-sanitizer").Sanitizer, | 12 | Sanitizer = require("./rich-text-sanitizer").Sanitizer, |
14 | RichTextLinkPopup = require("../overlays/rich-text-linkpopup.reel").RichTextLinkPopup, | 13 | RichTextLinkPopup = require("../overlays/rich-text-linkpopup.reel").RichTextLinkPopup, |
15 | RichTextResizer = require("../overlays/rich-text-resizer.reel").RichTextResizer, | 14 | RichTextResizer = require("../overlays/rich-text-resizer.reel").RichTextResizer, |
16 | defaultEventManager = require("core/event/event-manager").defaultEventManager, | 15 | ChangeNotification = require("core/change-notification").ChangeNotification, |
17 | defaultUndoManager = require("core/undo-manager").defaultUndoManager; | 16 | defaultUndoManager = require("core/undo-manager").defaultUndoManager; |
18 | 17 | ||
18 | |||
19 | /** static variables, constants | ||
20 | */ | ||
21 | var COMMANDS = [ | ||
22 | {property: "bold"}, | ||
23 | {property: "underline"}, | ||
24 | {property: "italic"}, | ||
25 | {property: "strikeThrough"}, | ||
26 | {property: "baselineShift", method: this._baselineShiftGetState}, | ||
27 | {property: "justify", method: this._justifyGetState}, | ||
28 | {property: "listStyle", method: this._listStyleGetState}, | ||
29 | {property: "fontName", method: this._fontNameGetState}, | ||
30 | {property: "fontSize"}, | ||
31 | {property: "backColor"}, | ||
32 | {property: "foreColor"} | ||
33 | ], | ||
34 | NBR_COMMANDS = COMMANDS.length; | ||
35 | |||
36 | |||
19 | /** | 37 | /** |
20 | @class module:"montage/ui/rich-text-editor.reel".RichTextEditorBase | 38 | @class module:"montage/ui/rich-text-editor.reel".RichTextEditorBase |
21 | @extends module:montage/ui/component.Component | 39 | @extends module:montage/ui/component.Component |
@@ -254,9 +272,17 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
254 | // Commands Helpers | 272 | // Commands Helpers |
255 | _getState: { | 273 | _getState: { |
256 | value: function(property, command) { | 274 | value: function(property, command) { |
257 | var state; | 275 | var state, |
276 | savedActiveElement = document.activeElement, | ||
277 | editorElement = this._innerElement; | ||
278 | |||
279 | if (editorElement && !this["_" + property + "_locked"]) { | ||
280 | |||
281 | // Make sure we are the active element before calling execCommand | ||
282 | if (editorElement && editorElement != savedActiveElement) { | ||
283 | editorElement.focus(); | ||
284 | } | ||
258 | 285 | ||
259 | if (this._innerElement == document.activeElement) { | ||
260 | state = document.queryCommandValue(command); | 286 | state = document.queryCommandValue(command); |
261 | // Convert string to boolean | 287 | // Convert string to boolean |
262 | if (state == "true") { | 288 | if (state == "true") { |
@@ -264,9 +290,15 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
264 | } if (state == "false") { | 290 | } if (state == "false") { |
265 | state = false; | 291 | state = false; |
266 | } | 292 | } |
293 | |||
294 | // Reset the focus | ||
295 | if (editorElement && editorElement != savedActiveElement) { | ||
296 | savedActiveElement.focus(); | ||
297 | } | ||
298 | |||
267 | return state; | 299 | return state; |
268 | } else { | 300 | } else { |
269 | return this["_" + property]; | 301 | return this["_" + property]; |
270 | } | 302 | } |
271 | } | 303 | } |
272 | }, | 304 | }, |
@@ -320,7 +352,15 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
320 | _baselineShiftGetState: { | 352 | _baselineShiftGetState: { |
321 | enumerable: false, | 353 | enumerable: false, |
322 | value: function() { | 354 | value: function() { |
323 | if (this._innerElement == document.activeElement) { | 355 | var savedActiveElement = document.activeElement, |
356 | editorElement = this._innerElement; | ||
357 | |||
358 | if (editorElement && !this._baselineShift_locked) { | ||
359 | // Make sure we are the active element before calling execCommand | ||
360 | if (editorElement != savedActiveElement) { | ||
361 | editorElement.focus(); | ||
362 | } | ||
363 | |||
324 | if (this._getState("baselineShift", "subscript")) { | 364 | if (this._getState("baselineShift", "subscript")) { |
325 | return "subscript" | 365 | return "subscript" |
326 | } else if (this._getState("baselineShift", "superscript")) { | 366 | } else if (this._getState("baselineShift", "superscript")) { |
@@ -328,6 +368,11 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
328 | } else { | 368 | } else { |
329 | return "baseline"; // default | 369 | return "baseline"; // default |
330 | } | 370 | } |
371 | |||
372 | // Reset the focus | ||
373 | if (editorElement != savedActiveElement) { | ||
374 | savedActiveElement.focus(); | ||
375 | } | ||
331 | } else { | 376 | } else { |
332 | return this._baselineShift; | 377 | return this._baselineShift; |
333 | } | 378 | } |
@@ -347,7 +392,15 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
347 | _listStyleGetState: { | 392 | _listStyleGetState: { |
348 | enumerable: false, | 393 | enumerable: false, |
349 | value: function() { | 394 | value: function() { |
350 | if (this._innerElement == document.activeElement) { | 395 | var savedActiveElement = document.activeElement, |
396 | editorElement = this._innerElement; | ||
397 | |||
398 | if (editorElement && !this._listStyle_locked) { | ||
399 | // Make sure we are the active element before calling execCommand | ||
400 | if (editorElement != savedActiveElement) { | ||
401 | editorElement.focus(); | ||
402 | } | ||
403 | |||
351 | if (this._getState("listStyle", "insertorderedlist")) { | 404 | if (this._getState("listStyle", "insertorderedlist")) { |
352 | return "ordered" | 405 | return "ordered" |
353 | } else if (this._getState("listStyle", "insertunorderedlist")) { | 406 | } else if (this._getState("listStyle", "insertunorderedlist")) { |
@@ -355,6 +408,11 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
355 | } else { | 408 | } else { |
356 | return "none"; // default | 409 | return "none"; // default |
357 | } | 410 | } |
411 | |||
412 | // Reset the focus | ||
413 | if (editorElement != savedActiveElement) { | ||
414 | savedActiveElement.focus(); | ||
415 | } | ||
358 | } else { | 416 | } else { |
359 | return this._listStyle; | 417 | return this._listStyle; |
360 | } | 418 | } |
@@ -373,7 +431,15 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
373 | _justifyGetState: { | 431 | _justifyGetState: { |
374 | enumerable: false, | 432 | enumerable: false, |
375 | value: function() { | 433 | value: function() { |
376 | if (this._innerElement == document.activeElement) { | 434 | var savedActiveElement = document.activeElement, |
435 | editorElement = this._innerElement; | ||
436 | |||
437 | if (editorElement && !this._justify_locked) { | ||
438 | // Make sure we are the active element before calling execCommand | ||
439 | if (editorElement != savedActiveElement) { | ||
440 | editorElement.focus(); | ||
441 | } | ||
442 | |||
377 | if (this._getState("justify", "justifyleft")) { | 443 | if (this._getState("justify", "justifyleft")) { |
378 | return "left" | 444 | return "left" |
379 | } else if (this._getState("justify", "justifycenter")) { | 445 | } else if (this._getState("justify", "justifycenter")) { |
@@ -385,6 +451,11 @@ exports.RichTextEditorBase = Montage.create(Component,/** @lends module:"montage | |||
385 | } else { | 451 | } else { |
386 | return "left"; // default | 452 | return "left"; // default |
387 | } | 453 | } |
454 | |||