to-be-integrated/third-party/codemirror-3.15/demo/merge.html

   1 <!doctype html>
   2 <head>
   3   <meta charset="utf-8">
   4   <link rel=stylesheet href="../lib/codemirror.css">
   5   <script src="../lib/codemirror.js"></script>
   6   <script src="../mode/xml/xml.js"></script>
   7   <script src="../addon/merge/dep/diff_match_patch.js"></script>
   8   <link rel=stylesheet href="../addon/merge/merge.css">
   9   <script src="../addon/merge/merge.js"></script>
  10   <link rel="stylesheet" href="../doc/docs.css">
  11   <title>CodeMirror: merge view demo</title>
  12   <style>
  13     .CodeMirror { line-height: 1.2; }
  14     body { max-width: 80em; }
  15     span.clicky {
  16       cursor: pointer;
  17       background: #d70;
  18       color: white;
  19       padding: 0 3px;
  20       border-radius: 3px;
  21     }
  22   </style>
  23 </head>
  24
  25 <h1>CodeMirror: merge view demo</h1>
  26
  27 <div id=view></div>
  28
  29 <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
  30 addon provides an interface for displaying and merging diffs,
  31 either <span class=clicky onclick="initUI(2)">two-way</span>
  32 or <span class=clicky onclick="initUI(3)">three-way</span>. The left
  33 (or center) pane is editable, and the differences with the other
  34 pane(s) are shown live as you edit it.</p>
  35
  36 <p>This addon depends on
  37 the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
  38 library to compute the diffs.</p>
  39
  40 <script>
  41 var value, orig1, orig2, dv;
  42
  43 function initUI(panes) {
  44   if (value == null) return;
  45   var target = document.getElementById("view");
  46   target.innerHTML = "";
  47   dv = CodeMirror.MergeView(target, {
  48     value: value,
  49     origLeft: panes == 3 ? orig1 : null,
  50     orig: orig2,
  51     lineNumbers: true,
  52     mode: "text/html"
  53   });
  54 }
  55
  56 window.onload = function() {
  57   value = document.documentElement.innerHTML;
  58   orig1 = value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
  59   orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
  60     .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
  61   initUI(2);
  62 };
  63 </script>