|
|
<!doctype html>
<title>CodeMirror: merge view demo</title><meta charset="utf-8"/><link rel=stylesheet href="../doc/docs.css">
<link rel=stylesheet href="../lib/codemirror.css"><link rel=stylesheet href="../addon/merge/merge.css"><script src="../lib/codemirror.js"></script><script src="../mode/xml/xml.js"></script><script src="../mode/css/css.js"></script><script src="../mode/javascript/javascript.js"></script><script src="../mode/htmlmixed/htmlmixed.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script><script src="../addon/merge/merge.js"></script><style> .CodeMirror { line-height: 1.2; } @media screen and (min-width: 1300px) { article { max-width: 1000px; } #nav { border-right: 499px solid transparent; } } span.clicky { cursor: pointer; background: #d70; color: white; padding: 0 3px; border-radius: 3px; } </style><div id=nav> <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul> <li><a href="../index.html">Home</a> <li><a href="../doc/manual.html">Manual</a> <li><a href="https://github.com/codemirror/codemirror5">Code</a> </ul> <ul> <li><a class=active href="#">merge view</a> </ul></div>
<article><h2>merge view demo</h2>
<div id=view></div>
<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 theother pane(s) are <span class=clickyonclick="toggleDifferences()">optionally</span> shown live as you editit. In the two-way configuration, there are also options to pad changedsections to <span class=clicky onclick="connect = connect ? null :'align'; initUI()">align</span> them, and to <span class=clickyonclick="collapse = !collapse; initUI()">collapse</span> unchangedstretches of text.</p>
<p>This addon depends onthe <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>library to compute the diffs.</p>
<script>var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;function initUI() { if (value == null) return; var target = document.getElementById("view"); target.innerHTML = ""; dv = CodeMirror.MergeView(target, { value: value, origLeft: panes == 3 ? orig1 : null, orig: orig2, lineNumbers: true, mode: "text/html", highlightDifferences: highlight, connect: connect, collapseIdentical: collapse });}
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>
|
