Update Markdown elements even if invisible (e.g. inside tooltip or tab) (#2803)

* Add call to `self.update()` - it seems it's crucial for markdown elements to work inside tooltips.

Signed-off-by: Alexander Zarubkin <alexander.zarubkin@toptal.com>

* avoid flickering

* fix ui.restructured_text

---------

Signed-off-by: Alexander Zarubkin <alexander.zarubkin@toptal.com>
Co-authored-by: Alexander Zarubkin <alexander.zarubkin@toptal.com>
Co-authored-by: Falko Schindler <falko@zauberzeug.com>

nicegui/elements/markdown.js

@@ -4,7 +4,7 @@ export default {
     this.ensure_codehilite_css();
     if (this.use_mermaid) {
       this.mermaid = (await import("mermaid")).default;
-      this.update(this.$el.innerHTML);
+      this.renderMermaid();
     }
   },
   data() {
@@ -12,9 +12,11 @@ export default {
       mermaid: null,
     };
   },
+  updated() {
+    this.renderMermaid();
+  },
   methods: {
-    update(content) {
-      this.$el.innerHTML = content;
+    renderMermaid() {
       this.$el.querySelectorAll(".mermaid-pre").forEach(async (pre, i) => {
         await this.mermaid.run({ nodes: [pre.children[0]] });
       });

nicegui/elements/markdown.py

@@ -34,7 +34,7 @@ class Markdown(ContentElement, component='markdown.js'):
         html = prepare_content(content, extras=' '.join(self.extras))
         if self._props.get('innerHTML') != html:
             self._props['innerHTML'] = html
-            self.run_method('update', html)
+            self.update()
 
 
 @lru_cache(maxsize=int(os.environ.get('MARKDOWN_CONTENT_CACHE_SIZE', '1000')))

nicegui/elements/restructured_text.py

@@ -21,7 +21,7 @@ class ReStructuredText(Markdown):
         html = prepare_content(content)
         if self._props.get('innerHTML') != html:
             self._props['innerHTML'] = html
-            self.run_method('update', html)
+            self.update()
 
 
 @lru_cache(maxsize=int(os.environ.get('RST_CONTENT_CACHE_SIZE', '1000')))