pinafore/routes/_components/compose/ComposeInput.html

<textarea
  class="compose-box-input"
  placeholder="What's on your mind?"
  ref:textarea
  bind:value=$rawComposeText
  on:blur="onBlur()"
></textarea>
<style>
  .compose-box-input {
    grid-area: input;
    margin: 10px 0 0 5px;
    padding: 10px;
    border: 1px solid var(--input-border);
    min-height: 75px;
    resize: none;
    overflow: hidden;
    word-wrap: break-word;
    /* Text must be at least 16px or else iOS Safari zooms in */
    font-size: 1.2em;
    /* Hack to make Edge stretch the element all the way to the right.
     * Also desktop Safari makes the gauge stretch too far to the right without it.
     */
    width: calc(100% - 5px);
  }
</style>
<script>
  import { store } from '../../_store/store'
  import { autosize } from '../../_utils/autosize'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
  import debounce from 'lodash/debounce'
  import { mark, stop } from '../../_utils/marks'

  export default {
    oncreate() {
      this.setupSyncFromStore()
      this.setupSyncToStore()
      this.setupAutosize()
    },
    ondestroy() {
      this.teardownAutosize()
    },
    methods: {
      setupSyncFromStore() {
        let currentComposeText = store.get('currentComposeText')
        let realm = this.get('realm')
        this.store.set({
          rawComposeText: currentComposeText[realm] || ''
        })
      },
      setupSyncToStore() {
        const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)

        this.observe('rawComposeText', rawComposeText => {
          let composeText = this.store.get('composeText')
          let currentInstance = this.store.get('currentInstance')
          let realm = this.get('realm')
          composeText[currentInstance] = composeText[currentInstance] || {}
          composeText[currentInstance][realm] = rawComposeText || ''
          this.store.set({composeText: composeText})
          saveText()
        }, {init: false})
      },
      setupAutosize() {
        requestAnimationFrame(() => {
          mark('autosize()')
          autosize(this.refs.textarea)
          stop('autosize()')
        })
      },
      teardownAutosize() {
        mark('autosize.destroy()')
        autosize.destroy(this.refs.textarea)
        stop('autosize.destroy()')
      },
      onBlur() {
        this.store.set({composeSelectionStart: this.refs.textarea.selectionStart})
      }
    },
    store: () => store,
    computed: {
      rawComposeText: ($rawComposeText) => $rawComposeText,
      currentComposeText: ($currentComposeText) => $currentComposeText
    }
  }
</script>