@replit/codemirror-minimap NPM

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)' } ]
}