Customize the editor

Inkdrop's text editor is built on top of CodeMirror which is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

You can access the instance of CodeMirror via MDE like this:


You can also get a CodeMirror class object by doing require('codemirror').

How to install addons to CodeMirror

CodeMirror comes with a bunch of addons available to use. But you can't require them like require('codemirror/addons/fold/foldcode.js') because it is not in the search path. To do so, add a path to the app's node_modules to your require statements as following:

const app = require('electron')
const modulePath = app.getAppPath() + '/node_modules/'
require(modulePath + 'codemirror/addon/fold/foldcode.js')
require(modulePath + 'codemirror/addon/fold/foldgutter.js')
require(modulePath + 'codemirror/addon/fold/markdown-fold.js')

When to customize the editor

If you are building a plugin which changes CodeMirror's behaviors, you have to subscribe events to know when the editor is ready. global.inkdrop provides two methods to subscribe events on the editor. You can use them like so:

global.inkdrop.onEditorLoad(editor => console.log('Editor loaded'))
global.inkdrop.onEditorUnload(() => console.log('Editor unloaded'))

See also this page for more detail about the event subscription.

Can you help us improve the docs? 🙏

The source of these docs is here on GitHub. If you see a way these docs can be improved, please fork us!