fix: call monaco.editor.remeasureFonts() after editor mounted

slidevjs · Mar 6, 2024 · 047773d · 047773d
1 parent 448141c
commit 047773d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/packages/client/builtin/Monaco.vue b/packages/client/builtin/Monaco.vue
@@ -140,6 +140,7 @@ onMounted(async () => {
         : /* BELOW */ `` // reset
     }
   }
+  nextTick(() => monaco.editor.remeasureFonts())
 })
 </script>
 
@@ -148,3 +149,33 @@ onMounted(async () => {
     <div ref="container" class="absolute inset-0.5" />
   </div>
 </template>
+
+<style>
+div[widgetid='messageoverlay'] {
+  transform: translateY(calc(100% * (var(--slidev-slide-scale) - 1)));
+}
+
+.slidev-monaco-container {
+  position: relative;
+  margin: var(--slidev-code-margin);
+  padding: var(--slidev-code-padding);
+  line-height: var(--slidev-code-line-height);
+  border-radius: var(--slidev-code-radius);
+  background: var(--slidev-code-background);
+}
+
+.slidev-monaco-container .monaco-editor {
+  --monaco-monospace-font: var(--slidev-code-font-family);
+  --vscode-editor-background: var(--slidev-code-background);
+  --vscode-editorGutter-background: var(--slidev-code-background);
+}
+
+/** Revert styles */
+.slidev-monaco-container .monaco-editor a {
+  border-bottom: none;
+}
+
+.slidev-monaco-container .monaco-editor a:hover {
+  border-bottom: none;
+}
+</style>
diff --git a/packages/client/styles/monaco.css b/packages/client/styles/monaco.css
diff --git a/packages/slidev/node/plugins/loaders.ts b/packages/slidev/node/plugins/loaders.ts
@@ -603,7 +603,6 @@ defineProps<{ no: number | string }>()`)
       `import "${resolveUrlOfClient('styles/code.css')}"`,
       `import "${resolveUrlOfClient('styles/katex.css')}"`,
       `import "${resolveUrlOfClient('styles/transitions.css')}"`,
-      `import "${resolveUrlOfClient('styles/monaco.css')}"`,
     ]
 
     for (const root of roots) {