unified

Project: remcohaszing/monaco-unified

Package: monaco-unified@1.2.0

  1. Get warnings and error messages in monaco editor based on a unified processor.
  1. remark 213
  2. unified 180
  3. markdown 153
  4. html 123
  5. rehype 91
  6. mdx 39
  7. unifiedjs 5

monaco-unified

ci npm badge prettier

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:

Returns: A disposable with the following additional properties:

monaco-unified/worker

initialize(getProcessor)

Initialize the worker.

Arguments:

Showcase

License

MIT © Remco Haszing