Alexandru Dima
7 years ago
committed by
GitHub
commit
b9fbec9b1e
@ -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>
|
||||||
Loading…
Reference in New Issue