<template>
  <div class="text-form">
    <textarea
      :value="text"
      class="text-form__input skillbox-textarea"
      data-cy="text-form-input"
      placeholder="Text erfassen..."
      @input="$emit('change-text', $event.target.value, index)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: null,
      validator(value) {
        return Object.prototype.hasOwnProperty.call(value, 'text');
      },
    },
    index: {
      type: Number,
      default: -1,
    },
  },

  computed: {
    text() {
      return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/gi, '') : '';
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.text-form {
  &__input {
    width: 100%;
  }
}
</style>
