<template>
  <div class="code-editable-area">
    <or-code
      v-model="localSsml"
      label="SSML code"
      placeholder="Enter code"
      mode="html"
      adjustToHeight
      disable-warnings
      :steps="steps"
      :step-id="stepId"
      :merge-fields="mergeFields"
      :readonly="this.$liteStore.get('app/readonly')"
    />
  </div>
</template>

<script>
export default {
  name: 'EditableArea',

  props: {
    stepId: { type: String, default: '' },
    steps: { type: Array, default: () => [] },
    mergeFields: { type: Array, default: () => [] }
  },

  computed: {
    ssml () { return this.$liteStore.get('codeEditable/ssmlCode'); },

    localSsml: {
      get () { return this.ssml; },
      set (value) { this.$liteStore.dispatch('codeEditable/saveEditorContent', value); }
    }
  },
  
  created () {
    //
  }
};
</script>

<style lang="scss" scoped>
.or-code {
  height: 314px;
}
</style>
