[merge demo] Describe aligning and collapsing functionality

demo/merge.html

@@ -41,33 +41,41 @@
 
 <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
 addon provides an interface for displaying and merging diffs,
-either <span class=clicky onclick="initUI(2)">two-way</span>
-or <span class=clicky onclick="initUI(3)">three-way</span>. The left
-(or center) pane is editable, and the differences with the other
-pane(s) are <span class=clicky onclick="toggleDifferences()">optionally</span> shown live as you edit it.</p>
+either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
+or <span class=clicky onclick="panes = 3; initUI()">three-way</span>.
+The left (or center) pane is editable, and the differences with the
+other pane(s) are <span class=clicky
+onclick="toggleDifferences()">optionally</span> shown live as you edit
+it. In the two-way configuration, there are also options to pad changed
+sections to <span class=clicky onclick="connect = connect ? null :
+'align'; initUI()">align</span> them, and to <span class=clicky
+onclick="collapse = !collapse; initUI()">collapse</span> unchanged
+stretches of text.</p>
 
 <p>This addon depends on
 the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
 library to compute the diffs.</p>
 
 <script>
-var value, orig1, orig2, dv, hilight= true;
-function initUI(panes) {
+var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, collapse = false;
+function initUI() {
   if (value == null) return;
   var target = document.getElementById("view");
   target.innerHTML = "";
   dv = CodeMirror.MergeView(target, {
     value: value,
-    origLeft: panes == 3 ? orig1 : null,
+    origLeft: panes == 3 && !collapse && !connect ? orig1 : null,
     orig: orig2,
     lineNumbers: true,
     mode: "text/html",
-    highlightDifferences: hilight
+    highlightDifferences: highlight,
+    connect: connect,
+    collapseIdentical: collapse
   });
 }
 
 function toggleDifferences() {
-  dv.setShowDifferences(hilight = !hilight);
+  dv.setShowDifferences(highlight = !highlight);
 }
 
 window.onload = function() {
@@ -75,7 +83,7 @@ window.onload = function() {
   orig1 = value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
   orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
     .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
-  initUI(2);
+  initUI();
 };
 
 function mergeViewHeight(mergeView) {