fix: Twoslash popover not shown in print mode (#1445)

slidevjs · Mar 19, 2024 · a08d244 · a08d244
1 parent 870ee8a
commit a08d244
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
@@ -75,6 +75,7 @@ function onAfterLeave() {
         class="overflow-hidden"
       />
     </div>
+    <div id="twoslash-container" />
   </component>
 
   <!-- Global Top -->

diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { onMounted, watchEffect } from 'vue'
+import { recomputeAllPoppers } from 'floating-vue'
 import { windowSize } from '../state'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
@@ -13,6 +14,10 @@ watchEffect(() => {
   else
     (document.body.parentNode as HTMLElement).classList.remove('print')
 })
+
+onMounted(() => {
+  recomputeAllPoppers()
+})
 </script>
 
 <template>
@@ -24,6 +29,7 @@ watchEffect(() => {
       :width="windowSize.width.value"
     />
   </div>
+  <div id="twoslash-container" />
 </template>
 
 <style lang="postcss">

diff --git a/packages/client/setup/main.ts b/packages/client/setup/main.ts
@@ -35,7 +35,7 @@ export default async function setupMain(app: App) {
   app.use(createVClickDirectives())
   app.use(createVMarkDirective())
   app.use(MotionPlugin)
-  app.use(TwoSlashFloatingVue as any, { container: '#slideshow' })
+  app.use(TwoSlashFloatingVue as any, { container: '#twoslash-container' })
 
   const context: AppContext = {
     app,