pinafore/routes/_components/compose/ComposeInput.html

<textarea
  class="compose-box-input"
  placeholder="What's on your mind?"
  ref:textarea
  bind:value=$rawComposeText
></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.store.set({rawComposeText: store.get('currentComposeText')})

      requestAnimationFrame(() => {
        mark('autosize()')
        autosize(this.refs.textarea)
        stop('autosize()')
      })

      const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)

      this.observe('rawComposeText', rawComposeText => {
        let composeText = this.store.get('composeText')
        let currentInstance = this.store.get('currentInstance')
        composeText[currentInstance] = rawComposeText || ''
        this.store.set({composeText: composeText})
        saveText()
      }, {init: false})

      this.observe('emojiToInsert', emojiToInsert => {
        if (!emojiToInsert) {
          return
        }
        requestAnimationFrame(() => {
          let idx = this.refs.textarea.selectionStart || 0
          let oldText = this.store.get('rawComposeText')
          let newText = oldText.substring(0, idx) +
            ':' + emojiToInsert.shortcode + ': ' +
            oldText.substring(idx)
          this.store.set({
            rawComposeText: newText,
            emojiToInsert: null
          })
        })
      }, {init: false})
    },
    ondestroy() {
      mark('autosize.destroy()')
      autosize.destroy(this.refs.textarea)
      stop('autosize.destroy()')
    },
    store: () => store,
    computed: {
      rawComposeText: ($rawComposeText) => $rawComposeText,
      currentComposeText: ($currentComposeText) => $currentComposeText,
      emojiToInsert: ($emojiToInsert) => $emojiToInsert
    }
  }
</script>