aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/EquationView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/formattedText/EquationView.tsx')
-rw-r--r--src/client/views/nodes/formattedText/EquationView.tsx18
1 files changed, 17 insertions, 1 deletions
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