Fix #13

Author: erlendoeien

src/MathfieldComponent.tsx

@@ -1,12 +1,10 @@
-import 'mathlive/dist/mathlive.core.css';
-import 'mathlive/dist/mathlive.css';
-import * as React from 'react';
-import { makeMathField, MathfieldConfig, Mathfield } from 'mathlive';
+import * as React from "react";
+import { makeMathField, MathfieldConfig, Mathfield } from "mathlive";
 
 interface BaseProps {
     onChange?: (latex: string) => void;
 
-    /** 
+    /**
      * The raw options of mathlive's makeMathField.
      * */
     mathfieldConfig?: MathfieldConfig;
@@ -31,20 +29,21 @@ export type Props = ControlledProps | UncontrolledProps;
 
 export function combineConfig(props: Props): MathfieldConfig {
     const combinedConfiguration: MathfieldConfig = {
-        ...props.mathfieldConfig
+        ...props.mathfieldConfig,
     };
 
     const { onChange } = props;
 
     if (onChange) {
         if (props.mathfieldConfig && props.mathfieldConfig.onContentDidChange) {
             const fromConfig = props.mathfieldConfig.onContentDidChange;
-            combinedConfiguration.onContentDidChange = mf => {
+            combinedConfiguration.onContentDidChange = (mf) => {
                 onChange(mf.$latex());
                 fromConfig(mf);
             };
         } else {
-            combinedConfiguration.onContentDidChange = mf => onChange(mf.$latex());
+            combinedConfiguration.onContentDidChange = (mf) =>
+                onChange(mf.$latex());
         }
     }
 
@@ -63,34 +62,45 @@ export class MathfieldComponent extends React.Component<Props> {
         }
         if (prevProps.latex !== undefined) {
             if (this.props.latex === undefined) {
-                throw new Error("Cannot change from controlled to uncontrolled state!");
+                throw new Error(
+                    "Cannot change from controlled to uncontrolled state!"
+                );
             }
             if (this.props.latex !== prevProps.latex) {
                 if (this.props.latex === "") {
                     this.mathfield.$perform("deleteAll");
                 } else {
-                    this.mathfield.$latex(this.props.latex, { suppressChangeNotifications: true });
+                    this.mathfield.$latex(this.props.latex, {
+                        suppressChangeNotifications: true,
+                    });
                 }
             }
         }
     }
 
     render() {
-        return <div ref={instance => this.insertElement = instance} />;
+        return <div ref={(instance) => (this.insertElement = instance)} />;
     }
 
     componentDidMount() {
         if (!this.insertElement) {
-            throw new Error("React did apparently not mount the insert point correctly.");
+            throw new Error(
+                "React did apparently not mount the insert point correctly."
+            );
         }
 
         const initialValue = this.props.initialLatex ?? this.props.latex;
-        
-        this.mathfield = makeMathField(this.insertElement, this.combinedConfiguration);
-        this.mathfield.$latex(initialValue, { suppressChangeNotifications: true });
+
+        this.mathfield = makeMathField(
+            this.insertElement,
+            this.combinedConfiguration
+        );
+        this.mathfield.$latex(initialValue, {
+            suppressChangeNotifications: true,
+        });
 
         if (this.props.mathfieldRef) {
             this.props.mathfieldRef(this.mathfield);
         }
     }
-}
+}