LaTeX and Mermaid chart support

[Luticus]

Is your feature request related to a problem? Please describe.
Not exactly, but it will get closer to feature parody with the original text editor + markdown editor extension.

Although it should be noted that some of my current markdown documents look broken because they have latex and mermaid charts integrated into them and when viewed in this editor it makes them look bad.

Describe the solution you'd like
I would like latex support and support for mermaid charts in markdown. (feature parody with the markdown editor extension). Would also be really nice if there were a way to view the mark down in source mode and/or interpreted mode, like the markdown editor app does.

Describe alternatives you've considered
Currently, I switched back to the standard text editor and markdown extension, because they support more.

Additional context
LaTeX example:

Mermaid chart example:

[jancborchardt]

This is quite advanced, so it’s not likely to be on the main roadmap anytime soon as we have more core things to work on first. But this is a great thing to be picked up by anyone who wants to dive in and contribute! 🙂

@Luticus maybe you have some links to libraries that can be used?

[Luticus]

I wish. If I could I definitely would. Maybe I can take a look at the markdown editor project to get some ideas. Unfortunately I'm more of a python person these days. But I would love to contribute if I had some mentoring on where to even start :)

I wish I knew more about the NC API and where a good list of all available methods/classes/etc were and what they do.

[Luticus]

Ok for LaTeX it looks like KaTeX may be what we'd need: https://katex.org/

For the mermaid stuff it looks like they are using: https://github.com/tylingsoft/markdown-it-mermaid

I could probably try to figure out how to implement some of that but integrating it with the current nc text code I may require some pointers on. At any rate, that's a starting point.

[juliusknorr]

Here are some code hints:

• Registering of markdown-it plugins https://github.com/nextcloud/text/blob/master/src/EditorFactory.js#L101
• A new node type has to be registered here https://github.com/nextcloud/text/blob/master/src/EditorFactory.js#L65
• A class for the new node needs to be implemented like we do it for the image: https://github.com/nextcloud/text/blob/master/src/nodes/Image.js
  • make sure to provide a proper schema, that matches the result of the markdownit plugin https://github.com/nextcloud/text/blob/master/src/marks/index.js#L48-L73
  • The actual rendering of the node can be handled by a vue component like https://github.com/nextcloud/text/blob/master/src/nodes/ImageView.vue

[juliusknorr]

Another comment, since the mermaid is just a code block with the mermaid syntax defined, it would probably be better to just extend the tiptap codeblock node and extend the rendering to also present the resulting output with https://github.com/robin1liu/vue-mermaid

[Andreas-Kainz]

The Markdown Editor has both LaTeX and Mermaid support.

https://apps.nextcloud.com/apps/files_markdown

[pabsta]

Is there a known workaround to change the rendering of equations with the Mardown editor? The current rendering engine does a poor job (compared to mathjax/katex). A key attractive feature of latex is its beautiful typesetting of equations.

I'm happy with any hints or suggestions that could help me hack/enhance the two-pane markdown editor.

[juliusknorr]

I'm happy with any hints or suggestions that could help me hack/enhance the two-pane markdown editor.

The two-pane markdown editor you might be looking for is at https://github.com/icewind1991/files_markdown

For possible support in text there are some code pointers in #163 (comment) already. This is currently not on our roadmap, but contributions would still be welcome.

[Luticus]

At the very least it would be nice to be able to switch between raw markdown and wysiwyg editor. Not sure if latex support is there in the standard text editor, haven't tried it in a while. The two pane markdown editor I was using is very broken in NC25.

[aurelienpierre]

This is not at all difficult to do. I did it in https://github.com/aurelienpierre/wp-scholar.

Both Mathjax and Mermaid work client-side with javascript, by parsing the HTML content of the page. You only need to load those javascripts in the HTML page.

Mermaid support

Here is how to do it for Mermaid (loading it from CDNjs, feel free to copy it locally and to load it from there):

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.6/mermaid.min.js" async></script>

If you need to configure it, here is how it's done:

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var config = {
        startOnLoad: true,
        theme: 'neutral',
        htmlLabels: true,
        themeCSS: ':root { --mermaid-font-family: sans-serif; --mermaid-font-size: 14px;}',
        'themeVariables': {
          fontFamily: 'sans-serif',
          fontSize: '14px'
        },
      };
      mermaid.initialize(config);
    }, false);
  </script>

All you need to do is ensure that

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

renders in HTML as:

<pre class="language-mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
 </pre>

such that the JS script can find it. But it seems to be already done, after a quick check in Nextcloud web.

By the way, Github now supports Mermaid natively too, so here is how the example above renders:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Loading

LaTeX

Here is how it's done for Mathjax (LaTeX formatting), with the configuration (which will search for $ and $$, but also for <math> markup, and render equations as SVG):

  <script>
    MathJax = {
        packages: {'[+]': ['autoload', 'require']},
        tex: {
          tags: 'all',
          inlineMath: [ ['$','$'] ],
          displayMath: [ ['$$','$$'] ],
          processEscapes: true,
          processEnvironments: true,
          processRefs: true,
        },
        svg: {
          scale: 1.25,
          minScale: .5,
          mtextInheritFont: true,
          merrorInheritFont: true,
          mathmlSpacing: false,
          skipAttributes: {},
          exFactor: .5,
          displayAlign: 'center',
          displayIndent: '0',
          fontCache: 'global',
          localID: null,
          internalSpeechTitles: true,
          titleID: 0
        },
        options: {
          ignoreHtmlClass: 'no_math',    //  class that marks tags not to search
          processHtmlClass: 'math',  //  class that marks tags that should be searched
        }
    };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js" async></script>

Again, Github now supports LaTeX rendering too. So the following Markdown input:

$$
\begin{align}
\iint_{-a/2}^{a/2} i^2 \cdot e^{-\frac{i^2}{2 \sigma^2}} \cdot e^{-\frac{j^2}{2 \sigma^2}}\, \mathrm{d}i \, \mathrm{d}j 
  &= \int_{-a/2}^{a/2} e^{-\frac{j^2}{2 \sigma^2}} \, \mathrm{d}j \, \cdot \int_{-a/2}^{a/2} i^2 \cdot e^{-\frac{i^2}{2 \sigma^2}} \, \mathrm{d}i \\\
  &= \sqrt{2 \pi \sigma^2} \, \cdot \, \frac{1}{2}\sqrt{8 \pi \sigma^6} \\\
  &= \frac{\sqrt{16 \pi}}{2} \sigma^4
\end{align}
$$

renders:

$$ \begin{align} \iint_{-a/2}^{a/2} i^2 \cdot e^{-\frac{i^2}{2 \sigma^2}} \cdot e^{-\frac{j^2}{2 \sigma^2}}, \mathrm{d}i , \mathrm{d}j &= \int_{-a/2}^{a/2} e^{-\frac{j^2}{2 \sigma^2}} , \mathrm{d}j , \cdot \int_{-a/2}^{a/2} i^2 \cdot e^{-\frac{i^2}{2 \sigma^2}} , \mathrm{d}i \\ &= \sqrt{2 \pi \sigma^2} , \cdot , \frac{1}{2}\sqrt{8 \pi \sigma^6} \\ &= \frac{\sqrt{16 \pi}}{2} \sigma^4 \end{align} $$

Side note

Both .js libraries are quite heavy to load, so you may want to load them only when needed. Here are the PHP regex to detect if LaTeX and Mermaid are use in the page content:

function autoenqueue_external_ressource( $content )
{
  if(preg_match('/((\$|$|$|$){1,2})(.+?)\1/s', $content) ||
     preg_match('/<[a-z]+.*?class=([\'\"]).*math.*\1.*>/', $content)
  {
    // enqueue mathjax.js for loading in footer
    // enqueue mathjax config into header
    echo "<!-- maths detected -->";
  }

  if(preg_match('/<code.*class=([\"\']).*(mermaid).*\1.*>/', $content))
  {
    // enqueue mermaid.js for loading in footer
    // enqueue mermaid config into header
    echo "<!-- mermaid detected -->";
  }
}

[juliusknorr]

Mermaid support has been implemented. For LaTeX it would be much appreciated if you could open a new separate issue. The implementation could be inspired by #4614