Improved submit key handling logic.

src/next_editor/_main.js

@@ -1,4 +1,5 @@
-/** NextLang message composer UI.
+/**
+ * NextLang message composer UI.
  * Copyright 2010 Victor Costan and Ying Yin. MIT License.
  */
 
@@ -13,14 +14,18 @@ var NextEditor = {};
  * The options object should have the following properties:
  *   inputElement:: textarea serving as a placeholder for the editor; the
  *                  textarea will receive the editor's input
- *   formElement:: submitted when the user presses Enter (optional)
  *   forceWater:: uses the Water UI, even in newer browsers; intended for
  *                debugging the rigid CSS, or the Water itself
+ *   multiLine:: if true, Enter keys 
  *   tokenizer:: logic for breaking up the text into segments and deciding how
  *               the segments should be highlighted
  *   onChange:: function (element) that is invoked when the editor's text
  *              changes, and receives the DOM element that contains the updated
  *              text
+ *   onSubmitKey:: function (element) that is invoked when the user expresses
+ *                 their desire to submit a Enter in the input field; returning
+ *                 false will cancel the event, which is useful if you want to
+ *                 submit a form via AJAX
  */
 NextEditor.create = function (options) {
   var formElement = options.formElement;
@@ -35,16 +40,16 @@ NextEditor.create = function (options) {
   var UIClass = NextEditor.UI.editorClass(options.forceWater);
   var editorUI = new UIClass({
     inputElement: options.inputElement,
-    formSubmitter: formSubmitter,
     tokenizer: tokenizer,
-    onChange: options.onChange
+    onChange: options.onChange,
+    onSubmitKey: options.onSubmitKey
   });
 
   var inputController = new NextEditor.Input({
     eventSource: editorUI.eventSource(),
     imeSupport: editorUI.needsImeSupport(),
+    multiLine: options.multiLine,
     observer: editorUI,
-    multiLine: (formSubmitter ? false : true)
   });
 
   return { ui: editorUI, input: inputController, tokenizer: tokenizer };

src/next_editor/input.js

@@ -3,17 +3,17 @@
  * The options object should have the following properties:
  *   eventSource:: the input-receiving element
  *   observer:: the object which receives input notifications
- *   multiLine:: if set, Enter key presses won't be treated as form submission
- *               requests
+ *   multiLine:: if set, Enter key presses will be treated as carriage returns,
+ *               and users will have to click Ctrl+Enter for form submission
  *   imeSupport:: supress change notifications while an IME interface is active
  * 
  * The following notifications will be dispatched:
- *   onSubmitKey:: the user expressed their desire to submit the editor's input
- *                 (e.g., by pressing the Enter key)
  *   onPossibleChange:: the input field's contents might have changed; false
  *                      positives may happen (no actual change), but the method
  *                      will definitely be called when a change occurs (no false
  *                      negatives)
+ *   onSubmitKey:: the user expressed their desire to submit the editor's input
+ *                 (e.g., by pressing the Enter key)
  */
 NextEditor.Input = function (options) {
   this.observer = options.observer;
@@ -40,9 +40,8 @@ NextEditor.Input = function (options) {
     eventSource.addEventListener('compositionend',
                                  this.unboundOnIMECompositionEnd, false);
   }
-  if (!options.multiLine) {
-    eventSource.addEventListener('keydown', this.unboundOnKeyDown, false);
-  }
+  this.multiLine = options.multiLine;
+  eventSource.addEventListener('keydown', this.unboundOnKeyDown, false);
 
   if (NextEditor.Support.hasTextInput()) {
     eventSource.addEventListener('textInput', this.unboundOnTextInput, false);
@@ -128,10 +127,14 @@ NextEditor.Input.prototype.onIMECompositionEnd = function (event) {
 
 /** Fires the submission callback when the user presses Enter. */
 NextEditor.Input.prototype.onKeyDown = function (event) {
-  if (event.which === 13) {
-    event.preventDefault();
-    this.observer.onSubmitKey();
-    return false;
+  if (event.which === 13 &&
+      (!this.multiLine || event.ctrlKey || event.shiftKey)) {
+    if (this.observer.onSubmitKey) {
+      if (!this.observer.onSubmitKey(event)) {
+        event.preventDefault();
+        return false;
+      }
+    }
   }
   return true;
 };

src/next_editor/ui_fire.js

@@ -4,7 +4,10 @@
  *
  * The options object should have the following properties:
  *   inputElement:: textarea for capturing events
- *   formSubmitter:: used to submit a form when the user presses Enter
+ *   onSubmitKey:: function (element) that is invoked when the user expresses
+ *                 their desire to submit a Enter in the input field; returning
+ *                 false will cancel the event, which is useful if you want to
+ *                 submit a form via AJAX
  *   tokenizer:: conforms to the NextEditor.Tokenizer interface for deciding
  *               which parts of the text get highlighted
  */
@@ -24,8 +27,8 @@ NextEditor.UI.Fire = function (options) {
     return;
   }
 
-  this.formSubmitter = options.formSubmitter;
   this.onChangeCallback = options.onChange;
+  this.onSubmitCallback = options.onSubmitKey;
   this.buildEditor();
 };
 
@@ -139,7 +142,7 @@ NextEditor.UI.Fire.prototype.setEditorContent = function (domData) {
 
 /** Submits the editor's form if the user presses Enter. */
 NextEditor.UI.Fire.prototype.onSubmitKey = function () {
-  this.formSubmitter.submit();
+  return this.onSubmitCallback(this.inputElement);
 };
 
 /** The DOM element receiving user input events. */

src/next_editor/ui_water.js

@@ -2,7 +2,10 @@
  *
  * The options object should have the following properties:
  *   inputElement:: textarea for capturing events
- *   formSubmitter:: used to submit a form when the user presses Enter
+ *   onSubmitKey:: function (element) that is invoked when the user expresses
+ *                 their desire to submit a Enter in the input field; returning
+ *                 false will cancel the event, which is useful if you want to
+ *                 submit a form via AJAX
  *   tokenizer:: conforms to the NextEditor.Tokenizer interface for deciding
  *               which parts of the text get highlighted
  */
@@ -22,8 +25,8 @@ NextEditor.UI.Water = function (options) {
     return;
   }
 
-  this.formSubmitter = options.formSubmitter;
   this.onChangeCallback = options.onChange;
+  this.onSubmitCallback = options.onSubmitKey;
   this.buildEditor();
 };
 
@@ -113,8 +116,8 @@ NextEditor.UI.Water.prototype.setEditorContent = function (domData) {
 };
 
 /** Submits the editor's form if the user presses Enter. */
-NextEditor.UI.Water.prototype.onSubmitKey = function () {
-  this.formSubmitter.submit();
+NextEditor.UI.Fire.prototype.onSubmitKey = function () {
+  return this.onSubmitCallback(this.inputElement);
 };
 
 /** The DOM element receiving user input events. */

test/index.html

@@ -10,7 +10,6 @@
   <script src="../src/next_editor/_ui.js" type="text/javascript"></script>
   <script src="../src/next_editor/dom.js" type="text/javascript"></script>
   <script src="../src/next_editor/input.js" type="text/javascript"></script>
-  <script src="../src/next_editor/submitter.js" type="text/javascript"></script>
   <script src="../src/next_editor/support.js" type="text/javascript"></script>
   <script src="../src/next_editor/tokenizers.js" type="text/javascript"></script>
   <script src="../src/next_editor/ui_fire.js" type="text/javascript"></script>
@@ -45,9 +44,15 @@ <h1>NextEditor Test / Demo Page</h1>
           inputElement: inputTextArea,
           formElement: null,
           forceWater: false,
+          multiLine: true,
           onChange: function (element) {
             $(logArea).val($(logArea).val() +
                            "\r\nChange: " + $(element).val());
+          },
+          onSubmitKey: function (element) {
+            $(logArea).val($(logArea).val() +
+                           "\r\Submit: " + $(element).val());
+            return false;
           }
         });
       </script>