pax_global_header00006660000000000000000000000064145005160430014510gustar00rootroot0000000000000052 comment=271b35f5d31a7e3645eaccbfec608474022098e1 lint-6.4.2/000077500000000000000000000000001450051604300124675ustar00rootroot00000000000000lint-6.4.2/.github/000077500000000000000000000000001450051604300140275ustar00rootroot00000000000000lint-6.4.2/.github/workflows/000077500000000000000000000000001450051604300160645ustar00rootroot00000000000000lint-6.4.2/.github/workflows/dispatch.yml000066400000000000000000000006371450051604300204140ustar00rootroot00000000000000name: Trigger CI on: push jobs: build: name: Dispatch to main repo runs-on: ubuntu-latest steps: - name: Emit repository_dispatch uses: mvasigh/dispatch-action@main with: # You should create a personal access token and store it in your repository token: ${{ secrets.DISPATCH_AUTH }} repo: dev owner: codemirror event_type: push lint-6.4.2/.gitignore000066400000000000000000000001271450051604300144570ustar00rootroot00000000000000/node_modules package-lock.json /dist /test/*.js /test/*.d.ts /test/*.d.ts.map .tern-* lint-6.4.2/.npmignore000066400000000000000000000001001450051604300144550ustar00rootroot00000000000000/src /test /node_modules .tern-* rollup.config.js tsconfig.json lint-6.4.2/CHANGELOG.md000066400000000000000000000114161450051604300143030ustar00rootroot00000000000000## 6.4.2 (2023-09-14) ### Bug fixes Make sure scrolling diagnostic into view in the panel works when the editor is scaled. ## 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 A new `previousDiagnostic` command can be used to move back through the active diagnostics. ## 6.2.2 (2023-06-05) ### Bug fixes Make sure lint gutter tooltips are properly closed when the content of their line changes. ## 6.2.1 (2023-04-13) ### Bug fixes The `linter` function now eagerly includes all lint-related extensions, rather than appending them to the configuration as-needed, so that turning off linting by clearing the compartment that contains it works properly. ## 6.2.0 (2023-02-27) ### New features The new `needsRefresh` option to `linter` makes it possible to cause linting to be recalculated for non-document state changes. ## 6.1.1 (2023-02-15) ### Bug fixes Give lint action buttons a pointer cursor style. Fix a bug that caused diagnostic action callbacks to be called twice when their button was clicked. ## 6.1.0 (2022-11-15) ### New features The new `forEachDiagnostic` function can be used to iterate over the diagnostics in an editor state. ## 6.0.0 (2022-06-08) ### Breaking changes Update dependencies to 6.0.0 ## 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 Update dependencies to 0.20.0 ## 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 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 Fix a bug where reconfiguring the lint source didn't restart linting. ## 0.19.1 (2021-09-17) ### Bug fixes Prevent decorations that cover just a line break from being invisible by showing a widget instead of range for them. ### New features The `diagnosticCount` method can now be used to determine whether there are active diagnostics. ## 0.19.0 (2021-08-11) ### Breaking changes Update dependencies to 0.19.0 ## 0.18.6 (2021-08-08) ### Bug fixes Fix a crash in the key handler of the lint panel when no diagnostics are available. ## 0.18.5 (2021-08-07) ### Bug fixes Fix an issue that caused `openLintPanel` to not actually open the panel when ran before the editor had any lint state loaded. ### New features The package now exports a `forceLinting` function that forces pending lint queries to run immediately. ## 0.18.4 (2021-06-07) ### Bug fixes Multiple `linter` extensions can now be added to an editor without disrupting each other. Fix poor layout on lint tooltips due to changes in @codemirror/tooltip. ## 0.18.3 (2021-05-10) ### Bug fixes Fix a regression where using `setDiagnostics` when linting hadn't been abled yet ignored the first set of diagnostics. ## 0.18.2 (2021-04-16) ### Bug fixes Newlines in line messages are now shown as line breaks to the user. ### New features You can now pass a delay option to `linter` to configure how long it waits before calling the linter. ## 0.18.1 (2021-03-15) ### Bug fixes Adjust to current @codemirror/panel and @codemirror/tooltip interfaces. ## 0.18.0 (2021-03-03) ### Bug fixes Make sure action access keys are discoverable for screen reader users. Selection in the lint panel should now be properly visible to screen readers. ## 0.17.1 (2021-01-06) ### New features The package now also exports a CommonJS module. ## 0.17.0 (2020-12-29) ### Breaking changes First numbered release. lint-6.4.2/LICENSE000066400000000000000000000021361450051604300134760ustar00rootroot00000000000000MIT License Copyright (C) 2018-2021 by Marijn Haverbeke and others Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. lint-6.4.2/README.md000066400000000000000000000017451450051604300137550ustar00rootroot00000000000000# @codemirror/lint [![NPM version](https://img.shields.io/npm/v/@codemirror/lint.svg)](https://www.npmjs.org/package/@codemirror/lint) [ [**WEBSITE**](https://codemirror.net/) | [**DOCS**](https://codemirror.net/docs/ref/#lint) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lint/blob/main/CHANGELOG.md) ] This package implements linting support for the [CodeMirror](https://codemirror.net/) code editor. The [project page](https://codemirror.net/) has more information, a number of [examples](https://codemirror.net/examples/) and the [documentation](https://codemirror.net/docs/). This code is released under an [MIT license](https://github.com/codemirror/lint/tree/main/LICENSE). We aim to be an inclusive, welcoming community. To make that explicit, we have a [code of conduct](http://contributor-covenant.org/version/1/1/0/) that applies to communication around the project. lint-6.4.2/package.json000066400000000000000000000016111450051604300147540ustar00rootroot00000000000000{ "name": "@codemirror/lint", "version": "6.4.2", "description": "Linting support for the CodeMirror code editor", "scripts": { "test": "cm-runtests", "prepare": "cm-buildhelper src/lint.ts" }, "keywords": [ "editor", "code" ], "author": { "name": "Marijn Haverbeke", "email": "marijn@haverbeke.berlin", "url": "http://marijnhaverbeke.nl" }, "type": "module", "main": "dist/index.cjs", "exports": { "import": "./dist/index.js", "require": "./dist/index.cjs" }, "types": "dist/index.d.ts", "module": "dist/index.js", "sideEffects": false, "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "crelt": "^1.0.5" }, "devDependencies": { "@codemirror/buildhelper": "^1.0.0" }, "repository": { "type": "git", "url": "https://github.com/codemirror/lint.git" } } lint-6.4.2/src/000077500000000000000000000000001450051604300132565ustar00rootroot00000000000000lint-6.4.2/src/README.md000066400000000000000000000003501450051604300145330ustar00rootroot00000000000000@lintKeymap @Diagnostic @Action @linter @LintSource @diagnosticCount @forceLinting @openLintPanel @closeLintPanel @nextDiagnostic @previousDiagnostic @setDiagnostics @setDiagnosticsEffect @forEachDiagnostic @lintGutterlint-6.4.2/src/lint.ts000066400000000000000000000736461450051604300146140ustar00rootroot00000000000000import {EditorView, ViewPlugin, Decoration, DecorationSet, WidgetType, ViewUpdate, Command, logException, KeyBinding, hoverTooltip, Tooltip, showTooltip, gutter, GutterMarker, PanelConstructor, Panel, showPanel, getPanel} from "@codemirror/view" import {Text, StateEffect, StateField, Extension, TransactionSpec, Transaction, EditorState, Facet, combineConfig, RangeSet, Range} from "@codemirror/state" import elt from "crelt" type Severity = "hint" | "info" | "warning" | "error" /// Describes a problem or hint for a piece of code. export interface Diagnostic { /// The start position of the relevant text. from: number /// The end position. May be equal to `from`, though actually /// covering text is preferable. to: number /// The severity of the problem. This will influence how it is /// displayed. 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 /// applicable. source?: string /// The message associated with this 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. actions?: readonly Action[] } /// An action associated with a diagnostic. export interface Action { /// The label to show to the user. Should be relatively short. name: string /// The function to call when the user activates this action. Is /// given the diagnostic's _current_ position, which may have /// changed since the creation of the diagnostic, due to editing. apply: (view: EditorView, from: number, to: number) => void } 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 predicate that can be used to indicate when diagnostics /// need to be recomputed. Linting is always re-done on document /// changes. needsRefresh?: null | ((update: ViewUpdate) => boolean) /// 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 } class SelectedDiagnostic { constructor(readonly from: number, readonly to: number, readonly diagnostic: Diagnostic) {} } class LintState { constructor(readonly diagnostics: DecorationSet, readonly panel: PanelConstructor | null, readonly selected: SelectedDiagnostic | null) {} static init(diagnostics: readonly Diagnostic[], panel: PanelConstructor | null, state: EditorState) { // 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: Diagnostic) => { // 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({ widget: new DiagnosticWidget(d), diagnostic: d }).range(d.from) : Decoration.mark({ attributes: {class: "cm-lintRange cm-lintRange-" + d.severity + (d.markClass ? " " + d.markClass : "")}, diagnostic: d }).range(d.from, d.to) }), true) return new LintState(ranges, panel, findDiagnostic(ranges)) } } function findDiagnostic(diagnostics: DecorationSet, diagnostic: Diagnostic | null = null, after = 0): SelectedDiagnostic | null { let found: SelectedDiagnostic | null = null diagnostics.between(after, 1e9, (from, to, {spec}) => { if (diagnostic && spec.diagnostic != diagnostic) return found = new SelectedDiagnostic(from, to, spec.diagnostic) return false }) return found } function hideTooltip(tr: Transaction, tooltip: Tooltip) { let line = tr.startState.doc.lineAt(tooltip.pos) return !!(tr.effects.some(e => e.is(setDiagnosticsEffect)) || tr.changes.touchesRange(line.from, line.to)) } function maybeEnableLint(state: EditorState, effects: readonly StateEffect[]) { return state.field(lintState, false) ? effects : effects.concat(StateEffect.appendConfig.of(lintExtensions)) } /// Returns a transaction spec which updates the current set of /// diagnostics, and enables the lint extension if if wasn't already /// active. export function setDiagnostics(state: EditorState, diagnostics: readonly Diagnostic[]): TransactionSpec { return { 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. export const setDiagnosticsEffect = StateEffect.define() const togglePanel = StateEffect.define() const movePanelSelection = StateEffect.define() const lintState = StateField.define({ create() { return new LintState(Decoration.none, null, null) }, update(value, tr) { if (tr.docChanged) { let mapped = value.diagnostics.map(tr.changes), selected = null if (value.selected) { let selPos = tr.changes.mapPos(value.selected.from, 1) selected = findDiagnostic(mapped, value.selected.diagnostic, selPos) || findDiagnostic(mapped, null, selPos) } value = new LintState(mapped, value.panel, selected) } for (let effect of tr.effects) { if (effect.is(setDiagnosticsEffect)) { value = LintState.init(effect.value, value.panel, tr.state) } else if (effect.is(togglePanel)) { value = new LintState(value.diagnostics, effect.value ? LintPanel.open : null, value.selected) } else if (effect.is(movePanelSelection)) { value = new LintState(value.diagnostics, value.panel, effect.value) } } return value }, provide: f => [showPanel.from(f, val => val.panel), EditorView.decorations.from(f, s => s.diagnostics)] }) /// Returns the number of active lint diagnostics in the given state. export function diagnosticCount(state: EditorState) { let lint = state.field(lintState, false) return lint ? lint.diagnostics.size : 0 } const activeMark = Decoration.mark({class: "cm-lintRange cm-lintRange-active"}) function lintTooltip(view: EditorView, pos: number, side: -1 | 1) { let {diagnostics} = view.state.field(lintState) let found: Diagnostic[] = [], stackStart = 2e8, stackEnd = 0 diagnostics.between(pos - (side < 0 ? 1 : 0), pos + (side > 0 ? 1 : 0), (from, to, {spec}) => { if (pos >= from && pos <= to && (from == to || ((pos > from || side > 0) && (pos < to || side < 0)))) { found.push(spec.diagnostic) stackStart = Math.min(from, stackStart) stackEnd = Math.max(to, stackEnd) } }) let diagnosticFilter = view.state.facet(lintConfig).tooltipFilter if (diagnosticFilter) found = diagnosticFilter(found) if (!found.length) return null return { pos: stackStart, end: stackEnd, above: view.state.doc.lineAt(stackStart).to < stackEnd, create() { return {dom: diagnosticsTooltip(view, found)} } } } function diagnosticsTooltip(view: EditorView, diagnostics: readonly Diagnostic[]) { return elt("ul", {class: "cm-tooltip-lint"}, diagnostics.map(d => renderDiagnostic(view, d, false))) } /// Command to open and focus the lint panel. export const openLintPanel: Command = (view: EditorView) => { let field = view.state.field(lintState, false) if (!field || !field.panel) view.dispatch({effects: maybeEnableLint(view.state, [togglePanel.of(true)])}) let panel = getPanel(view, LintPanel.open) if (panel) (panel.dom.querySelector(".cm-panel-lint ul") as HTMLElement).focus() return true } /// Command to close the lint panel, when open. export const closeLintPanel: Command = (view: EditorView) => { let field = view.state.field(lintState, false) if (!field || !field.panel) return false view.dispatch({effects: togglePanel.of(false)}) return true } /// Move the selection to the next diagnostic. export const nextDiagnostic: Command = (view: EditorView) => { let field = view.state.field(lintState, false) if (!field) return false let sel = view.state.selection.main, next = field.diagnostics.iter(sel.to + 1) if (!next.value) { next = field.diagnostics.iter(0) if (!next.value || next.from == sel.from && next.to == sel.to) return false } view.dispatch({selection: {anchor: next.from, head: next.to}, scrollIntoView: true}) return true } /// Move the selection to the previous diagnostic. export const previousDiagnostic: Command = (view: EditorView) => { let {state} = view, field = state.field(lintState, false) if (!field) return false let sel = state.selection.main let prevFrom: number | undefined, prevTo: number | undefined, lastFrom: number | undefined, lastTo: number | undefined field.diagnostics.between(0, state.doc.length, (from, to) => { if (to < sel.to && (prevFrom == null || prevFrom < from)) { prevFrom = from; prevTo = to } if (lastFrom == null || from > lastFrom) { lastFrom = from; lastTo = to } }) if (lastFrom == null || prevFrom == null && lastFrom == sel.from) return false view.dispatch({selection: {anchor: prevFrom ?? lastFrom, head: prevTo ?? lastTo}, scrollIntoView: true}) return true } /// A set of default key bindings for the lint functionality. /// /// - Ctrl-Shift-m (Cmd-Shift-m on macOS): [`openLintPanel`](#lint.openLintPanel) /// - F8: [`nextDiagnostic`](#lint.nextDiagnostic) export const lintKeymap: readonly KeyBinding[] = [ {key: "Mod-Shift-m", run: openLintPanel, preventDefault: true}, {key: "F8", run: nextDiagnostic} ] /// The type of a function that produces diagnostics. export type LintSource = (view: EditorView) => readonly Diagnostic[] | Promise const lintPlugin = ViewPlugin.fromClass(class { lintTime: number timeout = -1 set = true constructor(readonly view: EditorView) { let {delay} = view.state.facet(lintConfig) this.lintTime = Date.now() + delay this.run = this.run.bind(this) this.timeout = setTimeout(this.run, delay) } run() { let now = Date.now() if (now < this.lintTime - 10) { this.timeout = setTimeout(this.run, this.lintTime - now) } else { this.set = false 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) this.view.dispatch(setDiagnostics(this.view.state, all)) }, error => { logException(this.view.state, error) } ) } } update(update: ViewUpdate) { let config = update.state.facet(lintConfig) if (update.docChanged || config != update.startState.facet(lintConfig) || config.needsRefresh && config.needsRefresh(update)) { this.lintTime = Date.now() + config.delay if (!this.set) { this.set = true this.timeout = setTimeout(this.run, config.delay) } } } force() { if (this.set) { this.lintTime = Date.now() this.run() } } destroy() { clearTimeout(this.timeout) } }) const lintConfig = Facet.define<{source: LintSource, config: LintConfig}, Required & {sources: readonly LintSource[]}>({ combine(input) { return { sources: input.map(i => i.source), ...combineConfig(input.map(i => i.config), { delay: 750, markerFilter: null, tooltipFilter: null, needsRefresh: null }, { needsRefresh: (a, b) => !a ? b : !b ? a : u => a(u) || b(u) }) } } }) /// 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). export function linter( source: LintSource, config: LintConfig = {} ): Extension { return [ lintConfig.of({source, config}), lintPlugin, lintExtensions ] } /// Forces any linters [configured](#lint.linter) to run when the /// editor is idle to run right away. export function forceLinting(view: EditorView) { let plugin = view.plugin(lintPlugin) if (plugin) plugin.force() } function assignKeys(actions: readonly Action[] | undefined) { let assigned: string[] = [] if (actions) actions: for (let {name} of actions) { for (let i = 0; i < name.length; i++) { let ch = name[i] if (/[a-zA-Z]/.test(ch) && !assigned.some(c => c.toLowerCase() == ch.toLowerCase())) { assigned.push(ch) continue actions } } assigned.push("") } return assigned } function renderDiagnostic(view: EditorView, diagnostic: Diagnostic, inPanel: boolean) { let keys = inPanel ? assignKeys(diagnostic.actions) : [] return elt( "li", {class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity}, elt("span", {class: "cm-diagnosticText"}, diagnostic.renderMessage ? diagnostic.renderMessage() : diagnostic.message), diagnostic.actions?.map((action, i) => { let fired = false, click = (e: Event) => { e.preventDefault() if (fired) return fired = true let found = findDiagnostic(view.state.field(lintState).diagnostics, diagnostic) if (found) action.apply(view, found.from, found.to) } let {name} = action, keyIndex = keys[i] ? name.indexOf(keys[i]) : -1 let nameElt = keyIndex < 0 ? name : [name.slice(0, keyIndex), elt("u", name.slice(keyIndex, keyIndex + 1)), name.slice(keyIndex + 1)] 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("div", {class: "cm-diagnosticSource"}, diagnostic.source)) } class DiagnosticWidget extends WidgetType { constructor(readonly diagnostic: Diagnostic) {super()} eq(other: DiagnosticWidget) { return other.diagnostic == this.diagnostic } toDOM() { return elt("span", {class: "cm-lintPoint cm-lintPoint-" + this.diagnostic.severity}) } } class PanelItem { id = "item_" + Math.floor(Math.random() * 0xffffffff).toString(16) dom: HTMLElement constructor(view: EditorView, readonly diagnostic: Diagnostic) { this.dom = renderDiagnostic(view, diagnostic, true) this.dom.id = this.id this.dom.setAttribute("role", "option") } } class LintPanel implements Panel { items: PanelItem[] = [] dom: HTMLElement list: HTMLElement constructor(readonly view: EditorView) { let onkeydown = (event: KeyboardEvent) => { if (event.keyCode == 27) { // Escape closeLintPanel(this.view) this.view.focus() } else if (event.keyCode == 38 || event.keyCode == 33) { // ArrowUp, PageUp this.moveSelection((this.selectedIndex - 1 + this.items.length) % this.items.length) } else if (event.keyCode == 40 || event.keyCode == 34) { // ArrowDown, PageDown this.moveSelection((this.selectedIndex + 1) % this.items.length) } else if (event.keyCode == 36) { // Home this.moveSelection(0) } else if (event.keyCode == 35) { // End this.moveSelection(this.items.length - 1) } else if (event.keyCode == 13) { // Enter this.view.focus() } else if (event.keyCode >= 65 && event.keyCode <= 90 && this.selectedIndex >= 0) { // A-Z let {diagnostic} = this.items[this.selectedIndex], keys = assignKeys(diagnostic.actions) for (let i = 0; i < keys.length; i++) if (keys[i].toUpperCase().charCodeAt(0) == event.keyCode) { let found = findDiagnostic(this.view.state.field(lintState).diagnostics, diagnostic) if (found) diagnostic.actions![i].apply(view, found.from, found.to) } } else { return } event.preventDefault() } let onclick = (event: MouseEvent) => { for (let i = 0; i < this.items.length; i++) { if (this.items[i].dom.contains(event.target as HTMLElement)) this.moveSelection(i) } } this.list = elt("ul", { tabIndex: 0, role: "listbox", "aria-label": this.view.state.phrase("Diagnostics"), onkeydown, onclick }) this.dom = elt("div", {class: "cm-panel-lint"}, this.list, elt("button", { type: "button", name: "close", "aria-label": this.view.state.phrase("close"), onclick: () => closeLintPanel(this.view) }, "×")) this.update() } get selectedIndex() { let selected = this.view.state.field(lintState).selected if (!selected) return -1 for (let i = 0; i < this.items.length; i++) if (this.items[i].diagnostic == selected.diagnostic) return i return -1 } update() { let {diagnostics, selected} = this.view.state.field(lintState) let i = 0, needsSync = false, newSelectedItem: PanelItem | null = null diagnostics.between(0, this.view.state.doc.length, (_start, _end, {spec}) => { let found = -1, item for (let j = i; j < this.items.length; j++) if (this.items[j].diagnostic == spec.diagnostic) { found = j; break } if (found < 0) { item = new PanelItem(this.view, spec.diagnostic) this.items.splice(i, 0, item) needsSync = true } else { item = this.items[found] if (found > i) { this.items.splice(i, found - i); needsSync = true } } if (selected && item.diagnostic == selected.diagnostic) { if (!item.dom.hasAttribute("aria-selected")) { item.dom.setAttribute("aria-selected", "true") newSelectedItem = item } } else if (item.dom.hasAttribute("aria-selected")) { item.dom.removeAttribute("aria-selected") } i++ }) while (i < this.items.length && !(this.items.length == 1 && this.items[0].diagnostic.from < 0)) { needsSync = true this.items.pop() } if (this.items.length == 0) { this.items.push(new PanelItem(this.view, { from: -1, to: -1, severity: "info", message: this.view.state.phrase("No diagnostics") })) needsSync = true } if (newSelectedItem) { this.list.setAttribute("aria-activedescendant", newSelectedItem!.id) this.view.requestMeasure({ key: this, read: () => ({sel: newSelectedItem!.dom.getBoundingClientRect(), panel: this.list.getBoundingClientRect()}), write: ({sel, panel}) => { let scaleY = panel.height / this.list.offsetHeight if (sel.top < panel.top) this.list.scrollTop -= (panel.top - sel.top) / scaleY else if (sel.bottom > panel.bottom) this.list.scrollTop += (sel.bottom - panel.bottom) / scaleY } }) } else if (this.selectedIndex < 0) { this.list.removeAttribute("aria-activedescendant") } if (needsSync) this.sync() } sync() { let domPos: ChildNode | null = this.list.firstChild function rm() { let prev = domPos! domPos = prev.nextSibling prev.remove() } for (let item of this.items) { if (item.dom.parentNode == this.list) { while (domPos != item.dom) rm() domPos = item.dom.nextSibling } else { this.list.insertBefore(item.dom, domPos) } } while (domPos) rm() } moveSelection(selectedIndex: number) { if (this.selectedIndex < 0) return let field = this.view.state.field(lintState) let selection = findDiagnostic(field.diagnostics, this.items[selectedIndex].diagnostic) if (!selection) return this.view.dispatch({ selection: {anchor: selection.from, head: selection.to}, scrollIntoView: true, effects: movePanelSelection.of(selection) }) } static open(view: EditorView) { return new LintPanel(view) } } function svg(content: string, attrs = `viewBox="0 0 40 40"`) { return `url('data:image/svg+xml,${encodeURIComponent(content)}')` } function underline(color: string) { return svg(``, `width="6" height="3"`) } const baseTheme = EditorView.baseTheme({ ".cm-diagnostic": { padding: "3px 6px 3px 8px", marginLeft: "-1px", display: "block", whiteSpace: "pre-wrap" }, ".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", padding: "2px 4px", backgroundColor: "#444", color: "white", borderRadius: "3px", marginLeft: "8px", cursor: "pointer" }, ".cm-diagnosticSource": { fontSize: "70%", opacity: .7 }, ".cm-lintRange": { backgroundPosition: "left bottom", backgroundRepeat: "repeat-x", paddingBottom: "0.7px", }, ".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, margin: 0 }, ".cm-lintPoint": { position: "relative", "&:after": { content: '""', position: "absolute", bottom: 0, left: "-2px", borderLeft: "3px solid transparent", borderRight: "3px solid transparent", borderBottom: "4px solid #d11" } }, ".cm-lintPoint-warning": { "&:after": { borderBottomColor: "orange" } }, ".cm-lintPoint-info": { "&:after": { borderBottomColor: "#999" } }, ".cm-lintPoint-hint": { "&:after": { borderBottomColor: "#66d" } }, ".cm-panel.cm-panel-lint": { position: "relative", "& ul": { maxHeight: "100px", overflowY: "auto", "& [aria-selected]": { backgroundColor: "#ddd", "& u": { textDecoration: "underline" } }, "&:focus [aria-selected]": { background_fallback: "#bdf", backgroundColor: "Highlight", color_fallback: "white", color: "HighlightText" }, "& u": { textDecoration: "none" }, padding: 0, margin: 0 }, "& [name=close]": { position: "absolute", top: "0", right: "2px", background: "inherit", border: "none", font: "inherit", padding: 0, margin: 0 } } }) function severityWeight(sev: Severity) { return sev == "error" ? 4 : sev == "warning" ? 3 : sev == "info" ? 2 : 1 } class LintGutterMarker extends GutterMarker { severity: Severity constructor(readonly diagnostics: readonly Diagnostic[]) { super() this.severity = diagnostics.reduce((max, d) => severityWeight(max) < severityWeight(d.severity) ? d.severity : max, "hint" as Severity) } toDOM(view: EditorView) { let elt = document.createElement("div") elt.className = "cm-lint-marker cm-lint-marker-" + this.severity 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 } } const enum Hover { Time = 300, Margin = 10, } function trackHoverOn(view: EditorView, marker: HTMLElement) { let mousemove = (event: MouseEvent) => { let rect = marker.getBoundingClientRect() if (event.clientX > rect.left - Hover.Margin && event.clientX < rect.right + Hover.Margin && event.clientY > rect.top - Hover.Margin && event.clientY < rect.bottom + Hover.Margin) return for (let target = event.target as Node | null; target; target = target.parentNode) { if (target.nodeType == 1 && (target as HTMLElement).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: EditorView, marker: HTMLElement, diagnostics: readonly Diagnostic[]) { function hovered() { 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, above: false, create() { return { dom: diagnosticsTooltip(view, diagnostics), getCoords: () => marker.getBoundingClientRect() } } })}) } marker.onmouseout = marker.onmousemove = null trackHoverOn(view, marker) } 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, hoverTime) } } function markersForDiagnostics(doc: Text, diagnostics: readonly Diagnostic[]) { let byLine: {[line: number]: Diagnostic[]} = Object.create(null) for (let diagnostic of diagnostics) { let line = doc.lineAt(diagnostic.from) ;(byLine[line.from] || (byLine[line.from] = [])).push(diagnostic) } let markers: Range[] = [] for (let line in byLine) { markers.push(new LintGutterMarker(byLine[line]).range(+line)) } return RangeSet.of(markers, true) } const lintGutterExtension = gutter({ class: "cm-gutter-lint", markers: view => view.state.field(lintGutterMarkers), }) const lintGutterMarkers = StateField.define>({ create() { return RangeSet.empty }, update(markers, tr) { markers = markers.map(tr.changes) let diagnosticFilter = tr.state.facet(lintGutterConfig).markerFilter for (let effect of tr.effects) { if (effect.is(setDiagnosticsEffect)) { let diagnostics = effect.value if (diagnosticFilter) diagnostics = diagnosticFilter(diagnostics || []) markers = markersForDiagnostics(tr.state.doc, diagnostics.slice(0)) } } return markers } }) const setLintGutterTooltip = StateEffect.define() const lintGutterTooltip = StateField.define({ create() { return null }, update(tooltip, tr) { if (tooltip && tr.docChanged) tooltip = hideTooltip(tr, tooltip) ? null : {...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 = EditorView.baseTheme({ ".cm-gutter-lint": { width: "1.4em", "& .cm-gutterElement": { padding: ".2em" } }, ".cm-lint-marker": { width: "1em", height: "1em" }, ".cm-lint-marker-info": { content: svg(``) }, ".cm-lint-marker-warning": { content: svg(``), }, ".cm-lint-marker-error": { content: svg(``) }, }) const lintExtensions = [ lintState, EditorView.decorations.compute([lintState], state => { let {selected, panel} = state.field(lintState) return !selected || !panel || selected.from == selected.to ? Decoration.none : Decoration.set([ activeMark.range(selected.from, selected.to) ]) }), hoverTooltip(lintTooltip, {hideOn: hideTooltip}), baseTheme ] const lintGutterConfig = Facet.define>({ combine(configs) { return combineConfig(configs, { hoverTime: Hover.Time, markerFilter: null, tooltipFilter: null }) } }) /// Returns an extension that installs a gutter showing markers for /// each line that has diagnostics, which can be hovered over to see /// the diagnostics. export function lintGutter(config: LintGutterConfig = {}): Extension { return [lintGutterConfig.of(config), lintGutterMarkers, lintGutterExtension, lintGutterTheme, lintGutterTooltip] } /// Iterate over the marked diagnostics for the given editor state, /// calling `f` for each of them. Note that, if the document changed /// since the diagnostics were created, the `Diagnostic` object will /// hold the original outdated position, whereas the `to` and `from` /// arguments hold the diagnostic's current position. export function forEachDiagnostic(state: EditorState, f: (d: Diagnostic, from: number, to: number) => void) { let lState = state.field(lintState, false) if (lState && lState.diagnostics.size) for (let iter = RangeSet.iter([lState.diagnostics]); iter.value; iter.next()) f(iter.value.spec.diagnostic, iter.from, iter.to) }