From 34053f6591745a9801b19e5fa88d92c25b33f344 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Mon, 5 Sep 2022 17:20:36 +0200
Subject: [PATCH] Added a preview for latex rendered unit and symbol to
 parameters

---
 .../pages/latex_preview_controller.js         | 21 +++++++++++++++++++
 .../Parts/edit/edit_form_styles.html.twig     |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 assets/controllers/pages/latex_preview_controller.js

diff --git a/assets/controllers/pages/latex_preview_controller.js b/assets/controllers/pages/latex_preview_controller.js
new file mode 100644
index 00000000..8c1279f1
--- /dev/null
+++ b/assets/controllers/pages/latex_preview_controller.js
@@ -0,0 +1,21 @@
+import {Controller} from "@hotwired/stimulus";
+import katex from "katex";
+import "katex/dist/katex.css";
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ["input", "preview"];
+
+    updatePreview()
+    {
+        katex.render(this.inputTarget.value, this.previewTarget, {
+            throwOnError: false,
+        });
+    }
+
+    connect()
+    {
+        this.updatePreview();
+        this.inputTarget.addEventListener('input', this.updatePreview.bind(this));
+    }
+}
\ No newline at end of file
diff --git a/templates/Parts/edit/edit_form_styles.html.twig b/templates/Parts/edit/edit_form_styles.html.twig
index 003be938..77439f20 100644
--- a/templates/Parts/edit/edit_form_styles.html.twig
+++ b/templates/Parts/edit/edit_form_styles.html.twig
@@ -70,11 +70,11 @@
     {% import 'components/collection_type.macro.html.twig' as collection %}
     <tr {{ stimulus_controller('pages/parameters_autocomplete', {"url": url('typeahead_parameters', {"query": "__QUERY__", "type": "part"})}) }}>
         <td>{{ form_widget(form.name, {"attr": {"data-pages--parameters-autocomplete-target": "name"}}) }}{{ form_errors(form.name) }}</td>
-        <td>{{ form_widget(form.symbol, {"attr": {"data-pages--parameters-autocomplete-target": "symbol"}}) }}{{ form_errors(form.symbol) }}</td>
+        <td {{ stimulus_controller('pages/latex_preview') }}>{{ form_widget(form.symbol, {"attr": {"data-pages--parameters-autocomplete-target": "symbol", "data-pages--latex-preview-target": "input"}}) }}{{ form_errors(form.symbol) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
         <td>{{ form_widget(form.value_min) }}{{ form_errors(form.value_min) }}</td>
         <td>{{ form_widget(form.value_typical) }}{{ form_errors(form.value_typical) }}</td>
         <td>{{ form_widget(form.value_max) }}{{ form_errors(form.value_max) }}</td>
-        <td>{{ form_widget(form.unit, {"attr": {"data-pages--parameters-autocomplete-target": "unit"}}) }}{{ form_errors(form.unit) }}</td>
+        <td {{ stimulus_controller('pages/latex_preview') }}>{{ form_widget(form.unit, {"attr": {"data-pages--parameters-autocomplete-target": "unit", "data-pages--latex-preview-target": "input"}}) }}{{ form_errors(form.unit) }}<span {{ stimulus_target('pages/latex_preview', 'preview') }}></span></td>
         <td>{{ form_widget(form.value_text) }}{{ form_errors(form.value_text) }}</td>
         <td>{{ form_widget(form.group) }}{{ form_errors(form.group) }}</td>
         <td>