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="../mode/css/css.js"></script>10
<script src="../mode/javascript/javascript.js"></script>11
<script src="../mode/htmlmixed/htmlmixed.js"></script>12
<script src="https://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="https://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 the52
other pane(s) are <span class="clicky" onclick="toggleDifferences()">optionally</span> shown live as you edit53
it. In the two-way configuration, there are also options to pad changed54
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> unchanged56
stretches of text.</p>57
58
<p>This addon depends on59
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 = "align", 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: collapse77
});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
let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)91
};92
93
function mergeViewHeight(mergeView) {94
function editorHeight(editor) {95
if (!editor) return 0;96
return editor.getScrollInfo().height;97
}98
return Math.max(editorHeight(mergeView.leftOriginal()),99
editorHeight(mergeView.editor()),100
editorHeight(mergeView.rightOriginal()));101
}102
103
function resize(mergeView) {104
var height = mergeViewHeight(mergeView);105
for(;;) {106
if (mergeView.leftOriginal())107
mergeView.leftOriginal().setSize(null, height);108
mergeView.editor().setSize(null, height);109
if (mergeView.rightOriginal())110
mergeView.rightOriginal().setSize(null, height);111
112
var newHeight = mergeViewHeight(mergeView);113
if (newHeight >= height) break;114
else height = newHeight;115
}116
mergeView.wrap.style.height = height + "px";117
}118
</script>119
</article>120
</body>xxxxxxxxxx1
<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="https://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="https://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 the55
other pane(s) are <span class="clicky" onclick="toggleDifferences()">optionally</span> shown live as you edit56
it. In the two-way configuration, there are also options to pad changed57
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> unchanged59
stretches of text.</p>60
61
<p>This addon depends on62
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 = "align", 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: collapse80
});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
let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)94
};95
96
function mergeViewHeight(mergeView) {97
function editorHeight(editor) {98
if (!editor) return 0;99
return editor.getScrollInfo().height;100
}101
return Math.max(editorHeight(mergeView.leftOriginal()),102
editorHeight(mergeView.editor()),103
editorHeight(mergeView.rightOriginal()));104
}105
106
function resize(mergeView) {107
var height = mergeViewHeight(mergeView);108
for(;;) {109
if (mergeView.leftOriginal())110
mergeView.leftOriginal().setSize(null, height);111
mergeView.editor().setSize(null, height);112
if (mergeView.rightOriginal())113
mergeView.rightOriginal().setSize(null, height);114
115
var newHeight = mergeViewHeight(mergeView);116
if (newHeight >= height) break;117
else height = newHeight;118
}119
mergeView.wrap.style.height = height + "px";120
}121
</script>122
</article>123
</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.