Clipboard examiner 2019-05-23

README.md

This small project was initially created to help resolve a specific clipboard-related issue in mintty, but is useful for all sorts of text/html clipboard investigation, and could easily be extended to RTF, plaintext, and other clipboard formats. It requires no dependencies, but does need to be viewed in a relatively modern browser.

Originally implemented on codepen.

index.html

<div>
  <input id="paste" contenteditable="true" placeholder="paste formatted text (HTML) or its plaintext equivalent (markup) here"></input>
  <button id="fixit">Fix it!</button>
</div>
<div>
  <div id="render">output</div>
</div>
<div>
  <textarea id="markup" placeholder="input"></textarea>
</div>

<input id="sample" type="hidden" value="PGh0bWw+PCEtLVN0YXJ0RnJhZ21lbnQtLT48aGVhZD4NCiAgPG1ldGEgbmFtZT0nZ2VuZXJhdG9yJyBjb250ZW50PSdtaW50dHknLz4NCiAgPG1ldGEgaHR0cC1lcXVpdj0nQ29udGVudC1UeXBlJyBjb250ZW50PSd0ZXh0L2h0bWw7IGNoYXJzZXQ9VVRGLTgnLz4NCiAgPHRpdGxlPm1pbnR0eSBzY3JlZW4gZHVtcDwvdGl0bGU+DQogIDxsaW5rIHJlbD0nc3
R5bGVzaGVldCcgdHlwZT0ndGV4dC9jc3MnIGhyZWY9J3h0ZXJtLmNzcycvPg0KICA8bGluayByZWw9J3N0eWxlc2hlZXQnIHR5cGU9J3RleHQvY3NzJyBocmVmPSdtaW50dHkuY3NzJy8+DQogIDxzdHlsZSB0eXBlPSd0ZXh0L2Nzcyc+DQogIGJvZHksIHByZSB7IG1hcmdpbjogMDsgcGFkZGluZzogMDsgfQ0KICBwcmUgeyBmb250LWZhbWlseTogaW5oZXJpd
DsgfQ0KICBzcGFuIHsNCiAgICBmb250LWZhbWlseTogJ0x1Y2lkYSBDb25zb2xlJywgJ0x1Y2lkYSBDb25zb2xlICcsICdDb25zb2xhcycsIG1vbm9zcGFjZTsNCiAgfQ0KICAjdnQxMDAgew0KICAgIGJvcmRlcjogMHB4IHNvbGlkOw0KICAgIHBhZGRpbmc6IDFweDsNCiAgICBsaW5lLWhlaWdodDogMTE1JTsNCiAgICBmb250LXNpemU6IDEwcHQ7DQogIH0N
CiAgI3Z0MTAwIHByZSB7DQogICAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDAwMDsNCiAgICBjb2xvcjogI0JGQkZCRjsNCiAgICBmbG9hdDogbGVmdDsNCiAgfQ0KICAuYmQgeyBmb250LXdlaWdodDogYm9sZCB9DQogIC5pdCB7IGZvbnQtc3R5bGU6IGl0YWxpYyB9DQogIC51bCB7IHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmUgfQ0KICAuc3QgeyB
0ZXh0LWRlY29yYXRpb24tbGluZTogbGluZS10aHJvdWdoIH0NCiAgLmx1IHsgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IGxpbmUtdGhyb3VnaCB1bmRlcmxpbmUgfQ0KICAuZmctY29sb3IwIHsgY29sb3I6ICMwMDAwMDAgfSAuYmctY29sb3IwIHsgYmFja2dyb3VuZC1jb2xvcjogIzAwMDAwMCB9DQogIC5mZy1jb2xvcjEgeyBjb2xvcjogI0JGMDAwMCB9IC5iZy
1jb2xvcjEgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjQkYwMDAwIH0NCiAgLmZnLWNvbG9yMiB7IGNvbG9yOiAjMDBCRjAwIH0gLmJnLWNvbG9yMiB7IGJhY2tncm91bmQtY29sb3I6ICMwMEJGMDAgfQ0KICAuZmctY29sb3IzIHsgY29sb3I6ICNCRkJGMDAgfSAuYmctY29sb3IzIHsgYmFja2dyb3VuZC1jb2xvcjogI0JGQkYwMCB9DQogIC5mZy1jb2xvcjQgeyBjb
2xvcjogIzAwMDBCRiB9IC5iZy1jb2xvcjQgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwMEJGIH0NCiAgLmZnLWNvbG9yNSB7IGNvbG9yOiAjQkYwMEJGIH0gLmJnLWNvbG9yNSB7IGJhY2tncm91bmQtY29sb3I6ICNCRjAwQkYgfQ0KICAuZmctY29sb3I2IHsgY29sb3I6ICMwMEJGQkYgfSAuYmctY29sb3I2IHsgYmFja2dyb3VuZC1jb2xvcjogIzAwQkZCRiB9
DQogIC5mZy1jb2xvcjcgeyBjb2xvcjogI0JGQkZCRiB9IC5iZy1jb2xvcjcgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjQkZCRkJGIH0NCiAgLmZnLWNvbG9yOCB7IGNvbG9yOiAjNDA0MDQwIH0gLmJnLWNvbG9yOCB7IGJhY2tncm91bmQtY29sb3I6ICM0MDQwNDAgfQ0KICAuZmctY29sb3I5IHsgY29sb3I6ICNGRjQwNDAgfSAuYmctY29sb3I5IHsgYmFja2dyb3V
uZC1jb2xvcjogI0ZGNDA0MCB9DQogIC5mZy1jb2xvcjEwIHsgY29sb3I6ICM0MEZGNDAgfSAuYmctY29sb3IxMCB7IGJhY2tncm91bmQtY29sb3I6ICM0MEZGNDAgfQ0KICAuZmctY29sb3IxMSB7IGNvbG9yOiAjRkZGRjQwIH0gLmJnLWNvbG9yMTEgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjRkZGRjQwIH0NCiAgLmZnLWNvbG9yMTIgeyBjb2xvcjogIzYwNjBGRi
B9IC5iZy1jb2xvcjEyIHsgYmFja2dyb3VuZC1jb2xvcjogIzYwNjBGRiB9DQogIC5mZy1jb2xvcjEzIHsgY29sb3I6ICNGRjQwRkYgfSAuYmctY29sb3IxMyB7IGJhY2tncm91bmQtY29sb3I6ICNGRjQwRkYgfQ0KICAuZmctY29sb3IxNCB7IGNvbG9yOiAjNDBGRkZGIH0gLmJnLWNvbG9yMTQgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjNDBGRkZGIH0NCiAgLmZnL
WNvbG9yMTUgeyBjb2xvcjogI0ZGRkZGRiB9IC5iZy1jb2xvcjE1IHsgYmFja2dyb3VuZC1jb2xvcjogI0ZGRkZGRiB9DQogICNjdXJzb3IgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjQkZCRkJGIH0NCiAgLmZvbnQxMCB7IGZvbnQtZmFtaWx5OiAnRjI1IEJsYWNrbGV0dGVyIFR5cGV3cml0ZXInIH0NCiAgPC9zdHlsZT4NCiAgPHNjcmlwdD4NCiAgdmFyIGIxID0g
NTAwOyB2YXIgYjIgPSAzMDA7DQogIGZ1bmN0aW9uIHZpc2liICh0YWcsIHN0YXRlLCB0aW1lb3V0KSB7DQogICAgdmFyIGJsID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeU5hbWUodGFnKTsNCiAgICB2YXIgdnY7IGlmIChzdGF0ZSkgdnYgPSAndmlzaWJsZSc7IGVsc2UgdnYgPSAnaGlkZGVuJzsNCiAgICB2YXIgaTsNCiAgICBmb3IgKGkgPSAwOyBpIDwgYmw
ubGVuZ3RoOyBpKyspIHsNCiAgICAgIGJsW2ldLnN0eWxlLnZpc2liaWxpdHkgPSB2djsNCiAgICB9DQogICAgd2luZG93LnNldFRpbWVvdXQgKCd2aXNpYiAoIicgKyB0YWcgKyAnIiwgJyArICFzdGF0ZSArICcsICcgKyB0aW1lb3V0ICsgJyknLCB0aW1lb3V0KTsNCiAgfQ0KICBmdW5jdGlvbiBzZXR1cCAoKSB7DQogICAgd2luZG93LnNldFRpbWVvdXQgKC
d2aXNpYiAoImJsaW5rIiwgMCwgYjEpJywgYjEpOw0KICAgIHdpbmRvdy5zZXRUaW1lb3V0ICgndmlzaWIgKCJyYXBpZCIsIDAsIGIyKScsIGIyKTsNCiAgfQ0KICA8L3NjcmlwdD4NCjwvaGVhZD4NCg0KPGJvZHkgb25sb2FkPSdzZXR1cCgpOyc+DQogIDxkaXYgY2xhc3M9YmFja2dyb3VuZCBpZD0ndnQxMDAnPg0KICAgPHByZT48c3BhbiBjbGFzcz0nb2QnI
HN0eWxlPSdjb2xvcjogIzAwQkYwMDsnPnVzZXJAaG9zdCA8L3NwYW4+PHNwYW4gY2xhc3M9J29kJyBzdHlsZT0nY29sb3I6ICNCRjAwQkY7Jz5NSU5HVzY0IDwvc3Bhbj48c3BhbiBjbGFzcz0nb2QnIHN0eWxlPSdjb2xvcjogI0JGQkYwMDsnPn48L3NwYW4+PHNwYW4gY2xhc3M9J29kJz4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9zcGFuPjxicg0KPjxzcGFuIGNsYXNzPSdldic+JCBlY2hvICJmb28gICAgICAgICAgICA
gICAgICI8L3NwYW4+PHNwYW4gY2xhc3M9J2V2Jz4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC
AgICAgICA8L3NwYW4+PGJyDQo+PHNwYW4gY2xhc3M9J29kJz5mb28gICAgICAgICAgICAgICAgIDwvc3Bhbj48c3BhbiBjbGFzcz0nb2QnPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvc3Bhbj48YnINCj48c3BhbiBjbGFzcz0nZXYnPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg
ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9zcGFuPjxicg0KPjxzcGFuIGNsYXNzPSdvZCcgc3R5bGU9J2NvbG9yOiAjMDBCRjAwOyc+dXNlckBob3N0IDwvc3Bhbj48c3BhbiBjbGFzcz0nb2QnIHN0eWxlPSdjb2xvcjo
gI0JGMDBCRjsnPk1JTkdXNjQgPC9zcGFuPjxzcGFuIGNsYXNzPSdvZCcgc3R5bGU9J2NvbG9yOiAjQkZCRjAwOyc+fjwvc3Bhbj48c3BhbiBjbGFzcz0nb2QnPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC
AgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L3NwYW4+PGJyDQo+PHNwYW4gY2xhc3M9J2V2Jz4kIDwvc3Bhbj48c3BhbiBjbGFzcz0nZXYnIGlkPSdjdXJzb3InPiA8L3NwYW4+PHNwYW4gY2xhc3M9J2V2Jz4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvc3Bhbj48L3ByZT4NCiAgPC9kaXY+DQo8L2Jv
ZHk+DQo8IS0tRW5kRnJhZ21lbnQtLT48L2h0bWw+DQo=" />

script.js

let markup = document.getElementById('markup');
let render = document.getElementById('render');

document.addEventListener('paste', function(e) {
  e.preventDefault();
  let html = ''
  if (window.clipboardData && window.clipboardData.getData) {
    html = window.clipboardData.getData('html')
    || window.clipboardData.getData('text');
  }
  else if (e.clipboardData && e.clipboardData.getData) {
    html = e.clipboardData.getData('text/html')
    || e.clipboardData.getData('text/plain');
  }
  render.innerHTML = markup.value = html;
});

let fix = (html) => html.replace(/ *<\/span><br\r?\n>/g, '</span><br\r\n>').replace(/ *<\/span><\/pre>\r?\n/, '</span></pre>\n');

let fixit = (e) => {
  render.innerHTML = markup.value = fix(markup.value);
  mark();
};
document.getElementById('fixit').addEventListener('click', fixit);
let sample = window.atob(document.getElementById('sample').value);
//let fixed = fix(sample);
render.innerHTML = markup.value = sample;
document.getElementById('paste').focus();

let mark = function () {
  render.querySelectorAll('span').forEach(e => {
    if (!/^ +$/.test(e.textContent)) return;
    e.classList.add('marked');
  });
}

mark();

style.css

html {
  font-size: 16px;
  font-family: sans-serif;
  padding: 1rem;
  box-sizing: border-box;
}

#render, #markup, #paste {
  width: 50rem;
  min-height: 10rem;
  border: solid 1px green;
  font-family: monospace;
  font-size: 1rem;
  overflow: scroll;
  padding: 0;
  margin-bottom: 1rem;
}

#paste {
  min-height: 3rem;
  background-color: #ffd70080;
}

button {
  padding: 1em;
}

table, tr, td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

@keyframes blink {
  50% {
    background-color: rgb(30, 40, 50);
  }
}

span.marked {
  animation: blink 2s steps(1, start) 1s infinite;
}