converted equationEditor from a npm module to a local file. commented out old google-maps code.

3 files changed, 89 insertions, 2 deletions

diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx
new file mode 100644
index 000000000..bde6c1315
--- /dev/null
+++ b/src/client/views/nodes/formattedText/EquationEditor.tsx
@@ -0,0 +1,87 @@
+import React, { Component, createRef } from 'react';
+
+// Import JQuery, required for the functioning of the equation editor
+import $ from 'jquery';
+
+// Import the styles from the Mathquill editor
+import 'mathquill/build/mathquill.css';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+window.jQuery = $;
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+require('mathquill/build/mathquill');
+
+type EquationEditorProps = {
+    onChange(latex: string): void;
+    value: string;
+    spaceBehavesLikeTab?: boolean;
+    autoCommands: string;
+    autoOperatorNames: string;
+    onEnter?(): void;
+};
+
+/**
+ * @typedef {EquationEditorProps} props
+ * @prop {Function} onChange Triggered when content of the equation editor changes
+ * @prop {string} value Content of the equation handler
+ * @prop {boolean}[false] spaceBehavesLikeTab Whether spacebar should simulate tab behavior
+ * @prop {string} autoCommands List of commands for which you only have to type the name of the
+ * command with a \ in front of it. Examples: pi theta rho sum
+ * @prop {string} autoOperatorNames List of operators for which you only have to type the name of the
+ * operator with a \ in front of it. Examples: sin cos tan
+ * @prop {Function} onEnter Triggered when enter is pressed in the equation editor
+ * @extends {Component<EquationEditorProps>}
+ */
+class EquationEditor extends Component<EquationEditorProps> {
+    element: any;
+    mathField: any;
+    ignoreEditEvents: number;
+
+    // Element needs to be in the class format and thus requires a constructor. The steps that are run
+    // in the constructor is to make sure that React can succesfully communicate with the equation
+    // editor.
+    constructor(props: EquationEditorProps) {
+        super(props);
+
+        this.element = createRef();
+        this.mathField = null;
+
+        // MathJax apparently fire 2 edit events on startup.
+        this.ignoreEditEvents = 2;
+    }
+
+    componentDidMount() {
+        const { onChange, value, spaceBehavesLikeTab, autoCommands, autoOperatorNames, onEnter } = this.props;
+
+        const config = {
+            handlers: {
+                edit: () => {
+                    if (this.ignoreEditEvents > 0) {
+                        this.ignoreEditEvents -= 1;
+                        return;
+                    }
+                    if (this.mathField.latex() !== value) {
+                        onChange(this.mathField.latex());
+                    }
+                },
+                enter: onEnter,
+            },
+            spaceBehavesLikeTab,
+            autoCommands,
+            autoOperatorNames,
+        };
+
+        // @ts-ignore
+        this.mathField = (MathQuill as any).MathField(this.element.current, config);
+        this.mathField.latex(value || '');
+    }
+
+    render() {
+        return <span ref={this.element} style={{ border: '0px', boxShadow: 'None' }} />;
+    }
+}
+
+export default EquationEditor;
diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index 75238a6ce..5ee5d25c3 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -1,4 +1,4 @@
-import EquationEditor from 'equation-editor-react';
+import EquationEditor from './EquationEditor';
 import { IReactionDisposer, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import { TextSelection } from 'prosemirror-state';
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 0f9dd6f8b..4f8e8769a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -70,7 +70,7 @@ import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
 import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
-import * as applyDevTools from 'prosemirror-dev-tools';
+// import * as applyDevTools from 'prosemirror-dev-tools';
 import * as React from 'react';
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;