diff --git a/bbcode/Editor.vue b/bbcode/Editor.vue index 90074da9..c783aa02 100644 --- a/bbcode/Editor.vue +++ b/bbcode/Editor.vue @@ -22,7 +22,8 @@ - +
@@ -93,23 +94,14 @@ @Hook('mounted') mounted(): void { this.element = this.$refs['input']; - const styles = getComputedStyle(this.element); - this.maxHeight = parseInt(styles.maxHeight!, 10) || 250; - this.minHeight = parseInt(styles.minHeight!, 10) || 60; + this.sizer = this.$refs['sizer']; setInterval(() => { if(Date.now() - this.lastInput >= 500 && this.text !== this.undoStack[0] && this.undoIndex === 0) { if(this.undoStack.length >= 30) this.undoStack.pop(); this.undoStack.unshift(this.text); } }, 500); - this.sizer = this.$refs['sizer']; - this.sizer.style.cssText = styles.cssText; - this.sizer.style.height = '0'; - this.sizer.style.minHeight = '0'; - this.sizer.style.overflow = 'hidden'; - this.sizer.style.position = 'absolute'; - this.sizer.style.top = '0'; - this.sizer.style.visibility = 'hidden'; + this.resizeListener(); this.resize(); window.addEventListener('resize', this.resizeListener); } @@ -246,11 +238,11 @@ } resize(): void { - this.sizer.style.fontSize = this.element.style.fontSize; - this.sizer.style.lineHeight = this.element.style.lineHeight; this.sizer.style.width = `${this.element.offsetWidth}px`; this.sizer.value = this.element.value; - this.element.style.height = `${Math.max(Math.min(this.sizer.scrollHeight, this.maxHeight), this.minHeight)}px`; + const borderHeight = this.element.offsetHeight - this.element.clientHeight; + const borderBoxHeight = this.sizer.scrollHeight + borderHeight; + this.element.style.height = `${Math.max(Math.min(borderBoxHeight, this.maxHeight), this.minHeight)}px`; this.sizer.style.width = '0'; } @@ -288,4 +280,4 @@ } } } - \ No newline at end of file +