Dedent ui.mermaid content like ui.markdown does

nicegui/elements/code.py

@@ -1,9 +1,9 @@
 import asyncio
 import time
 
+from ..helpers import remove_indentation
 from .button import Button as button
 from .markdown import Markdown as markdown
-from .markdown import remove_indentation
 from .mixins.content_element import ContentElement
 from .timer import Timer as timer
 

nicegui/elements/markdown.py

@@ -8,6 +8,7 @@
 from pygments.formatters import HtmlFormatter  # pylint: disable=no-name-in-module
 
 from .. import core
+from ..helpers import remove_indentation
 from .mixins.content_element import ContentElement
 
 
@@ -74,14 +75,3 @@ def _render_markdown(self) -> str:
 def prepare_content(content: str, extras: str) -> str:
     """Render Markdown content to HTML."""
     return markdown2.markdown(remove_indentation(content), extras=extras.split())
-
-
-def remove_indentation(text: str) -> str:
-    """Remove indentation from a multi-line string based on the indentation of the first non-empty line."""
-    lines = text.splitlines()
-    while lines and not lines[0].strip():
-        lines.pop(0)
-    if not lines:
-        return ''
-    indentation = len(lines[0]) - len(lines[0].lstrip())
-    return '\n'.join(line[indentation:] for line in lines)

nicegui/elements/mermaid/mermaid.py

@@ -2,6 +2,7 @@
 
 from ...defaults import DEFAULT_PROP, resolve_defaults
 from ...events import Handler, MermaidNodeClickEventArguments, handle_event
+from ...helpers import remove_indentation
 from ..mixins.content_element import ContentElement
 
 
@@ -52,8 +53,9 @@ def on_node_click(self, callback: Handler[MermaidNodeClickEventArguments]) -> Se
         return self
 
     def _handle_content_change(self, content: str) -> None:
-        self._props[self.CONTENT_PROP] = content.strip()
-        self.run_method('update', content.strip())
+        content = remove_indentation(content)
+        self._props[self.CONTENT_PROP] = content
+        self.run_method('update', content)
 
     def _render_markdown(self) -> str:
         return f'```mermaid\n{self.content}\n```' if self.content else ''

nicegui/elements/restructured_text.py

@@ -3,7 +3,8 @@
 
 from docutils.core import publish_parts
 
-from .markdown import Markdown, remove_indentation
+from ..helpers import remove_indentation
+from .markdown import Markdown
 
 
 class ReStructuredText(Markdown):

nicegui/helpers/__init__.py

@@ -10,7 +10,7 @@
     should_await,
 )
 from .network import format_url, is_port_open, schedule_browser
-from .strings import event_type_to_camel_case, kebab_to_camel_case
+from .strings import event_type_to_camel_case, kebab_to_camel_case, remove_indentation
 from .warnings import warn_once
 
 __all__ = [
@@ -26,6 +26,7 @@
     'is_user_simulation',
     'kebab_to_camel_case',
     'normalize_lifecycle_handler',
+    'remove_indentation',
     'require_top_level_layout',
     'schedule_browser',
     'should_await',

nicegui/helpers/strings.py

@@ -6,3 +6,14 @@ def kebab_to_camel_case(string: str) -> str:
 def event_type_to_camel_case(string: str) -> str:
     """Convert an event type string to camelCase."""
     return '.'.join(kebab_to_camel_case(part) if part != '-' else part for part in string.split('.'))
+
+
+def remove_indentation(text: str) -> str:
+    """Remove indentation from a multi-line string based on the indentation of the first non-empty line."""
+    lines = text.splitlines()
+    while lines and not lines[0].strip():
+        lines.pop(0)
+    if not lines:
+        return ''
+    indentation = len(lines[0]) - len(lines[0].lstrip())
+    return '\n'.join(line[indentation:] for line in lines)

tests/test_mermaid.py

@@ -49,6 +49,26 @@ def page():
     screen.should_contain('Verification: Test')
 
 
+def test_mermaid_with_yaml_frontmatter(screen: Screen):
+    @ui.page('/')
+    def page():
+        ui.mermaid('''
+            ---
+            displayMode: compact
+            ---
+            gantt
+                title A Gantt Diagram
+                dateFormat YYYY-MM-DD
+                section Section
+                    A task          :a1, 2014-01-01, 30d
+                    Another task    :after a1, 20d
+        ''')
+
+    screen.open('/')
+    screen.should_contain('A Gantt Diagram')
+    screen.should_not_contain('Syntax error in text')
+
+
 def test_replace_mermaid(screen: Screen):
     @ui.page('/')
     def page():

tests/test_vbuild.py

@@ -3,7 +3,7 @@
 
 import pytest
 
-from nicegui.elements.markdown import remove_indentation
+from nicegui.helpers import remove_indentation
 from nicegui.vbuild import VBuild
 
 

website/documentation/content/doc/api.py

@@ -13,7 +13,7 @@
 from nicegui import Client
 from nicegui import ui as nicegui_ui
 from nicegui.functions.navigate import Navigate
-from nicegui.elements.markdown import remove_indentation
+from nicegui.helpers import remove_indentation
 
 from .page import DocumentationPage
 from .part import Demo, DocumentationPart

website/documentation/reference.py

@@ -3,7 +3,7 @@
 from dataclasses import dataclass
 
 from nicegui import binding, ui
-from nicegui.elements.markdown import remove_indentation
+from nicegui.helpers import remove_indentation
 
 from .. import design as d
 from ..design import create_anchor_name, subheading

website/documentation/windows.py

@@ -1,7 +1,6 @@
 from collections.abc import Callable
 
 from nicegui import helpers, ui
-from nicegui.elements.markdown import remove_indentation
 
 from .. import design as d
 from ..design import phosphor_icon
@@ -26,7 +25,7 @@ def code_window(code: str = '', *, title: str = 'main.py', language: str = 'pyth
                         .props('flat round size=xs').classes('opacity-30 hover:opacity-100 transition-opacity'):
                     phosphor_icon('ph-copy').classes('text-base')
         if code:
-            ui.markdown(f'````{language}\n{remove_indentation(code)}\n````') \
+            ui.markdown(f'````{language}\n{helpers.remove_indentation(code)}\n````') \
                 .classes('w-full grow py-2 overflow-x-auto [&_pre]:px-4 [&_pre]:w-fit [&_pre]:min-w-full')
     return window