1 files changed, 12 insertions, 6 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 68160ac9b..88adba1e7 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -74,8 +74,11 @@ const translateGoogleApi = require('translate-google-api');
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
 
+export interface FormattedTextBoxProps {
+    allowScroll?: boolean;
+}
 @observer
-export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps & FormattedTextBoxProps>() {
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(FormattedTextBox, fieldStr);
     }
@@ -612,7 +615,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (Array.from(highlights).join('') === FormattedTextBox._globalHighlightsCache) return;
         setTimeout(() => (FormattedTextBox._globalHighlightsCache = Array.from(highlights).join('')));
         clearStyleSheetRules(FormattedTextBox._userStyleSheet);
-        if (highlights.includes('Audio Tags')) {
+        if (!highlights.includes('Audio Tags')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'audiotag', { display: 'none' }, '');
         }
         if (highlights.includes('Text from Others')) {
@@ -1811,9 +1814,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         const margins = 2 * NumCast(this.layoutDoc._yMargin, this.props.yPadding || 0);
         const children = this.ProseRef?.children.length ? Array.from(this.ProseRef.children[0].children) : undefined;
         if (children) {
-            const proseHeight = !this.ProseRef
-                ? 0
-                : children.reduce((p, child) => p + Number(getComputedStyle(child).height.replace('px', '')) + Number(getComputedStyle(child).marginTop.replace('px', '')) + Number(getComputedStyle(child).marginBottom.replace('px', '')), margins);
+            const toNum = (val: string) => Number(val.replace('px', '').replace('auto', '0'));
+            const toHgt = (node: Element) => {
+                const { height, marginTop, marginBottom } = getComputedStyle(node);
+                return toNum(height) + Math.max(0, toNum(marginTop)) + Math.max(0, toNum(marginBottom));
+            };
+            const proseHeight = !this.ProseRef ? 0 : children.reduce((p, child) => p + toHgt(child), margins);
             const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.docMaxAutoHeight, proseHeight), proseHeight);
             if (this.props.setHeight && scrollHeight && !this.props.dontRegisterView) {
                 // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation
@@ -2003,7 +2009,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     r?.addEventListener(
                         'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
                         (e: WheelEvent) => {
-                            if (this.props.isContentActive()) {
+                            if (this.props.isContentActive() && !this.props.allowScroll) {
                                 if (!NumCast(this.layoutDoc._scrollTop) && e.deltaY <= 0) e.preventDefault();
                                 e.stopPropagation();
                             }