https://github.com/replit/codemirror-minimap
Minimap extension for Codemirror 6
https://github.com/replit/codemirror-minimap
Last synced: 4 months ago
JSON representation
Minimap extension for Codemirror 6
- Host: GitHub
- URL: https://github.com/replit/codemirror-minimap
- Owner: replit
- Created: 2023-03-23T20:38:22.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-14T16:46:26.000Z (almost 2 years ago)
- Last Synced: 2025-06-30T23:43:15.678Z (8 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@replit/codemirror-minimap
- Size: 588 KB
- Stars: 53
- Watchers: 29
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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
```