golden hour

/home/phakp/public_html/formtools/global/codemirror/demo

File/Folder	Size	Actions
activeline.html	3.16 KB
anywordhint.html	2.62 KB
bidi.html	4.81 KB
btree.html	2.89 KB
buffers.html	3.48 KB
changemode.html	1.68 KB
closebrackets.html	1.64 KB
closetag.html	1.26 KB
complete.html	4.19 KB
emacs.html	2.42 KB
folding.html	4.13 KB
fullscreen.html	3.38 KB
hardwrap.html	2.51 KB
html5complete.html	1.73 KB
indentwrap.html	2.52 KB
lint.html	3.98 KB
loadmode.html	2.17 KB
marker.html	1.45 KB
markselection.html	1.83 KB
matchhighlighter.html	4.72 KB
matchtags.html	1.34 KB
merge.html	4.08 KB
multiplex.html	2.11 KB
mustache.html	2.05 KB
panel.html	3.38 KB
placeholder.html	1.47 KB
preview.html	2.36 KB
requirejs.html	2.27 KB
resize.html	1.33 KB
rulers.html	1.39 KB
runmode.html	2.21 KB
search.html	4.44 KB
simplemode.html	7.9 KB
simplescrollbars.html	4.89 KB
spanaffectswrapping_shim.html	2.97 KB
sublime.html	2.78 KB
tern.html	4.37 KB
theme.html	6.04 KB
trailingspace.html	1.53 KB
variableheight.html	2.02 KB
vim.html	3.88 KB
visibletabs.html	1.82 KB
widget.html	2.87 KB
xmlcomplete.html	3.62 KB

Edit: merge.html

<!doctype html>

<title>CodeMirror: merge view demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<ul>
    <li><a href="../index.html">Home</a>
    <li><a href="../doc/manual.html">Manual</a>
    <li><a href="https://github.com/codemirror/codemirror">Code</a>
  </ul>
  <ul>
    <li><a class=active href="#">merge view</a>
  </ul>
</div>

<article>
<h2>merge view demo</h2>

<p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
addon provides an interface for displaying and merging diffs,
either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
or <span class=clicky onclick="panes = 3; initUI()">three-way</span>.
The left (or center) pane is editable, and the differences with the
other pane(s) are <span class=clicky
onclick="toggleDifferences()">optionally</span> shown live as you edit
it. In the two-way configuration, there are also options to pad changed
sections to <span class=clicky onclick="connect = connect ? null :
'align'; initUI()">align</span> them, and to <span class=clicky
onclick="collapse = !collapse; initUI()">collapse</span> unchanged
stretches of text.</p>

<p>This addon depends on
the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
library to compute the diffs.</p>

function toggleDifferences() {
  dv.setShowDifferences(highlight = !highlight);
}

window.onload = function() {
  value = document.documentElement.innerHTML;
  orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
  orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
    .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
  initUI();
  let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)
};

function mergeViewHeight(mergeView) {
  function editorHeight(editor) {
    if (!editor) return 0;
    return editor.getScrollInfo().height;
  }
  return Math.max(editorHeight(mergeView.leftOriginal()),
                  editorHeight(mergeView.editor()),
                  editorHeight(mergeView.rightOriginal()));
}

function resize(mergeView) {
  var height = mergeViewHeight(mergeView);
  for(;;) {
    if (mergeView.leftOriginal())
      mergeView.leftOriginal().setSize(null, height);
    mergeView.editor().setSize(null, height);
    if (mergeView.rightOriginal())
      mergeView.rightOriginal().setSize(null, height);

var newHeight = mergeViewHeight(mergeView);
    if (newHeight >= height) break;
    else height = newHeight;
  }
  mergeView.wrap.style.height = height + "px";
}
</script>
</article>