move a few things away in to-be-integrated/

[myslice.git] / to-be-integrated / third-party / codemirror-3.15 / demo / merge.html
diff --git a/to-be-integrated/third-party/codemirror-3.15/demo/merge.html b/to-be-integrated/third-party/codemirror-3.15/demo/merge.html

new file mode 100644 (file)

index 0000000..907f769
--- /dev/null
+++ b/to-be-integrated/third-party/codemirror-3.15/demo/merge.html
@@ -0,0 +1,63 @@
+<!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>