monaco-unified
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

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:

  • 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 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

Showcase

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

License

MIT @ Remco Haszing

Package Sidebar

Install

npm i monaco-unified

Weekly Downloads

0

Version

1.2.0

License

MIT

Unpacked Size

16.4 kB

Total Files

9

Last publish

Collaborators

  • remcohaszing