Merge pull request #23 from afroozeh/undo-redo-buttons

Add undo redo example
7 years ago · b9fbec9b1e
parent 922865708b 2d87862e54
commit b9fbec9b1e
1 changed files with 104 additions and 0 deletions
--- a/browser-undo-redo-controls/index.html
+++ 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>