Mermaid does not work after decryption in mkdocs-material (workaround)

[deponovo]

The title describes the observation in full.

Here a minimal example: mkdocs.yml

site_name: "mermaid test"
theme:
  material
plugins:
  - search
  - encryptcontent:
      # webcrypto: true # use browsers webcrypto support
      mermaid2: true
      global_password: 'test'
nav:
  - test: index.md

docs/index.md

```mermaid
graph LR
  A[write/modify code] --> B[compile];
  B --> C[debug];
  C --> A;
\``` 

Unfortunately, I can only report the issue.

[unverbuggt]

Hi,

Material implements mermaid2 differently, see here.

The way I tested the decryption was to include mermaid2 as plugin like this:

plugins:
    - mermaid2:
        version: 9.4.3

But I'll dig into that. Maybe there is a way to trigger mermaid generation after decryption the mkdocs-material way...

But it doesn't matter whether webcrypto was enabled or not.

[unverbuggt]

Maybe there is a way to simply re-call the functions material uses to call mermaid.js, but I haven't found any. Until we find one this is the only solution I could come up with...

If you take the current development version of mkdocs-encryptcontent-plugin and change its configuration like this:

site_name: "mermaid test"
theme:
  name: material
  palette: 
  # Palette toggle for light mode
  - scheme: default
    primary: light green
    accent: orange
    toggle:
      icon: material/brightness-7 
      name: Switch to dark mode
  # Palette toggle for dark mode
  - scheme: slate
    primary: light green
    accent: orange
    toggle:
      icon: material/brightness-4
      name: Switch to light mode

plugins:
  - search: {}
  - encryptcontent:
      webcrypto: true # use browsers webcrypto support
      global_password: 'test'
      reload_scripts:
        - '#autostart' #call the script to render with mermaid.js

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

and then add inline html to your markdown page like this:

# marmaid graph

```mermaid
graph LR
  A[write/modify code] --> B[compile];
  B --> C[debug];
  C --> A;

Some text...

Then it'll render mermaid graphs just the way material would (with color theme and light/dark mode).

[unverbuggt]

I'll figure something out. Maybe we need to run different fixes for various themes after decryption

[deponovo]

Thanks for your support. If this would have been in my range of knowledge I would happily help... but java... humhmm... typescript is not.

[unverbuggt]

You'll need to clone the current development version of this plugin and install from source until I push the next release.

Please test if the current fix works for you.

[deponovo]

I could not get it working. I am using a docker image based on the following:

FROM python:3.12-slim

RUN apt update && apt upgrade -y && apt install git -y && apt install zip -y
RUN python -m pip install --upgrade pip
RUN pip install mkdocs-encryptcontent-plugin==3.0.0
RUN git clone https://github.com/unverbuggt/mkdocs-encryptcontent-plugin 
    && cd mkdocs-encryptcontent-plugin 
    && python setup.py sdist bdist_wheel 
    && pip install --force-reinstall --no-deps dist/mkdocs_encryptcontent_plugin-3.0.1-py3-none-any.whl
RUN git clone --depth 1 --branch 9.5.2 https://github.com/squidfunk/mkdocs-material
COPY material_browser_request9_4p.patch mkdocs-material/.
WORKDIR "mkdocs-material"
RUN apt install nodejs -y && echo node -v
RUN apt install npm -y
RUN pip install -e ".[recommended]"
RUN pip install mkdocs-minify-plugin
RUN pip install mkdocs-redirects
RUN npm install
RUN patch -p 0 < material_browser_request9_4p.patch
RUN npm run build
RUN pip install --force-reinstall .

The installation of the latest version of your plugin seems right. Here a piece from the progress:

#9 3.917 Processing ./dist/mkdocs_encryptcontent_plugin-3.0.1-py3-none-any.whl
#9 3.926 Installing collected packages: mkdocs-encryptcontent-plugin
#9 3.927   Attempting uninstall: mkdocs-encryptcontent-plugin
#9 3.938     Found existing installation: mkdocs-encryptcontent-plugin 3.0.0
#9 3.972     Uninstalling mkdocs-encryptcontent-plugin-3.0.0:
#9 3.986       Successfully uninstalled mkdocs-encryptcontent-plugin-3.0.0
#9 4.032 Successfully installed mkdocs-encryptcontent-plugin-3.0.1

After build the website with these key settings:

  - encryptcontent:
      placeholder: 'Password'
      password_button_text: 'Unlock'
      decryption_failure_message: 'Wrong password.'
      encryption_info_message: ''
      password_button: true
      webcrypto: true
      tag_encrypted_page: false
      remember_password: true
      search_index: 'dynamically'
      mermaid2: true
      reload_scripts:
        - '#autostart'
      global_password: 'test'

It still does not render the mermaid code into svgs.

[unverbuggt]

Hi,

if you updated today, then you'd have the latest version (no installation from git needed). how does the rest of your mkdocs.yml read? you need to add the following:

extra_javascript:
  - assets/javascripts/material-encryptcontent.mjs

and also copy the "material-encryptcontent.mjs" file to docs/assets/javascripts/.

Markdown extensions need to be enabled also:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

[deponovo]

I confirm that it is now working. Thank you for your support.