github diff content editable each line js

github-diff-content-editable-each-line.js

document.styleSheets[0].insertRule('.blob-code-marker:before { border-right: black 1px dotted; }');

linedata = {};

[
  ...Array.from(document.querySelectorAll('.blob-code-addition')),
  ...Array.from(document.querySelectorAll('.blob-code-context'))
].forEach(line => {
  lineNumber = line.parentNode.querySelector('.blob-num').getAttribute('data-line-number');
  marker = line.querySelector('.blob-code-marker');

  editor = marker.cloneNode();
  marker.style.display = 'none';
  editor.style.display = 'inline-block';
  editor.style.width = '100%';
  editor.innerHTML = marker.innerText
    .replace(/&/g, '&')
    .replace(/'/g, ''')
    .replace(/"/g, '"')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');

  editor.contentEditable = true;
  line.appendChild(editor);

  linedata[lineNumber] = { line, marker, editor };
});