merge view demo

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

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