monaco-unified

Get warnings and error messages in monaco editor based on a unified processor.

Installation

npm install monaco-unified

Usage

First, create your own unified worker. Let’s create a remark worker for this example.

unified.worker.js:

import { initialize } from 'monaco-unified/worker'
import { remark } from 'remark'
import remarkLintHeadingIncrement from 'remark-lint-heading-increment'

initialize((vfile, configuration) => remark().use(remarkLintHeadingIncrement))

Next, configure monaco-unified in the main thread. Also add your worker in the monaco environment.

import * as monaco from 'monaco-editor'
import { configureMonacoUnified } from 'monaco-unified'

window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    switch (label) {
      case 'editorWorkerService':
        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
      case 'remark':
        return new Worker(new URL('unified.worker', import.meta.url))
      default:
        throw new Error(`Unknown label ${label}`)
    }
  }
}

const monacoUnified = configureMonacoUnified(monaco, {
  languageSelector: 'markdown',
  label: 'remark',
  configuration: {
    // This configuration will be passed to your worker.
  }
})

API

This package exposes two exports. One to setup the main logic, another to create a worker.

monaco-unified

configureMonacoUnified(monaco, options)

Configure monaco-unified.

Arguments:

• monaco: The monaco-editor module.
• options: An object with the following properties:
  • label: The label to use for the worker. This is used to match a worker in MonacoEnvironment (string).
  • languageSelector: The language ID or IDs to which to apply monaco-unified. (string | string[])
  • configuration: The configuration that will be sent to the worker. (optional)
  • formatting: By default monaco-unified supports formatting using unified. Set this to false to disable. (boolean, optional, default: true)
  • validation: By default monaco-unified supports validation using unified. Set this to false to disable.. (boolean, optional, default: true)

Returns: A disposable with the following additional properties:

• reconfigure(configuration): Update the configuration.

monaco-unified/worker

initialize(getProcessor)

Initialize the worker.

Arguments:

• getProcessor: A function which gets called with a VFile instance and the passed configuration, and should return a unified processor.

Related projects

• monaco-tailwindcss
• monaco-yaml

Showcase

• Motif uses monaco-unified to provide a rich editing experience for MDX files.

License

MIT @ Remco Haszing