From d3e5e09a51c7c95bffabd41b14e660aafcd80015 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 3 Jun 2025 22:32:16 -0400
Subject: fixed equationBox so that it can be used in templates.

---
 src/client/views/nodes/EquationBox.tsx             | 32 ++++++++++++++++------
 .../views/nodes/formattedText/EquationEditor.tsx   |  4 +++
 2 files changed, 28 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 8e48a0b54..e0ab04692 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -14,6 +14,7 @@ import './EquationBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import EquationEditor from './formattedText/EquationEditor';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { Doc } from '../../../fields/Doc';
 
 @observer
 export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -30,14 +31,17 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        if (DocumentView.SelectOnLoad === this.Document && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) {
+        if (DocumentView.SelectOnLoad === this.rootDoc && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) {
             this._liveTextUndo = FormattedTextBox.LiveTextUndo;
             FormattedTextBox.LiveTextUndo = undefined;
             this._props.select(false);
 
+            this.dataDoc[Doc.LayoutDataKey(this.Document)] = FormattedTextBox.SelectOnLoadChar ?? '';
+
             this._ref.current?.mathField.focus();
-            this.dataDoc.text === 'x' && this._ref.current?.mathField.select();
+            this.dataDoc[Doc.LayoutDataKey(this.Document)] === 'x' && this._ref.current?.mathField.select();
             DocumentView.SetSelectOnLoad(undefined);
+            FormattedTextBox.SelectOnLoadChar = '';
         }
         reaction(
             () => this._props.isSelected(),
@@ -56,7 +60,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     keyPressed = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
-            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : '', {
+            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc[Doc.LayoutDataKey(this.Document)]) : '', {
                 title: '# math',
                 _width: NumCast(this.layoutDoc._width),
                 _height: NumCast(this.layoutDoc._height),
@@ -73,9 +77,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             e.stopPropagation();
         }
         if (e.key === 'Tab') {
+            const target = this.Document.isTemplateDoc ? this.rootDoc : this.Document;
             const graph = Docs.Create.FunctionPlotDocument([this.Document], {
-                x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width),
-                y: NumCast(this.layoutDoc.y),
+                x: NumCast(target.x) + NumCast(this.layoutDoc._width),
+                y: NumCast(target.y),
                 _width: 400,
                 _height: 300,
                 backgroundColor: 'white',
@@ -85,11 +90,11 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             link && this._props.addDocument?.(link);
             e.stopPropagation();
         }
-        if (e.key === 'Backspace' && !this.dataDoc.text) this._props.removeDocument?.(this.Document);
+        if (e.key === 'Backspace' && !this.dataDoc[Doc.LayoutDataKey(this.Document)]) this._props.removeDocument?.(this.Document);
     };
     @undoBatch
     onChange = (str: string) => {
-        this.dataDoc.text = str;
+        this.dataDoc[Doc.LayoutDataKey(this.Document)] = str;
     };
 
     updateSize = (mathSpan: HTMLSpanElement) => {
@@ -106,6 +111,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
         this.layoutDoc._width = mathWidth * nScale;
         this.layoutDoc._height = mathHeight * nScale;
+        if (this.layoutDoc._nativeWidth) {
+            this.layoutDoc._nativeWidth = mathWidth;
+            this.layoutDoc._nativeHeight = mathHeight;
+        }
     };
     render() {
         TraceMobx();
@@ -129,7 +138,14 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     paddingTop: NumCast(this.layoutDoc.yMargin),
                     paddingBottom: NumCast(this.layoutDoc.yMargin),
                 }}>
-                <EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, '')} spaceBehavesLikeTab onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
+                <EquationEditor
+                    ref={this._ref}
+                    value={StrCast(this.dataDoc[Doc.LayoutDataKey(this.Document)], '')}
+                    spaceBehavesLikeTab
+                    onChange={this.onChange}
+                    autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
+                    autoOperatorNames="sin cos tan"
+                />
             </div>
         );
     }
diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx
index 48efa6e63..23d273523 100644
--- a/src/client/views/nodes/formattedText/EquationEditor.tsx
+++ b/src/client/views/nodes/formattedText/EquationEditor.tsx
@@ -72,6 +72,10 @@ class EquationEditor extends Component<EquationEditorProps> {
         this.mathField.latex(value || '');
     }
 
+    componentDidUpdate(prevProps: Readonly<EquationEditorProps>): void {
+        !prevProps.value && this.mathField.latex(this.props.value || '');
+    }
+
     render() {
         return <span ref={this.element} style={{ border: '0px', boxShadow: 'None' }} />;
     }
-- 
cgit v1.2.3-70-g09d2