<template>
  <div id="app">

    <button @click.prevent="newBlock({type:'rich',data:''})">Add an editor</button>

    <div v-for="(block, idx) in blocks" :key="`blocks-${idx}`" class="block">
      <a class="handle handle--disabled" v-if="idx === 0">▲</a>
      <a class="handle" v-if="idx !== 0" @click.prevent="swapBlock(idx - 1)">▲</a>
      <a class="handle" v-if="idx !== (blocks.length - 1)" @click.prevent="swapBlock(idx)">▼</a>
      <a class="handle handle--disabled" v-if="idx === (blocks.length - 1)">▼</a>

      <block-rich v-model="blocks[idx].data"></block-rich>
    </div>

    <pre>{{ blockJson }}</pre>
  </div>
</template>

<script>
import BlockRich from './TextBlock.vue';

export default {
  data () {
    return {
      blocks: [
        { type: 'rich', data: '1' },
        { type: 'rich', data: '2' },
        { type: 'rich', data: '3' },
      ],
    };
  },
  computed: {
    blockJson() {
      return JSON.stringify(this.blocks);
    }
  },
  methods: {
    swapBlock(index) {
      if (this.blocks[index] === undefined || this.blocks[index + 1] === undefined) {
        return;
      }

      this.blocks.splice(index, 2, this.blocks[index + 1], this.blocks[index]);
    },
    newBlock(data) {
      this.blocks.splice(0, 0, Object.assign({}, data));
    },
  },
  components: {
    BlockRich,
  },
};
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
.handle {
  font-size: 1.5rem;
  text-align: center;
}
.handle--disabled {
  opacity: 0.5;
}
.block {
  margin-bottom: 2em;
}
</style>
