--- /dev/null
+<!doctype html>
+<head>
+ <meta charset="utf-8">
+ <link rel=stylesheet href="../lib/codemirror.css">
+ <script src="../lib/codemirror.js"></script>
+ <script src="../mode/xml/xml.js"></script>
+ <script src="../addon/merge/dep/diff_match_patch.js"></script>
+ <link rel=stylesheet href="../addon/merge/merge.css">
+ <script src="../addon/merge/merge.js"></script>
+ <link rel="stylesheet" href="../doc/docs.css">
+ <title>CodeMirror: merge view demo</title>
+ <style>
+ .CodeMirror { line-height: 1.2; }
+ body { max-width: 80em; }
+ span.clicky {
+ cursor: pointer;
+ background: #d70;
+ color: white;
+ padding: 0 3px;
+ border-radius: 3px;
+ }
+ </style>
+</head>
+
+<h1>CodeMirror: merge view demo</h1>
+
+<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="initUI(2)">two-way</span>
+or <span class=clicky onclick="initUI(3)">three-way</span>. The left
+(or center) pane is editable, and the differences with the other
+pane(s) are shown live as you edit it.</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>
+
+<script>
+var value, orig1, orig2, dv;
+
+function initUI(panes) {
+ 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"
+ });
+}
+
+window.onload = function() {
+ value = document.documentElement.innerHTML;
+ orig1 = 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(2);
+};
+</script>