merge view demo

 
1
<head><title>CodeMirror: merge view demo</title>
2
<meta charset="utf-8">
3
<link rel="stylesheet" href="../doc/docs.css">
4
​
5
<link rel="stylesheet" href="../lib/codemirror.css">
6
<link rel="stylesheet" href="../addon/merge/merge.css">
7
<script src="../lib/codemirror.js"></script>
8
<script src="../mode/xml/xml.js"></script>
9
<script src="../addon/merge/dep/diff_match_patch.js"></script>
10
<script src="../addon/merge/merge.js"></script>
11
<style>
12
    .CodeMirror { line-height: 1.2; }
13
    span.clicky {
14
      cursor: pointer;
15
      background: #d70;
16
      color: white;
17
      padding: 0 3px;
18
      border-radius: 3px;
19
    }
20
  </style>
21
</head><body><div id="nav">
22
  <a href="http://codemirror.net"><img id="logo" src="../doc/logo.png"></a>
23
​
24
  <ul>
25
    <li><a href="../index.html">Home</a>
26
    </li><li><a href="../doc/manual.html">Manual</a>
27
    </li><li><a href="https://github.com/marijnh/codemirror">Code</a>
28
  </li></ul>
29
  <ul>
30
    <li><a class="active" href="#">merge view</a>
31
  </li></ul>
32
</div>
33
​
34
<article>
35
<h2>merge view demo</h2>
36
​
37
​
38
<div id="view"></div>
39
​
40
<p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
41
addon provides an interface for displaying and merging diffs,
42
either <span class="clicky" onclick="initUI(2)">two-way</span>
43
or <span class="clicky" onclick="initUI(3)">three-way</span>. The left
44
(or center) pane is editable, and the differences with the other
45
pane(s) are <span class="clicky" onclick="toggleDifferences()">optionally</span> shown live as you edit it.</p>
46
​
47
<p>This addon depends on
48
the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
49
library to compute the diffs.</p>
50
​
51
<script>
52
var value, orig1, orig2, dv, hilight= true;
53
function initUI(panes) {
54
  if (value == null) return;
55
  var target = document.getElementById("view");
56
  target.innerHTML = "";
57
  dv = CodeMirror.MergeView(target, {
58
    value: value,
59
    origLeft: panes == 3 ? orig1 : null,
60
    orig: orig2,
61
    lineNumbers: true,
62
    mode: "text/html",
63
    highlightDifferences: hilight
64
  });
65
}
66
​
67
function toggleDifferences() {
68
  dv.setShowDifferences(hilight = !hilight);
69
}
70
​
71
window.onload = function() {
72
  value = document.documentElement.innerHTML;
73
  orig1 = value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
74
  orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
75
    .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
76
  initUI(2);
77
};
78
​
79
function mergeViewHeight(mergeView) {
80
  function editorHeight(editor) {
81
    if (!editor) return 0;
82
    return editor.getScrollInfo().height;
83
  }
84
  return Math.max(editorHeight(mergeView.leftOriginal()),
85
                  editorHeight(mergeView.editor()),
86
                  editorHeight(mergeView.rightOriginal()));
87
}
88
​
89
function resize(mergeView) {
90
  var height = mergeViewHeight(mergeView);
91
  for(;;) {
92
    if (mergeView.leftOriginal())
93
      mergeView.leftOriginal().setSize(null, height);
94
    mergeView.editor().setSize(null, height);
95
    if (mergeView.rightOriginal())
96
      mergeView.rightOriginal().setSize(null, height);
97
​
98
    var newHeight = mergeViewHeight(mergeView);
99
    if (newHeight >= height) break;
100
    else height = newHeight;
101
  }
102
  mergeView.wrap.style.height = height + "px";
103
}
104
</script>
105
</article>
106
</body>
⇜
⇜
⇜
⇛⇚
109
 
1
<head><title>CodeMirror: merge view demo</title>
2
<meta charset="utf-8">
3
<link rel="stylesheet" href="../doc/docs.css">
4
​
5
<link rel="stylesheet" href="../lib/codemirror.css">
6
<link rel="stylesheet" href="../addon/merge/merge.css">
7
<script type=text/javascript  src="../lib/codemirror.js"></script>
8
<script type=text/javascript  src="../mode/xml/xml.js"></script>
9
<script type=text/javascript  src="../addon/merge/dep/diff_match_patch.js"></script>
10
<script type=text/javascript  src="../addon/merge/merge.js"></script>
11
<style>
12
    .CodeMirror { line-height: 1.2; }
13
    span.clicky {
14
      cursor: pointer;
15
      background: #d70;
16
      color: purple;
17
      font: comic sans;
18
      text-decoration: underline;
19
      height: 15em;
20
      padding: 0 3px;
21
      border-radius: 3px;
22
    }
23
  </style>
24
</head><body><div id="nav">
25
  <a href="http://codemirror.net"><img id="logo" src="../doc/logo.png"></a>
26
​
27
  <ul>
28
    <li><a href="../index.html">Home</a>
29
    </li><li><a href="../doc/manual.html">Manual</a>
30
    </li><li><a href="https://github.com/marijnh/codemirror">Code</a>
31
  </li></ul>
32
  <ul>
33
    <li><a class="active" href="#">merge view</a>
34
  </li></ul>
35
</div>
36
​
37
<article>
38
<h2>merge view demo</h2>
39
​
40
​
41
<div id="view"></div>
42
​
43
<p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
44
addon provides an interface for displaying and merging diffs,
45
either <span class="clicky" onclick="initUI(2)">two-way</span>
46
or <span class="clicky" onclick="initUI(3)">three-way</span>. The left
47
(or center) pane is editable, and the differences with the other
48
pane(s) are <span class="clicky" onclick="toggleDifferences()">optionally</span> shown live as you edit it.</p>
49
​
50
<p>This addon depends on
51
the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
52
library to compute the diffs.</p>
53
​
54
<script type=text/javascript >
55
var value, orig1, orig2, dv, hilight= true;
56
function initUI(panes) {
57
  if (value == null) return;
58
  var target = document.getElementById("view");
59
  target.innerHTML = "";
60
  dv = CodeMirror.MergeView(target, {
61
    value: value,
62
    origLeft: panes == 3 ? orig1 : null,
63
    orig: orig2,
64
    lineNumbers: true,
65
    mode: "text/html",
66
    highlightDifferences: hilight
67
  });
68
}
69
​
70
function toggleDifferences() {
71
  dv.setShowDifferences(hilight = !hilight);
72
}
73
​
74
window.onload = function() {
75
  value = document.documentElement.innerHTML;
76
  orig1 = value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
77
  orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
78
    .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
79
  initUI(2);
80
};
81
​
82
function mergeViewHeight(mergeView) {
83
  function editorHeight(editor) {
84
    if (!editor) return 0;
85
    return editor.getScrollInfo().height;
86
  }
87
  return Math.max(editorHeight(mergeView.leftOriginal()),
88
                  editorHeight(mergeView.editor()),
89
                  editorHeight(mergeView.rightOriginal()));
90
}
91
​
92
function resize(mergeView) {
93
  var height = mergeViewHeight(mergeView);
94
  for(;;) {
95
    if (mergeView.leftOriginal())
96
      mergeView.leftOriginal().setSize(null, height);
97
    mergeView.editor().setSize(null, height);
98
    if (mergeView.rightOriginal())
99
      mergeView.rightOriginal().setSize(null, height);
100
​
101
    var newHeight = mergeViewHeight(mergeView);
102
    if (newHeight >= height) break;
103
    else height = newHeight;
104
  }
105
  mergeView.wrap.style.height = height + "px";
106
}
107
</script>
108
</article>
109
</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 optionally shown live as you edit it.

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