Notes Editor

components.note-editor.component\.js

import Component from '@ember/component';
import { action } from '@ember/object';
import { debounce } from '@ember/runloop';

export default class extends Component {
  data = null
  maxLength = 2000
	isEditing = false

	@action
	toggle() {
    this.set('isEditing', !this.isEditing)
  }

	@action
  update(e) {
    const value = e.target.value
    this.set('data.notes', value)
    debounce(this, 'onSave', this.data, 2e3)
  }
}

components.note-editor.template\.hbs

<button {{action "toggle"}}>{{if isEditing "Done" "Edit"}}</button>
{{#if isEditing}}
	<textarea value={{data.notes}} oninput={{action "update"}} />
{{else}}
	<p>{{data.notes}}</p>
{{/if}}
<p>{{data.notes.length}}/{{maxLength}}</p>

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Notes Editor'

	@action
	save(data) {
    console.log('>>> saving...', data.notes)
  }
}

routes.application\.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return { notes: 'My kewl note' }
  }
});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

textarea {
  display: block;
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>

{{note-editor data=model onSave=(action 'save')}}

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}