Merge pull request #4 from chordbook/linter

Add a basic syntax linter

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
 

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')!

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'

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(),
 ]

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)