@codemirror/lint 6.3.0 → 6.4.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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

@@ -37,7 +37,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);
@@ -537,6 +537,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 +560,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 +584,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 +618,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");

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';
 
+declare 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

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';
 
+declare 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

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);
@@ -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");

package/package.json

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