diff --git a/README.md b/README.md index 04a0c8d..c604506 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ A web-based editor for editing chord sheets in the [ChordPro](https://chordpro.o * ✅ ChordPro Syntax Highlighting * ✅ Chord autocomplete - type "[" and you will see autocomplete of previously used chords * ✅ Snippets - type "title", "start_of…", "tab" or any other ChordPro directive +* ✅ Error checking - Shows syntax errors in the editor ## Installation diff --git a/demo.ts b/demo.ts index 770d670..a701a9b 100644 --- a/demo.ts +++ b/demo.ts @@ -20,6 +20,8 @@ This is the [G]chorus # ✅ Syntax Highlighting # ✅ Chord autocomplete - type "[" and you will see autocomplete of previously used chords # ✅ Snippets - type "title", "start_of…", "tab" or any other ChordPro directive +# ✅ Error checking - Shows syntax errors in the editor +{ ` const el = document.querySelector('#editor')! diff --git a/src/extensions/baseTheme.ts b/src/extensions/baseTheme.ts index be408dd..d54cfb0 100644 --- a/src/extensions/baseTheme.ts +++ b/src/extensions/baseTheme.ts @@ -2,10 +2,11 @@ import { EditorView } from "@codemirror/view" export default EditorView.baseTheme({ "&": { - minHeight: '100%' + height: '100%', }, ".cm-editor": { - minHeight: '100%' + height: '100%', + overflow: 'auto' }, ".cm-scroller": { flex: '1' diff --git a/src/extensions/index.ts b/src/extensions/index.ts index a2fdbd8..ea207b5 100644 --- a/src/extensions/index.ts +++ b/src/extensions/index.ts @@ -4,15 +4,19 @@ import { defaultKeymap, history, historyKeymap } from '@codemirror/commands' import { bracketMatching } from '@codemirror/language' import { lintKeymap } from '@codemirror/lint' import { highlightSelectionMatches, searchKeymap } from '@codemirror/search' -import { drawSelection, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers } from '@codemirror/view' +import { drawSelection, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, scrollPastEnd, keymap, lineNumbers } from '@codemirror/view' import { ChordPro } from '@chordbook/codemirror-lang-chordpro' import { oneDark } from '@codemirror/theme-one-dark' import baseTheme from './baseTheme' +import linter from './linter' +import { lintGutter } from "@codemirror/lint" export default [ baseTheme, oneDark, ChordPro(), + linter, + lintGutter(), lineNumbers(), highlightActiveLineGutter(), highlightSpecialChars(), @@ -39,6 +43,7 @@ export default [ if (completionStatus(e.state)) return acceptCompletion(e); return false }, - } - ]) + }, + ]), + scrollPastEnd(), ] diff --git a/src/extensions/linter.ts b/src/extensions/linter.ts new file mode 100644 index 0000000..17f07c1 --- /dev/null +++ b/src/extensions/linter.ts @@ -0,0 +1,28 @@ +import { EditorView } from "@codemirror/view"; +import { syntaxTree } from "@codemirror/language"; +import { linter, Diagnostic } from "@codemirror/lint"; + +// A basic syntax linter that will highlight syntax errors in the editor. +// Unfortuantely, codemirror/lezer does not provide a way to get the error message, +// so we just return a generic "Syntax Error" message for now. +// See: https://discuss.codemirror.net/t/how-should-i-get-the-error-message/6327 +function lintSyntax(view: EditorView): readonly Diagnostic[] { + const diagnostics: Diagnostic[] = []; + + syntaxTree(view.state).iterate({ + enter(node) { + if (node.type.isError) { + diagnostics.push({ + from: node.from, + to: node.to, + severity: "error", + message: "Syntax Error", + }); + } + }, + }); + + return diagnostics; +} + +export default linter(lintSyntax)