Mercurial

comparison .cms/lib/codemirror/demo/merge.html @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:78edf6b517a0
1 <!doctype html>
2
3 <title>CodeMirror: merge view demo</title>
4 <meta charset="utf-8"/>
5 <link rel=stylesheet href="../doc/docs.css">
6
7 <link rel=stylesheet href="../lib/codemirror.css">
8 <link rel=stylesheet href="../addon/merge/merge.css">
9 <script src="../lib/codemirror.js"></script>
10 <script src="../mode/xml/xml.js"></script>
11 <script src="../mode/css/css.js"></script>
12 <script src="../mode/javascript/javascript.js"></script>
13 <script src="../mode/htmlmixed/htmlmixed.js"></script>
14 <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
15 <script src="../addon/merge/merge.js"></script>
16 <style>
17 .CodeMirror { line-height: 1.2; }
18 @media screen and (min-width: 1300px) {
19 article { max-width: 1000px; }
20 #nav { border-right: 499px solid transparent; }
21 }
22 span.clicky {
23 cursor: pointer;
24 background: #d70;
25 color: white;
26 padding: 0 3px;
27 border-radius: 3px;
28 }
29 </style>
30 <div id=nav>
31 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
32
33 <ul>
34 <li><a href="../index.html">Home</a>
35 <li><a href="../doc/manual.html">Manual</a>
36 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
37 </ul>
38 <ul>
39 <li><a class=active href="#">merge view</a>
40 </ul>
41 </div>
42
43 <article>
44 <h2>merge view demo</h2>
45
46
47 <div id=view></div>
48
49 <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
50 addon provides an interface for displaying and merging diffs,
51 either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
52 or <span class=clicky onclick="panes = 3; initUI()">three-way</span>.
53 The left (or center) pane is editable, and the differences with the
54 other pane(s) are <span class=clicky
55 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
59 onclick="collapse = !collapse; initUI()">collapse</span> unchanged
60 stretches of text.</p>
61
62 <p>This addon depends on
63 the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
64 library to compute the diffs.</p>
65
66 <script>
67 var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;
68 function initUI() {
69 if (value == null) return;
70 var target = document.getElementById("view");
71 target.innerHTML = "";
72 dv = CodeMirror.MergeView(target, {
73 value: value,
74 origLeft: panes == 3 ? orig1 : null,
75 orig: orig2,
76 lineNumbers: true,
77 mode: "text/html",
78 highlightDifferences: highlight,
79 connect: connect,
80 collapseIdentical: collapse
81 });
82 }
83
84 function toggleDifferences() {
85 dv.setShowDifferences(highlight = !highlight);
86 }
87
88 window.onload = function() {
89 value = document.documentElement.innerHTML;
90 orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
91 orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
92 .replace("white", "purple;\n font: comic sans;\n text-decoration: underline;\n height: 15em");
93 initUI();
94 let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)
95 };
96
97 function mergeViewHeight(mergeView) {
98 function editorHeight(editor) {
99 if (!editor) return 0;
100 return editor.getScrollInfo().height;
101 }
102 return Math.max(editorHeight(mergeView.leftOriginal()),
103 editorHeight(mergeView.editor()),
104 editorHeight(mergeView.rightOriginal()));
105 }
106
107 function resize(mergeView) {
108 var height = mergeViewHeight(mergeView);
109 for(;;) {
110 if (mergeView.leftOriginal())
111 mergeView.leftOriginal().setSize(null, height);
112 mergeView.editor().setSize(null, height);
113 if (mergeView.rightOriginal())
114 mergeView.rightOriginal().setSize(null, height);
115
116 var newHeight = mergeViewHeight(mergeView);
117 if (newHeight >= height) break;
118 else height = newHeight;
119 }
120 mergeView.wrap.style.height = height + "px";
121 }
122 </script>
123 </article>