@codemirror/lint 0.19.2 → 0.19.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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();
@@ -478,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": {
@@ -511,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") },
@@ -570,12 +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,16 @@ 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;
@@ -96,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, 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 { 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();
@@ -470,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": {
@@ -503,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") },
@@ -562,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, 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.3",
   "description": "Linting support for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,9 +26,11 @@
   "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/rangeset": "^0.19.1",
+    "@codemirror/state": "^0.19.4",
+    "@codemirror/tooltip": "^0.19.5",
     "@codemirror/view": "^0.19.0",
     "crelt": "^1.0.5"
   },