@codemirror/lint 0.19.3 → 0.19.6

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.19.6 (2022-03-04)
+
+### Bug fixes
+
+Fix a bug where hovering over the icons in the lint gutter would sometimes fail to show a tooltip or show the tooltip for another line.
+
+## 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

package/dist/index.cjs

@@ -143,7 +143,7 @@ function lintTooltip(view, pos, side) {
     };
 }
 function diagnosticsTooltip(view, diagnostics) {
-    return elt__default['default']("ul", { class: "cm-tooltip-lint" }, diagnostics.map(d => renderDiagnostic(view, d, false)));
+    return elt__default["default"]("ul", { class: "cm-tooltip-lint" }, diagnostics.map(d => renderDiagnostic(view, d, false)));
 }
 /**
 Command to open and focus the lint panel.
@@ -212,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); });
         }
@@ -282,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);
@@ -291,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) {
@@ -309,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 {
@@ -365,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"),
@@ -613,8 +611,8 @@ function trackHoverOn(view, marker) {
 }
 function gutterMarkerMouseOver(view, marker, diagnostics) {
     function hovered() {
-        let line = view.visualLineAtHeight(marker.getBoundingClientRect().top + 5);
-        const linePos = view.coordsAtPos(line.from), markerRect = marker.getBoundingClientRect();
+        let line = view.elementAtHeight(marker.getBoundingClientRect().top + 5 - view.documentTop);
+        const linePos = view.coordsAtPos(line.from);
         if (linePos) {
             view.dispatch({ effects: setLintGutterTooltip.of({
                     pos: line.from,
@@ -622,7 +620,7 @@ function gutterMarkerMouseOver(view, marker, diagnostics) {
                     create() {
                         return {
                             dom: diagnosticsTooltip(view, diagnostics),
-                            offset: { x: markerRect.left - linePos.left, y: 0 }
+                            getCoords: () => marker.getBoundingClientRect()
                         };
                     }
                 }) });
@@ -630,14 +628,15 @@ function gutterMarkerMouseOver(view, marker, diagnostics) {
         marker.onmouseout = marker.onmousemove = null;
         trackHoverOn(view, marker);
     }
-    let hoverTimeout = setTimeout(hovered, 600 /* Time */);
+    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, 600 /* Time */);
+        hoverTimeout = setTimeout(hovered, hoverTime);
     };
 }
 function markersForDiagnostics(doc, diagnostics) {
@@ -683,15 +682,12 @@ const lintGutterTheme = view.EditorView.baseTheme({
     ".cm-gutter-lint": {
         width: "1.4em",
         "& .cm-gutterElement": {
-            padding: "0 .2em",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
+            padding: ".2em"
         }
     },
     ".cm-lint-marker": {
         width: "1em",
-        height: "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"/>`)
@@ -703,13 +699,20 @@ const lintGutterTheme = view.EditorView.baseTheme({
         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() {
-    return [lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
+function lintGutter(config = {}) {
+    return [lintGutterConfig.of(config), lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
 }
 
 exports.closeLintPanel = closeLintPanel;

package/dist/index.d.ts

@@ -51,6 +51,12 @@ 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, and enables the lint extension if if wasn't already
@@ -108,6 +114,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.
 */
-declare function lintGutter(): Extension;
+declare function lintGutter(config?: LintGutterConfig): Extension;
 
 export { Action, Diagnostic, closeLintPanel, diagnosticCount, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics, setDiagnosticsEffect };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Decoration, EditorView, ViewPlugin, logException, WidgetType } from '@codemirror/view';
-import { StateEffect, StateField, Facet } from '@codemirror/state';
+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';
@@ -204,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); });
         }
@@ -605,8 +603,8 @@ function trackHoverOn(view, marker) {
 }
 function gutterMarkerMouseOver(view, marker, diagnostics) {
     function hovered() {
-        let line = view.visualLineAtHeight(marker.getBoundingClientRect().top + 5);
-        const linePos = view.coordsAtPos(line.from), markerRect = marker.getBoundingClientRect();
+        let line = view.elementAtHeight(marker.getBoundingClientRect().top + 5 - view.documentTop);
+        const linePos = view.coordsAtPos(line.from);
         if (linePos) {
             view.dispatch({ effects: setLintGutterTooltip.of({
                     pos: line.from,
@@ -614,7 +612,7 @@ function gutterMarkerMouseOver(view, marker, diagnostics) {
                     create() {
                         return {
                             dom: diagnosticsTooltip(view, diagnostics),
-                            offset: { x: markerRect.left - linePos.left, y: 0 }
+                            getCoords: () => marker.getBoundingClientRect()
                         };
                     }
                 }) });
@@ -622,14 +620,15 @@ function gutterMarkerMouseOver(view, marker, diagnostics) {
         marker.onmouseout = marker.onmousemove = null;
         trackHoverOn(view, marker);
     }
-    let hoverTimeout = setTimeout(hovered, 600 /* Time */);
+    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, 600 /* Time */);
+        hoverTimeout = setTimeout(hovered, hoverTime);
     };
 }
 function markersForDiagnostics(doc, diagnostics) {
@@ -675,15 +674,12 @@ const lintGutterTheme = /*@__PURE__*/EditorView.baseTheme({
     ".cm-gutter-lint": {
         width: "1.4em",
         "& .cm-gutterElement": {
-            padding: "0 .2em",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
+            padding: ".2em"
         }
     },
     ".cm-lint-marker": {
         width: "1em",
-        height: "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"/>`)
@@ -695,13 +691,20 @@ const lintGutterTheme = /*@__PURE__*/EditorView.baseTheme({
         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() {
-    return [lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
+function lintGutter(config = {}) {
+    return [lintGutterConfig.of(config), lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip];
 }
 
 export { closeLintPanel, diagnosticCount, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics, setDiagnosticsEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/lint",
-  "version": "0.19.3",
+  "version": "0.19.6",
   "description": "Linting support for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -30,8 +30,8 @@
     "@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",
+    "@codemirror/tooltip": "^0.19.16",
+    "@codemirror/view": "^0.19.22",
     "crelt": "^1.0.5"
   },
   "devDependencies": {