CodeMirror 6 Parinfer extension

A CodeMirror 6 extension that integrates Parinfer, which facilitates structural editing of Lisp code (Clojure code in particular) by indentation.

By default smartMode is applied, but both indentMode and parenMode can be selected as well.

Initially I used ClojureScript on Scittle to explore what was needed to get the integration to work, but the actual extension is written in TypeScript and available as ES module (with the parinfer.js dependency inlined for more convenient downstream bundling) from npmjs.com.

Try it at the demo page!

Please let me know if you have a use for this or have any feedback!

Basic usage

import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { parinferExtension } from '@jurjanpaul/codemirror6-parinfer';

const doc = `
(defn foo []
  [:bar \"baz\"])`

new EditorView({
  state: EditorState.create({
    doc,
    extensions: [basicSetup, parinferExtension()],
  }),
  parent: document.getElementById("editor");
});

API

@jurjanpaul/codemirror6-parinfer TypeScript module

parinferExtension(initialConfig?: ParinferExtensionConfig): Extension

Main entry point: initialises the extension with optional configuration. By default Parinfer is enabled in "smart" mode.

type ParinferExtensionConfig = {
  enabled?: boolean
  mode?: ParinferMode
}

type ParinferMode = "smart" | "indent" | "paren"

configField: StateField<ParinferExtensionConfig>

CodeMirror state field with the current extension configuration.

setConfigEffect: StateEffectType<ParinferExtensionConfig>

CodeMirror state effect that can be used in a transaction to update the extension's configuration.

configureParinfer(view: EditorView, config: ParinferExtensionConfig)

Convenience wrapper around the setConfigEffect state effect.

switchMode(view: EditorView, mode: ParinferMode)

Speaks for itself. Convenience wrapper for configureParinfer.

disableParinfer(view: EditorView)

Speaks for itself. Convenience wrapper for configureParinfer.

enableParinfer(view: EditorView)

Speaks for itself. Convenience wrapper for configureParinfer.

Out of scope (at least for the foreseeable future)

• visualising/styling the Paren Trail that parinfer includes in its result;
• visualising the tabStops that parinfer includes in its result;
• smart indentation (does not really belong to Parinfer, but missed anyway, because outside the legacy Clojure mode there is no support for CodeMirror 6 yet).

Motivation

I had previously used CodeMirror 5 with Parinfer in the Away from Preferred Editor ClojureScript Playground and hoped to upgrade to CodeMirror 6 as soon as somebody would make a Parinfer extension available.

For quite a while, as a Clojure programmer I was simply too intimidated by the statically typed CodeMirror 6 module architecture to even consider taking on that task myself next to a few other side projects. But still not finding one some years after the CodeMirror 6 release, I finally found the time and motivation to take up the challenge, starting with studying TypeScript, etc.

Implementation

Some observations w.r.t. the implementation can be found here.