Minimap for Codemirror 6

Installation

pnpm i @replit/codemirror-minimap

Usage

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

let view = new EditorView({
  doc: "",
  extensions: [
    basicSetup,
    minimap(),
  ],
  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"
 */
minimap({
    displayText: 'blocks'
})

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

/**
 * showOverlay?: "always" | "mouse-over";
 * Defaults to "always"
 */
minimap({
    showOverlay: 'mouse-over'
})

Build and Publish

To build from source:

pnpm build

To publish a new version to NPM registry:

pnpm publish