Added syntax highlighting to expressions

Obsidian-OS · Jan 11, 2025 · 559867e · 559867e
1 parent 766e3af
commit 559867e
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 38 deletions.
diff --git a/grammar.d.ts b/grammar.d.ts
@@ -0,0 +1,3 @@
+declare module "*.grammar" {
+    export const parser: import("@lezer/lr").LRParser;
+}
diff --git a/grammar/expr.grammar b/grammar/expr.grammar
@@ -1,5 +1,15 @@
+@detectDelim
 @top Formula { expression }
 
+@precedence {
+    eq @left,
+    bin @left,
+    comp @left,
+    add @left,
+    mul @left,
+    exp @left
+}
+
 expression {
     literal |
     Access |
@@ -13,31 +23,48 @@ expression {
 literal[@isGroup=Literal] {
     Number |
     Boolean |
+    NamedColumn |
     Address |
     key
 }
 
 key { Name | String }
 
-Access { literal | bracketedExpression "." key }
+Access { ~key (literal | bracketedExpression) "." key }
 
-Call { literal | bracketedExpression "(" delimited<expression> ")" }
+Call { ~key (literal | bracketedExpression) "(" delimited<expression> ")" }
 
-operation { expression Op expression }
+operation {
+    expression !eq ("==" | "!=") expression |
+    expression !bin ("&&" | "||" | "!") expression |
+    expression !comp ("<" | ">") expression |
+    expression !add ("+" | "-") expression |
+    expression !mul ("*" | "/" | "%") expression |
+    expression !exp ("^") expression
+}
 
-List { "[" delimited<expression> "]" }
+List { "[" ~obj delimited<expression> "]" }
 
-AssociativeArray { "[" delimited<(key "=" expression)> "]" }
+AssociativeArray { "[" ~obj delimited<(key "=" expression)> "]" }
 
-delimited<body> {
-    (
-        body
-        ("," body)*
-    )?
-}
+delimited<body> { ( body ("," body)* )? }
 
 bracketedExpression { "(" expression ")" }
 
+@local tokens {
+    strEnd { '"' }
+    strEscape { '\\' ![u] }
+    strUnicodeEscape { '\\u{' _* '}' }
+
+    @else content
+}
+
+@skip {} {
+    NamedColumn { ~col "{{" content? "}}" }
+    Address { ~col "{" content? "}" }
+    String { '"' (content | strEscape | strUnicodeEscape)* strEnd }
+}
+
 @tokens {
 
     alpha { $[_\u{a1}-\u{10ffff}] }
@@ -58,23 +85,4 @@ bracketedExpression { "(" expression ")" }
         ("-"? "0b" $[01]+) |
         ("-"? $[0-9]+ "." $[0-9]*)
     }
-
-    String { '"' (!["\\] | "\\" _)* '"' }
-    Address { '{' (![}])* '}' }
-
-    Op {(
-        '+' |
-        '-' |
-        '*' |
-        '%' |
-        '^' |
-        '>' |
-        '<' |
-        '!' |
-        '&&' |
-        '||' |
-        '==' |
-        '<=' |
-        '>='
-    )}
 }
diff --git a/package.json b/package.json
@@ -5,10 +5,11 @@
     "type": "module",
     "dependencies": {
         "@codemirror/autocomplete": "latest",
-        "@codemirror/language": "^6.10.8",
+        "@codemirror/language": "latest",
         "@codemirror/state": "latest",
         "@codemirror/view": "latest",
         "@j-cake/jcake-utils": "latest",
+        "@lezer/highlight": "latest",
         "@react-hook/event": "latest",
         "@react-hook/mouse-position": "latest",
         "@react-hook/resize-observer": "latest",
@@ -24,6 +25,7 @@
         "build": "build phony:all phony:install"
     },
     "devDependencies": {
+        "@lezer/lr": "latest",
         "@types/luxon": "latest",
         "@types/node": "latest",
         "@types/react": "latest",

diff --git a/src/components/formula-editor.tsx b/src/components/formula-editor.tsx
@@ -3,16 +3,16 @@ import * as obs from 'obsidian';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import {autocompletion, closeBrackets} from "@codemirror/autocomplete";
-import {defineLanguageFacet, Language} from '@codemirror/language';
+import {defineLanguageFacet, HighlightStyle, LRLanguage, syntaxHighlighting} from '@codemirror/language';
+import {foldNodeProp, foldInside, indentNodeProp} from "@codemirror/language"
+import {styleTags, tags as t} from "@lezer/highlight"
 
 import {Value} from "../csv.js";
 import {StateHolder} from "../main.js";
 import {Selection} from "../selection.js";
 import {computedValue} from "../inline.js";
 
-import * as grammar from '../../grammar/expr.grammar';
-
-console.log(grammar);
+import {parser} from '../../grammar/expr.grammar';
 
 const toIter = function* (walker: TreeWalker): Generator<Node> {
     for (let node = walker.nextNode(); node; node = walker.nextNode())
@@ -33,7 +33,32 @@ export function EditableTableCell(props: { cell: Value, edit?: boolean, sheet: S
     </>}</div>
 }
 
-export const highlighter = new Language(defineLanguageFacet(), );
+export const highlighter = LRLanguage.define({
+    parser: parser.configure({
+        props: [
+            styleTags({
+                Name: t.variableName,
+                Boolean: t.bool,
+                String: t.string,
+                Address: t.labelName,
+                NamedColumn: t.labelName,
+            }),
+            indentNodeProp.add({
+                Application: context => context.column(context.node.from) + context.unit
+            }),
+            foldNodeProp.add({
+                Application: foldInside
+            })
+        ]
+    }),
+    languageData: {}
+});
+
+export const highlight = HighlightStyle.define([
+    { tag: t.labelName, fontStyle: "italic", class: "addr" },
+    { tag: t.string, fontStyle: "italic", class: "text" },
+    { tag: t.operator, class: "operator" }
+])
 
 export function FormulaEditor(props: { cell: Value }) {
     const editor = React.createRef<HTMLDivElement>();
@@ -48,7 +73,8 @@ export function FormulaEditor(props: { cell: Value }) {
                 doc: props.cell.getRaw(),
                 extensions: [
                     closeBrackets(),
-                    highlighter.extension
+                    highlighter.extension,
+                    syntaxHighlighting(highlight)
                 ],
             })
         })

diff --git a/styles.css b/styles.css
@@ -224,3 +224,56 @@ input[type="text"].column-title-rename {
     display: flex;
     justify-content: center;
 }
+
+.formula-editor {
+    flex: 1;
+    color: var(--code-normal);
+}
+
+.formula-editor .text {
+    color: var(--code-string);
+}
+
+.formula-editor .operator {
+    color: var(--code-operator);
+}
+
+.formula-editor .name {
+    color: var(--code-value);
+}
+
+.formula-editor .addr {
+    color: var(--color-red);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+1), :nth-of-type(16n+2)) {
+    color: var(--color-red);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+3), :nth-of-type(16n+4)) {
+    color: var(--color-orange);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+5), :nth-of-type(16n+6)) {
+    color: var(--color-yellow);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+7), :nth-of-type(16n+8)) {
+    color: var(--color-green);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+9), :nth-of-type(16n+10)) {
+    color: var(--color-cyan);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+11), :nth-of-type(16n+12)) {
+    color: var(--color-blue);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+13), :nth-of-type(16n+14)) {
+    color: var(--color-purple);
+}
+
+.formula-editor .addr:is(:nth-of-type(16n+15), :nth-of-type(16n+16)) {
+    color: var(--color-pink);
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -17,7 +17,7 @@
         "strict": true,
         "paths": {
             "#expr": ["../build/expression.wasm"],
-            "#unit": ["./unitConverter/unit.ts"]
+            "#unit": ["./unitConverter/unit.ts"],
         }
     },
     "exclude": [