Add mermaid embed

static/src/scss/_blocks.scss

@@ -41,3 +41,11 @@ div.block-tangent {
     padding-left: 1.5rem;
   }
 }
+
+div.block-mermaid {
+  text-align: center;
+
+  img {
+    width: unset;
+  }
+}

website/common/rich_text.py

@@ -0,0 +1,37 @@
+RICH_TEXT_FEATURES = [
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "bold",
+    "italic",
+    "ol",
+    "ul",
+    "link",
+    "document-link",
+    "code",
+    "strikethrough",
+    "snippet-link",
+    "snippet-embed",
+]
+
+RICH_TEXT_FEATURES_PLAIN = [
+    "bold",
+    "italic",
+    "link",
+    "document-link",
+    "code",
+    "strikethrough",
+]
+
+RICH_TEXT_FEATURES_SIMPLE = [
+    "bold",
+    "italic",
+    "ol",
+    "ul",
+    "link",
+    "document-link",
+    "code",
+    "strikethrough",
+]

website/common/streamfield.py

@@ -10,44 +10,13 @@ from wagtail.images.blocks import ImageChooserBlock
 
 from website.common.utils import HEADER_TAGS
 from website.contrib.code_block.blocks import CodeBlock
+from website.contrib.mermaid_block.blocks import MermaidBlock
 
-RICH_TEXT_FEATURES = [
+from .rich_text import (
-    "h2",
+    RICH_TEXT_FEATURES,
-    "h3",
+    RICH_TEXT_FEATURES_PLAIN,
-    "h4",
+    RICH_TEXT_FEATURES_SIMPLE,
-    "h5",
+)
-    "h6",
-    "bold",
-    "italic",
-    "ol",
-    "ul",
-    "link",
-    "document-link",
-    "code",
-    "strikethrough",
-    "snippet-link",
-    "snippet-embed",
-]
-
-RICH_TEXT_FEATURES_PLAIN = [
-    "bold",
-    "italic",
-    "link",
-    "document-link",
-    "code",
-    "strikethrough",
-]
-
-RICH_TEXT_FEATURES_SIMPLE = [
-    "bold",
-    "italic",
-    "ol",
-    "ul",
-    "link",
-    "document-link",
-    "code",
-    "strikethrough",
-]
 
 
 class LoremBlock(blocks.StructBlock):
@@ -98,6 +67,7 @@ def get_blocks() -> list[tuple[str, blocks.BaseBlock]]:
         ("image", ImageCaptionBlock()),
         ("code", CodeBlock()),
         ("tangent", TangentBlock()),
+        ("mermaid", MermaidBlock()),
     ]
 
 

website/contrib/mermaid_block/blocks.py

@@ -0,0 +1,33 @@
+import base64
+import json
+import zlib
+
+from wagtail.blocks import RichTextBlock, StructBlock, StructValue, TextBlock
+
+from website.common.rich_text import RICH_TEXT_FEATURES_PLAIN
+
+
+class MermaidStructValue(StructValue):
+    def config(self) -> dict:
+        return {"code": self.get("source"), "mermaid": {"theme": "default"}}
+
+    def pako(self) -> str:
+        """
+        Reverse engineer the URL payload needed by mermaid.ink
+        """
+        return (
+            "pako:"
+            + base64.urlsafe_b64encode(
+                zlib.compress(json.dumps(self.config()).encode())
+            ).decode()
+        )
+
+
+class MermaidBlock(StructBlock):
+    source = TextBlock()
+    caption = RichTextBlock(features=RICH_TEXT_FEATURES_PLAIN)
+
+    class Meta:
+        icon = "edit"
+        value_class = MermaidStructValue
+        template = "contrib/blocks/mermaid.html"

website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html

@@ -0,0 +1,10 @@
+{% load wagtailcore_tags %}
+
+<figure>
+  <div class="image">
+    <img src="https://mermaid.ink/img/{{ value.pako }}" referrerpolicy="no-referrer"/>
+  </div>
+  <figcaption>
+    {{ value.caption|richtext }}
+  </figcaption>
+</figure>

website/settings.py

@@ -29,6 +29,7 @@ INSTALLED_APPS = [
     "website.blog",
     "website.images",
     "website.contrib.code_block",
+    "website.contrib.mermaid_block",
     "website.contrib.unsplash",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",