@codingame/monaco-emacs

Emacs keybindings for monaco-editor

0.2.3
latest
npm

Version published: 3 years ago

Maintainers: 6

Created: 3 years ago

Source

This is a fork of the repository https://github.com/brijeshb42/monaco-emacs

monaco-emacs

Emacs key bindings for monaco-editor. Demo.

Installation

npm install @codingame/monaco-emacs

Usage

Webpack/Browserify

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

Browser

Add this script in your html - https://unpkg.com/@codingamemonaco-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 '@codingame/monaco-emacs';

unregisterKey('Tab');

Get all available mappings

import { getAllMappings } from '@codingame/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/@codingame/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.

FAQs

What is @codingame/monaco-emacs?

Is @codingame/monaco-emacs well maintained?

Package last updated on 21 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install