From 24b483db367291b72170f969de78efcb1a9b95bd Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 22:53:07 -0700 Subject: integrating the latest montage version Signed-off-by: Valerio Virgillito --- .../rich-text-editor.reel/rich-text-editor.js | 223 ++++++++++++++------- 1 file changed, 146 insertions(+), 77 deletions(-) (limited to 'node_modules/montage/ui/rich-text-editor/rich-text-editor.reel/rich-text-editor.js') 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 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ /** - @module "montage/ui/rich-text-editor.reel" + @module "montage/ui/rich-text-editor/rich-text-editor.reel" @requires montage/core/core + @requires montage/core/event/mutable-event + @requires montage/core/event/event-manager + @requires rich-text-sanitizer */ var Montage = require("montage").Montage, RichTextEditorBase = require("./rich-text-editor-base").RichTextEditorBase, @@ -14,15 +17,38 @@ var Montage = require("montage").Montage, defaultEventManager = require("core/event/event-manager").defaultEventManager; /** - @class module:"montage/ui/rich-text-editor.reel".RichTextEditor + @classdesc The RichTextEditor component is a lightweight Montage component that provides basic HTML editing capability. It wraps the HTML5 contentEditable property and largely relies on the browser's support of execCommand. + @class module:"montage/ui/rich-text-editor/rich-text-editor.reel".RichTextEditor @extends module:montage/ui/component.Component + @summary +The easiest way to create a RichTextEditor is with a serialization and a <div> tag:

+ +Serialization +

+{
+"editor": {
+   "prototype": "montage/ui/rich-text-editor/rich-text-editor.reel",
+   "properties": {
+      "element": {"#": "editor" }
+   }
+}
+
+HTML +
+<body>
+<div data-montage-id="editor">
+    <span>Hello World!</span>
+</div>
+</body>
+
*/ -exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"montage/ui/rich-text-editor.reel".RichTextEditor# */ { +exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"montage/ui/rich-text-editor/rich-text-editor.reel".RichTextEditor# */ { - /** - Description TODO - @type {Function} - */ +/** + Returns true if the edtior has focus, otherwise returns false. + @type {boolean} + @readonly +*/ hasFocus: { enumerable: true, get: function() { @@ -30,10 +56,11 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo } }, - /** - Description TODO - @type {Function} - */ +/** + Returns the editor's inner element, which is the element that is editable. + @type {Element} + @readonly +*/ innerElement: { enumerable: true, get: function() { @@ -43,8 +70,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo /** - Description TODO - @type {Function} + Sets the focus on the editor's element. The editor will also become the activeElement. + @function */ focus: { enumerable: true, @@ -55,8 +82,10 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Returns true when the editor is the active element, otherwise return false. Normally the active element has also focus. However, in a multiple window environment it’s possible to be the active element without having focus. Typically, a toolbar item my steal the focus but not become the active element. + + @type {boolean} + @readonly */ isActiveElement: { enumerable: true, @@ -66,8 +95,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Returns true if the content is read only, otherwise returns false. When the editor is set to read only, the user is not able to modify the content. However it still possible to set the content programmatically with by setting the value or textValue properties. + @type {boolean} */ readOnly: { enumerable: true, @@ -87,8 +116,9 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets or sets the editor's content as HTML. By default, the HTML content assigned to the editor's DOM element is used. + The new value is passed through the editor's sanitizer before being assigned. + @type {string} */ value: { enumerable: true, @@ -154,10 +184,10 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo } }, - /** - Description TODO - @type {Function} - */ +/** + Gets or sets the editor's content as plain text. By default, the text content assigned to the editor's DOM element is used. + @type {string} +*/ textValue: { enumerable: true, get: function() { @@ -206,8 +236,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {} + Gets or sets the editor's delegate object that can define one or more delegate methods that a consumer can implement. For a list of delegate methods, see [Delegate methods]{@link http://tetsubo.org/docs/montage/using-the-rich…itor-component#Delegate_methods}. + @type {object} */ delegate: { enumerable: true, @@ -215,8 +245,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + The role of the sanitizer is to cleanup any data before its inserted, or extracted, from the editor. The default sanitizer removes any JavaScript, and scopes any CSS before injecting any data into the editor. However, JavaScript is not removed when the initial value is set using editor.value. + @type {object} */ sanitizer: { enumerable: false, @@ -229,8 +259,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + An array of overlay objects available to the editor. Overlays are UI components that are displayed on top of the editor based on the context. + @type {array} */ overlays: { enumerable: false, @@ -249,8 +279,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Returns the overlay currently being displayed. + @type {object} */ activeOverlay: { get: function() { @@ -259,8 +289,9 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Displays the specified overlay. + @function + @param {object} overlay The overlay to display. */ showOverlay: { value: function(overlay) { @@ -277,8 +308,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Hides the active overlay. + @function */ hideOverlay: { value: function(a) { @@ -299,8 +330,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo // Edit Actions & Properties /** - Description TODO - @type {Function} + Returns true if the current text selection is bold. If the selected text contains some text in bold and some not, the return value depends on the browser’s implementation. When set to true, adds the bold attribute to the selected text; when set to false, removes the bold attribute from the selected text. + @type {boolean} */ bold: { enumerable: true, @@ -309,8 +340,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Returns true if the current text selection is underlined. If the selected text contains some text in underline and some not, the return value depends on the browser’s implementation. When set to true, adds the underline attribute to the selected text; when set to false, removes the underline attribute from the selected text. + @type boolean */ underline: { enumerable: true, @@ -319,8 +350,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Returns true if the current text selection is italicized. If the selected text contains some text in italics and some not, the return value depends on the browser’s implementation. When set to true, adds the italic attribute to the selected text; when set to false, removes the italic attribute from the selected text. + @type boolean */ italic: { enumerable: true, @@ -329,9 +360,10 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Returns true if the current text selection has the strikethrough style applied. If the selected text contains some text with strikethrough and some not, the return value depends on the browser’s implementation. When set to true, adds the italic attribute to the selected text; when set to false, removes the italic attribute from the selected text. + @type boolean */ + strikeThrough: { enumerable: false, get: function() { return this._genericCommandGetter("strikeThrough", "strikethrough"); }, @@ -339,8 +371,9 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the baseline shift for the currently selected text. Valid values are "baseline", "subscript", or "superscript". + @type {string} + @default "baseline" */ baselineShift: { enumerable: true, @@ -368,8 +401,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Indent the selected text. If the selected text is inside a list, calling this method moves the selection into a sub-list. + @function */ indent: { enumerable: true, @@ -377,8 +410,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Indent the selected text. If the selected text is inside a list, calling this method moves the selection either out of the list, or into the parent list. + @function */ outdent: { enumerable: true, @@ -386,8 +419,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the list style for the selected text. Valid values are "none", "unordered", "ordered". This property can be used in combination with the [indent]{@link indent} and [outdent]{@link outdent} methods to create a list hierarchy. + @type {string} */ listStyle: { enumerable: true, @@ -411,8 +444,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the justification on the selected text. Valid values are "left", "center", "right", and "full". If the current selection is across multiple lines with different justifications, the value of this property depends of the browser’s implementation. + @type {string} */ justify: { enumerable: true, @@ -429,8 +462,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the font name for the currently selected text as a CSS font-family. Can be set to any valid CSS font-family value, including multiple values. If the current selection is across multiple font-family elements, the specific return value depends of the browser’s implementation. + @type {string} */ fontName: { enumerable: true, @@ -442,8 +475,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the font size for the current text selection. Only HTML font size values 1 through 7 are supported. If the current selection is a mix of font size, the return value depends of the browser’s implementation. + @type {string} */ fontSize: { enumerable: true, @@ -452,8 +485,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the background color of the currently selected text. This property can be set to any valid CSS color value; however, the color is always returned as an RGB color. If the current selection spans across elements with different background colors, the return value depends on the browser’s implementation. + @type {string} */ backColor: { enumerable: true, @@ -462,8 +495,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Gets and sets the background color of the currently selected text. This property can be set to any valid CSS color value; however, the color is always returned as an RGB color. If the current selection spans across elements with different background colors, the return value depends on the browser’s implementation. To remove a background color, set it to null. + @type {string} */ foreColor: { enumerable: true, @@ -472,8 +505,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Selects the all the content contained by the editor. Depending on the browser's implementation, some of the outer elements without direct text nodes won't be selected. Consequently, if the user presses the delete key after all the text is selected with this method, selecting all, some markup might still be there, you will have to Select all again to get rid of it. + @function */ selectAll: { enumerable: true, @@ -481,8 +514,9 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @type {Function} + Selects the specified DOM element. + @function + @param {element} element The element to select. */ selectElement: { enumerable: true, @@ -501,8 +535,8 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO - @function + Gets and sets the Montage undo manager for the editor. By default, it's assigned an instance of the default Montage UndoManager. The component also works with the native Undo Manager provided by the browser. To use the native undo manager, set this property to null + @type {object} */ undoManager: { enumerable: true, @@ -511,7 +545,7 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO + Undo the last editing operation. @function */ undo: { @@ -526,7 +560,7 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO + Redo the last editing operation that was canceled by calling undo(). @function */ redo: { @@ -541,31 +575,66 @@ exports.RichTextEditor = Montage.create(RichTextEditorBase,/** @lends module:"mo }, /** - Description TODO + Equivalent to the native document.execCommand method, it also sets the focus on the editor before executing the command, marks the editor’s content as dirty, and add the command to the Montage Undo Manager stack using the label provided. + + You should only use this method if you are extending the editor’s functionality, or writing your own overlay. The typical usage would be to insert HTML via the insertHTML command. All other execCommand commands are exposed as bindable properties on the editor, like bold or italic, and those puse the editor property instead. @function + @param {string} command The command to execute. + @param {boolean} showUI Specifies whether the default user interface should be drawn. + @param {string|number} value The value to pass as an argument to the command. Possible values depend on the command. + @param {string} label The label to use when adding this command to the undo stack managed by the Montage UndoManager. */ execCommand: { enumerable: false, value: function(command, showUI, value, label) { + var savedActiveElement = document.activeElement, + editorElement = this._innerElement, + retValue = false; + + if (!editorElement) { + return false; + } + + // Make sure we are the active element before calling execCommand + if (editorElement != savedActiveElement) { + editorElement.focus(); + } + + if (value === undefined) { + value = false; + } + label = label || this._execCommandLabel[command] || "Typing"; this._executingCommand = true; if (document.execCommand(command, showUI, value)) { this._executingCommand = false; - this._stopTyping(); - if (this.undoManager && ["selectall"].indexOf(command) == -1 ) { - this.undoManager.add(label, this._undo, this, label, this._innerElement); + if (["selectall"].indexOf(command) == -1) { + if (this.undoManager ) { + this._stopTyping(); + this.undoManager.add(label, this._undo, this, label, this._innerElement); + } + } else { + this.markDirty(); } - return true; + + this.handleSelectionchange(); + retValue = true; } else { - this._executingCommand = true; - return false + this._executingCommand = false; + } + + // Reset the focus + if (editorElement != savedActiveElement) { + savedActiveElement.focus(); } + + return retValue; } }, /** - Description TODO + Marks the editor content as dirty, causing the editor to generate an editorChange event, and update the editor's value and textValue properties. This method should only be called if you are extending the editor or writing an overlay. @private @function */ -- cgit v1.2.3