Fixing issue with complex mermaid charts not rendering

Author: rishikanthc

Dockerfile

@@ -1,26 +1,10 @@
 FROM python:3.12-alpine
 
-# Install required packages
-RUN apk add --no-cache bash
+RUN pip install --no-cache-dir markopolis==0.3.1
 
-# Install markopolis
-RUN pip install --no-cache-dir markopolis==0.3.0
-
-# Set working directory
 WORKDIR /app
 
-# Copy the .env file if it exists
-COPY .env* /app/
-
-# Create a startup script
-RUN echo '#!/bin/bash\n\
-if [ -f /app/.env ]; then\n\
-    export $(cat /app/.env | xargs)\n\
-fi\n\
-exec markopolis run --port 8080\n\
-' > /app/start.sh && chmod +x /app/start.sh
-
 EXPOSE 8080
 
-# Run the startup script when the container launches
-CMD ["/app/start.sh"]
+# Run markopolis when the container launches
+CMD ["markopolis", "run", "--port", "8080"]

README.md

@@ -52,7 +52,7 @@ version: '3.8'
 
 services:
   markopolis:
-    image: ghcr.io/rishikanthc/markopolis:0.3.0
+    image: ghcr.io/rishikanthc/markopolis:0.3.1
     ports:
       - "8080:8080"
     environment:

markopolis/md_extensions.py

@@ -1,5 +1,4 @@
 import markdown
-import string
 from markdown.inlinepatterns import InlineProcessor
 import xml.etree.ElementTree as etree
 from markdown.preprocessors import Preprocessor
@@ -116,60 +115,36 @@ def extendMarkdown(self, md):
         md.postprocessors.register(footnote_postprocessor, "footnote_postprocessor", 25)
 
 
-def strip_not_printable(text):
-    """Remove non-printable characters from a string."""
-    return "".join(filter(lambda x: x in string.printable, text))
-
-
-# This regex matches the opening line for a mermaid code block in Obsidian's syntax.
-MermaidRegex = re.compile(r"^```[\ \t]*[Mm]ermaid[\ \t]*$")
-
-
 class MermaidPreprocessor(Preprocessor):
     def run(self, lines):
         new_lines = []
-        in_mermaid_code = False
-        is_mermaid = False
+        is_mermaid_block = False
+        mermaid_lines = []
 
         for line in lines:
-            if not in_mermaid_code:
-                # Match the opening line of the mermaid code block
-                if MermaidRegex.match(line):
-                    in_mermaid_code = True
-                    new_lines.append('<div class="mermaid">')
-                    is_mermaid = True
-                else:
-                    new_lines.append(line)
+            if line.strip() == "```mermaid":
+                is_mermaid_block = True
+                mermaid_lines = []
+            elif line.strip() == "```" and is_mermaid_block:
+                is_mermaid_block = False
+                mermaid_content = "\n".join(mermaid_lines)
+                mermaid_html = self.mermaid_to_html(mermaid_content)
+                new_lines.append(mermaid_html)
+            elif is_mermaid_block:
+                mermaid_lines.append(line)
             else:
-                # Match the closing line of the mermaid code block
-                if line.strip() == "```":
-                    in_mermaid_code = False
-                    new_lines.append("</div>")
-                    new_lines.append("")
-                else:
-                    # Strip non-printable characters and add the mermaid code lines
-                    new_lines.append(strip_not_printable(line).strip())
-
-        if is_mermaid:
-            # Add the mermaid.js initialization script to the bottom of the document if any mermaid diagrams were found.
-            new_lines.append("")
-            new_lines.append("""<script>
-                function initializeMermaid() {
-                    mermaid.initialize({startOnLoad: true});
-                }
-                if (document.readyState === "complete" || document.readyState === "interactive") {
-                    setTimeout(initializeMermaid, 1);
-                } else {
-                    document.addEventListener("DOMContentLoaded", initializeMermaid);
-                }
-            </script>""")
+                new_lines.append(line)
 
         return new_lines
 
+    def mermaid_to_html(self, mermaid_content):
+        escaped_content = mermaid_content.replace('"', "&quot;")
+        return f'<div class="mermaid">{escaped_content}</div>'
+
 
 class MermaidExtension(Extension):
     def extendMarkdown(self, md):
-        md.preprocessors.register(MermaidPreprocessor(md), "mermaid", 35)
+        md.preprocessors.register(MermaidPreprocessor(md), "mermaid", 175)
 
 
 # Regular expression to match Obsidian callout syntax

markopolis/templates/page.html

@@ -26,8 +26,10 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/dark.min.css"
     id="dark-theme" disabled>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-  <script src="/static/js/mermaid.min.js"></script>
   <script src="/static/js/callouts.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>mermaid.initialize({startOnLoad: true});</script>
 </head>
 
 <body>

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "markopolis"
-version = "0.3.0"
+version = "0.3.1"
 description = "Self-hostable Obsidian Publish"
 authors = ["Rishikanth Chandrasekaran <r3chandr@ucsd.edu>"]
 readme = "README.md"