Deepword

Web editor used in Cloud Commander based on Monaco.

Features

• Syntax highlighting based on extension of file for over 30 languages.
• Configurable options (edit.json could be overriden by ~/.deepword.json) according to monaco editor options

Install

npm i deepword -g

Command line parameters

Usage: deepword [filename]

|Parameter |Operation |:----------------------|:-------------------------------------------- | -h, --help | display help and exit | -v, --version | output version information and exit

Hot keys

|Key |Operation |:----------------------|:-------------------------------------------- | Ctrl + s | save | Ctrl + f | find | Ctrl + h | replace | Ctrl + g | go to line | Ctrl + e | evaluate (JavaScript only supported)

For more details see Ace keyboard shortcuts.

Options

You can override monaco editor options in ~/.deepword.json.

Theme

To override theme use theme options in ~/.deepword.json. Themes can be:

• vs
• vs-dark

API

Deepword could be used as middleware for express. For this purpuse API could be used.

Server

deepword(options)

Middleware of deepword. Options could be omitted.

import {deepword} from 'deepword';
import express from 'express';

const app = express();

app.use(deepword({
    root: '/', // default
    diff: true, // default
    zip: true, // default
    dropbox: false, // optional
    dropboxToken: 'token', // optional
}));

app.listen(31_337);

deepword.listen(socket)

Could be used with socket.io to handle editor events with.

import {Server} from 'socket.io';

const socket = new Server(server);

deepword.listen(socket, {
    prefixSocket: '/deepword', // optional
    auth: (accept, reject) => (username, password) => {
        // optional
        accept();
    },
});

Client

Deepword uses Monaco on client side, so API is similar. All you need is put minimal html, css, and js into your page.

Minimal html:

<div class="edit" data-name="js-edit"></div>
<script src="/deepword/deepword.js"></script>

Minimal css:

html, body, .edit {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
}

.edit {
    overflow: hidden;
}

Minimal js:

deepword('[data-name="js-edit"]', (editor) => {
    editor.setValue('Hello deepword!');
});

For more information you could always look into html and bin directory.

Related

• Edward - web editor based on Ace.
• Dword - web editor based on Codemirror.

License

MIT