@openctx/monaco-editor-extension

OpenCtx extension for Monaco Editor

The @openctx/monaco-editor-extension npm package implements a Monaco Editor extension that shows OpenCtx items on files.

Usage

Install it:

npm install @openctx/monaco-editor-extension @openctx/client

Set up an OpenCtx client:

import { createClient } from '@openctx/client'
import { createExtension, makeRange } from '@openctx/monaco-editor-extension'

// Set up a client.
const client = createClient({
  configuration: () =>
    Promise.resolve({
      enable: true,
      providers: {
        'https://openctx.org/npm/@openctx/provider-hello-world': true,
      },
    }),
  makeRange,
  logger: console.error,
})

// Now, get the editor object that refers to the Monaco editor you want to
// extend. Some code calls monaco.editor.create directly, and some code uses
// a wrapper around Monaco.
const editor: monaco.editor.IStandaloneCodeEditor = monaco.editor.create(/* ... */)

// Then create the extension and call it on the Monaco editor object.
const disposable = createExtension(client)(editor)

// Call disposable.dispose() when done to free resources.

Demo

Clone this repository and run pnpm run demo from this directory, then visit http://localhost:5901. See the demo/ dir for source code.

Development

• Source code
• Docs
• License: Apache 2.0