Added support for tags labels and localstorage save (#55)

Author: Specy

src/lib.rs

@@ -131,20 +131,32 @@ fn format_pair(pair: Pair<&str>, indent_level: usize, is_newline: bool) -> Strin
         .collect();
 
     let dash = if is_newline { "- " } else { "" };
-
+    let pair_tag = match pair.as_node_tag() {
+        Some(tag) => format!("(#{}) ", tag),
+        None => String::new(),
+    };
     match len {
         0 => format!(
-            "{}{}{}: {:?}",
+            "{}{}{}{}: {:?}",
             indent,
             dash,
+            pair_tag,
             pair.as_rule(),
             pair.as_span().as_str()
         ),
-        1 => format!("{}{}{} > {}", indent, dash, pair.as_rule(), children[0]),
+        1 => format!(
+            "{}{}{}{} > {}",
+            indent,
+            dash,
+            pair_tag,
+            pair.as_rule(),
+            children[0]
+        ),
         _ => format!(
-            "{}{}{}\n{}",
+            "{}{}{}{}\n{}",
             indent,
             dash,
+            pair_tag,
             pair.as_rule(),
             children.join("\n")
         ),

static/scripts/editor.ts

@@ -11,6 +11,8 @@ let loaded = false;
 const editorDom = document.querySelector<HTMLLinkElement>(".editor")!;
 const gridDom = document.querySelector<HTMLDivElement>(".editor-grid")!;
 const inputDom = document.querySelector<HTMLDivElement>(".editor-input")!;
+const inputTextDom =
+  document.querySelector<HTMLTextAreaElement>(".editor-input-text")!;
 const outputDom =
   document.querySelector<HTMLTextAreaElement>(".editor-output")!;
 const modeBtn = document.querySelector<HTMLButtonElement>("#modeBtn")!;
@@ -20,23 +22,30 @@ const windowHeight = window.innerHeight;
 
 CodeMirror.defineSimpleMode("pest", {
   start: [
+    { regex: /\/\/.*/, token: "comment" },
+    { regex: /[a-zA-Z_]\w*/, token: "constiable" },
+    { regex: /=/, token: "operator", next: "mod" },
+  ],
+  mod: [
+    { regex: /\{/, token: "bracket", next: "inside_rule" },
+    { regex: /[_@!$]/, token: "operator-2" },
+  ],
+  inside_rule: [
+    { regex: /\/\/.*/, token: "comment" },
     { regex: /"/, token: "string", next: "string" },
     {
       regex: /'(?:[^'\\]|\\(?:[nrt0'"]|x[\da-fA-F]{2}|u\{[\da-fA-F]{6}\}))'/,
       token: "string",
     },
-    { regex: /\/\/.*/, token: "comment" },
+    { regex: /\}/, token: "bracket", next: "start" },
+    { regex: /#\w+/, token: "tag" },
+    { regex: /[a-zA-Z_]\w*/, token: "constiable-2" },
+    { regex: /=/, token: "operator-2" },
     { regex: /\d+/, token: "number" },
     { regex: /[~|*+?&!]|(\.\.)/, token: "operator" },
-    { regex: /[a-zA-Z_]\w*/, token: "constiable" },
-    { regex: /=/, next: "mod" },
-  ],
-  mod: [
-    { regex: /\{/, next: "start" },
-    { regex: /[_@!$]/, token: "operator-2" },
   ],
   string: [
-    { regex: /"/, token: "string", next: "start" },
+    { regex: /"/, token: "string", next: "inside_rule" },
     { regex: /(?:[^\\"]|\\(?:.|$))*/, token: "string" },
   ],
   meta: {
@@ -121,6 +130,22 @@ function makeResizable(wideMode: boolean) {
   }
 }
 
+type SavedGrammar = {
+  grammar: string;
+  input: string;
+};
+function saveCode() {
+  const grammar = myCodeMirror.getValue();
+  const input = inputTextDom.value;
+  const json = JSON.stringify({ grammar, input } satisfies SavedGrammar);
+  localStorage.setItem("last-editor-state", json);
+}
+function getSavedCode() {
+  const json = localStorage.getItem("last-editor-state");
+  const parsed = JSON.parse(json || "null");
+  return parsed || { grammar: "", input: "" };
+}
+
 function wideMode() {
   modeBtn.onclick = restore;
   modeBtn.innerText = "Normal Mode";
@@ -148,4 +173,16 @@ function restore() {
 modeBtn.onclick = wideMode;
 formatBtn.onclick = doFormat;
 
-init().then(() => (loaded = true));
+init().then(() => {
+  loaded = true;
+  const url = new URL(window.location.href);
+  const hasUrlGrammar = url.searchParams.get("g");
+  if (!hasUrlGrammar) {
+    const { grammar, input } = getSavedCode();
+    myCodeMirror.setValue(grammar);
+    inputTextDom.value = input;
+  }
+});
+
+inputTextDom.addEventListener("input", saveCode);
+myCodeMirror.on("change", saveCode);

static/style.css

@@ -645,7 +645,14 @@ body {
   color: #7ef69d;
 }
 .cm-s-pest span.cm-constiable {
-  color: #51d3f6;
+  color: #4ea8d8;
+}
+.cm-s-pest span.cm-constiable-2 {
+  color: white;
+}
+
+.cm-s-pest span.cm-tag {
+  color: #f6dc51;
 }
 .cm-s-pest span.cm-error {
   background: #ac4142;