LaTeX and Mermaid chart support

Luticus commented 5 years ago

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 commented 5 years ago

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! :slightly_smiling_face:

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

Luticus commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

The Markdown Editor has both LaTeX and Mermaid support.

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

pabsta commented 4 years ago

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 commented 2 years ago

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 https://github.com/nextcloud/text/issues/163#issuecomment-514624848 already. This is currently not on our roadmap, but contributions would still be welcome.

Luticus commented 2 years ago

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 commented 2 years ago

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;

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('/((\$|&#36;|&dollar;|&#x24;){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 commented 1 year ago

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

nextcloud / text