JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<ul id='list' data-bind="foreach: array">
  <li>
    <div contenteditable="true" data-bind="hasfocus: $data.focused, text: $data.text"></div>
  </li>
</ul>
<div id="add">+</div>

CSS

#add {
  cursor : pointer;
  border : 1px solid black;
  width  : 16px;
  height : 16px;
  text-align : center;
}

li div {
  border-bottom: 1px solid black;
  outline: none;
}

JavaScript

var viewModel = {
  array: ko.observableArray([])
}

viewModel.array.push({text : 'It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.'});

viewModel.array.push({text : 'During the battle, Rebel spies managed to steal secret plans to the Empire\'s ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet.'});

ko.applyBindings(viewModel, document.getElementById('list'));

document.getElementById('add').onclick = function (evt) {
  var newObject = {text : '', focused: true};
  viewModel.array.push(newObject);
  // give focus to the newly created div
};