From ff32e6d00008d5c73be06b3db9938cd39449f7ac Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Sun, 19 Oct 2025 20:54:56 +0200
Subject: [PATCH] text edit dialog shows parser errors

---
 src/App/About.tsx      |  7 +++----
 src/App/App.tsx        |  2 +-
 src/App/TextDialog.tsx | 24 ++++++++++++++++++------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/App/About.tsx b/src/App/About.tsx
index 104e114..61c1f51 100644
--- a/src/App/About.tsx
+++ b/src/App/About.tsx
@@ -1,11 +1,10 @@
 import logo from "../../artwork/logo.svg";
 
 export function About() {
-  return <div style={{display: 'inline-block', backgroundColor: 'white', width: 500, padding: 4}}>
+  return <div style={{backgroundColor: 'white', width: 500, padding: 4}}>
     <p><img src={logo}/></p>
-    <p>StateBuddy is a <a href="https://dl.acm.org/doi/10.1016/0167-6423(87)90035-9">statechart</a> editing, simulation, debugging and testing environment inspired by <a href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>.</p>
+    <p>StateBuddy is an <a target="_blank" href="https://deemz.org/git/research/statebuddy">open source</a> tool for <a target="_blank" href="https://dl.acm.org/doi/10.1016/0167-6423(87)90035-9">Statechart</a> editing, simulation, debugging and testing environment, inspired by <a target="_blank" href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>.</p>
     <p>It was originally created for teaching Statecharts to university students, but likely is a useful tool for other purposes as well.</p>
-    <p>StateBuddy is <a href="https://deemz.org/git/research/statebuddy">open source</a>.</p>
-    <p>For commerical use, <a href="mailto:joeri.exelmans@gmail.com">e&#x2011;mail me</a> for permission.</p>
+    <p>Commercial use: <a href="mailto:joeri.exelmans@gmail.com">e&#x2011;mail me</a> for permission.</p>
     </div>;
 }
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 47743f3..282fd09 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -152,7 +152,7 @@ export function App() {
     onMouseDown={() => setModal(null)}
     style={{width: '100%', height: '100%', position:'absolute', textAlign: 'center', backgroundColor: 'rgba(127,127,127,0.5)' }}>
     <div
-      style={{position: 'relative', top: '50%', transform: 'translateY(-50%)'}}>
+      style={{position: 'relative', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', display: 'inline-block'}}>
       <span onMouseDown={e => e.stopPropagation()}>
       {modal}
       </span>
diff --git a/src/App/TextDialog.tsx b/src/App/TextDialog.tsx
index 110a789..4dfd45c 100644
--- a/src/App/TextDialog.tsx
+++ b/src/App/TextDialog.tsx
@@ -1,5 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction, useState } from "react";
 
+import { parse as parseLabel, SyntaxError } from "../statecharts/label_parser";
+
 export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElement|null>>, text: string, done: (newText: string|undefined) => void}) {
   const [text, setText] = useState(props.text);
   function onKeyDown(e: KeyboardEvent) {
@@ -16,11 +18,21 @@ export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElemen
     }
     e.stopPropagation();
   }
-  return <span onKeyDown={onKeyDown} style={{backgroundColor:'white'}}>
-    <textarea style={{fontFamily: 'Roboto', width:500, height: 100}} onChange={e=>setText(e.target.value)}>{text}</textarea>
+
+  let error = "";
+  try {
+    const parsed = parseLabel(text);
+  } catch (e) {
+    error = e.message;
+  }
+
+  return <div onKeyDown={onKeyDown} style={{backgroundColor:'white', padding: 4, width: 520}}>
+    Edit text label:<br/>
+    <textarea autoFocus style={{fontFamily: 'Roboto', width:500, height: 100}} onChange={e=>setText(e.target.value)}>{text}</textarea>
     <br/>
-    <span style={{backgroundColor:'lightyellow'}}>
-    Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.
-    </span>
-  </span>;
+    <span style={{color: 'var(--error-color)'}}>{error}</span><br/>
+    <p><kbd>Enter</kbd> to confirm. <kbd>Escape</kbd> to cancel.
+    </p>
+    (Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.)
+  </div>;
 }
\ No newline at end of file