1 files changed, 11 insertions, 11 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index fe95f15af..bd71115db 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -701,16 +701,18 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
 
     aiContentsWidth = () => (this.aiContentsHeight() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1);
     aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - (this._aiWinHeight + (this.tagsOverlayFunc() ? 22 : 0)) * this.uiBtnScaling);
+    setAiRef = action((r: HTMLDivElement | null) => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r)));
+
     @computed get aiEditor() {
         return (
             <div
                 className="documentView-editorView"
+                ref={this.setAiRef}
                 style={{
                     background: SnappingManager.userVariantColor,
                     width: `${100 / this.uiBtnScaling}%`, //
                     transform: `scale(${this.uiBtnScaling})`,
-                }}
-                ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
+                }}>
                 <div className="documentView-editorView-resizer" />
                 {this._componentView?.componentAIView?.() ?? null}
                 {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null}
@@ -1507,18 +1509,16 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
             .translate(-(this._docViewInternal?.aiShift() ?? 0), 0)
             .scale((this._docViewInternal?.aiScale() ?? 1) / this.nativeScaling);
 
+    setHtmlOverlayRef = (r: HTMLDivElement | null) => {
+        const val = r?.style.display !== 'none'; // if the outer overlay has been displayed, trigger the innner div to start it's opacity fade in transition
+        if (r && val !== this._enableHtmlOverlayTransitions) {
+            setTimeout(action(() => (this._enableHtmlOverlayTransitions = val)));
+        }
+    };
     htmlOverlay = () => {
         const effect = StrCast(this._htmlOverlayEffect?.presentation_effect, StrCast(this._htmlOverlayEffect?.followLinkAnimEffect));
         return (
-            <div
-                className="documentView-htmlOverlay"
-                ref={r => {
-                    const val = r?.style.display !== 'none'; // if the outer overlay has been displayed, trigger the innner div to start it's opacity fade in transition
-                    if (r && val !== this._enableHtmlOverlayTransitions) {
-                        setTimeout(action(() => (this._enableHtmlOverlayTransitions = val)));
-                    }
-                }}
-                style={{ display: !this._htmlOverlayText ? 'none' : undefined }}>
+            <div className="documentView-htmlOverlay" ref={this.setHtmlOverlayRef} style={{ display: !this._htmlOverlayText ? 'none' : undefined }}>
                 <div className="documentView-htmlOverlayInner" style={{ transition: `all 500ms`, opacity: this._enableHtmlOverlayTransitions ? 0.9 : 0 }}>
                     {DocumentViewInternal.AnimationEffect(
                         <div className="webBox-textHighlight">