JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-0.12.4.nomodule.min.js"></script>
<script 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 Result = diff => div({class: "column", style: "white-space: pre-wrap;"},
  diff.map(d =>
    span({class: d.added ? "add" : (d.removed ? "remove" : "")}, d.value)),
)

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"}, van.bind(diff, Result)),
  )
}

document.body.appendChild(DiffApp())