[WIP] Mermaid.js integration

[MichielDeMey]

Integrating Mermaid.js into Homebrewery.

Closes #2701

The heavy lifting is done in the marked-mermaid package which I've open-sourced here:
https://github.com/MichielDeMey/marked-mermaid

Example Homebrewery document:

# Mermaid.js integration examples

::

{{wide
### Working Flowcharts


Example story flow

```mermaid
flowchart TD
A[<h4>Chapter One</h4><h5>For characters level 1-4</h5><p>In tincidunt augue nunc, id pretium eros varius quis. Integer erat leo, efficitur sollicitudin volutpat id, tempor eget neque. Nam euismod velit eu dui accumsan aliquet. Etiam nibh lorem, condimentum ut velit sit amet, dapibus pellentesque augue. Donec a velit quis justo efficitur mollis nec mollis nulla. Nullam non quam commodo nulla volutpat ullamcorper in ac dolor. Donec ullamcorper nibh iaculis posuere luctus. Mauris vehicula eros in fringilla ultrices.</p>] -->|Get money| B(<h4>Chapter 2</h4>)
    B --> C{<h4>Party decides</h4>}
    C -->|EASY| D[<h4>Branch 1</h4><p>Nulla congue et nisi eu dignissim. Praesent ultricies nec arcu eget cursus. Curabitur pharetra tortor ac velit cursus feugiat. Pellentesque imperdiet lacus id dictum tempor. Vestibulum diam tortor, pellentesque a diam et, malesuada sodales sem. Ut dui orci, placerat nec tincidunt nec, volutpat ut libero. Mauris consequat sapien in lectus suscipit feugiat. Vivamus nec dolor vitae dui mattis consequat iaculis eu justo. Donec varius dolor vel ipsum egestas volutpat. Proin ac auctor risus, id laoreet dolor. Nullam sit amet turpis eget risus fringilla mollis in eget lorem. Mauris id ornare magna. Morbi ullamcorper pharetra ultrices. Integer sed vehicula arcu. Fusce at pretium urna. Ut tempor risus ut mauris ullamcorper, in posuere urna mattis.</p>]
    C -->|INTERMEDIATE| E[<h4>Branch 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu purus nunc. Nunc ullamcorper ut augue sit amet iaculis. Vestibulum felis risus, convallis auctor libero id, ultricies efficitur dolor. Quisque vel posuere ex. Quisque id odio quis nibh hendrerit dictum. Curabitur nulla enim, dignissim ut enim eu, gravida porta ligula. Ut vestibulum, nisi lacinia semper venenatis, ex nunc rhoncus tellus, nec aliquam diam turpis aliquet felis. Nullam sodales, leo accumsan imperdiet sodales, nisi odio euismod quam, quis tempor mauris mauris eget ex. Proin pharetra nunc ac feugiat sagittis.</p>]
    C -->|DIFFICULT| F[<h4>Branch 3</h4><p>In tincidunt augue nunc, id pretium eros varius quis. Integer erat leo, efficitur sollicitudin volutpat id, tempor eget neque. Nam euismod velit eu dui accumsan aliquet. Etiam nibh lorem, condimentum ut velit sit amet, dapibus pellentesque augue. Donec a velit quis justo efficitur mollis nec mollis nulla. Nullam non quam commodo nulla volutpat ullamcorper in ac dolor. Donec ullamcorper nibh iaculis posuere luctus. Mauris vehicula eros in fringilla ultrices.</p>]
```

::

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

:

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```
}}



\page




### Mermaid syntax error
```mermaid
foo
```

### Other code blocks
```ruby
some other goes code
```

[MichielDeMey]

Not a big fan of adding a DOM selector here in the markdown.js file, but we need this for:
A. Calculating and passing the correct width constraints to Mermaid (used here)
B. The container to add the graph to (optional, but improves graph size calculations)

Let me know if you know a better way of dealing with this. (I assume prop drilling?)

[Gazook89]

I know the last update on this PR was in March so it's maybe not surprising, but when I load the staged deployment and try the example text given, it doesn't seem to load the graphs. It just says "Loading graphs...", and I gave it a few minutes. Maybe it needs longer, but I suspect it's stuck? No console errors.

[ericscheid]

I know the last update on this PR was in March so it's maybe not surprising, but when I load the staged deployment and try the example text given, it doesn't seem to load the graphs. It just says "Loading graphs...", and I gave it a few minutes. Maybe it needs longer, but I suspect it's stuck? No console errors.

In the html I can see the <pre class="mermaid"/> containers, and I can see they do have contents (mostly the soure text and headings) ... and there's a css rule that sets the visibiity to hidden.

pre.mermaid:not([data-processed='true']) { visibility: hidden; }

The "Loading graph.." message appears because of a similar css rule

pre.mermaid:not([data-processed='true'])::before {
content: 'Loading graph...';
display: block;
visibility: visible;
}

So .. something definitely has gone awry.

[ericscheid]

I'm kinda weirded out that these are <pre class="mermaid"/> and not <code class="mermaid"/>. Eh, semantics, amirite?

Hmm .. a normal unadorned code block renders as <pre><code>...</code></pre>, and a code block marked with a language indicator (e.g. ```ruby) appears as <pre><code class="language-ruby">...</code></pre>

So .. that's seems deliberate of this PR. I would suggest it should render as <code class="mermaid">..</code>

btw, it's the <code> element nested inside a <pre> that triggers the css rule for the fancy border. Rendering as just <code class="mermaid"> (i.e. no <pre> wrapper) would avoid this (was that the intent for instead rendering as <pre class="mermaid">?)

.page pre code {
  width: 100%;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  border-image: url(/assets/codeBorder.png) 26 stretch;
  border-image-width: 10px;
  border-image-outset: 2px;
  border-radius: 12px;
  margin-bottom: 2px;
  padding: 0.15cm;
}

[5e-Cleric]

@MichielDeMey How far is this PR from the finish line?

[dbolack-ab]

I poked this with a stick today ( by cloning the changes into a fresh branch ) and slightly updating marked-mermaid and it worked except for the flowchart TD style examples which are missing text and I'm not sure why.

The other issue I ran into was that it is not possible to pull the mermaid version of 10 or later due to the require vs include dance that I am unable to solve according to the various "this is how you solve this!" instructions.

It results in

Error [ERR_REQUIRE_ESM]: require() of ES Module /mnt/Extra/home/user/Code/marked-mermaid/node_modules/mermaid/dist/mermaid.core.mjs not supported.
Instead change the require of /mnt/Extra/home/user/Code/marked-mermaid/node_modules/mermaid/dist/mermaid.core.mjs to a dynamic import() which is available in all CommonJS modules.

Pinning it at 9.4.1, I was able to generate graphs that looked like the examples from the examples page on the mermaid site aside from the above mentioned.

marked-mermaid requires an update to deal with marked moving forward.

[dbolack-ab]

Closing as orphan in favor of #3697.