@replit/codemirror-minimap
v0.5.2
Published
<div style="display:flex"> <span style="margin-right:4px"> <a href="https://replit.com/github/replit/codemirror-minimap" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-minimap" alt="Run on Replit badge"
Downloads
13,789
Maintainers
Keywords
Readme
Minimap for Codemirror 6
Installation
bun i @replit/codemirror-minimap
Usage
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:
/**
* displayText?: "blocks" | "characters";
* Defaults to "characters"
*/
{
displayText: 'blocks'
}
eventHandlers
: attach event handlers to the minimap container element
/**
* eventHandlers?: {[event in keyof DOMEventMap]?: EventHandler<event>}
*/
{
eventHandlers: {
'contextmenu': (e) => onContextMenu(e)
}
}
showOverlay
: customize when the overlay showing the current viewport is visible
/**
* showOverlay?: "always" | "mouse-over";
* Defaults to "always"
*/
{
showOverlay: 'mouse-over'
}
gutters
: display a gutter on the left side of the minimap at specific lines
/**
* gutters?: Array<Record<number, string>>
* 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