Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remcohaszing/monaco-unified
Get warnings and error messages in monaco editor based on a unified processor.
https://github.com/remcohaszing/monaco-unified
monaco-editor rehype remark unifiedjs unist
Last synced: 7 days ago
JSON representation
Get warnings and error messages in monaco editor based on a unified processor.
- Host: GitHub
- URL: https://github.com/remcohaszing/monaco-unified
- Owner: remcohaszing
- License: mit
- Created: 2022-06-09T12:48:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-16T14:29:56.000Z (9 months ago)
- Last Synced: 2024-05-02T05:14:23.351Z (8 months ago)
- Topics: monaco-editor, rehype, remark, unifiedjs, unist
- Language: TypeScript
- Homepage: https://monaco-unified.js.org
- Size: 1.27 MB
- Stars: 18
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# monaco-unified
[](https://github.com/remcohaszing/monaco-unified/actions/workflows/ci.yaml)
[](https://www.npmjs.com/package/monaco-unified)
[](https://prettier.io)
Get warnings and error messages in monaco editor based on a unified processor.
## Installation
```sh
npm install monaco-unified
```
## Usage
First, create your own unified worker. Let’s create a remark worker for this example.
`unified.worker.js`:
```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.
```js
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](https://github.com/vfile/vfile)
instance and the passed configuration, and should return a unified processor.
## Related projects
- [`monaco-tailwindcss`](https://monaco-tailwindcss.js.org)
- [`monaco-yaml`](https://monaco-yaml.js.org)
## Showcase
- [Motif](https://motif.land) uses `monaco-unified` to provide a rich editing experience for MDX
files.
## License
[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)