api-client/components/ace-editor.vue

<template>
  <pre ref="editor"></pre>
</template>

<script>
const DEFAULT_THEME = 'twilight'

import ace from 'ace-builds'
import 'ace-builds/webpack-resolver'

export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    theme: {
      type: String,
      required: false,
    },
    lang: {
      type: String,
      default: 'json',
    },
    options: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      editor: null,
      cacheValue: '',
    }
  },

  watch: {
    value(value) {
      if (value !== this.cacheValue) {
        this.editor.session.setValue(value, 1)
        this.cacheValue = value
      }
    },
    theme() {
      this.editor.setTheme('ace/theme/' + this.defineTheme())
    },
    lang(value) {
      this.editor.getSession().setMode('ace/mode/' + value)
    },
    options(value) {
      this.editor.setOptions(value)
    },
  },

  mounted() {
    const editor = ace.edit(this.$refs.editor, {
      theme: `ace/theme/${this.defineTheme()}`,
      mode: `ace/mode/${this.lang}`,
      ...this.options,
    })

    if (this.value) editor.setValue(this.value, 1)

    this.editor = editor
    this.cacheValue = this.value

    editor.on('change', () => {
      const content = editor.getValue()
      this.$emit('input', content)
      this.cacheValue = content
    })
  },

  methods: {
    defineTheme() {
      if (this.theme) {
        return this.theme
      }
      return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
    },
  },

  beforeDestroy() {
    this.editor.destroy()
    this.editor.container.remove()
  },
}
</script>