@codemirror/lint 0.18.6 → 0.19.3

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.19.3 (2021-11-09)
+
+### New features
+
+Export a function `lintGutter` which returns an extension that installs a gutter marking lines with diagnostics.
+
+The package now exports the effect used to update the diagnostics (`setDiagnosticsEffect`).
+
+## 0.19.2 (2021-09-29)
+
+### Bug fixes
+
+Fix a bug where reconfiguring the lint source didn't restart linting.
+
+## 0.19.1 (2021-09-17)
+
+### Bug fixes
+
+Prevent decorations that cover just a line break from being invisible by showing a widget instead of range for them.
+
+### New features
+
+The `diagnosticCount` method can now be used to determine whether there are active diagnostics.
+
+## 0.19.0 (2021-08-11)
+
+### Breaking changes
+
+Update dependencies to 0.19.0
+
 ## 0.18.6 (2021-08-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -6,6 +6,8 @@ var view = require('@codemirror/view');
 var state = require('@codemirror/state');
 var tooltip = require('@codemirror/tooltip');
 var panel = require('@codemirror/panel');
+var gutter = require('@codemirror/gutter');
+var rangeset = require('@codemirror/rangeset');
 var elt = require('crelt');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,17 +27,18 @@ class LintState {
         this.panel = panel;
         this.selected = selected;
     }
-    static init(diagnostics, panel) {
+    static init(diagnostics, panel, state) {
         let ranges = view.Decoration.set(diagnostics.map((d) => {
-            return d.from < d.to
-                ? view.Decoration.mark({
-                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
-                    diagnostic: d
-                }).range(d.from, d.to)
-                : view.Decoration.widget({
+            // For zero-length ranges or ranges covering only a line break, create a widget
+            return d.from == d.to || (d.from == d.to - 1 && state.doc.lineAt(d.from).to == d.from)
+                ? view.Decoration.widget({
                     widget: new DiagnosticWidget(d),
                     diagnostic: d
-                }).range(d.from);
+                }).range(d.from)
+                : view.Decoration.mark({
+                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
+                    diagnostic: d
+                }).range(d.from, d.to);
         }), true);
         return new LintState(ranges, panel, findDiagnostic(ranges));
     }
@@ -50,9 +53,9 @@ function findDiagnostic(diagnostics, diagnostic = null, after = 0) {
     });
     return found;
 }
-function maybeEnableLint(state$1, effects, getState) {
+function maybeEnableLint(state$1, effects) {
     return state$1.field(lintState, false) ? effects : effects.concat(state.StateEffect.appendConfig.of([
-        lintState.init(getState),
+        lintState,
         view.EditorView.decorations.compute([lintState], state => {
             let { selected, panel } = state.field(lintState);
             return !selected || !panel || selected.from == selected.to ? view.Decoration.none : view.Decoration.set([
@@ -65,13 +68,18 @@ function maybeEnableLint(state$1, effects, getState) {
 }
 /**
 Returns a transaction spec which updates the current set of
-diagnostics.
+diagnostics, and enables the lint extension if if wasn't already
+active.
 */
 function setDiagnostics(state, diagnostics) {
     return {
-        effects: maybeEnableLint(state, [setDiagnosticsEffect.of(diagnostics)], () => LintState.init(diagnostics, null))
+        effects: maybeEnableLint(state, [setDiagnosticsEffect.of(diagnostics)])
     };
 }
+/**
+The state effect that updates the set of active diagnostics. Can
+be useful when writing an extension that needs to track these.
+*/
 const setDiagnosticsEffect = state.StateEffect.define();
 const togglePanel = state.StateEffect.define();
 const movePanelSelection = state.StateEffect.define();
@@ -90,7 +98,7 @@ const lintState = state.StateField.define({
         }
         for (let effect of tr.effects) {
             if (effect.is(setDiagnosticsEffect)) {
-                value = LintState.init(effect.value, value.panel);
+                value = LintState.init(effect.value, value.panel, tr.state);
             }
             else if (effect.is(togglePanel)) {
                 value = new LintState(value.diagnostics, effect.value ? LintPanel.open : null, value.selected);
@@ -104,6 +112,13 @@ const lintState = state.StateField.define({
     provide: f => [panel.showPanel.from(f, val => val.panel),
         view.EditorView.decorations.from(f, s => s.diagnostics)]
 });
+/**
+Returns the number of active lint diagnostics in the given state.
+*/
+function diagnosticCount(state) {
+    let lint = state.field(lintState, false);
+    return lint ? lint.diagnostics.size : 0;
+}
 const activeMark = view.Decoration.mark({ class: "cm-lintRange cm-lintRange-active" });
 function lintTooltip(view, pos, side) {
     let { diagnostics } = view.state.field(lintState);
@@ -123,17 +138,20 @@ function lintTooltip(view, pos, side) {
         end: stackEnd,
         above: view.state.doc.lineAt(stackStart).to < stackEnd,
         create() {
-            return { dom: elt__default['default']("ul", { class: "cm-tooltip-lint" }, found.map(d => renderDiagnostic(view, d, false))) };
+            return { dom: diagnosticsTooltip(view, found) };
         }
     };
 }
+function diagnosticsTooltip(view, diagnostics) {
+    return elt__default['default']("ul", { class: "cm-tooltip-lint" }, diagnostics.map(d => renderDiagnostic(view, d, false)));
+}
 /**
 Command to open and focus the lint panel.
 */
 const openLintPanel = (view) => {
     let field = view.state.field(lintState, false);
     if (!field || !field.panel)
-        view.dispatch({ effects: maybeEnableLint(view.state, [togglePanel.of(true)], () => LintState.init([], LintPanel.open)) });
+        view.dispatch({ effects: maybeEnableLint(view.state, [togglePanel.of(true)]) });
     let panel$1 = panel.getPanel(view, LintPanel.open);
     if (panel$1)
         panel$1.dom.querySelector(".cm-panel-lint ul").focus();
@@ -203,12 +221,12 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
         }
     }
     update(update) {
-        if (update.docChanged) {
-            let { delay } = update.state.facet(lintSource);
-            this.lintTime = Date.now() + delay;
+        let source = update.state.facet(lintSource);
+        if (update.docChanged || source != update.startState.facet(lintSource)) {
+            this.lintTime = Date.now() + source.delay;
             if (!this.set) {
                 this.set = true;
-                this.timeout = setTimeout(this.run, delay);
+                this.timeout = setTimeout(this.run, source.delay);
             }
         }
     }
@@ -276,6 +294,7 @@ function renderDiagnostic(view, diagnostic, inPanel) {
             elt__default['default']("u", name.slice(keyIndex, keyIndex + 1)),
             name.slice(keyIndex + 1)];
         return elt__default['default']("button", {
+            type: "button",
             class: "cm-diagnosticAction",
             onclick: click,
             onmousedown: click,
@@ -354,6 +373,7 @@ class LintPanel {
             onclick
         });
         this.dom = elt__default['default']("div", { class: "cm-panel-lint" }, this.list, elt__default['default']("button", {
+            type: "button",
             name: "close",
             "aria-label": this.view.state.phrase("close"),
             onclick: () => closeLintPanel(this.view)
@@ -468,13 +488,11 @@ class LintPanel {
     }
     static open(view) { return new LintPanel(view); }
 }
+function svg(content, attrs = `viewBox="0 0 40 40"`) {
+    return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" ${attrs}>${encodeURIComponent(content)}</svg>')`;
+}
 function underline(color) {
-    if (typeof btoa != "function")
-        return "none";
-    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
-    <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>
-  </svg>`;
-    return `url('data:image/svg+xml;base64,${btoa(svg)}')`;
+    return svg(`<path d="m0 2.5 l2 -1.5 l1 0 l2 1.5 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>`, `width="6" height="3"`);
 }
 const baseTheme = view.EditorView.baseTheme({
     ".cm-diagnostic": {
@@ -501,7 +519,8 @@ const baseTheme = view.EditorView.baseTheme({
     },
     ".cm-lintRange": {
         backgroundPosition: "left bottom",
-        backgroundRepeat: "repeat-x"
+        backgroundRepeat: "repeat-x",
+        paddingBottom: "0.7px",
     },
     ".cm-lintRange-error": { backgroundImage: underline("#d11") },
     ".cm-lintRange-warning": { backgroundImage: underline("orange") },
@@ -560,11 +579,146 @@ const baseTheme = view.EditorView.baseTheme({
         }
     }
 });
+class LintGutterMarker extends gutter.GutterMarker {
+    constructor(diagnostics) {
+        super();
+        this.diagnostics = diagnostics;
+        this.severity = diagnostics.reduce((max, d) => {
+            let s = d.severity;
+            return s == "error" || s == "warning" && max == "info" ? s : max;
+        }, "info");
+    }
+    toDOM(view) {
+        let elt = document.createElement("div");
+        elt.className = "cm-lint-marker cm-lint-marker-" + this.severity;
+        elt.onmouseover = () => gutterMarkerMouseOver(view, elt, this.diagnostics);
+        return elt;
+    }
+}
+function trackHoverOn(view, marker) {
+    let mousemove = (event) => {
+        let rect = marker.getBoundingClientRect();
+        if (event.clientX > rect.left - 10 /* Margin */ && event.clientX < rect.right + 10 /* Margin */ &&
+            event.clientY > rect.top - 10 /* Margin */ && event.clientY < rect.bottom + 10 /* Margin */)
+            return;
+        for (let target = event.target; target; target = target.parentNode) {
+            if (target.nodeType == 1 && target.classList.contains("cm-tooltip-lint"))
+                return;
+        }
+        window.removeEventListener("mousemove", mousemove);
+        if (view.state.field(lintGutterTooltip))
+            view.dispatch({ effects: setLintGutterTooltip.of(null) });
+    };
+    window.addEventListener("mousemove", mousemove);
+}
+function gutterMarkerMouseOver(view, marker, diagnostics) {
+    function hovered() {
+        let line = view.visualLineAtHeight(marker.getBoundingClientRect().top + 5);
+        const linePos = view.coordsAtPos(line.from), markerRect = marker.getBoundingClientRect();
+        if (linePos) {
+            view.dispatch({ effects: setLintGutterTooltip.of({
+                    pos: line.from,
+                    above: false,
+                    create() {
+                        return {
+                            dom: diagnosticsTooltip(view, diagnostics),
+                            offset: { x: markerRect.left - linePos.left, y: 0 }
+                        };
+                    }
+                }) });
+        }
+        marker.onmouseout = marker.onmousemove = null;
+        trackHoverOn(view, marker);
+    }
+    let hoverTimeout = setTimeout(hovered, 600 /* Time */);
+    marker.onmouseout = () => {
+        clearTimeout(hoverTimeout);
+        marker.onmouseout = marker.onmousemove = null;
+    };
+    marker.onmousemove = () => {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = setTimeout(hovered, 600 /* Time */);
+    };
+}
+function markersForDiagnostics(doc, diagnostics) {
+    let byLine = Object.create(null);
+    for (let diagnostic of diagnostics) {
+        let line = doc.lineAt(diagnostic.from);
+        (byLine[line.from] || (byLine[line.from] = [])).push(diagnostic);
+    }
+    let markers = [];
+    for (let line in byLine) {
+        markers.push(new LintGutterMarker(byLine[line]).range(+line));
+    }
+    return rangeset.RangeSet.of(markers, true);
+}
+const lintGutterExtension = gutter.gutter({
+    class: "cm-gutter-lint",
+    markers: view => view.state.field(lintGutterMarkers),
+});
+const lintGutterMarkers = state.StateField.define({
+    create() {
+        return rangeset.RangeSet.empty;
+    },
+    update(markers, tr) {
+        markers = markers.map(tr.changes);
+        for (let effect of tr.effects)
+            if (effect.is(setDiagnosticsEffect)) {
+                markers = markersForDiagnostics(tr.state.doc, effect.value);
+            }
+        return markers;
+    }
+});
+const setLintGutterTooltip = state.StateEffect.define();
+const lintGutterTooltip = state.StateField.define({
+    create() { return null; },
+    update(tooltip, tr) {
+        if (tooltip && tr.docChanged)
+            tooltip = Object.assign(Object.assign({}, tooltip), { pos: tr.changes.mapPos(tooltip.pos) });
+        return tr.effects.reduce((t, e) => e.is(setLintGutterTooltip) ? e.value : t, tooltip);
+    },
+    provide: field => tooltip.showTooltip.from(field)
+});
+const lintGutterTheme = view.EditorView.baseTheme({
+    ".cm-gutter-lint": {
+        width: "1.4em",
+        "& .cm-gutterElement": {
+            padding: "0 .2em",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+        }
+    },
+    ".cm-lint-marker": {
+        width: "1em",
+        height: "1em",
+    },
+    ".cm-lint-marker-info": {
+        content: svg(`<path fill="#aaf" stroke="#77e" stroke-width="6" stroke-linejoin="round" d="M5 5L35 5L35 35L5 35Z"/>`)
+    },
+    ".cm-lint-marker-warning": {
+        content: svg(`<path fill="#fe8" stroke="#fd7" stroke-width="6" stroke-linejoin="round" d="M20 6L37 35L3 35Z"/>`),
+    },
+    ".cm-lint-marker-error:before": {
+        content: svg(`<circle cx="20" cy="20" r="15" fill="#f87" stroke="#f43" stroke-width="6"/>`)
+    },
+});
+/**
+Returns an extension that installs a gutter showing markers for
+each line that has diagnostics, which can be hovered over to see
+the diagnostics.
+*/
+function lintGutter() {
+    return [lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
+}
 
 exports.closeLintPanel = closeLintPanel;
+exports.diagnosticCount = diagnosticCount;
 exports.forceLinting = forceLinting;
+exports.lintGutter = lintGutter;
 exports.lintKeymap = lintKeymap;
 exports.linter = linter;
 exports.nextDiagnostic = nextDiagnostic;
 exports.openLintPanel = openLintPanel;
 exports.setDiagnostics = setDiagnostics;
+exports.setDiagnosticsEffect = setDiagnosticsEffect;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import { EditorView, Command, KeyBinding } from '@codemirror/view';
+import * as _codemirror_state from '@codemirror/state';
 import { EditorState, TransactionSpec, Extension } from '@codemirror/state';
+import { EditorView, Command, KeyBinding } from '@codemirror/view';
 
 /**
 Describes a problem or hint for a piece of code.
@@ -52,10 +53,20 @@ interface Action {
 }
 /**
 Returns a transaction spec which updates the current set of
-diagnostics.
+diagnostics, and enables the lint extension if if wasn't already
+active.
 */
 declare function setDiagnostics(state: EditorState, diagnostics: readonly Diagnostic[]): TransactionSpec;
 /**
+The state effect that updates the set of active diagnostics. Can
+be useful when writing an extension that needs to track these.
+*/
+declare const setDiagnosticsEffect: _codemirror_state.StateEffectType<readonly Diagnostic[]>;
+/**
+Returns the number of active lint diagnostics in the given state.
+*/
+declare function diagnosticCount(state: EditorState): number;
+/**
 Command to open and focus the lint panel.
 */
 declare const openLintPanel: Command;
@@ -92,5 +103,11 @@ Forces any linters [configured](https://codemirror.net/6/docs/ref/#lint.linter)
 editor is idle to run right away.
 */
 declare function forceLinting(view: EditorView): void;
+/**
+Returns an extension that installs a gutter showing markers for
+each line that has diagnostics, which can be hovered over to see
+the diagnostics.
+*/
+declare function lintGutter(): Extension;
 
-export { Action, Diagnostic, closeLintPanel, forceLinting, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics };
+export { Action, Diagnostic, closeLintPanel, diagnosticCount, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics, setDiagnosticsEffect };

package/dist/index.js

@@ -1,7 +1,9 @@
-import { EditorView, Decoration, ViewPlugin, logException, WidgetType } from '@codemirror/view';
+import { Decoration, EditorView, ViewPlugin, logException, WidgetType } from '@codemirror/view';
 import { StateEffect, StateField, Facet } from '@codemirror/state';
-import { hoverTooltip } from '@codemirror/tooltip';
+import { hoverTooltip, showTooltip } from '@codemirror/tooltip';
 import { showPanel, getPanel } from '@codemirror/panel';
+import { gutter, GutterMarker } from '@codemirror/gutter';
+import { RangeSet } from '@codemirror/rangeset';
 import elt from 'crelt';
 
 class SelectedDiagnostic {
@@ -17,17 +19,18 @@ class LintState {
         this.panel = panel;
         this.selected = selected;
     }
-    static init(diagnostics, panel) {
+    static init(diagnostics, panel, state) {
         let ranges = Decoration.set(diagnostics.map((d) => {
-            return d.from < d.to
-                ? Decoration.mark({
-                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
-                    diagnostic: d
-                }).range(d.from, d.to)
-                : Decoration.widget({
+            // For zero-length ranges or ranges covering only a line break, create a widget
+            return d.from == d.to || (d.from == d.to - 1 && state.doc.lineAt(d.from).to == d.from)
+                ? Decoration.widget({
                     widget: new DiagnosticWidget(d),
                     diagnostic: d
-                }).range(d.from);
+                }).range(d.from)
+                : Decoration.mark({
+                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
+                    diagnostic: d
+                }).range(d.from, d.to);
         }), true);
         return new LintState(ranges, panel, findDiagnostic(ranges));
     }
@@ -42,9 +45,9 @@ function findDiagnostic(diagnostics, diagnostic = null, after = 0) {
     });
     return found;
 }
-function maybeEnableLint(state, effects, getState) {
+function maybeEnableLint(state, effects) {
     return state.field(lintState, false) ? effects : effects.concat(StateEffect.appendConfig.of([
-        lintState.init(getState),
+        lintState,
         EditorView.decorations.compute([lintState], state => {
             let { selected, panel } = state.field(lintState);
             return !selected || !panel || selected.from == selected.to ? Decoration.none : Decoration.set([
@@ -57,13 +60,18 @@ function maybeEnableLint(state, effects, getState) {
 }
 /**
 Returns a transaction spec which updates the current set of
-diagnostics.
+diagnostics, and enables the lint extension if if wasn't already
+active.
 */
 function setDiagnostics(state, diagnostics) {
     return {
-        effects: maybeEnableLint(state, [setDiagnosticsEffect.of(diagnostics)], () => LintState.init(diagnostics, null))
+        effects: maybeEnableLint(state, [setDiagnosticsEffect.of(diagnostics)])
     };
 }
+/**
+The state effect that updates the set of active diagnostics. Can
+be useful when writing an extension that needs to track these.
+*/
 const setDiagnosticsEffect = /*@__PURE__*/StateEffect.define();
 const togglePanel = /*@__PURE__*/StateEffect.define();
 const movePanelSelection = /*@__PURE__*/StateEffect.define();
@@ -82,7 +90,7 @@ const lintState = /*@__PURE__*/StateField.define({
         }
         for (let effect of tr.effects) {
             if (effect.is(setDiagnosticsEffect)) {
-                value = LintState.init(effect.value, value.panel);
+                value = LintState.init(effect.value, value.panel, tr.state);
             }
             else if (effect.is(togglePanel)) {
                 value = new LintState(value.diagnostics, effect.value ? LintPanel.open : null, value.selected);
@@ -96,6 +104,13 @@ const lintState = /*@__PURE__*/StateField.define({
     provide: f => [showPanel.from(f, val => val.panel),
         EditorView.decorations.from(f, s => s.diagnostics)]
 });
+/**
+Returns the number of active lint diagnostics in the given state.
+*/
+function diagnosticCount(state) {
+    let lint = state.field(lintState, false);
+    return lint ? lint.diagnostics.size : 0;
+}
 const activeMark = /*@__PURE__*/Decoration.mark({ class: "cm-lintRange cm-lintRange-active" });
 function lintTooltip(view, pos, side) {
     let { diagnostics } = view.state.field(lintState);
@@ -115,17 +130,20 @@ function lintTooltip(view, pos, side) {
         end: stackEnd,
         above: view.state.doc.lineAt(stackStart).to < stackEnd,
         create() {
-            return { dom: elt("ul", { class: "cm-tooltip-lint" }, found.map(d => renderDiagnostic(view, d, false))) };
+            return { dom: diagnosticsTooltip(view, found) };
         }
     };
 }
+function diagnosticsTooltip(view, diagnostics) {
+    return elt("ul", { class: "cm-tooltip-lint" }, diagnostics.map(d => renderDiagnostic(view, d, false)));
+}
 /**
 Command to open and focus the lint panel.
 */
 const openLintPanel = (view) => {
     let field = view.state.field(lintState, false);
     if (!field || !field.panel)
-        view.dispatch({ effects: maybeEnableLint(view.state, [togglePanel.of(true)], () => LintState.init([], LintPanel.open)) });
+        view.dispatch({ effects: maybeEnableLint(view.state, [togglePanel.of(true)]) });
     let panel = getPanel(view, LintPanel.open);
     if (panel)
         panel.dom.querySelector(".cm-panel-lint ul").focus();
@@ -195,12 +213,12 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
     }
     update(update) {
-        if (update.docChanged) {
-            let { delay } = update.state.facet(lintSource);
-            this.lintTime = Date.now() + delay;
+        let source = update.state.facet(lintSource);
+        if (update.docChanged || source != update.startState.facet(lintSource)) {
+            this.lintTime = Date.now() + source.delay;
             if (!this.set) {
                 this.set = true;
-                this.timeout = setTimeout(this.run, delay);
+                this.timeout = setTimeout(this.run, source.delay);
             }
         }
     }
@@ -268,6 +286,7 @@ function renderDiagnostic(view, diagnostic, inPanel) {
             elt("u", name.slice(keyIndex, keyIndex + 1)),
             name.slice(keyIndex + 1)];
         return elt("button", {
+            type: "button",
             class: "cm-diagnosticAction",
             onclick: click,
             onmousedown: click,
@@ -346,6 +365,7 @@ class LintPanel {
             onclick
         });
         this.dom = elt("div", { class: "cm-panel-lint" }, this.list, elt("button", {
+            type: "button",
             name: "close",
             "aria-label": this.view.state.phrase("close"),
             onclick: () => closeLintPanel(this.view)
@@ -460,13 +480,11 @@ class LintPanel {
     }
     static open(view) { return new LintPanel(view); }
 }
+function svg(content, attrs = `viewBox="0 0 40 40"`) {
+    return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" ${attrs}>${encodeURIComponent(content)}</svg>')`;
+}
 function underline(color) {
-    if (typeof btoa != "function")
-        return "none";
-    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
-    <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>
-  </svg>`;
-    return `url('data:image/svg+xml;base64,${btoa(svg)}')`;
+    return svg(`<path d="m0 2.5 l2 -1.5 l1 0 l2 1.5 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>`, `width="6" height="3"`);
 }
 const baseTheme = /*@__PURE__*/EditorView.baseTheme({
     ".cm-diagnostic": {
@@ -493,7 +511,8 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
     },
     ".cm-lintRange": {
         backgroundPosition: "left bottom",
-        backgroundRepeat: "repeat-x"
+        backgroundRepeat: "repeat-x",
+        paddingBottom: "0.7px",
     },
     ".cm-lintRange-error": { backgroundImage: /*@__PURE__*/underline("#d11") },
     ".cm-lintRange-warning": { backgroundImage: /*@__PURE__*/underline("orange") },
@@ -552,5 +571,137 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         }
     }
 });
+class LintGutterMarker extends GutterMarker {
+    constructor(diagnostics) {
+        super();
+        this.diagnostics = diagnostics;
+        this.severity = diagnostics.reduce((max, d) => {
+            let s = d.severity;
+            return s == "error" || s == "warning" && max == "info" ? s : max;
+        }, "info");
+    }
+    toDOM(view) {
+        let elt = document.createElement("div");
+        elt.className = "cm-lint-marker cm-lint-marker-" + this.severity;
+        elt.onmouseover = () => gutterMarkerMouseOver(view, elt, this.diagnostics);
+        return elt;
+    }
+}
+function trackHoverOn(view, marker) {
+    let mousemove = (event) => {
+        let rect = marker.getBoundingClientRect();
+        if (event.clientX > rect.left - 10 /* Margin */ && event.clientX < rect.right + 10 /* Margin */ &&
+            event.clientY > rect.top - 10 /* Margin */ && event.clientY < rect.bottom + 10 /* Margin */)
+            return;
+        for (let target = event.target; target; target = target.parentNode) {
+            if (target.nodeType == 1 && target.classList.contains("cm-tooltip-lint"))
+                return;
+        }
+        window.removeEventListener("mousemove", mousemove);
+        if (view.state.field(lintGutterTooltip))
+            view.dispatch({ effects: setLintGutterTooltip.of(null) });
+    };
+    window.addEventListener("mousemove", mousemove);
+}
+function gutterMarkerMouseOver(view, marker, diagnostics) {
+    function hovered() {
+        let line = view.visualLineAtHeight(marker.getBoundingClientRect().top + 5);
+        const linePos = view.coordsAtPos(line.from), markerRect = marker.getBoundingClientRect();
+        if (linePos) {
+            view.dispatch({ effects: setLintGutterTooltip.of({
+                    pos: line.from,
+                    above: false,
+                    create() {
+                        return {
+                            dom: diagnosticsTooltip(view, diagnostics),
+                            offset: { x: markerRect.left - linePos.left, y: 0 }
+                        };
+                    }
+                }) });
+        }
+        marker.onmouseout = marker.onmousemove = null;
+        trackHoverOn(view, marker);
+    }
+    let hoverTimeout = setTimeout(hovered, 600 /* Time */);
+    marker.onmouseout = () => {
+        clearTimeout(hoverTimeout);
+        marker.onmouseout = marker.onmousemove = null;
+    };
+    marker.onmousemove = () => {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = setTimeout(hovered, 600 /* Time */);
+    };
+}
+function markersForDiagnostics(doc, diagnostics) {
+    let byLine = Object.create(null);
+    for (let diagnostic of diagnostics) {
+        let line = doc.lineAt(diagnostic.from);
+        (byLine[line.from] || (byLine[line.from] = [])).push(diagnostic);
+    }
+    let markers = [];
+    for (let line in byLine) {
+        markers.push(new LintGutterMarker(byLine[line]).range(+line));
+    }
+    return RangeSet.of(markers, true);
+}
+const lintGutterExtension = /*@__PURE__*/gutter({
+    class: "cm-gutter-lint",
+    markers: view => view.state.field(lintGutterMarkers),
+});
+const lintGutterMarkers = /*@__PURE__*/StateField.define({
+    create() {
+        return RangeSet.empty;
+    },
+    update(markers, tr) {
+        markers = markers.map(tr.changes);
+        for (let effect of tr.effects)
+            if (effect.is(setDiagnosticsEffect)) {
+                markers = markersForDiagnostics(tr.state.doc, effect.value);
+            }
+        return markers;
+    }
+});
+const setLintGutterTooltip = /*@__PURE__*/StateEffect.define();
+const lintGutterTooltip = /*@__PURE__*/StateField.define({
+    create() { return null; },
+    update(tooltip, tr) {
+        if (tooltip && tr.docChanged)
+            tooltip = Object.assign(Object.assign({}, tooltip), { pos: tr.changes.mapPos(tooltip.pos) });
+        return tr.effects.reduce((t, e) => e.is(setLintGutterTooltip) ? e.value : t, tooltip);
+    },
+    provide: field => showTooltip.from(field)
+});
+const lintGutterTheme = /*@__PURE__*/EditorView.baseTheme({
+    ".cm-gutter-lint": {
+        width: "1.4em",
+        "& .cm-gutterElement": {
+            padding: "0 .2em",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+        }
+    },
+    ".cm-lint-marker": {
+        width: "1em",
+        height: "1em",
+    },
+    ".cm-lint-marker-info": {
+        content: /*@__PURE__*/svg(`<path fill="#aaf" stroke="#77e" stroke-width="6" stroke-linejoin="round" d="M5 5L35 5L35 35L5 35Z"/>`)
+    },
+    ".cm-lint-marker-warning": {
+        content: /*@__PURE__*/svg(`<path fill="#fe8" stroke="#fd7" stroke-width="6" stroke-linejoin="round" d="M20 6L37 35L3 35Z"/>`),
+    },
+    ".cm-lint-marker-error:before": {
+        content: /*@__PURE__*/svg(`<circle cx="20" cy="20" r="15" fill="#f87" stroke="#f43" stroke-width="6"/>`)
+    },
+});
+/**
+Returns an extension that installs a gutter showing markers for
+each line that has diagnostics, which can be hovered over to see
+the diagnostics.
+*/
+function lintGutter() {
+    return [lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
+}
 
-export { closeLintPanel, forceLinting, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics };
+export { closeLintPanel, diagnosticCount, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics, setDiagnosticsEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/lint",
-  "version": "0.18.6",
+  "version": "0.19.3",
   "description": "Linting support for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,10 +26,12 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
-    "@codemirror/panel": "^0.18.1",
-    "@codemirror/state": "^0.18.0",
-    "@codemirror/tooltip": "^0.18.4",
-    "@codemirror/view": "^0.18.0",
+    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/panel": "^0.19.0",
+    "@codemirror/rangeset": "^0.19.1",
+    "@codemirror/state": "^0.19.4",
+    "@codemirror/tooltip": "^0.19.5",
+    "@codemirror/view": "^0.19.0",
     "crelt": "^1.0.5"
   },
   "devDependencies": {