[Help - Custom widget] Creating a Markdown-widget equivalent for LaTeX / MathJax

Ask for Help
1

Context

As a teacher, I would like to create my math exercices directly in Grist. There’s already the Markdown widget that allow me to create reports and summaries.

However, what would be awesome would be to be able to write directly interpretable code inside Grist.

Current setup

Using the custom widget, I was able to have the following working code that uses MathJax

Table setup

Having a column content that contains HTML code that will be inserted in the content div element.

HTML

<html>
<head>
  <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
  <script>
    MathJax = {
      loader: {load: ["input/asciimath", "output/chtml", "ui/menu"]},
      output: {font: "mathjax-newcm"}
    }
    </script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/startup.js">
</script>

</head>
<body>
  <div style="font-family: sans-serif; padding: 1em;">
    <h2 id="title"></h2>
    <div id="content"></div>
  </div>
</body>
</html>

JavaScript

grist.ready({ requiredAccess: 'full' });
grist.onRecords(table => {

});
grist.onRecord(record => {
  document.querySelector("#title").innerHTML = record.Titre
  document.querySelector("#content").innerHTML = record.content
});

let currentRecord = null;
grist.onRecord((record, mapping) => {
  if (!record) {
    return;
  }
  currentRecord = record;
  el.innerHTML = record.content;
});

const el = document.querySelector("#content");
el.addEventListener('change', async (e) => {
  const elementContent = e.target.value;
  const delta = {
    id: currentRecord.id,
    fields: {
      "content": elementContent
    }
  };
  await grist.selectedTable.update(delta);
});

Problem

  • As of now, the widget works, but as I’m modifying the value of content, the HTML display stops working. I have to reload the web browser page to display it correctly, as if the custom widget wasn’t working when I change the content. A solution would be to have a Markdown-like widget with an Edit button to change the code directly inside the widget and interpret it whenever I quit it
  • As of now, the page is using the AsciiMath notation, however it would be great to be able to directly write LaTeX code