@batchfy/codemirror-minimap 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# codemirror-minimap
+
+A minimap for CodeMirror 6.
+
+## Installation
+
+```
+npm i @batchfy/codemirror-minimap
+```
+
+## Usage
+
+```typescript
+import { basicSetup, EditorView } from "codemirror";
+import { showMinimap } from "@batchfy/codemirror-minimap";
+
+const create = (v: EditorView) => {
+    const dom = document.createElement("div");
+    return { dom };
+};
+
+const view = new EditorView({
+    doc: "",
+    extensions: [
+        basicSetup,
+        showMinimap.compute(["doc"], () => ({
+            create,
+
+            // All optional:
+            displayText: "characters", // or "blocks"
+            showOverlay: "always", // or "mouse-over"
+            autohide: false, // hide the minimap until hover
+            gutters: [{ 1: "#00FF00", 2: "green" }], // line number -> color
+            width: 120, // max width in px, defaults to 120
+            hideScrollbar: true, // hide the editor's native scrollbar, default true
+            eventHandlers: {
+                contextmenu: (e) => onContextMenu(e),
+            },
+        })),
+    ],
+    parent: document.querySelector("#editor"),
+});
+```
+
+Return `null` from `compute` to hide the minimap.
+
+## License
+
+MIT

package/dist/Config.d.ts

@@ -0,0 +1,63 @@
+import { Facet } from "@codemirror/state";
+import { DOMEventMap, EditorView } from "@codemirror/view";
+import { MinimapConfig } from "./index.js";
+import { Gutter } from "./Gutters.js";
+type EventHandler<event extends keyof DOMEventMap> = (e: DOMEventMap[event], v: EditorView) => void;
+type Options = {
+    /**
+     * Controls whether the minimap should be hidden on mouseout.
+     * Defaults to `false`.
+     */
+    autohide?: boolean;
+    enabled: boolean;
+    /**
+     * Determines how to render text. Defaults to `characters`.
+     */
+    displayText?: "blocks" | "characters";
+    /**
+     * Attach event handlers to the minimap container element.
+     */
+    eventHandlers?: {
+        [event in keyof DOMEventMap]?: EventHandler<event>;
+    };
+    /**
+     * The overlay shows the portion of the file currently in the viewport.
+     * Defaults to `always`.
+     */
+    showOverlay?: "always" | "mouse-over";
+    /**
+     * Enables a gutter to be drawn on the given line to the left
+     * of the minimap, with the given color. Accepts all valid CSS
+     * color values.
+     */
+    gutters?: Array<Gutter>;
+    /**
+     * Maximum width of the minimap in pixels. Defaults to `120`.
+     *
+     * This is an upper bound rather than a fixed size: when the editor is
+     * narrow the minimap shrinks proportionally so that it never dominates
+     * the viewport. A wider minimap shows more characters per line; it does
+     * not change the size the text is rendered at.
+     */
+    width?: number;
+    /**
+     * Hides the editor's native scrollbar while the minimap is shown, since
+     * the minimap and its viewport overlay already serve that role. Scrolling
+     * itself is unaffected -- only the scrollbar's appearance is suppressed.
+     * Defaults to `true`.
+     *
+     * Note that this hides the horizontal scrollbar too, as scrollbar
+     * visibility cannot be controlled per axis. Horizontal overflow stays
+     * discoverable through the minimap's shadow.
+     */
+    hideScrollbar?: boolean;
+};
+declare const Scale: {
+    readonly PixelMultiplier: 2;
+    readonly SizeRatio: 4;
+    readonly MaxWidth: 120;
+};
+declare const Config: Facet<MinimapConfig | null, Required<Options>>;
+export { Config, Scale };
+export type { Options };
+//# sourceMappingURL=Config.d.ts.map

package/dist/Config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["../src/Config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAiB,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,KAAK,YAAY,CAAC,KAAK,SAAS,MAAM,WAAW,IAAI,CACjD,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,EACrB,CAAC,EAAE,UAAU,KACZ,IAAI,CAAC;AAEV,KAAK,OAAO,GAAG;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE;SACX,KAAK,IAAI,MAAM,WAAW,CAAC,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC;KACrD,CAAC;IAEF;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAEtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAExB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,KAAK;;;;CAOD,CAAC;AAEX,QAAA,MAAM,MAAM,gDA8BV,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AACzB,YAAY,EAAE,OAAO,EAAE,CAAC"}

package/dist/Gutters.d.ts

@@ -0,0 +1,11 @@
+import { DrawContext } from "./types.js";
+declare const GUTTER_WIDTH = 4;
+type Line = number;
+type Color = string;
+export type Gutter = Record<Line, Color>;
+/**
+ * Draws a gutter to the canvas context for the given line number
+ */
+declare function drawLineGutter(gutter: Record<Line, Color>, ctx: DrawContext, lineNumber: number): void;
+export { GUTTER_WIDTH, drawLineGutter };
+//# sourceMappingURL=Gutters.d.ts.map

package/dist/Gutters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gutters.d.ts","sourceRoot":"","sources":["../src/Gutters.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,QAAA,MAAM,YAAY,IAAI,CAAC;AAEvB,KAAK,IAAI,GAAG,MAAM,CAAC;AACnB,KAAK,KAAK,GAAG,MAAM,CAAC;AACpB,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAEzC;;GAEG;AACH,iBAAS,cAAc,CACnB,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,EAC3B,GAAG,EAAE,WAAW,EAChB,UAAU,EAAE,MAAM,QAYrB;AAED,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/LinesState.d.ts

@@ -0,0 +1,14 @@
+import { StateField, Transaction } from "@codemirror/state";
+type Span = {
+    from: number;
+    to: number;
+    folded: boolean;
+};
+type Line = Array<Span>;
+type Lines = Array<Line>;
+declare const LinesState: StateField<Lines>;
+/** Returns if the folds have changed in this update */
+declare function foldsChanged(transactions: readonly Transaction[]): boolean;
+export { foldsChanged, LinesState };
+export type { Lines };
+//# sourceMappingURL=LinesState.d.ts.map

package/dist/LinesState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinesState.d.ts","sourceRoot":"","sources":["../src/LinesState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGzE,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAC1D,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACxB,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AAsEzB,QAAA,MAAM,UAAU,mBASd,CAAC;AAEH,uDAAuD;AACvD,iBAAS,YAAY,CAAC,YAAY,EAAE,SAAS,WAAW,EAAE,GAAG,OAAO,CAInE;AAED,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACpC,YAAY,EAAE,KAAK,EAAE,CAAC"}

package/dist/Overlay.d.ts

@@ -0,0 +1,2 @@
+export declare const Overlay: import("@codemirror/state").Extension[];
+//# sourceMappingURL=Overlay.d.ts.map

package/dist/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../src/Overlay.ts"],"names":[],"mappings":"AA+TA,eAAO,MAAM,OAAO,yCAAuB,CAAC"}

package/dist/diagnostics.d.ts

@@ -0,0 +1,29 @@
+import { EditorView, ViewUpdate } from "@codemirror/view";
+import { Diagnostic } from "@codemirror/lint";
+import { LineBasedState } from "./linebasedstate.js";
+import { DrawContext } from "./types.js";
+type Severity = Diagnostic["severity"];
+export declare class DiagnosticState extends LineBasedState<Severity> {
+    private count;
+    constructor(view: EditorView);
+    private shouldUpdate;
+    update(update: ViewUpdate): void;
+    drawLine(ctx: DrawContext, lineNumber: number): void;
+    /**
+     * Given a position and a set of line ranges, return
+     * the line number the position falls within
+     */
+    private findLine;
+    /**
+     * Colors from @codemirror/lint
+     * https://github.com/codemirror/lint/blob/e0671b43c02e72766ad1afe1579b7032fdcdb6c1/src/lint.ts#L597
+     */
+    private color;
+    /** Sorts severity from most to least severe */
+    private sort;
+    /** Assigns a score to severity, with most severe being the highest */
+    private score;
+}
+export declare function diagnostics(view: EditorView): DiagnosticState;
+export {};
+//# sourceMappingURL=diagnostics.d.ts.map

package/dist/diagnostics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagnostics.d.ts","sourceRoot":"","sources":["../src/diagnostics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACH,UAAU,EAIb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAIzC,KAAK,QAAQ,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;AAEvC,qBAAa,eAAgB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACzD,OAAO,CAAC,KAAK,CAAiC;gBAE3B,IAAI,EAAE,UAAU;IAInC,OAAO,CAAC,YAAY;IAiCb,MAAM,CAAC,MAAM,EAAE,UAAU;IA4BzB,QAAQ,CAAC,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM;IAgCpD;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAgBhB;;;OAGG;IACH,OAAO,CAAC,KAAK;IAQb,+CAA+C;IAC/C,OAAO,CAAC,IAAI;IAIZ,sEAAsE;IACtE,OAAO,CAAC,KAAK;CAahB;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,eAAe,CAE7D"}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { Facet } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { Options } from "./Config.js";
+export interface MinimapConfig extends Omit<Options, "enabled"> {
+    /**
+     * A function that creates the element that contains the minimap
+     */
+    create: (view: EditorView) => {
+        dom: HTMLElement;
+    };
+}
+/**
+ * Facet used to show a minimap in the right gutter of the editor using the
+ * provided configuration.
+ *
+ * If you return `null`, a minimap will not be shown.
+ */
+declare const showMinimap: Facet<MinimapConfig | null, MinimapConfig | null>;
+export { showMinimap };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA0B,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAU,OAAO,EAAS,MAAM,aAAa,CAAC;AAgVrD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;IAC3D;;OAEG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK;QAAE,GAAG,EAAE,WAAW,CAAA;KAAE,CAAC;CACtD;AAED;;;;;GAKG;AACH,QAAA,MAAM,WAAW,mDAaf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC"}