Emacs keybindings for monaco-editor
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
LICENSE
README.md
index.html
package.json
tsconfig.json
webpack.config.js
yarn.lock

README.md

monaco-emacs

npm version

Emacs key bindings for monaco-editor. Demo.

Installation

npm install monaco-emacs

Usage

Webpack/Browserify

import * as monaco from 'monaco-editor';
import { EmacsExtension } from 'monaco-emacs';

Browser

  • Add this script in your html - https://unpkg.com/monaco-emacs/dist/monaco-emacs.js.
  • The extension will be available as MonacoEmacs on window
const monaco = window.monaco;
const { EmacsExtension } = window.MonacoEmacs;

Code

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();

AMD

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.