Mercurial
diff .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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.cms/lib/codemirror/demo/merge.html Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,123 @@ +<!doctype html> + +<title>CodeMirror: merge view demo</title> +<meta charset="utf-8"/> +<link rel=stylesheet href="../doc/docs.css"> + +<link rel=stylesheet href="../lib/codemirror.css"> +<link rel=stylesheet href="../addon/merge/merge.css"> +<script src="../lib/codemirror.js"></script> +<script src="../mode/xml/xml.js"></script> +<script src="../mode/css/css.js"></script> +<script src="../mode/javascript/javascript.js"></script> +<script src="../mode/htmlmixed/htmlmixed.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script> +<script src="../addon/merge/merge.js"></script> +<style> + .CodeMirror { line-height: 1.2; } + @media screen and (min-width: 1300px) { + article { max-width: 1000px; } + #nav { border-right: 499px solid transparent; } + } + span.clicky { + cursor: pointer; + background: #d70; + color: white; + padding: 0 3px; + border-radius: 3px; + } + </style> +<div id=nav> + <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> + + <ul> + <li><a href="../index.html">Home</a> + <li><a href="../doc/manual.html">Manual</a> + <li><a href="https://github.com/codemirror/codemirror5">Code</a> + </ul> + <ul> + <li><a class=active href="#">merge view</a> + </ul> +</div> + +<article> +<h2>merge view demo</h2> + + +<div id=view></div> + +<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="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, panes = 2, highlight = true, connect = "align", 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, + orig: orig2, + lineNumbers: true, + mode: "text/html", + highlightDifferences: highlight, + connect: connect, + collapseIdentical: collapse + }); +} + +function toggleDifferences() { + dv.setShowDifferences(highlight = !highlight); +} + +window.onload = function() { + value = document.documentElement.innerHTML; + orig1 = "<!doctype html>\n\n" + 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(); + let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d) +}; + +function mergeViewHeight(mergeView) { + function editorHeight(editor) { + if (!editor) return 0; + return editor.getScrollInfo().height; + } + return Math.max(editorHeight(mergeView.leftOriginal()), + editorHeight(mergeView.editor()), + editorHeight(mergeView.rightOriginal())); +} + +function resize(mergeView) { + var height = mergeViewHeight(mergeView); + for(;;) { + if (mergeView.leftOriginal()) + mergeView.leftOriginal().setSize(null, height); + mergeView.editor().setSize(null, height); + if (mergeView.rightOriginal()) + mergeView.rightOriginal().setSize(null, height); + + var newHeight = mergeViewHeight(mergeView); + if (newHeight >= height) break; + else height = newHeight; + } + mergeView.wrap.style.height = height + "px"; +} +</script> +</article>