CodeMirror: merge view demo

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

The merge addon provides an interface for displaying and merging diffs, either two-way or three-way. The left (or center) pane is editable, and the differences with the other pane(s) are shown live as you edit it.

This addon depends on the google-diff-match-patch library to compute the diffs.