Merge pull request #5 from cybertoothca/readme-improvements

README Improvements

README.md

@@ -43,6 +43,105 @@ The `<textarea>` will continue to grow indefinitely unless you set the
 
  * [Check out the Ember guide](https://guides.emberjs.com/v2.8.0/templates/input-helpers/#toc_text-areas)
  * [Also familiarize yourself with the TextArea API documents](http://emberjs.com/api/classes/Ember.TextArea.html)
+
+## Extras
+
+The `{{textarea-autosize}}` automatically:
+
+1. Incorporates a mixin that corrects a quirk in Ember where the 
+`autofocus=true` feature works across template transitions.
+1. Includes a mixin that will select any text when the textarea is 
+focused.
+1. Will attempt to submit the _nearest_ form when `CTRL+ENTER` is
+pressed.
+
+### `trigger-focus` Mixin
+
+Do you want to fix that silly quirk in Ember where your input won't 
+_autofocus_ after transitioning back to a template that was already
+previously loaded?  Include the `trigger-focus` mixin within your 
+component.
+
+To apply this _fix_ to the `Ember.TextField` and `Ember.TextArea`
+you can reopen the `Ember.TextSupport` mixin from your `app/app.js`
+file:
+
+    // your `app/app.js` file
+    import Ember from 'ember';
+    ...
+    // you must import the mixin
+    import TriggerFocusMixin from 'ember-cli-textarea-autosize/mixins/trigger-focus';
+
+    let App;
+
+    ...
+
+    // reopening Ember's `TextSupport` mixin
+    Ember.TextSupport.reopen(TriggerFocusMixin);
+
+    export default App;
+
+
+### `focus-selects-text` Mixin
+
+Do you want your component or `Ember.TextField` or `Ember.TextArea` to 
+select your input's text when it takes focus?  Simply include the
+`focus-selects-text` mixin within your component.
+
+Do you want to apply this to all of your `Ember.TextField` and 
+`Ember.TextArea` inputs within your app?  Reopen the 
+`Ember.TextSupport` mixin and include this mixin.  From your 
+`app/app.js`:
+
+    // your `app/app.js` file
+    import Ember from 'ember';
+    ...
+    // you must import the mixin
+    import FocusSelectsTextMixin from 'ember-cli-textarea-autosize/mixins/focus-selects-text';
+
+    let App;
+
+    ...
+
+    // reopening Ember's `TextSupport` mixin
+    Ember.TextSupport.reopen(FocusSelectsTextMixin);
+
+    export default App;
+
+
+### `ctrl-enter-submits-form` Mixin
+
+Do you want your component to submit the nearest form when `CTRL+ENTER`
+is pressed?  Simply include the `ctrl-enter-submits-form` mixin within
+your component.
+
+Want to apply this `CTRL+ENTER` behaviour to all of your text inputs?
+Add the mixin to the `Ember.TextSupport` by reopening the class in your
+`app/app.js`.  Notice in this example that I am also including the 
+focus mixins to really improve my default `Ember.TextSupport` 
+components:
+
+    // your `app/app.js` file
+    import Ember from 'ember';
+    ...
+    // you must import the mixins
+    import CtrlEnterSubmitsFormMixin from 'ember-cli-textarea-autosize/mixins/ctrl-enter-submits-form';
+    import FocusSelectsTextMixin from 'ember-cli-textarea-autosize/mixins/focus-selects-text';
+    import TriggerFocusMixin from 'ember-cli-textarea-autosize/mixins/trigger-focus';
+
+    let App;
+
+    ...
+
+    // reopening Ember's `TextSupport` mixin
+    Ember.TextSupport.reopen(
+      CtrlEnterSubmitsFormMixin, 
+      FocusSelectsTextMixin,
+      TriggerFocusMixin
+    );
+
+    export default App;
+
 
 ## Ember Addon Building And Testing 
 

tests/dummy/app/templates/demo-ctrl-enter-submits.hbs

@@ -1,13 +1,13 @@
-<h1><kbd>CTRL</kbd>-<kbd>ENTER</kbd> Submits Form</h1>
+<h1><kbd>CTRL</kbd>+<kbd>ENTER</kbd> Submits Form</h1>
 
 <form {{action "submitForm" on="submit"}}>
-  <label>CTRL-ENTER Submitting Text Area</label>
+  <label>CTRL+ENTER Submitting Text Area</label>
   <br/>
   {{textarea-autosize value="{{textarea-autosize}}" autofocus=true}}
   <p>{{submitMessage}}</p>
   <br/>
 
-  <label>CTRL-ENTER Does Not Submit Basic Ember.TextArea</label>
+  <label>CTRL+ENTER Does Not Submit Basic Ember.TextArea</label>
   <br/>
   {{textarea value="{{textarea}}"}}
   <br/>

tests/dummy/app/templates/index.hbs

@@ -13,7 +13,7 @@
   </li>
   <li>
     {{#link-to "demo-ctrl-enter-submits"}}
-      Demo Of <kbd>CTRL</kbd>-<kbd>ENTER</kbd> Submits Form (Mixin `ctrl-enter-submits-form`)
+      Demo Of <kbd>CTRL</kbd>+<kbd>ENTER</kbd> Submits Form (Mixin `ctrl-enter-submits-form`)
     {{/link-to}}
   </li>
   <li>
@@ -27,4 +27,3 @@
     {{/link-to}}
   </li>
 </ul>
-