editor: improve parser and mapping between tree-sitter and Lezer

With this change we reuse the previous parse trees in more cases to
improve performance and also tighten up the handling of some incorrect
states.

Also, re-add highlighting of trailing whitespace and add red background
to parse errors.

frontend/css/style.css

@@ -67,13 +67,13 @@
 
   /* Editor */
   --editor-comment: #998;
-  --editor-trailing-whitespace: rgb(255 199 199 / 50%);
   --editor-directive: #333;
   --editor-class: #b84;
   --editor-date: #099;
   --editor-constant: #008080;
   --editor-account: var(--link-color);
   --editor-invalid: #333;
+  --editor-invalid-background: rgb(255 199 199 / 50%);
   --editor-activeline: #ffc;
 
   /* Misc */

frontend/src/codemirror/beancount-highlight.ts

@@ -46,10 +46,6 @@ export const beancountHighlight = HighlightStyle.define([
     // Invalid token
     tag: tags.invalid,
     color: "var(--editor-invalid)",
-  },
-  {
-    // Trailing whitespace
-    tag: tags.special(tags.invalid),
-    backgroundColor: "var(--editor-trailing-whitespace)",
+    backgroundColor: "var(--editor-invalid-background)",
   },
 ]);

frontend/src/codemirror/beancount.ts

@@ -5,7 +5,7 @@ import {
   LanguageSupport,
   syntaxHighlighting,
 } from "@codemirror/language";
-import { keymap } from "@codemirror/view";
+import { highlightTrailingWhitespace, keymap } from "@codemirror/view";
 import { styleTags, tags } from "@lezer/highlight";
 import TSParser from "web-tree-sitter";
 import ts_wasm from "web-tree-sitter/tree-sitter.wasm";
@@ -41,6 +41,7 @@ const beancountLanguageSupportExtensions = [
     commentTokens: { line: ";" },
     indentOnInput: /^\s+\d\d\d\d/,
   }),
+  highlightTrailingWhitespace(),
 ];
 
 /** The node props that allow for highlighting/coloring of the code. */