Also render new elements for the preview

This should only run the script for the modal element to make it fast enough
to not use the Promise.

Author: vmcj

webapp/public/js/domjudge.js

@@ -939,6 +939,7 @@ function previewClarification($input, $previewDiv) {
             }
         }).done(function (data) {
             $previewDiv.html(data.html);
+            MathJax.typesetPromise([document.getElementById($previewDiv[0].id)]);
         });
     }
 }

webapp/templates/team/clarification_modal.html.twig

@@ -10,6 +10,9 @@ View clarification
 
 {% block content %}
     {% include 'team/partials/clarification_content.html.twig' %}
+    <script>
+        MathJax.typeset([document.getElementsByClassName('card-body')]);
+    </script>
 {% endblock %}
 {% block extraButton %}
         <button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#collapsereplyform"

webapp/templates/team/partials/clarification_list.html.twig

@@ -62,7 +62,7 @@
                     </td>
                 {% endif %}
 
-                <td>
+                <td class="clarification-text">
                     <a data-ajax-modal data-ajax-modal-after="markSeen" href="{{ link }}">
                         {{ clarification.summary | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}
                     </a>
@@ -72,4 +72,7 @@
 
         </tbody>
     </table>
+    <script>
+        MathJax.typeset([document.getElementsByClassName('clarification-text')]);
+    </script>
 </div>