JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css">
<div class="container" id="app">
  <textarea class="form-control" v-model="input" rows="7" :readonly="started"></textarea>
  <br>

  <button class="btn btn-primary" @click="start()" :disabled="started">Start</button>

  <br>
  <br>

  <div v-if="started">
    <h3>Sentences</h3>
    <div class="row">
      <ul class="col-sm-6">
        <li v-for="(sentence, i) in sentences" v-if="['.', '!', ',', ''].indexOf(sentence.text.trim()) === -1" @click="current = i">
          {{sentence.text}}
        </li>
      </ul>
      <div class="col-sm-6">
        <textarea class="form-control" v-model="sentences[current].spun"></textarea>
      </div>
    </div>

    <h3>Final</h3>

    <textarea class="form-control" rows="7">{{sentences.map(s => s.spun.trim() && s.spun.split('\n').length > 1 ? '{' + s.spun.split('\n').join('|') + '}' : s.spun).join('')}}</textarea>
  </div>
</div>

CSS

body {
  margin-top: 20px;
}

li {
  cursor: pointer;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    input: "",
    sentences: [],
    current: 0,
    started: false,
  },
  methods: {
    start() {
      this.started = true;
      this.sentences = this.input.split(/(,|\n|!|\.)/).map(text => ({
        text: text,
        spun: text,
      }));
    }
  }
})