@codemirror/lint 0.20.0 → 0.20.3

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.20.3 (2022-05-25)
+
+### New features
+
+Diagnostic objects may now have a `renderMessage` method to render their message to the DOM.
+
+## 0.20.2 (2022-05-02)
+
+### New features
+
+The package now exports the `LintSource` function type.
+
+The new `markerFilter` and `tooltipFilter` options to `linter` and `lintGutter` allow more control over which diagnostics are visible and which have tooltips.
+
+## 0.20.1 (2022-04-22)
+
+### Bug fixes
+
+Hide lint tooltips when the document is changed.
+
 ## 0.20.0 (2022-04-20)
 
 ### Breaking changes

package/dist/index.cjs

@@ -24,7 +24,12 @@ class LintState {
         this.selected = selected;
     }
     static init(diagnostics, panel, state) {
-        let ranges = view.Decoration.set(diagnostics.map((d) => {
+        // Filter the list of diagnostics for which to create markers
+        let markedDiagnostics = diagnostics;
+        let diagnosticFilter = state.facet(lintConfig).markerFilter;
+        if (diagnosticFilter)
+            markedDiagnostics = diagnosticFilter(markedDiagnostics);
+        let ranges = view.Decoration.set(markedDiagnostics.map((d) => {
             // 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({
@@ -49,6 +54,9 @@ function findDiagnostic(diagnostics, diagnostic = null, after = 0) {
     });
     return found;
 }
+function hideTooltip(tr, tooltip) {
+    return !!(tr.effects.some(e => e.is(setDiagnosticsEffect)) || tr.changes.touchesRange(tooltip.pos));
+}
 function maybeEnableLint(state$1, effects) {
     return state$1.field(lintState, false) ? effects : effects.concat(state.StateEffect.appendConfig.of([
         lintState,
@@ -58,7 +66,7 @@ function maybeEnableLint(state$1, effects) {
                 activeMark.range(selected.from, selected.to)
             ]);
         }),
-        view.hoverTooltip(lintTooltip),
+        view.hoverTooltip(lintTooltip, { hideOn: hideTooltip }),
         baseTheme
     ]));
 }
@@ -127,6 +135,9 @@ function lintTooltip(view, pos, side) {
             stackEnd = Math.max(to, stackEnd);
         }
     });
+    let diagnosticFilter = view.state.facet(lintConfig).tooltipFilter;
+    if (diagnosticFilter)
+        found = diagnosticFilter(found);
     if (!found.length)
         return null;
     return {
@@ -194,7 +205,7 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
         this.view = view;
         this.timeout = -1;
         this.set = true;
-        let { delay } = view.state.facet(lintSource);
+        let { delay } = view.state.facet(lintConfig);
         this.lintTime = Date.now() + delay;
         this.run = this.run.bind(this);
         this.timeout = setTimeout(this.run, delay);
@@ -206,7 +217,7 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
         }
         else {
             this.set = false;
-            let { state } = this.view, { sources } = state.facet(lintSource);
+            let { state } = this.view, { sources } = state.facet(lintConfig);
             Promise.all(sources.map(source => Promise.resolve(source(this.view)))).then(annotations => {
                 let all = annotations.reduce((a, b) => a.concat(b));
                 if (this.view.state.doc == state.doc)
@@ -215,12 +226,12 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
         }
     }
     update(update) {
-        let source = update.state.facet(lintSource);
-        if (update.docChanged || source != update.startState.facet(lintSource)) {
-            this.lintTime = Date.now() + source.delay;
+        let config = update.state.facet(lintConfig);
+        if (update.docChanged || config != update.startState.facet(lintConfig)) {
+            this.lintTime = Date.now() + config.delay;
             if (!this.set) {
                 this.set = true;
-                this.timeout = setTimeout(this.run, source.delay);
+                this.timeout = setTimeout(this.run, config.delay);
             }
         }
     }
@@ -234,9 +245,13 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
         clearTimeout(this.timeout);
     }
 });
-const lintSource = state.Facet.define({
+const lintConfig = state.Facet.define({
     combine(input) {
-        return { sources: input.map(i => i.source), delay: input.length ? Math.max(...input.map(i => i.delay)) : 750 };
+        return Object.assign({ sources: input.map(i => i.source) }, state.combineConfig(input.map(i => i.config), {
+            delay: 750,
+            markerFilter: null,
+            tooltipFilter: null
+        }));
     },
     enables: lintPlugin
 });
@@ -246,8 +261,7 @@ enables linting with that source. It will be called whenever the
 editor is idle (after its content changed).
 */
 function linter(source, config = {}) {
-    var _a;
-    return lintSource.of({ source, delay: (_a = config.delay) !== null && _a !== void 0 ? _a : 750 });
+    return lintConfig.of({ source, config });
 }
 /**
 Forces any linters [configured](https://codemirror.net/6/docs/ref/#lint.linter) to run when the
@@ -276,7 +290,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.renderMessage ? diagnostic.renderMessage() : 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);
@@ -585,7 +599,12 @@ class LintGutterMarker extends view.GutterMarker {
     toDOM(view) {
         let elt = document.createElement("div");
         elt.className = "cm-lint-marker cm-lint-marker-" + this.severity;
-        elt.onmouseover = () => gutterMarkerMouseOver(view, elt, this.diagnostics);
+        let diagnostics = this.diagnostics;
+        let diagnosticsFilter = view.state.facet(lintGutterConfig).tooltipFilter;
+        if (diagnosticsFilter)
+            diagnostics = diagnosticsFilter(diagnostics);
+        if (diagnostics.length)
+            elt.onmouseover = () => gutterMarkerMouseOver(view, elt, diagnostics);
         return elt;
     }
 }
@@ -657,10 +676,15 @@ const lintGutterMarkers = state.StateField.define({
     },
     update(markers, tr) {
         markers = markers.map(tr.changes);
-        for (let effect of tr.effects)
+        let diagnosticFilter = tr.state.facet(lintGutterConfig).markerFilter;
+        for (let effect of tr.effects) {
             if (effect.is(setDiagnosticsEffect)) {
-                markers = markersForDiagnostics(tr.state.doc, effect.value);
+                let diagnostics = effect.value;
+                if (diagnosticFilter)
+                    diagnostics = diagnosticFilter(diagnostics || []);
+                markers = markersForDiagnostics(tr.state.doc, diagnostics.slice(0));
             }
+        }
         return markers;
     }
 });
@@ -669,7 +693,7 @@ 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) });
+            tooltip = hideTooltip(tr, tooltip) ? null : 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 => view.showTooltip.from(field)
@@ -699,6 +723,8 @@ const lintGutterConfig = state.Facet.define({
     combine(configs) {
         return state.combineConfig(configs, {
             hoverTime: 300 /* Time */,
+            markerFilter: null,
+            tooltipFilter: null
         });
     }
 });

package/dist/index.d.ts

@@ -31,6 +31,11 @@ interface Diagnostic {
     */
     message: string;
     /**
+    An optional custom rendering function that displays the message
+    as a DOM node.
+    */
+    renderMessage?: () => Node;
+    /**
     An optional array of actions that can be taken on this
     diagnostic.
     */
@@ -51,11 +56,39 @@ interface Action {
     */
     apply: (view: EditorView, from: number, to: number) => void;
 }
+declare type DiagnosticFilter = (diagnostics: readonly Diagnostic[]) => Diagnostic[];
+interface LintConfig {
+    /**
+    Time to wait (in milliseconds) after a change before running
+    the linter. Defaults to 750ms.
+    */
+    delay?: number;
+    /**
+    Optional filter to determine which diagnostics produce markers
+    in the content.
+    */
+    markerFilter?: null | DiagnosticFilter;
+    /**
+    Filter applied to a set of diagnostics shown in a tooltip. No
+    tooltip will appear if the empty set is returned.
+    */
+    tooltipFilter?: null | DiagnosticFilter;
+}
 interface LintGutterConfig {
     /**
     The delay before showing a tooltip when hovering over a lint gutter marker.
     */
     hoverTime?: number;
+    /**
+    Optional filter determining which diagnostics show a marker in
+    the gutter.
+    */
+    markerFilter?: null | DiagnosticFilter;
+    /**
+    Optional filter for diagnostics displayed in a tooltip, which
+    can also be used to prevent a tooltip appearing.
+    */
+    tooltipFilter?: null | DiagnosticFilter;
 }
 /**
 Returns a transaction spec which updates the current set of
@@ -91,19 +124,16 @@ A set of default key bindings for the lint functionality.
 - F8: [`nextDiagnostic`](https://codemirror.net/6/docs/ref/#lint.nextDiagnostic)
 */
 declare const lintKeymap: readonly KeyBinding[];
+/**
+The type of a function that produces diagnostics.
+*/
 declare type LintSource = (view: EditorView) => readonly Diagnostic[] | Promise<readonly Diagnostic[]>;
 /**
 Given a diagnostic source, this function returns an extension that
 enables linting with that source. It will be called whenever the
 editor is idle (after its content changed).
 */
-declare function linter(source: LintSource, config?: {
-    /**
-    Time to wait (in milliseconds) after a change before running
-    the linter. Defaults to 750ms.
-    */
-    delay?: number;
-}): Extension;
+declare function linter(source: LintSource, config?: LintConfig): Extension;
 /**
 Forces any linters [configured](https://codemirror.net/6/docs/ref/#lint.linter) to run when the
 editor is idle to run right away.
@@ -116,4 +146,4 @@ the diagnostics.
 */
 declare function lintGutter(config?: LintGutterConfig): Extension;
 
-export { Action, Diagnostic, closeLintPanel, diagnosticCount, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics, setDiagnosticsEffect };
+export { Action, Diagnostic, LintSource, closeLintPanel, diagnosticCount, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, setDiagnostics, setDiagnosticsEffect };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Decoration, showPanel, EditorView, ViewPlugin, hoverTooltip, logException, gutter, showTooltip, getPanel, WidgetType, GutterMarker } from '@codemirror/view';
-import { StateEffect, StateField, Facet, RangeSet, combineConfig } from '@codemirror/state';
+import { StateEffect, StateField, Facet, combineConfig, RangeSet } from '@codemirror/state';
 import elt from 'crelt';
 
 class SelectedDiagnostic {
@@ -16,7 +16,12 @@ class LintState {
         this.selected = selected;
     }
     static init(diagnostics, panel, state) {
-        let ranges = Decoration.set(diagnostics.map((d) => {
+        // Filter the list of diagnostics for which to create markers
+        let markedDiagnostics = diagnostics;
+        let diagnosticFilter = state.facet(lintConfig).markerFilter;
+        if (diagnosticFilter)
+            markedDiagnostics = diagnosticFilter(markedDiagnostics);
+        let ranges = Decoration.set(markedDiagnostics.map((d) => {
             // 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({
@@ -41,6 +46,9 @@ function findDiagnostic(diagnostics, diagnostic = null, after = 0) {
     });
     return found;
 }
+function hideTooltip(tr, tooltip) {
+    return !!(tr.effects.some(e => e.is(setDiagnosticsEffect)) || tr.changes.touchesRange(tooltip.pos));
+}
 function maybeEnableLint(state, effects) {
     return state.field(lintState, false) ? effects : effects.concat(StateEffect.appendConfig.of([
         lintState,
@@ -50,7 +58,7 @@ function maybeEnableLint(state, effects) {
                 activeMark.range(selected.from, selected.to)
             ]);
         }),
-        hoverTooltip(lintTooltip),
+        hoverTooltip(lintTooltip, { hideOn: hideTooltip }),
         baseTheme
     ]));
 }
@@ -119,6 +127,9 @@ function lintTooltip(view, pos, side) {
             stackEnd = Math.max(to, stackEnd);
         }
     });
+    let diagnosticFilter = view.state.facet(lintConfig).tooltipFilter;
+    if (diagnosticFilter)
+        found = diagnosticFilter(found);
     if (!found.length)
         return null;
     return {
@@ -186,7 +197,7 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         this.view = view;
         this.timeout = -1;
         this.set = true;
-        let { delay } = view.state.facet(lintSource);
+        let { delay } = view.state.facet(lintConfig);
         this.lintTime = Date.now() + delay;
         this.run = this.run.bind(this);
         this.timeout = setTimeout(this.run, delay);
@@ -198,7 +209,7 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
         else {
             this.set = false;
-            let { state } = this.view, { sources } = state.facet(lintSource);
+            let { state } = this.view, { sources } = state.facet(lintConfig);
             Promise.all(sources.map(source => Promise.resolve(source(this.view)))).then(annotations => {
                 let all = annotations.reduce((a, b) => a.concat(b));
                 if (this.view.state.doc == state.doc)
@@ -207,12 +218,12 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
     }
     update(update) {
-        let source = update.state.facet(lintSource);
-        if (update.docChanged || source != update.startState.facet(lintSource)) {
-            this.lintTime = Date.now() + source.delay;
+        let config = update.state.facet(lintConfig);
+        if (update.docChanged || config != update.startState.facet(lintConfig)) {
+            this.lintTime = Date.now() + config.delay;
             if (!this.set) {
                 this.set = true;
-                this.timeout = setTimeout(this.run, source.delay);
+                this.timeout = setTimeout(this.run, config.delay);
             }
         }
     }
@@ -226,9 +237,13 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         clearTimeout(this.timeout);
     }
 });
-const lintSource = /*@__PURE__*/Facet.define({
+const lintConfig = /*@__PURE__*/Facet.define({
     combine(input) {
-        return { sources: input.map(i => i.source), delay: input.length ? Math.max(...input.map(i => i.delay)) : 750 };
+        return Object.assign({ sources: input.map(i => i.source) }, combineConfig(input.map(i => i.config), {
+            delay: 750,
+            markerFilter: null,
+            tooltipFilter: null
+        }));
     },
     enables: lintPlugin
 });
@@ -238,8 +253,7 @@ enables linting with that source. It will be called whenever the
 editor is idle (after its content changed).
 */
 function linter(source, config = {}) {
-    var _a;
-    return lintSource.of({ source, delay: (_a = config.delay) !== null && _a !== void 0 ? _a : 750 });
+    return lintConfig.of({ source, config });
 }
 /**
 Forces any linters [configured](https://codemirror.net/6/docs/ref/#lint.linter) to run when the
@@ -268,7 +282,7 @@ function assignKeys(actions) {
 function renderDiagnostic(view, diagnostic, inPanel) {
     var _a;
     let keys = inPanel ? assignKeys(diagnostic.actions) : [];
-    return elt("li", { class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity }, elt("span", { class: "cm-diagnosticText" }, diagnostic.message), (_a = diagnostic.actions) === null || _a === void 0 ? void 0 : _a.map((action, i) => {
+    return elt("li", { class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity }, elt("span", { class: "cm-diagnosticText" }, diagnostic.renderMessage ? diagnostic.renderMessage() : 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);
@@ -577,7 +591,12 @@ class LintGutterMarker extends GutterMarker {
     toDOM(view) {
         let elt = document.createElement("div");
         elt.className = "cm-lint-marker cm-lint-marker-" + this.severity;
-        elt.onmouseover = () => gutterMarkerMouseOver(view, elt, this.diagnostics);
+        let diagnostics = this.diagnostics;
+        let diagnosticsFilter = view.state.facet(lintGutterConfig).tooltipFilter;
+        if (diagnosticsFilter)
+            diagnostics = diagnosticsFilter(diagnostics);
+        if (diagnostics.length)
+            elt.onmouseover = () => gutterMarkerMouseOver(view, elt, diagnostics);
         return elt;
     }
 }
@@ -649,10 +668,15 @@ const lintGutterMarkers = /*@__PURE__*/StateField.define({
     },
     update(markers, tr) {
         markers = markers.map(tr.changes);
-        for (let effect of tr.effects)
+        let diagnosticFilter = tr.state.facet(lintGutterConfig).markerFilter;
+        for (let effect of tr.effects) {
             if (effect.is(setDiagnosticsEffect)) {
-                markers = markersForDiagnostics(tr.state.doc, effect.value);
+                let diagnostics = effect.value;
+                if (diagnosticFilter)
+                    diagnostics = diagnosticFilter(diagnostics || []);
+                markers = markersForDiagnostics(tr.state.doc, diagnostics.slice(0));
             }
+        }
         return markers;
     }
 });
@@ -661,7 +685,7 @@ 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) });
+            tooltip = hideTooltip(tr, tooltip) ? null : 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)
@@ -691,6 +715,8 @@ const lintGutterConfig = /*@__PURE__*/Facet.define({
     combine(configs) {
         return combineConfig(configs, {
             hoverTime: 300 /* Time */,
+            markerFilter: null,
+            tooltipFilter: null
         });
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/lint",
-  "version": "0.20.0",
+  "version": "0.20.3",
   "description": "Linting support for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "@codemirror/state": "^0.20.0",
-    "@codemirror/view": "^0.20.0",
+    "@codemirror/view": "^0.20.2",
     "crelt": "^1.0.5"
   },
   "devDependencies": {