Markdown Editor

Inkdrop's Markdown editor is built on CodeMirror. The editor instance a plugin interacts with is a CodeMirror EditorView

Getting the editor instance

The Environment exposes the active editor:

getActiveEditor() — returns the active EditorView, or null / undefined if none is active
getActiveEditorOrThrowError() — throws if no editor is active
ensureEditorLoaded(callback) — runs the callback with the editor: immediately if one is already loaded, otherwise once the next one loads

Everything CodeMirror offers is available on the view — see the CodeMirror reference.

Example

const view = env.getActiveEditorOrThrowError()

// Read the document
const doc = view.state.doc.toString()

// Move the cursor to the top
view.dispatch({ selection: { anchor: 0 } })

Reacting to the editor lifecycle

An editor is created when a note is opened and torn down when it goes away, so don't hold on to a view reference — subscribe instead:

ensureEditorLoaded(callback) — the usual entry point in activate()
onEditorLoad(callback) / onEditorUnload(callback) — fire on every subsequent load / unload; both return a Disposable

Example

import type { Environment } from '@inkdropapp/types'

class MyPlugin {
  activate(env: Environment) {
    env.ensureEditorLoaded(view => {
      // the editor is ready
    })
  }
}

Extending the editor

Behavior is added declaratively as CodeMirror extensions through commands:

editor:add-extension / editor:remove-extension — register a CodeMirror extension
editor:add-code-language / editor:remove-code-language — register a code-block language (LanguageDescription)
editor:add-markdown-extension / editor:remove-markdown-extension — extend the Markdown parser with a MarkdownExtension from @lezer/markdown

A registered extension is kept in the app state and applied to every editor, including ones created later — register once in activate(), remove in deactivate(). See Customize the editor for the full walkthrough.

Styling and keymaps

The editor's root element is .cm-editor. Use it for keymap and context menu selectors and for CSS. Syntax highlighting emits .tok-* classes inside .cm-editor — see Creating a theme.