fix(content): prevent editor extending on typing (#933)

nuxt · Oct 21, 2021 · d4dce1e · d4dce1e
1 parent 7d1aa87
commit d4dce1e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/content/templates/editor.vue b/packages/content/templates/editor.vue
@@ -2,7 +2,6 @@
   <textarea
     ref="textarea"
     v-model="file"
-    @keyup.stop="onType"
     @keydown.tab.exact.prevent="onTabRight"
     @keydown.tab.shift.prevent="onTabLeft"
     @compositionstart.prevent="isInComposition = true"
@@ -32,13 +31,18 @@ export default {
       this.$refs.textarea.focus()
     },
     file () {
+      this.onType()
       this.$emit('input', this.file)
     }
   },
   methods: {
     onType () {
       const el = this.$refs.textarea
-      el.style.height = el.scrollHeight + 'px'
+
+      el.style.height = 'auto'
+      this.$nextTick(() => {
+        el.style.height = el.scrollHeight + 'px'
+      })
     },
     onTabRight(event) {
       if (this.isInComposition) {

diff --git a/packages/content/templates/nuxt-content.dev.vue b/packages/content/templates/nuxt-content.dev.vue
@@ -98,7 +98,11 @@ export default {
 }
 
 .nuxt-content-editor {
+  box-sizing: border-box;
+  display: block;
   width: 100%;
   padding: 8px;
+  overflow: hidden;
+  resize: none;
 }
 </style>