Mercurial
comparison .cms/lib/codemirror/demo/merge.html @ 0:78edf6b517a0 draft
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> |