From 5e949c6e8784cf4f5de10732d80c5cb199943fb2 Mon Sep 17 00:00:00 2001
From: Alexandra Levinson <qalexandrian@gmail.com>
Date: Wed, 29 Jul 2020 08:34:07 -0500
Subject: [PATCH] Fix auto-resizing of BBCode editor text box on Firefox

The previous implementation strategy used getComputedStyle().cssText to
copy styles from the real textarea onto the fake, invisible one used for
computing sizing metrics. This worked alright on Chrome, but not on
Firefox, as Firefox currently always returns an empty string for cssText
on the result of getComputedStyle() (see Bugzilla #137687).

This commit avoids copying the computed styles manually in favor of just
applying the same CSS classes to the invisible textarea. It also tweaks
the size computation to add the border height to the computed
scrollHeight before setting the inline height style, since scrollHeight
does not include the border, but box-sizing is set to border-box, and
the 2px difference was enough to provoke a scroll bar in Firefox.
---
 bbcode/Editor.vue | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

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 @@
             <textarea ref="input" v-model="text" @input="onInput" v-show="!preview" :maxlength="maxlength" :placeholder="placeholder"
                 :class="finalClasses" @keyup="onKeyUp" :disabled="disabled" @paste="onPaste" @keypress="$emit('keypress', $event)"
                 :style="hasToolbar ? {'border-top-left-radius': 0} : undefined" @keydown="onKeyDown"></textarea>
-            <textarea ref="sizer"></textarea>
+            <textarea ref="sizer" :class="finalClasses"
+                style="height:0;min-height:0;overflow:hidden;position:absolute;top:0;visibility:hidden"></textarea>
             <div class="bbcode-preview" v-show="preview">
                 <div class="bbcode-preview-warnings">
                     <div class="alert alert-danger" v-show="previewWarnings.length">
@@ -93,23 +94,14 @@
         @Hook('mounted')
         mounted(): void {
             this.element = <HTMLTextAreaElement>this.$refs['input'];
-            const styles = getComputedStyle(this.element);
-            this.maxHeight = parseInt(styles.maxHeight!, 10) || 250;
-            this.minHeight = parseInt(styles.minHeight!, 10) || 60;
+            this.sizer = <HTMLTextAreaElement>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 = <HTMLTextAreaElement>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 @@
             }
         }
     }
-</script>
\ No newline at end of file
+</script>