@codemirror/lint 6.3.0 → 6.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 6.4.1 (2023-08-26)
+
+### Bug fixes
+
+Fix a crash that could occur when a view was reconfigured in a way that removed the lint extension.
+
+## 6.4.0 (2023-07-03)
+
+### New features
+
+Diagnostics can now use `"hint"` as a severity level.
+
+Diagnostics can now set a `markClass` property to add an additional CSS class to the text marked by the diagnostic.
+
 ## 6.3.0 (2023-06-23)
 
 ### New features

package/dist/index.cjs

@@ -1,15 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var view = require('@codemirror/view');
 var state = require('@codemirror/state');
 var elt = require('crelt');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var elt__default = /*#__PURE__*/_interopDefaultLegacy(elt);
-
 class SelectedDiagnostic {
     constructor(from, to, diagnostic) {
         this.from = from;
@@ -37,7 +31,7 @@ class LintState {
                     diagnostic: d
                 }).range(d.from)
                 : view.Decoration.mark({
-                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
+                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity + (d.markClass ? " " + d.markClass : "") },
                     diagnostic: d
                 }).range(d.from, d.to);
         }), true);
@@ -141,7 +135,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("ul", { class: "cm-tooltip-lint" }, diagnostics.map(d => renderDiagnostic(view, d, false)));
 }
 /**
 Command to open and focus the lint panel.
@@ -228,7 +222,7 @@ const lintPlugin = view.ViewPlugin.fromClass(class {
     run() {
         let now = Date.now();
         if (now < this.lintTime - 10) {
-            setTimeout(this.run, this.lintTime - now);
+            this.timeout = setTimeout(this.run, this.lintTime - now);
         }
         else {
             this.set = false;
@@ -312,7 +306,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.renderMessage ? diagnostic.renderMessage() : 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 fired = false, click = (e) => {
             e.preventDefault();
             if (fired)
@@ -324,16 +318,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("u", name.slice(keyIndex, keyIndex + 1)),
             name.slice(keyIndex + 1)];
-        return elt__default["default"]("button", {
+        return elt("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("div", { class: "cm-diagnosticSource" }, diagnostic.source));
 }
 class DiagnosticWidget extends view.WidgetType {
     constructor(diagnostic) {
@@ -342,7 +336,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("span", { class: "cm-lintPoint cm-lintPoint-" + this.diagnostic.severity });
     }
 }
 class PanelItem {
@@ -398,14 +392,14 @@ class LintPanel {
                     this.moveSelection(i);
             }
         };
-        this.list = elt__default["default"]("ul", {
+        this.list = elt("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("div", { class: "cm-panel-lint" }, this.list, elt("button", {
             type: "button",
             name: "close",
             "aria-label": this.view.state.phrase("close"),
@@ -537,6 +531,7 @@ const baseTheme = view.EditorView.baseTheme({
     ".cm-diagnostic-error": { borderLeft: "5px solid #d11" },
     ".cm-diagnostic-warning": { borderLeft: "5px solid orange" },
     ".cm-diagnostic-info": { borderLeft: "5px solid #999" },
+    ".cm-diagnostic-hint": { borderLeft: "5px solid #66d" },
     ".cm-diagnosticAction": {
         font: "inherit",
         border: "none",
@@ -559,6 +554,7 @@ const baseTheme = view.EditorView.baseTheme({
     ".cm-lintRange-error": { backgroundImage: underline("#d11") },
     ".cm-lintRange-warning": { backgroundImage: underline("orange") },
     ".cm-lintRange-info": { backgroundImage: underline("#999") },
+    ".cm-lintRange-hint": { backgroundImage: underline("#66d") },
     ".cm-lintRange-active": { backgroundColor: "#ffdd9980" },
     ".cm-tooltip-lint": {
         padding: 0,
@@ -582,6 +578,9 @@ const baseTheme = view.EditorView.baseTheme({
     ".cm-lintPoint-info": {
         "&:after": { borderBottomColor: "#999" }
     },
+    ".cm-lintPoint-hint": {
+        "&:after": { borderBottomColor: "#66d" }
+    },
     ".cm-panel.cm-panel-lint": {
         position: "relative",
         "& ul": {
@@ -613,14 +612,14 @@ const baseTheme = view.EditorView.baseTheme({
         }
     }
 });
+function severityWeight(sev) {
+    return sev == "error" ? 4 : sev == "warning" ? 3 : sev == "info" ? 2 : 1;
+}
 class LintGutterMarker extends view.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");
+        this.severity = diagnostics.reduce((max, d) => severityWeight(max) < severityWeight(d.severity) ? d.severity : max, "hint");
     }
     toDOM(view) {
         let elt = document.createElement("div");
@@ -637,8 +636,8 @@ class LintGutterMarker extends view.GutterMarker {
 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 */)
+        if (event.clientX > rect.left - 10 /* Hover.Margin */ && event.clientX < rect.right + 10 /* Hover.Margin */ &&
+            event.clientY > rect.top - 10 /* Hover.Margin */ && event.clientY < rect.bottom + 10 /* Hover.Margin */)
             return;
         for (let target = event.target; target; target = target.parentNode) {
             if (target.nodeType == 1 && target.classList.contains("cm-tooltip-lint"))
@@ -759,7 +758,7 @@ const lintExtensions = [
 const lintGutterConfig = state.Facet.define({
     combine(configs) {
         return state.combineConfig(configs, {
-            hoverTime: 300 /* Time */,
+            hoverTime: 300 /* Hover.Time */,
             markerFilter: null,
             tooltipFilter: null
         });

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import * as _codemirror_state from '@codemirror/state';
 import { EditorState, TransactionSpec, Extension } from '@codemirror/state';
 import { EditorView, Command, KeyBinding, ViewUpdate } from '@codemirror/view';
 
+type Severity = "hint" | "info" | "warning" | "error";
 /**
 Describes a problem or hint for a piece of code.
 */
@@ -19,7 +20,12 @@ interface Diagnostic {
     The severity of the problem. This will influence how it is
     displayed.
     */
-    severity: "info" | "warning" | "error";
+    severity: Severity;
+    /**
+    When given, add an extra CSS class to parts of the code that
+    this diagnostic applies to.
+    */
+    markClass?: string;
     /**
     An optional source string indicating where the diagnostic is
     coming from. You can put the name of your linter here, if
@@ -56,7 +62,7 @@ interface Action {
     */
     apply: (view: EditorView, from: number, to: number) => void;
 }
-declare type DiagnosticFilter = (diagnostics: readonly Diagnostic[]) => Diagnostic[];
+type DiagnosticFilter = (diagnostics: readonly Diagnostic[]) => Diagnostic[];
 interface LintConfig {
     /**
     Time to wait (in milliseconds) after a change before running
@@ -137,7 +143,7 @@ declare const lintKeymap: readonly KeyBinding[];
 /**
 The type of a function that produces diagnostics.
 */
-declare type LintSource = (view: EditorView) => readonly Diagnostic[] | Promise<readonly Diagnostic[]>;
+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

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as _codemirror_state from '@codemirror/state';
 import { EditorState, TransactionSpec, Extension } from '@codemirror/state';
 import { EditorView, Command, KeyBinding, ViewUpdate } from '@codemirror/view';
 
+type Severity = "hint" | "info" | "warning" | "error";
 /**
 Describes a problem or hint for a piece of code.
 */
@@ -19,7 +20,12 @@ interface Diagnostic {
     The severity of the problem. This will influence how it is
     displayed.
     */
-    severity: "info" | "warning" | "error";
+    severity: Severity;
+    /**
+    When given, add an extra CSS class to parts of the code that
+    this diagnostic applies to.
+    */
+    markClass?: string;
     /**
     An optional source string indicating where the diagnostic is
     coming from. You can put the name of your linter here, if
@@ -56,7 +62,7 @@ interface Action {
     */
     apply: (view: EditorView, from: number, to: number) => void;
 }
-declare type DiagnosticFilter = (diagnostics: readonly Diagnostic[]) => Diagnostic[];
+type DiagnosticFilter = (diagnostics: readonly Diagnostic[]) => Diagnostic[];
 interface LintConfig {
     /**
     Time to wait (in milliseconds) after a change before running
@@ -137,7 +143,7 @@ declare const lintKeymap: readonly KeyBinding[];
 /**
 The type of a function that produces diagnostics.
 */
-declare type LintSource = (view: EditorView) => readonly Diagnostic[] | Promise<readonly Diagnostic[]>;
+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

package/dist/index.js

@@ -29,7 +29,7 @@ class LintState {
                     diagnostic: d
                 }).range(d.from)
                 : Decoration.mark({
-                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
+                    attributes: { class: "cm-lintRange cm-lintRange-" + d.severity + (d.markClass ? " " + d.markClass : "") },
                     diagnostic: d
                 }).range(d.from, d.to);
         }), true);
@@ -220,7 +220,7 @@ const lintPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     run() {
         let now = Date.now();
         if (now < this.lintTime - 10) {
-            setTimeout(this.run, this.lintTime - now);
+            this.timeout = setTimeout(this.run, this.lintTime - now);
         }
         else {
             this.set = false;
@@ -529,6 +529,7 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
     ".cm-diagnostic-error": { borderLeft: "5px solid #d11" },
     ".cm-diagnostic-warning": { borderLeft: "5px solid orange" },
     ".cm-diagnostic-info": { borderLeft: "5px solid #999" },
+    ".cm-diagnostic-hint": { borderLeft: "5px solid #66d" },
     ".cm-diagnosticAction": {
         font: "inherit",
         border: "none",
@@ -551,6 +552,7 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
     ".cm-lintRange-error": { backgroundImage: /*@__PURE__*/underline("#d11") },
     ".cm-lintRange-warning": { backgroundImage: /*@__PURE__*/underline("orange") },
     ".cm-lintRange-info": { backgroundImage: /*@__PURE__*/underline("#999") },
+    ".cm-lintRange-hint": { backgroundImage: /*@__PURE__*/underline("#66d") },
     ".cm-lintRange-active": { backgroundColor: "#ffdd9980" },
     ".cm-tooltip-lint": {
         padding: 0,
@@ -574,6 +576,9 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
     ".cm-lintPoint-info": {
         "&:after": { borderBottomColor: "#999" }
     },
+    ".cm-lintPoint-hint": {
+        "&:after": { borderBottomColor: "#66d" }
+    },
     ".cm-panel.cm-panel-lint": {
         position: "relative",
         "& ul": {
@@ -605,14 +610,14 @@ const baseTheme = /*@__PURE__*/EditorView.baseTheme({
         }
     }
 });
+function severityWeight(sev) {
+    return sev == "error" ? 4 : sev == "warning" ? 3 : sev == "info" ? 2 : 1;
+}
 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");
+        this.severity = diagnostics.reduce((max, d) => severityWeight(max) < severityWeight(d.severity) ? d.severity : max, "hint");
     }
     toDOM(view) {
         let elt = document.createElement("div");
@@ -629,8 +634,8 @@ class LintGutterMarker extends GutterMarker {
 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 */)
+        if (event.clientX > rect.left - 10 /* Hover.Margin */ && event.clientX < rect.right + 10 /* Hover.Margin */ &&
+            event.clientY > rect.top - 10 /* Hover.Margin */ && event.clientY < rect.bottom + 10 /* Hover.Margin */)
             return;
         for (let target = event.target; target; target = target.parentNode) {
             if (target.nodeType == 1 && target.classList.contains("cm-tooltip-lint"))
@@ -751,7 +756,7 @@ const lintExtensions = [
 const lintGutterConfig = /*@__PURE__*/Facet.define({
     combine(configs) {
         return combineConfig(configs, {
-            hoverTime: 300 /* Time */,
+            hoverTime: 300 /* Hover.Time */,
             markerFilter: null,
             tooltipFilter: null
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/lint",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "description": "Linting support for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",