@codemirror/lint 0.19.2 → 0.19.5

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.19.5 (2022-02-25)
+
+### Bug fixes
+
+Make sure the lint gutter tooltips are positioned under their icon, even when the line is wrapped.
+
+## 0.19.4 (2022-02-25)
+
+### Bug fixes
+
+Fix an issue where an outdated marker could stick around on the lint gutter after all diagnostics were removed.
+
+### New features
+
+Add a `hoverTime` option to the lint gutter. Change default hover time to 300
+
+## 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

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 }; }
@@ -51,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([
@@ -66,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, state))
+        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();
@@ -131,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.state)) });
+        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();
@@ -202,10 +212,8 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
             this.set = false;
             let { state } = this.view, { sources } = state.facet(lintSource);
             Promise.all(sources.map(source => Promise.resolve(source(this.view)))).then(annotations => {
-                var _a, _b;
                 let all = annotations.reduce((a, b) => a.concat(b));
-                if (this.view.state.doc == state.doc &&
-                    (all.length || ((_b = (_a = this.view.state.field(lintState, false)) === null || _a === void 0 ? void 0 : _a.diagnostics) === null || _b === void 0 ? void 0 : _b.size)))
+                if (this.view.state.doc == state.doc)
                     this.view.dispatch(setDiagnostics(this.view.state, all));
             }, error => { view.logException(this.view.state, error); });
         }
@@ -272,7 +280,7 @@ function assignKeys(actions) {
 function renderDiagnostic(view, diagnostic, inPanel) {
     var _a;
     let keys = inPanel ? assignKeys(diagnostic.actions) : [];
-    return elt__default['default']("li", { class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity }, elt__default['default']("span", { class: "cm-diagnosticText" }, diagnostic.message), (_a = diagnostic.actions) === null || _a === void 0 ? void 0 : _a.map((action, i) => {
+    return elt__default["default"]("li", { class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity }, elt__default["default"]("span", { class: "cm-diagnosticText" }, diagnostic.message), (_a = diagnostic.actions) === null || _a === void 0 ? void 0 : _a.map((action, i) => {
         let click = (e) => {
             e.preventDefault();
             let found = findDiagnostic(view.state.field(lintState).diagnostics, diagnostic);
@@ -281,16 +289,16 @@ function renderDiagnostic(view, diagnostic, inPanel) {
         };
         let { name } = action, keyIndex = keys[i] ? name.indexOf(keys[i]) : -1;
         let nameElt = keyIndex < 0 ? name : [name.slice(0, keyIndex),
-            elt__default['default']("u", name.slice(keyIndex, keyIndex + 1)),
+            elt__default["default"]("u", name.slice(keyIndex, keyIndex + 1)),
             name.slice(keyIndex + 1)];
-        return elt__default['default']("button", {
+        return elt__default["default"]("button", {
             type: "button",
             class: "cm-diagnosticAction",
             onclick: click,
             onmousedown: click,
             "aria-label": ` Action: ${name}${keyIndex < 0 ? "" : ` (access key "${keys[i]})"`}.`
         }, nameElt);
-    }), diagnostic.source && elt__default['default']("div", { class: "cm-diagnosticSource" }, diagnostic.source));
+    }), diagnostic.source && elt__default["default"]("div", { class: "cm-diagnosticSource" }, diagnostic.source));
 }
 class DiagnosticWidget extends view.WidgetType {
     constructor(diagnostic) {
@@ -299,7 +307,7 @@ class DiagnosticWidget extends view.WidgetType {
     }
     eq(other) { return other.diagnostic == this.diagnostic; }
     toDOM() {
-        return elt__default['default']("span", { class: "cm-lintPoint cm-lintPoint-" + this.diagnostic.severity });
+        return elt__default["default"]("span", { class: "cm-lintPoint cm-lintPoint-" + this.diagnostic.severity });
     }
 }
 class PanelItem {
@@ -355,14 +363,14 @@ class LintPanel {
                     this.moveSelection(i);
             }
         };
-        this.list = elt__default['default']("ul", {
+        this.list = elt__default["default"]("ul", {
             tabIndex: 0,
             role: "listbox",
             "aria-label": this.view.state.phrase("Diagnostics"),
             onkeydown,
             onclick
         });
-        this.dom = elt__default['default']("div", { class: "cm-panel-lint" }, this.list, elt__default['default']("button", {
+        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"),
@@ -478,13 +486,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": {
@@ -511,7 +517,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") },
@@ -570,12 +577,151 @@ 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 - view.documentTop);
+        const linePos = view.coordsAtPos(line.from);
+        if (linePos) {
+            view.dispatch({ effects: setLintGutterTooltip.of({
+                    pos: line.from,
+                    above: false,
+                    create() {
+                        return {
+                            dom: diagnosticsTooltip(view, diagnostics),
+                            getCoords: () => marker.getBoundingClientRect()
+                        };
+                    }
+                }) });
+        }
+        marker.onmouseout = marker.onmousemove = null;
+        trackHoverOn(view, marker);
+    }
+    let { hoverTime } = view.state.facet(lintGutterConfig);
+    let hoverTimeout = setTimeout(hovered, hoverTime);
+    marker.onmouseout = () => {
+        clearTimeout(hoverTimeout);
+        marker.onmouseout = marker.onmousemove = null;
+    };
+    marker.onmousemove = () => {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = setTimeout(hovered, hoverTime);
+    };
+}
+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: ".2em"
+        }
+    },
+    ".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"/>`)
+    },
+});
+const lintGutterConfig = state.Facet.define({
+    combine(configs) {
+        return state.combineConfig(configs, {
+            hoverTime: 300 /* Time */,
+        });
+    }
+});
+/**
+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(config = {}) {
+    return [lintGutterConfig.of(config), 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.
@@ -50,12 +51,24 @@ interface Action {
     */
     apply: (view: EditorView, from: number, to: number) => void;
 }
+interface LintGutterConfig {
+    /**
+    The delay before showing a tooltip when hovering over a lint gutter marker.
+    */
+    hoverTime?: number;
+}
 /**
 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;
@@ -96,5 +109,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(config?: LintGutterConfig): Extension;
 
-export { Action, Diagnostic, closeLintPanel, diagnosticCount, 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 { Decoration, EditorView, ViewPlugin, logException, WidgetType } from '@codemirror/view';
-import { StateEffect, StateField, Facet } from '@codemirror/state';
-import { hoverTooltip } from '@codemirror/tooltip';
+import { StateEffect, StateField, Facet, combineConfig } from '@codemirror/state';
+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 {
@@ -43,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([
@@ -58,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, state))
+        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();
@@ -123,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.state)) });
+        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();
@@ -194,10 +204,8 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             this.set = false;
             let { state } = this.view, { sources } = state.facet(lintSource);
             Promise.all(sources.map(source => Promise.resolve(source(this.view)))).then(annotations => {
-                var _a, _b;
                 let all = annotations.reduce((a, b) => a.concat(b));
-                if (this.view.state.doc == state.doc &&
-                    (all.length || ((_b = (_a = this.view.state.field(lintState, false)) === null || _a === void 0 ? void 0 : _a.diagnostics) === null || _b === void 0 ? void 0 : _b.size)))
+                if (this.view.state.doc == state.doc)
                     this.view.dispatch(setDiagnostics(this.view.state, all));
             }, error => { logException(this.view.state, error); });
         }
@@ -470,13 +478,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": {
@@ -503,7 +509,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") },
@@ -562,5 +569,142 @@ 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 - view.documentTop);
+        const linePos = view.coordsAtPos(line.from);
+        if (linePos) {
+            view.dispatch({ effects: setLintGutterTooltip.of({
+                    pos: line.from,
+                    above: false,
+                    create() {
+                        return {
+                            dom: diagnosticsTooltip(view, diagnostics),
+                            getCoords: () => marker.getBoundingClientRect()
+                        };
+                    }
+                }) });
+        }
+        marker.onmouseout = marker.onmousemove = null;
+        trackHoverOn(view, marker);
+    }
+    let { hoverTime } = view.state.facet(lintGutterConfig);
+    let hoverTimeout = setTimeout(hovered, hoverTime);
+    marker.onmouseout = () => {
+        clearTimeout(hoverTimeout);
+        marker.onmouseout = marker.onmousemove = null;
+    };
+    marker.onmousemove = () => {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = setTimeout(hovered, hoverTime);
+    };
+}
+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: ".2em"
+        }
+    },
+    ".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"/>`)
+    },
+});
+const lintGutterConfig = /*@__PURE__*/Facet.define({
+    combine(configs) {
+        return combineConfig(configs, {
+            hoverTime: 300 /* Time */,
+        });
+    }
+});
+/**
+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(config = {}) {
+    return [lintGutterConfig.of(config), lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
+}
 
-export { closeLintPanel, diagnosticCount, 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.19.2",
+  "version": "0.19.5",
   "description": "Linting support for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,10 +26,12 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
+    "@codemirror/gutter": "^0.19.4",
     "@codemirror/panel": "^0.19.0",
-    "@codemirror/state": "^0.19.0",
-    "@codemirror/tooltip": "^0.19.0",
-    "@codemirror/view": "^0.19.0",
+    "@codemirror/rangeset": "^0.19.1",
+    "@codemirror/state": "^0.19.4",
+    "@codemirror/tooltip": "^0.19.16",
+    "@codemirror/view": "^0.19.22",
     "crelt": "^1.0.5"
   },
   "devDependencies": {