Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ember-cli-textarea-autosize with all npm packages installed. Try it out:

var emberCliTextareaAutosize = require("ember-cli-textarea-autosize")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ember-cli-textarea-autosize v1.1.1

An Ember addon that provides a textarea component that adjusts its height according to the supplied text. Included are also several mixins that can be used to ensure `autofocus` works properly, focused text inputs have their text selected, and ctrl+enter will submit the nearest form.

ember-cli-textarea-autosize GitHub version

npm version downloads CircleCI Code Climate Dependencies ember-observer-badge License

An Ember addon that provides a textarea component that adjusts its height according to the supplied text. Included are also several mixins that can be used to ensure autofocus works properly, focused text inputs have their text selected, and ctrl+enter will submit the nearest form.

This addon installs from bower and uses the autosize.js library from Jack Moore: https://github.com/jackmoore/autosize.

Tested Against

ember-lts-2.4 ember-lts-2.8 ember-lts-2.12

ember-release ember-beta ember-canary

Demo

The demonstration web application can be found here: http://ember-cli-textarea-autosize.cybertooth.io/.

What Does This Addon Do?

This addon gives you access to the following component:

  • textarea-autosize - an extension of the Ember.TextArea that produces a <textarea> that grows in height to fit the supplied content.

Mixins Moved To ember-cli-text-support-mixins Add-On

Before 1.1 the TriggerFocus, FocusSelectsText, and CtrlEnterSubmitsForm mixins were available in this add-on. They are no longer here, and if you were using them your code breaks.

You should be able to easily move your code over to the ember-cli-text-support-mixins variation:

// import TriggerFocus from 'ember-cli-textarea-autosize/mixins/trigger-focus'
// ...now becomes ...
import TriggerFocus from 'ember-cli-text-support-mixins/mixins/trigger-focus';

// import FocusSelectsTextMixin from 'ember-cli-textarea-autosize/mixins/focus-selects-text';
// ... now becomes ...
import FocusSelectsText from 'ember-cli-text-support-mixins/mixins/focus-selects-text';

// import CtrlEnterSubmitsFormMixin from 'ember-cli-textarea-autosize/mixins/ctrl-enter-submits-form';
// ... now becomes ...
import CtrlEnterSubmitsForm from 'ember-cli-text-support-mixins/mixins/ctrl-enter-submits-form';

Head over here for the mixin documentation.

Requirements

  • Ember >= 1.13.0
  • Ember CLI

Installation

Like most other Ember addons:

ember install ember-cli-textarea-autosize

Upgrading

When working through the Ember upgrade process, I recommend invoking the ember install ember-cli-textarea-autosize command once you are done to get the latest version of the addon.

Usage

This textarea component extends the ember-cli-text-support-mixins add-on's text-area component. This text area does not accept a block, instead always pass your value to the value attribute.

{{textarea-autosize value=someModel.largeTextAttribute}}

Minimum Height (default is 2 rows)

If you need to set the minimum height of the <textarea>, set the rows property:

{{textarea-autosize rows=6 ...}}

...or you can specify the min-height property

{{textarea-autosize min-height="200px" ...}}

Maximum Height (when to start scrolling)

The <textarea> will continue to grow indefinitely unless you set the max-height property:

{{textarea-autosize max-height="500px" ...}}

For additional information about the Ember.TextArea:

Extras

The {{textarea-autosize}} automatically:

  1. Incorporates a mixin that corrects a quirk in Ember where the autofocus=true feature works across template transitions.
  2. Includes a mixin that will select any text when the textarea is focused.
  3. Will attempt to submit the nearest form when CTRL+ENTER is pressed.

Check out these extra mixins at ember-cli-text-support-mixins.


Ember Addon Building And Testing

Setup

Checkout

git clone git@github.com:cybertoothca/ember-cli-textarea-autosize.git

With NPM

npm install

With Yarn

yarn

Running The Dummy Application

  • ember server
  • Visit your app at http://localhost:4200.

Running Addon Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building The Addon

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Linking This Addon For Local Testing

Linking

  1. From the command line at the root of this project run the npm link command to link this addon within your local node repository.
  2. From the other Ember project that you wish to test this addon in, execute the following command: npm link ember-cli-textarea-autosize.
  3. Now in that same other Ember project, you should go into the package.json and add the ember addon with the version _*_. It will look something like this: "ember-cli-textarea-autosize": "*". Now when/if you execute npm install on this other project it will know to look for the linked addon rather than fetch it from the central repository.
  4. Lastly, in the other Ember project run the blueprint for the ember-cli-textarea-autosize addon by executing: ember g ember-cli-textarea-autosize. This will install the appropriate Ember Addons and Bower dependencies.

Unlinking

  1. Remove the addon from your local node repository with the following command (that can be run anywhere): npm uninstall -g ember-cli-textarea-autosize
  2. Remove the reference to the ember-cli-textarea-autosize in your other project's package.json.
  3. Run an npm prune and bower prune from the root of your other project's command line.

Deploying The Dummy Application

Make sure your ~/.aws/credentials file has a profile named cybertooth with a valid key and secret,

[cybertooth]
aws_access_key_id = <KEY>
aws_secret_access_key = <SECRET>

Deploy by invoking the following command: ember deploy production

Confirm your changes are showing up in our S3 container: http://ember-cli-textarea-autosize.cybertooth.io/

Releasing & Publishing To NPM

npm version x.y.z-sub.#
git push
git push --tags
npm publish
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free