1 files changed, 50 insertions, 43 deletions

diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index b90653acc..5167c8f2a 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { IReactionDisposer } from 'mobx';
 import { observer } from 'mobx-react';
 import { TextSelection } from 'prosemirror-state';
@@ -10,44 +11,6 @@ import EquationEditor from './EquationEditor';
 import { FormattedTextBox } from './FormattedTextBox';
 import { DocData } from '../../../../fields/DocSymbols';
 
-export class EquationView {
-    dom: HTMLDivElement; // container for label and value
-    root: any;
-    tbox: FormattedTextBox;
-    view: any;
-    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
-        this.tbox = tbox;
-        this.view = view;
-        this.dom = document.createElement('div');
-        this.dom.style.width = node.attrs.width;
-        this.dom.style.height = node.attrs.height;
-        this.dom.style.position = 'relative';
-        this.dom.style.display = 'inline-block';
-        this.dom.onmousedown = function (e: any) {
-            e.stopPropagation();
-        };
-
-        this.root = ReactDOM.createRoot(this.dom);
-        this.root.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />);
-    }
-    _editor: EquationEditor | undefined;
-    setEditor = (editor?: EquationEditor) => (this._editor = editor);
-    destroy() {
-        this.root.unmount();
-    }
-    setSelection() {
-        this._editor?.mathField.focus();
-    }
-    selectNode() {
-        this.tbox._applyingChange = this.tbox.fieldKey; // setting focus will make prosemirror lose focus, which will cause it to change its selection to a text selection, which causes this view to get rebuilt but it's no longer node selected, so the equationview won't have focus
-        setTimeout(() => {
-            this._editor?.mathField.focus();
-            setTimeout(() => (this.tbox._applyingChange = ''));
-        });
-    }
-    deselectNode() {}
-}
-
 interface IEquationViewInternal {
     fieldKey: string;
     tbox: FormattedTextBox;
@@ -70,12 +33,12 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
         this._textBoxDoc = props.tbox.Document;
     }
 
-    componentWillUnmount() {
-        this._reactionDisposer?.();
-    }
     componentDidMount() {
         this.props.setEditor(this._ref.current ?? undefined);
     }
+    componentWillUnmount() {
+        this._reactionDisposer?.();
+    }
 
     render() {
         return (
@@ -100,12 +63,56 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
                 <EquationEditor
                     ref={this._ref}
                     value={StrCast(this._textBoxDoc[DocData][this._fieldKey])}
-                    onChange={(str: any) => (this._textBoxDoc[DocData][this._fieldKey] = str)}
+                    onChange={(str: any) => {
+                        this._textBoxDoc[DocData][this._fieldKey] = str;
+                    }}
                     autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
                     autoOperatorNames="sin cos tan"
-                    spaceBehavesLikeTab={true}
+                    spaceBehavesLikeTab
                 />
             </div>
         );
     }
 }
+
+export class EquationView {
+    dom: HTMLDivElement; // container for label and value
+    root: any;
+    tbox: FormattedTextBox;
+    view: any;
+    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
+        this.tbox = tbox;
+        this.view = view;
+        this.dom = document.createElement('div');
+        this.dom.style.width = node.attrs.width;
+        this.dom.style.height = node.attrs.height;
+        this.dom.style.position = 'relative';
+        this.dom.style.display = 'inline-block';
+        this.dom.onmousedown = function (e: any) {
+            e.stopPropagation();
+        };
+
+        this.root = ReactDOM.createRoot(this.dom);
+        this.root.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />);
+    }
+    _editor: EquationEditor | undefined;
+    setEditor = (editor?: EquationEditor) => {
+        this._editor = editor;
+    };
+    destroy() {
+        this.root.unmount();
+    }
+    setSelection() {
+        this._editor?.mathField.focus();
+    }
+    selectNode() {
+        this.tbox._applyingChange = this.tbox.fieldKey; // setting focus will make prosemirror lose focus, which will cause it to change its selection to a text selection, which causes this view to get rebuilt but it's no longer node selected, so the equationview won't have focus
+        setTimeout(() => {
+            this._editor?.mathField.focus();
+            setTimeout(() => {
+                this.tbox._applyingChange = '';
+            });
+        });
+    }
+    deselectNode() {}
+}