Emacs key bindings for monaco-editor. Demo.
npm install monaco-emacsimport * as monaco from 'monaco-editor';
import { EmacsExtension } from 'monaco-emacs';- Add this script in your html -
https://unpkg.com/monaco-emacs/dist/monaco-emacs.js. - The extension will be available as
MonacoEmacsonwindow
const monaco = window.monaco;
const { EmacsExtension } = window.MonacoEmacs;const editorNode = document.getElementById('editor');
const statusNode = document.getElementById('statusbar');
const editor = monaco.editor.create(editor);
const emacsMode = new EmacsExtension(editor);
emacsMode.onDidMarkChange((ev: boolean) => {
statusNode.textContent = ev ? 'Mark Set!' : 'Mark Unset';
});
emacsMode.onDidChangeKey((str) => {
statusNode.textContent = str;
});
emacsMode.start();
// If you want to remove the attached bindings, call
emacsMode.dispose();import { unregisterKey } from 'monaco-emacs';
unregisterKey('Tab');import { getAllMappings } from 'monaco-emacs';
console.log(getAllMappings());If you are following the official guide and integrating the AMD version of monaco-editor, you can follow this -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<div id="status"></div>
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({
paths: {
'vs': 'https://unpkg.com/monaco-editor/min/vs',
'monaco-emacs': 'https://unpkg.com/monaco-emacs/dist/monaco-emacs',
}
});
require(['vs/editor/editor.main', 'monaco-emacs'], function(a, MonacoEmacs) {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
var statusNode = document.getElementById('status');
var emacsMode = new MonacoEmacs.EmacsExtension(editor);
emacsMode.onDidMarkChange(function(ev) {
statusNode.textContent = ev ? 'Mark Set!' : 'Mark Unset';
});
emacsMode.onDidChangeKey(function(str) {
statusNode.textContent = str;
});
emacsMode.start();
// remove emacs mode by calling
// emacsMode.dispose();
});
</script>
</body>
</html>Please report any inconsistencies or missing key bindings.