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