feat(Monaco): height adaptive

litingyes · litingyes · commit 89f52d18c279 · 2023-06-25T09:26:32.000+08:00
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
@@ -15,6 +15,7 @@ import { getOrCreateModel } from './utils'
 import { loadGrammars, loadTheme } from 'monaco-volar'
 import { Store } from '../store'
 import type { PreviewMode } from '../editor/types'
+import { debounce } from '../utils'
 
 const props = withDefaults(
   defineProps<{
@@ -36,6 +37,7 @@ const containerRef = ref<HTMLDivElement>()
 const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
 const store = inject<Store>('store')!
+const editorHeight = ref('0px')
 
 initMonaco(store)
 
@@ -129,8 +131,20 @@ onMounted(async () => {
     // ignore save event
   })
 
+  const updateEditorHeight = debounce(() => {
+    const lineCount = editorInstance.getModel()?.getLineCount() || 8
+    const lineHeight = editorInstance.getOption(
+      monaco.editor.EditorOption.lineHeight
+    )
+    editorHeight.value = (lineCount + 1) * lineHeight + 'px'
+  })
+
+  updateEditorHeight()
+
   editorInstance.onDidChangeModelContent(() => {
     emit('change', editorInstance.getValue())
+
+    updateEditorHeight()
   })
 
   editorInstance.onDidChangeCursorSelection((e) => {
@@ -151,10 +165,10 @@ onBeforeUnmount(() => {
   <div class="editor" ref="containerRef"></div>
 </template>
 
-<style>
+<style scoped>
 .editor {
   position: relative;
-  height: 100%;
+  height: v-bind('editorHeight');
   width: 100%;
   overflow: hidden;
 }
diff --git a/test/VuePreview.vue b/test/VuePreview.vue
@@ -249,7 +249,6 @@ const isHover = useElementHover(vuePreviewContainerRef)
   :deep(.editor) {
     box-sizing: border-box;
     overflow: hidden;
-    height: auto;
     border-radius: 0 0 var(--vue-preview-radius) var(--vue-preview-radius);
     max-height: v-bind('maxHeightForCode');
     transition: max-height 0.3s;
