fix: slide exporter (#1380)

kermanx · web-flow · commit f41603e4fd17 · 2024-03-07T11:30:21.000+01:00
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -8,6 +8,7 @@
 <body>
   <div id="app"></div>
   <script type="module" src="__ENTRY__"></script>
+  <div id="mermaid-rendering-container"></div>
   <!-- body -->
 </body>
 </html>
diff --git a/packages/client/internals/SlideLoading.vue b/packages/client/internals/SlideLoading.vue
@@ -10,7 +10,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-full w-full flex items-center justify-center gap-2">
+  <div class="h-full w-full flex items-center justify-center gap-2 slidev-slide-loading">
     <template v-if="timeout">
       <div class="i-svg-spinners-90-ring-with-bg text-xl" />
       <div>Loading slide...</div>
diff --git a/packages/client/modules/mermaid.ts b/packages/client/modules/mermaid.ts
@@ -8,8 +8,10 @@ mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })
 
 const cache = new Map<string, string>()
+let containerElement: Element | undefined
 
 export async function renderMermaid(lzEncoded: string, options: any) {
+  containerElement ??= document.getElementById('mermaid-rendering-container')!
   const key = lzEncoded + JSON.stringify(options)
   const _cache = cache.get(key)
   if (_cache)
@@ -22,7 +24,7 @@ export async function renderMermaid(lzEncoded: string, options: any) {
   })
   const code = lz.decompressFromBase64(lzEncoded)
   const id = makeId()
-  const { svg } = await mermaid.render(id, code)
+  const { svg } = await mermaid.render(id, code, containerElement)
   cache.set(key, svg)
   return svg
 }
diff --git a/packages/slidev/node/export.ts b/packages/slidev/node/export.ts
@@ -193,18 +193,49 @@ export async function exportSlides({
     })
     await page.waitForLoadState('networkidle')
     await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
+    // Wait for slides to be loaded
+    {
+      const elements = page.locator('.slidev-slide-loading')
+      const count = await elements.count()
+      for (let index = 0; index < count; index++)
+        await elements.nth(index).waitFor({ state: 'detached' })
+    }
     // Check for "data-waitfor" attribute and wait for given element to be loaded
-    const elements = page.locator('[data-waitfor]')
-    const count = await elements.count()
-    for (let index = 0; index < count; index++) {
-      const element = elements.nth(index)
-      const attribute = await element.getAttribute('data-waitfor')
-      if (attribute)
-        await element.locator(attribute).waitFor()
+    {
+      const elements = page.locator('[data-waitfor]')
+      const count = await elements.count()
+      for (let index = 0; index < count; index++) {
+        const element = elements.nth(index)
+        const attribute = await element.getAttribute('data-waitfor')
+        if (attribute)
+          await element.locator(attribute).waitFor()
+      }
     }
     // Wait for frames to load
-    const frames = page.frames()
-    await Promise.all(frames.map(frame => frame.waitForLoadState()))
+    {
+      const frames = page.frames()
+      await Promise.all(frames.map(frame => frame.waitForLoadState()))
+    }
+    // Wait for Mermaid graphs to be rendered
+    {
+      const container = page.locator('#mermaid-rendering-container')
+      while (true) {
+        const element = container.locator('div').first()
+        if (await element.count() === 0)
+          break
+        await element.waitFor({ state: 'detached' })
+      }
+      await container.evaluate(node => node.style.display = 'none')
+    }
+    // Hide Monaco aria container
+    {
+      const elements = page.locator('.monaco-aria-container')
+      const count = await elements.count()
+      for (let index = 0; index < count; index++) {
+        const element = elements.nth(index)
+        await element.evaluate(node => node.style.display = 'none')
+      }
+    }
   }
 
   async function getSlidesIndex() {
