From 2d87862e54b714a7eec66dd2d58ee08913fe5966 Mon Sep 17 00:00:00 2001
From: Ali Afroozeh <ali.afroozeh@mendix.com>
Date: Thu, 26 Apr 2018 15:19:43 +0200
Subject: [PATCH] Add undo redo example

---
 browser-undo-redo-controls/index.html | 104 ++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 browser-undo-redo-controls/index.html
diff --git a/browser-undo-redo-controls/index.html b/browser-undo-redo-controls/index.html
new file mode 100644
index 00000000..6976ee6c
--- /dev/null
+++ b/browser-undo-redo-controls/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+	<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor/min/vs/editor/editor.main.css">
+</head>
+<body>
+
+<h2>Monaco Editor Undo Redo Samples</h2>
+
+<div style="padding: 5pt">
+	<button id="undoButton" name="undo" onclick="undo();" disabled="true">Undo</button>
+	<button id="redoButton" name="redo" onclick="redo();" disabled="true">Redo</button>
+</div>
+
+<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
+
+<script>var require = { paths: { 'vs': '../node_modules/monaco-editor/min/vs' } };</script>
+<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
+<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
+<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
+
+<script>
+	const value = [
+		'define([], function() {',
+		'\treturn ({p1, p2}) => {',
+		'\t\treturn Promise.resolve("Hello, World");',
+		'\t};',
+		'});'
+	].join('\n');
+
+	const editor = monaco.editor.create(document.getElementById('container'), {
+		value: [
+			'function x() {',
+			'\tconsole.log("Hello world!");',
+			'}'
+		].join('\n'),
+		language: 'javascript'
+	});
+
+	editor.focus();
+	editor.setPosition({ lineNumber: 2, column: 30 });
+
+	const initialVersion = editor.getModel().getAlternativeVersionId();
+	let currentVersion = initialVersion;
+	let lastVersion = initialVersion;
+
+	editor.onDidChangeModelContent(e => {
+		const versionId = editor.getModel().getAlternativeVersionId();
+		// undoing
+		if (versionId < currentVersion) {
+			enableRedoButton();
+			// no more undo possible
+			if (versionId === initialVersion) {
+				disableUndoButton();
+			}
+		} else {
+			// redoing
+			if (versionId <= lastVersion) {
+				// redoing the last change
+				if (versionId == lastVersion) {
+					disableRedoButton();
+				}
+			} else { // adding new change, disable redo when adding new changes
+				disableRedoButton();
+				if (currentVersion > lastVersion) {
+					lastVersion = currentVersion;
+				}
+			}
+			enableUndoButton();
+		}
+		currentVersion = versionId;
+	});
+
+	function undo() {
+		editor.trigger('aaaa', 'undo', 'aaaa');
+		editor.focus();
+	}
+
+	function redo() {
+		editor.trigger('aaaa', 'redo', 'aaaa');
+		editor.focus();
+	}
+
+	function enableUndoButton() {
+		document.getElementById("undoButton").disabled = false;
+	}
+
+	function disableUndoButton() {
+		document.getElementById("undoButton").disabled = true;
+	}
+
+	function enableRedoButton() {
+		document.getElementById("redoButton").disabled = false;
+	}
+
+	function disableRedoButton() {
+		document.getElementById("redoButton").disabled = true;
+	}
+</script>
+
+</body>
+</html>
\ No newline at end of file
