Code editor/renderer configured against pre tags has broken mermaid integration

[terah]

Describe the Bug

Hi guys,

I've got this code in the customisation section of admin.

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Then, throughout the pages I've got snippets like this:

<pre class="mermaid">
  pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10

</pre>

In a recent Bookstack release, the mermaid charts stopped working, which looks to be part of some enhancements around the code viewer.

I have tried to swap out the pre tags with div tags which worked OK in the markdown editor but failed to render in the WYSIWYG editor.

So, my question is this: Can you make a tweak to the code editor to ignore a configurable list of css classes or some other way of disabling this functionality on a case by case basis?

Steps to Reproduce

1. Edit a page
2. Add a mermaid chart using pre tags
3. Add the mermaid code snippet to the page customisation block

Expected Behaviour

See a mermaid chart on the page

Screenshots or Additional Context

It appears that the code editor intercepts all 'pre' tag code blocks.

Browser Details

Brave Version 1.76.82 Chromium: 134.0.6998.178 (Official Build) (arm64)

Exact BookStack Version

BookStack v25.02.1

[ssddanbrown]

Can you make a tweak to the code editor to ignore a configurable list of css classes or some other way of disabling this functionality on a case by case basis?

That's not an option provided, nor am I too keen to add options to work around issues/compatibility with non-supported customizations.

Really, the tricky part is a matter of timing. The code handling is running before the mermaid code due to the import.

Here's my take on an altered version of your customization code:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<script type="module">
  mermaid.initialize({ startOnLoad: false });

  const codeBlocks = document.querySelectorAll('.page-content pre.mermaid, .page-content pre code.language-mermaid');
  const mermaidBlocks = [];
  for (const codeBlock of codeBlocks) {
    const mermaidBlock = document.createElement('div');
    mermaidBlock.innerHTML = codeBlock.innerHTML;
    mermaidBlocks.push(mermaidBlock);

    const replaceTarget = (codeBlock.nodeName === 'CODE') ? codeBlock.parentElement : codeBlock;
    replaceTarget.after(mermaidBlock);
    replaceTarget.remove();  
  }

  mermaid.run({
    nodes: mermaidBlocks,
  });
</script>

I've only done a quick bit of testing, and this could cause problems in other parts of the application.

This code sneaks in before the normal app code, and specifically converts the existing code blocks to divs automatically on run, before passing them to mermaid for conversion.

The above should work with your original <pre> format mermaid blocks, but I've also made it work with normal BookStack WYSIWYG created code blocks where mermaid is set as the language:

[terah]

That's worked great!

Thank you.

I really appreciate you taking the time to take a look at this for me.

[ssddanbrown]

Good to hear! I'll therefore close off this support thread.