JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.6.1.nomodule.min.js"></script>
<script type="text/javascript" src="https://vanjs.org/code/diff.min.js"></script>

CSS

.row { display: flex; }

.column {
  width: 500px;
  margin: 2px;
}

.column textarea {
  box-sizing: border-box;
  width: 100%;
}

.add { background-color: #B5EFDB; }

.remove {
  background-color: #FFC4C1;
  text-decoration: line-through;
}

JavaScript

const {button, div, span, textarea} = van.tags

const autoGrow = e => {
  e.target.style.height = "5px"
  e.target.style.height = (e.target.scrollHeight + 5) + "px"
}

const DiffApp = () => {
  const oldTextDom = textarea({oninput: autoGrow, rows: 1})
  const newTextDom = textarea({oninput: autoGrow, rows: 1})
  const diff = van.state([])
  return div(
    div({class: "row"},
      div({class: "column"}, oldTextDom), div({class: "column"}, newTextDom),
    ),
    div({class: "row"},
      button({onclick: () => diff.val = Diff.diffWords(oldTextDom.value, newTextDom.value)},
        "Diff",
      ),
    ),
    div({class: "row"}, () => div({class: "column", style: "white-space: pre-wrap;"},
      diff.val.map(d => span({class: d.added ? "add" : (d.removed ? "remove" : "")}, d.value)),
    )),
  )
}
document.body.appendChild(DiffApp())