Skip to content

brijeshb42/monaco-emacs

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Unregister default keys

import { unregisterKey } from 'monaco-emacs';

unregisterKey('Tab');

Get all available mappings

import { getAllMappings } from 'monaco-emacs';

console.log(getAllMappings());

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.