Minimap for Codemirror 6

Installation

``
bun i @replit/codemirror-minimap
`

Usage

`typescript
import { basicSetup, EditorView } from 'codemirror';
import { showMinimap } from "@replit/codemirror-minimap"

let create = (v: EditorView) => {
const dom = document.createElement('div');
return { dom }
}

let view = new EditorView({
doc: "",
extensions: [
basicSetup,
showMinimap.compute(['doc'], (state) => {
return {
create,
/ optional /
displayText: 'blocks',
showOverlay: 'always',
gutters: [ { 1: '#00FF00', 2: '#00FF00' } ],
}
}),
],
parent: document.querySelector('#editor'),
})
`

Configuration Options

The minimap extension exposes a few configuration options:

displayText: customize how the editor text is displayed:

`typescript
/**
* displayText?: "blocks" | "characters";
* Defaults to "characters"
*/
{
displayText: 'blocks'
}
`

eventHandlers: attach event handlers to the minimap container element

`typescript
/**
* eventHandlers?: {[event in keyof DOMEventMap]?: EventHandler}
*/
{
eventHandlers: {
'contextmenu': (e) => onContextMenu(e)
}
}
`

showOverlay: customize when the overlay showing the current viewport is visible

`typescript
/**
* showOverlay?: "always" | "mouse-over";
* Defaults to "always"
*/
{
showOverlay: 'mouse-over'
}
`

gutters: display a gutter on the left side of the minimap at specific lines

`typescript
/**
* gutters?: Array>
* Where number is line number, and string is a color
*/
{
gutters: [ { 1: '#00FF00', 2: 'green', 3: 'rgb(0, 100, 50)' } ]
}
`

Build and Publish

To build from source:

`
bun build
`

To publish a new version to NPM registry:

`
npm publish
``