From 0e41cb323c486b23c70e53d14a563adaf0eeef9e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 7 Oct 2022 15:03:16 -0400
Subject: fixes for equations : :eq as option to ctrl-m inside a text box. 
 added background for equations.  fixed cursor focus issues.

---
 src/client/views/nodes/formattedText/EquationView.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/formattedText/EquationView.tsx')

diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index 98d611ca6..4895dcdc5 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -1,6 +1,7 @@
 import EquationEditor from 'equation-editor-react';
 import { IReactionDisposer } from 'mobx';
 import { observer } from 'mobx-react';
+import { TextSelection } from 'prosemirror-state';
 import * as ReactDOM from 'react-dom';
 import { Doc } from '../../../../fields/Doc';
 import { StrCast } from '../../../../fields/Types';
@@ -21,7 +22,7 @@ export class EquationView {
             e.stopPropagation();
         };
 
-        ReactDOM.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} setEditor={this.setEditor} tbox={tbox} />, this.dom);
+        ReactDOM.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />, this.dom);
         (this as any).dom = this.dom;
     }
     _editor: EquationEditor | undefined;
@@ -29,6 +30,9 @@ export class EquationView {
     destroy() {
         ReactDOM.unmountComponentAtNode(this.dom);
     }
+    setSelection() {
+        this._editor?.mathField.focus();
+    }
     selectNode() {
         this._editor?.mathField.focus();
     }
@@ -40,6 +44,7 @@ interface IEquationViewInternal {
     tbox: FormattedTextBox;
     width: number;
     height: number;
+    getPos: () => number;
     setEditor: (editor: EquationEditor | undefined) => void;
 }
 
@@ -67,11 +72,22 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
         return (
             <div
                 className="equationView"
+                onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                        this.props.tbox.EditorView!.dispatch(this.props.tbox.EditorView!.state.tr.setSelection(new TextSelection(this.props.tbox.EditorView!.state.doc.resolve(this.props.getPos() + 1))));
+                        this.props.tbox.EditorView!.focus();
+                        e.preventDefault();
+                    }
+                    e.stopPropagation();
+                }}
+                onKeyPress={e => e.stopPropagation()}
                 style={{
                     position: 'relative',
                     display: 'inline-block',
                     width: this.props.width,
                     height: this.props.height,
+                    background: 'white',
+                    borderRadius: '10%',
                     bottom: 3,
                 }}>
                 <EquationEditor
-- 
cgit v1.2.3-70-g09d2

