OpenCtx extension for CodeMirror
The @openctx/codemirror-extension
npm package implements a CodeMirror extension that shows OpenCtx items in the editor.
Check out the OpenCtx playground for a live example of this extension.
Usage
Install it:
npm install @openctx/codemirror-extension @openctx/client
Set up an OpenCtx client and fetch items:
import { createClient } from '@openctx/client'// Set up a client.const client = createClient({ configuration: () => Promise.resolve({ enable: true, providers: { 'https://openctx.org/npm/@openctx/provider-hello-world': true, }, }), makeRange: r => r, logger: console.error,})// Fetch items for the resource.const items = await client.items({ uri: 'file:///foo.js', content: 'my file\nhello\nworld' })
Then register the extension with CodeMirror.
If you're using React, the useOpenCtxExtension
hook makes it easy:
import { useOpenCtxExtension } from '@openctx/codemirror-extension'function MyComponent() { // ... // A helpful React hook if using React. const octxExtension = useOpenCtxExtension({ visibility: true, items, }) // Pass `octxExtension` to CodeMirror as an extension. // ...}
Otherwise, set up the extension manually. If you're using React, you can get UI components from @openctx/ui-react
; otherwise, use @openctx/ui-standalone
.
import type { Extension } from '@codemirror/state'import { openCtxData, showOpenCtxDecorations } from '@openctx/codemirror-extension'import { ChipList, IndentationWrapper } from '@openctx/ui-react'const octxExtension: Extension = [ openCtxData(items), showOpenCtxDecorations({ visibility: true, createDecoration(container, { indent, items }) { const root = createRoot(container) root.render( <IndentationWrapper indent={indent}> <ChipList items={items} chipClassName="octx-chip" popoverClassName="octx-chip-popover" /> </IndentationWrapper> ) return { destroy() { root.unmount() }, } }, }),]// Pass `octxExtension` to CodeMirror as an extension.
Demo
The OpenCtx playground is a live demo of this extension.
You can also clone this repository and run pnpm run demo
from this directory, then visit http://localhost:5902. See the demo/
dir for source code.
Development
- Source code
- Docs
- License: Apache 2.0