Added a preview for latex rendered unit and symbol to parameters

This commit is contained in:
Jan Böhmer 2022-09-05 17:20:36 +02:00
parent 9a7e47863b
commit 34053f6591
2 changed files with 23 additions and 2 deletions

View file

@ -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));
}
}

View file

@ -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>