From 35bd9e51f7cef551382025a5459d68eddd8f028b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 23 Jun 2025 13:26:59 -0400
Subject: fixed invalidations to not trigger creating new refs when ref= was
 assigned to an anonymous function.  fixed scribble erase to not delete
 everything it overlaps, just things it intersects with or contains.  fixed
 ink to have a Math mode and fixed math recognition myscript calls.

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  7 +--
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   |  3 +-
 .../nodes/DataVizBox/components/Histogram.tsx      | 11 +++--
 .../nodes/DataVizBox/components/LineChart.tsx      | 11 +++--
 .../views/nodes/DataVizBox/components/PieChart.tsx | 15 +++----
 src/client/views/nodes/DiagramBox.tsx              |  6 ++-
 src/client/views/nodes/DocumentContentsView.tsx    |  4 +-
 src/client/views/nodes/DocumentView.tsx            | 22 +++++-----
 src/client/views/nodes/EquationBox.tsx             |  3 +-
 src/client/views/nodes/FunctionPlotBox.tsx         |  3 +-
 src/client/views/nodes/LabelBox.tsx                | 38 ++++++++--------
 src/client/views/nodes/LinkBox.tsx                 | 23 +++-------
 src/client/views/nodes/LinkDocPreview.tsx          |  9 ++--
 src/client/views/nodes/ScreenshotBox.tsx           | 18 ++++----
 src/client/views/nodes/calendarBox/CalendarBox.tsx | 35 +++++++--------
 .../nodes/chatbot/chatboxcomponents/ChatBox.tsx    | 14 ++----
 .../views/nodes/formattedText/FormattedTextBox.tsx |  8 ++--
 src/client/views/nodes/trails/PresBox.tsx          | 51 ++++++++++------------
 18 files changed, 132 insertions(+), 149 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 9369ff98a..0b7033e57 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -420,6 +420,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
+    setRef = (r: LineChart | Histogram | PieChart | null) => (this._vizRenderer = r ?? undefined);
     // toggles for user to decide which chart type to view the data in
     @computed get renderVizView() {
         const scale = this._props.NativeDimScaling?.() || 1;
@@ -437,9 +438,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (!this.records.length) return 'no data/visualization';
         switch (this.dataVizView) {
             case DataVizView.TABLE:     return <TableBox  {...sharedProps} Doc={this.Document} specHighlightedRow={this._specialHighlightedRow} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
-            case DataVizView.LINECHART: return <LineChart {...sharedProps} Doc={this.Document} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} vizBox={this} />;
-            case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} Doc={this.Document} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} />;
-            case DataVizView.PIECHART:  return <PieChart  {...sharedProps} Doc={this.Document} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} 
+            case DataVizView.LINECHART: return <LineChart {...sharedProps} Doc={this.Document} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={this.setRef} vizBox={this} />;
+            case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} Doc={this.Document} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={this.setRef} />;
+            case DataVizView.PIECHART:  return <PieChart  {...sharedProps} Doc={this.Document} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={this.setRef} 
             margin={{ top: 10, right: 15, bottom: 15, left: 15 }} />;
             default:
         } // prettier-ignore
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index fb083ea75..8f6ecab57 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -540,6 +540,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         ]; //prettier-ignore
     }
 
+    setRef = (r: HTMLDivElement) => (this._ref = r);
     render() {
         const topButton = (icon: string, opt: string, func: () => void, tag: string) => (
             <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
@@ -558,7 +559,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                 {!this._shouldDisplay ? undefined : (
                     <div
                         className="docCreatorMenu-cont"
-                        ref={r => (this._ref = r)}
+                        ref={this.setRef}
                         style={{
                             display: '',
                             left: this._pageX,
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index a7c4a00b0..f51683991 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -413,6 +413,10 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
         });
     };
 
+    setChartRef = (r: HTMLDivElement | null) => {
+        this._histogramRef = r;
+        r && this.drawChart(this._histogramData, this.width, this.height);
+    };
     render() {
         if (!this.selectedBins) this.layoutDoc.dataViz_histogram_selectedBins = new List<string>();
 
@@ -446,12 +450,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                             size={Size.XSMALL}
                         />
                     </div>
-                    <div
-                        ref={r => {
-                            this._histogramRef = r;
-                            r && this.drawChart(this._histogramData, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setChartRef} />
                     {selected !== 'none' ? (
                         <div className="selected-data">
                             Selected: {selected}
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 80fadf178..732681e05 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -347,6 +347,10 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             .style('pointer-events', 'none')
             .style('transform', `translate(${xScale(d0.x) - this.width}px,${yScale(d0.y)}px)`);
     }
+    setLineRef = (r: HTMLDivElement | null) => {
+        this._lineChartRef = r;
+        this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
+    };
 
     render() {
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
@@ -378,12 +382,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                             fillWidth
                         />
                     </div>
-                    <div
-                        ref={r => {
-                            this._lineChartRef = r;
-                            this.drawChart([this._lineChartData], this.rangeVals, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setLineRef} />
                     {selectedPt !== 'none' ? (
                         <div className="selected-data">
                             {`Selected: ${selectedPt}`}
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 0ae70786f..cf476b8d0 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -373,10 +373,10 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/%/g, '').replace(/#/g, '').replace(/</g, '') : sliceTitle;
 
         const sliceColors = Cast(this._props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
-        sliceColors.forEach(each => {
+        sliceColors?.forEach(each => {
             if (each.split('::')[0] === sliceName) sliceColors.splice(sliceColors.indexOf(each), 1);
         });
-        sliceColors.push(StrCast(sliceName + '::' + color));
+        sliceColors?.push(StrCast(sliceName + '::' + color));
     };
 
     @action changeHistogramCheckBox = () => {
@@ -384,6 +384,10 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         this.drawChart(this._pieChartData, this.width, this.height);
     };
 
+    setChartRef = (r: HTMLDivElement | null) => {
+        this._piechartRef = r;
+        this.drawChart(this._pieChartData, this.width, this.height);
+    };
     render() {
         let titleAccessor = 'dataViz_pie_title';
         if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
@@ -443,12 +447,7 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
                             Organize data as histogram
                         </div>
                     ) : null}
-                    <div
-                        ref={r => {
-                            this._piechartRef = r;
-                            this.drawChart(this._pieChartData, this.width, this.height);
-                        }}
-                    />
+                    <div ref={this.setChartRef} />
                     {selected !== 'none' ? (
                         <div className="selected-data">
                             Selected: {selected}
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 7cfccf0dc..6a31f64ce 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -185,6 +185,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return '( )';
     };
 
+    setRef = (r: HTMLDivElement | null) => this.fixWheelEvents(r, this._props.isContentActive);
+    setDiagramBoxRef = (r: HTMLDivElement | null) => r && this.renderMermaidAsync.call(this, this.removeWords(this.mermaidcode), r);
     render() {
         return (
             <div
@@ -192,7 +194,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 style={{
                     pointerEvents: this._props.isContentActive() ? undefined : 'none',
                 }}
-                ref={r => this.fixWheelEvents(r, this._props.isContentActive)}>
+                ref={this.setRef}>
                 <div className="DIYNodeBox-searchbar">
                     <input type="text" value={this._inputValue} onKeyDown={action(e => e.key === 'Enter' && this.generateMermaidCode())} onChange={action(e => (this._inputValue = e.target.value))} />
                     <button type="button" onClick={this.generateMermaidCode}>
@@ -208,7 +210,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     ) : this._generating ? (
                         <div className="loading-circle" />
                     ) : (
-                        <div className="diagramBox" ref={r => r && this.renderMermaidAsync.call(this, this.removeWords(this.mermaidcode), r)}>
+                        <div className="diagramBox" ref={this.setDiagramBoxRef}>
                             {this._errorMessage || 'Type a prompt to generate a diagram'}
                         </div>
                     )}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 504c1491e..32741a0fe 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -261,9 +261,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
                 jsx={layoutFrame}
                 showWarnings
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onError={(test: any) => {
-                    console.log('DocumentContentsView:' + test, bindings, layoutFrame);
-                }}
+                onError={(test: any) => console.log('DocumentContentsView:' + test, bindings, layoutFrame)}
             />
         );
     }
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">
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index e0ab04692..2ce24b688 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -116,12 +116,13 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.layoutDoc._nativeHeight = mathHeight;
         }
     };
+    setRef = (r: HTMLDivElement) => r && this._ref.current?.element.current && this.updateSize(this._ref.current?.element.current);
     render() {
         TraceMobx();
         const scale = this._props.NativeDimScaling?.() || 1;
         return (
             <div
-                ref={r => r && this._ref.current?.element.current && this.updateSize(this._ref.current?.element.current)}
+                ref={this.setRef}
                 className="equationBox-cont"
                 onKeyDown={e => e.stopPropagation()}
                 onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index 8e4b64851..e4d37e006 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -121,11 +121,12 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
         }
         // if (this.layout_autoHeight) this.tryUpdateScrollHeight();
     };
+    setRef = (r: HTMLDivElement | null) => r && this.createGraph(r);
     @computed get theGraph() {
         return (
             <div
                 id={`${this._plotId}`}
-                ref={r => r && this.createGraph(r)}
+                ref={this.setRef}
                 style={{ position: 'absolute', width: '100%', height: '100%' }}
                 onPointerDown={e => {
                     e.stopPropagation();
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index e1ecc2018..c5948cbbd 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -169,6 +169,25 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
+    setRef = (r: HTMLDivElement | null) => {
+        this._divRef?.removeEventListener('beforeinput', this.beforeInput);
+        this._divRef = r;
+        if (this._divRef) {
+            this._divRef.addEventListener('beforeinput', this.beforeInput);
+
+            if (DocumentView.SelectOnLoad === this.Document) {
+                DocumentView.SetSelectOnLoad(undefined);
+                this._liveTextUndo = FormattedTextBox.LiveTextUndo;
+                FormattedTextBox.LiveTextUndo = undefined;
+                this._divRef.focus();
+            }
+            this.fitTextToBox(this._divRef);
+            if (this.Title) {
+                this.resetCursor();
+            }
+        } else this._timeout && clearTimeout(this._timeout);
+    };
+
     render() {
         TraceMobx();
         const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes
@@ -228,24 +247,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             __html: `<span class="textFitted textFitAlignVert" style="display: inline-block; text-align: center; font-size: 100px; height: 0px;">${this.Title?.startsWith('#') ? '' : (this.Title ?? '')}</span>`,
                         }}
                         contentEditable={this._props.onClickScript?.() ? undefined : true}
-                        ref={r => {
-                            this._divRef?.removeEventListener('beforeinput', this.beforeInput);
-                            this._divRef = r;
-                            if (this._divRef) {
-                                this._divRef.addEventListener('beforeinput', this.beforeInput);
-
-                                if (DocumentView.SelectOnLoad === this.Document) {
-                                    DocumentView.SetSelectOnLoad(undefined);
-                                    this._liveTextUndo = FormattedTextBox.LiveTextUndo;
-                                    FormattedTextBox.LiveTextUndo = undefined;
-                                    this._divRef.focus();
-                                }
-                                this.fitTextToBox(this._divRef);
-                                if (this.Title) {
-                                    this.resetCursor();
-                                }
-                            } else this._timeout && clearTimeout(this._timeout);
-                        }}
+                        ref={this.setRef}
                     />
                 </div>
             </div>
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 78c8a686c..d31fadf77 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -99,6 +99,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
+    setRef = (r: HTMLDivElement | null) => (this._divRef = r);
     render() {
         TraceMobx();
 
@@ -149,28 +150,18 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const aid = targetAhyperlinks?.find(alink => container?.contains(alink))?.id ?? targetAhyperlinks?.lastElement()?.id;
             const bid = targetBhyperlinks?.find(blink => container?.contains(blink))?.id ?? targetBhyperlinks?.lastElement()?.id;
             if (!aid || !bid) {
-                setTimeout(
-                    action(() => {
-                        this._forceAnimate += 0.01;
-                    })
-                );
+                setTimeout(action(() => (this._forceAnimate += 0.01)));
                 return null;
             }
             if (foundParent) {
                 setTimeout(
-                    action(() => {
-                        this._forceAnimate += 0.01;
-                    }),
+                    action(() => (this._forceAnimate += 0.01)),
                     1
                 );
             }
-
-            if (at || bt)
-                setTimeout(
-                    action(() => {
-                        this._forceAnimate += 0.01;
-                    })
-                ); // this forces an update during a transition animation
+            if (at || bt) {
+                setTimeout(action(() => (this._forceAnimate += 0.01))); // this forces an update during a transition animation
+            }
             const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting) as { highlightStyle: string; highlightColor: string; highlightIndex: number; highlightStroke: boolean };
             const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined;
             const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string;
@@ -217,7 +208,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 id={this.DocumentView?.().DocUniqueId}
                                 className="linkBox-label"
                                 tabIndex={-1}
-                                ref={r => (this._divRef = r)}
+                                ref={this.setRef}
                                 onPointerDown={e => e.stopPropagation()}
                                 onFocus={() => {
                                     RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, this.dataDoc);
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 5b07b303a..1d6f41c65 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -250,6 +250,10 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps
         );
     }
 
+    setDocViewRef = (r: DocumentView | null) => {
+        const targetanchor = this._linkDoc && this._linkSrc && Doc.getOppositeAnchor(this._linkDoc, this._linkSrc);
+        targetanchor && this._targetDoc !== targetanchor && r?._props.focus?.(targetanchor, {});
+    };
     @computed get docPreview() {
         return (!this._linkDoc || !this._targetDoc || !this._linkSrc) && !this._toolTipText ? null : (
             <div className="linkDocPreview-inner">
@@ -279,10 +283,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps
                         this._toolTipText
                     ) : (
                         <DocumentView
-                            ref={r => {
-                                const targetanchor = this._linkDoc && this._linkSrc && Doc.getOppositeAnchor(this._linkDoc, this._linkSrc);
-                                targetanchor && this._targetDoc !== targetanchor && r?._props.focus?.(targetanchor, {});
-                            }}
+                            ref={this.setDocViewRef}
                             Document={this._targetDoc!}
                             moveDocument={returnFalse}
                             styleProvider={this._props.styleProvider}
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 603dcad5c..4677e0e61 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -171,19 +171,21 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         ContextMenu.Instance.addItem({ description: 'Options...', subitems, icon: 'video' });
     };
 
+    setRef = (r: HTMLVideoElement | null) => {
+        this._videoRef = r;
+        setTimeout(() => {
+            if (this.layoutDoc.mediaState === mediaState.PendingRecording && this._videoRef) {
+                this.toggleRecording();
+            }
+        }, 100);
+    };
+
     @computed get content() {
         return (
             <video
                 className="videoBox-content"
                 key="video"
-                ref={r => {
-                    this._videoRef = r;
-                    setTimeout(() => {
-                        if (this.layoutDoc.mediaState === mediaState.PendingRecording && this._videoRef) {
-                            this.toggleRecording();
-                        }
-                    }, 100);
-                }}
+                ref={this.setRef}
                 autoPlay={this._screenCapture}
                 style={{ width: this._screenCapture ? '100%' : undefined, height: this._screenCapture ? '100%' : undefined }}
                 onCanPlay={this.videoLoad}
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index a4183a11a..a2fa83b5a 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -298,10 +298,9 @@ export class CalendarBox extends CollectionSubView() {
                         ev.preventDefault();
                     });
                 }}
-
                 // for dragging and dropping (mirror)
 
-                eventDragStart={(arg) => {
+                eventDragStart={arg => {
                     const mirror = arg.el.cloneNode(true) as HTMLElement;
                     const rect = arg.el.getBoundingClientRect();
 
@@ -312,25 +311,24 @@ export class CalendarBox extends CollectionSubView() {
                     mirror.classList.add('custom-drag-mirror');
                     mirror.style.width = `${rect.width}px`;
                     mirror.style.height = `${rect.height}px`;
-                  
+
                     document.body.appendChild(mirror);
-                  
+
                     const moveListener = (ev: MouseEvent) => {
-                      mirror.style.left = `${ev.clientX}px`;
-                      mirror.style.top = `${ev.clientY}px`;
+                        mirror.style.left = `${ev.clientX}px`;
+                        mirror.style.top = `${ev.clientY}px`;
                     };
-                  
+
                     window.addEventListener('mousemove', moveListener);
 
                     // hide the actual box
                     arg.el.style.visibility = 'hidden';
                     arg.el.style.opacity = '0';
-                  
+
                     (arg.el as any)._mirrorElement = mirror;
                     (arg.el as any)._moveListener = moveListener;
                 }}
-                
-                eventDragStop={(arg) => {
+                eventDragStop={arg => {
                     const el = arg.el as any;
                     const mirror = el._mirrorElement;
                     const moveListener = el._moveListener;
@@ -338,15 +336,18 @@ export class CalendarBox extends CollectionSubView() {
                     // show the actual box
                     el.style.visibility = 'visible';
                     el.style.opacity = '1';
-                    
+
                     if (mirror) document.body.removeChild(mirror);
                     if (moveListener) window.removeEventListener('mousemove', moveListener);
                 }}
-                  
             />
         );
     }
 
+    setRef = (r: HTMLDivElement | null) => {
+        this.createDashEventsTarget(r);
+        this.fixWheelEvents(r, this._props.isContentActive);
+    };
     render() {
         const scale = this._props.ScreenToLocalTransform().Scale;
         const scaledWidth = this._props.PanelWidth();
@@ -361,11 +362,8 @@ export class CalendarBox extends CollectionSubView() {
                     height: scaledHeight,
                     overflow: 'hidden',
                     position: 'relative',
-                  }}
-                ref={r => {
-                    this.createDashEventsTarget(r);
-                    this.fixWheelEvents(r, this._props.isContentActive);
                 }}
+                ref={this.setRef}
                 onPointerDown={e => {
                     setTimeout(
                         action(() => {
@@ -383,9 +381,8 @@ export class CalendarBox extends CollectionSubView() {
                         transformOrigin: 'top left',
                         width: scaledWidth / scale,
                         height: scaledHeight / scale,
-                    }}
-                >
-                {this.renderCalendar}
+                    }}>
+                    {this.renderCalendar}
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 6c3da8977..8043111b9 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -974,6 +974,8 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     _dictation: DictationButton | null = null;
+    setInputRef = (r: HTMLInputElement) => (this._textInputRef = r);
+    setDictationRef = (r: DictationButton) => (this._dictation = r);
     /**
      * Renders the chat interface, including the message list, input field, and other UI elements.
      */
@@ -1002,9 +1004,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
                 <form onSubmit={this.askGPT} className="chat-input">
                     <input
-                        ref={r => {
-                            this._textInputRef = r;
-                        }}
+                        ref={this.setInputRef}
                         type="text"
                         name="messageInput"
                         autoComplete="off"
@@ -1023,13 +1023,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </svg>
                         )}
                     </button>
-                    <DictationButton
-                        ref={r => {
-                            this._dictation = r;
-                        }}
-                        setInput={this.setChatInput}
-                        inputRef={this._textInputRef}
-                    />
+                    <DictationButton ref={this.setDictationRef} setInput={this.setChatInput} inputRef={this._textInputRef} />
                 </form>
                 {/* Popup for citation */}
                 {this._citationPopup.visible && (
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 07cb795f1..255ee1afe 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2129,6 +2129,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
 
+    setRef = (r: HTMLDivElement | null) => this.fixWheelEvents(r, this._props.isContentActive, this.onPassiveWheel);
+    setScrollRef = (r: HTMLDivElement | null) => (this._scrollRef = r);
     render() {
         TraceMobx();
         const scale = this.nativeScaling();
@@ -2143,7 +2145,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         ) : styleFromLayout?.height === '0px' ? null : (
             <div
                 className="formattedTextBox"
-                ref={r => this.fixWheelEvents(r, this._props.isContentActive, this.onPassiveWheel)}
+                ref={this.setRef}
                 style={{
                     ...(this._props.dontScale
                         ? {}
@@ -2181,9 +2183,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     onDoubleClick={this.onDoubleClick}>
                     <div
                         className="formattedTextBox-outer"
-                        ref={r => {
-                            this._scrollRef = r;
-                        }}
+                        ref={this.setScrollRef}
                         style={{
                             width: this.noSidebar ? '100%' : `calc(100% - ${this.sidebarWidthPercent})`,
                             overflow: this.layoutDoc._createDocOnCR || this.layoutDoc._layout_hideScroll ? 'hidden' : this.layout_autoHeight ? 'visible' : undefined,
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cb2a1f13f..04b312ca5 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1743,6 +1743,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return <div />;
     }
 
+    setAiEffectsRef = (r: HTMLTextAreaElement | null) =>
+        setTimeout(() => {
+            if (r && !r.textContent) {
+                r.style.height = '';
+                r.style.height = r.scrollHeight + 'px';
+            }
+        });
+
+    setAnimDictationRef = (r: DictationButton | null) => (this._animationDictation = r);
     /**
      * This chatbox is for getting slide effect transition suggestions from gpt and visualizing them
      */
@@ -1755,14 +1764,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <ReactTextareaAutosize
                             placeholder="Use AI to suggest effects. Leave blank for random results."
                             className="pres-chatbox"
-                            ref={r => {
-                                setTimeout(() => {
-                                    if (r && !r.textContent) {
-                                        r.style.height = '';
-                                        r.style.height = r.scrollHeight + 'px';
-                                    }
-                                });
-                            }}
+                            ref={this.setAiEffectsRef}
                             value={this._animationChat}
                             onChange={e => {
                                 e.currentTarget.style.height = '';
@@ -1784,12 +1786,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         color={SnappingManager.userVariantColor}
                         onClick={this.customizeAnimations}
                     />
-                    <DictationButton
-                        ref={r => {
-                            this._animationDictation = r;
-                        }}
-                        setInput={this.setAnimationChat}
-                    />
+                    <DictationButton ref={this.setAnimDictationRef} setInput={this.setAnimationChat} />
                 </div>
                 <div style={{ alignItems: 'center' }}>
                     Click a box to use the effect.
@@ -1821,6 +1818,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
     }
 
+    setPropertiesRef = (r: HTMLTextAreaElement | null) =>
+        setTimeout(() => {
+            if (r && !r.textContent) {
+                r.style.height = '';
+                r.style.height = r.scrollHeight + 'px';
+            }
+        });
+
+    setSlideDictationRef = (r: DictationButton | null) => (this._slideDictation = r);
+
     @computed get transitionDropdown() {
         const { activeItem } = this;
         // Retrieving spring timing properties
@@ -1855,14 +1862,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 <ReactTextareaAutosize
                                     placeholder="Describe how to modify the slide properties."
                                     className="pres-chatbox"
-                                    ref={r => {
-                                        setTimeout(() => {
-                                            if (r && !r.textContent) {
-                                                r.style.height = '';
-                                                r.style.height = r.scrollHeight + 'px';
-                                            }
-                                        });
-                                    }}
+                                    ref={this.setPropertiesRef}
                                     value={this._chatInput}
                                     onChange={e => {
                                         e.currentTarget.style.height = '';
@@ -1874,12 +1874,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         e.stopPropagation();
                                     }}
                                 />
-                                <DictationButton
-                                    ref={r => {
-                                        this._slideDictation = r;
-                                    }}
-                                    setInput={this.setChatInput}
-                                />
+                                <DictationButton ref={this.setSlideDictationRef} setInput={this.setChatInput} />
                             </div>
                             <Button
                                 style={{ alignSelf: 'flex-end' }}
-- 
cgit v1.2.3-70-g09d2