JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<title>Orion Compare Editor Sample</title>
<style type="text/css">
body {
margin: 0;
p
<title>Orion Compare Editor Sample</title>
<style type="text/css">
body {adding: 0;
overflow: hidden;
background-color: #ededed;
}
.compareContainer {
position: absolute;
top: 80px; /* $ToolbarHeight + 1 */
bottom: 0;
width: 99%;
overflow-y: auto;
margin-left:5px;
border:1px solid #bebebe;
}
</style>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/compare/releases/4.0/built-compare.css"/>
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
<script>
require(["http://eclipse.org/orion/compare/releases/4.0/built-compare.min.js"], function(Compare) {
var document = window.document;
/** Buttons */
var bCompare = document.getElementById("doCompare"); //$NON-NLS-0$
var bLoadSample = document.getElementById("loadSample"); //$NON-NLS-0$
var bAnimateDiffs = document.getElementById("animateDiffs"); //$NON-NLS-0$
var bCompareType = document.getElementById("compareTypeSelect"); //$NON-NLS-0$
var bContentTypeTD = document.getElementById("contentTypes"); //$NON-NLS-0$
var bContentType = document.getElementById("contentTypeSelect"); //$NON-NLS-0$
var bAnimateInterval = document.getElementById("animateInterval"); //$NON-NLS-0$
var compareType = "byTwoContents"; //$NON-NLS-0$
var contentType = "js"; //$NON-NLS-0$
var contentOnLeft = "Sample Orion compare contents on left side\n\nYou can replace the contents here and and click on [Refresh Compare] to see the new result\n"; //$NON-NLS-0$
var contentOnRight = "Sample Orion compare contents on right side\n\nYou can replace the contents here and and click on [Refresh Compare] to see the new result\n"; //$NON-NLS-0$
var contentOnLeftURL = "Put file URL here\n"; //$NON-NLS-0$
var contentOnRightURL = "Put file URL here\n"; //$NON-NLS-0$
var options = {
parentDivId:...