First proof of concept version

.gitignore

@@ -6,6 +6,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

package.json

@@ -2,8 +2,10 @@
   "name": "react-mathlive",
   "version": "1.0.0",
   "description": "A react wrapper-component for mathlive.js",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
+    "prepare": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Fabian Grewing",
@@ -14,6 +16,7 @@
     "typescript": "^3.2.4"
   },
   "dependencies": {
+    "mathlive": "^0.25.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }

src/Mathfield.tsx

@@ -0,0 +1,40 @@
+import 'mathlive/dist/mathlive.core.css';
+import 'mathlive/dist/mathlive.css';
+import * as React from 'react';
+import MathLive from 'mathlive/dist/mathlive.mjs';
+
+interface Props {
+    latex: string;
+    onChange: (latex: string) => void;
+    options?: { [key: string]: any };
+    mathFieldRef?: (mf: any) => void;
+}
+
+export class MathField extends React.Component<Props> {
+    insertElement: HTMLElement | null = null;
+
+    render() {
+        return <div
+            ref={instance => this.insertElement = instance}
+        />;
+    }
+
+    componentDidMount() {
+        if (!this.insertElement) {
+            throw new Error("React did apparently not mount the insert point correctly.");
+        }
+
+        let options = {
+            ...this.props.options,
+            onContentDidChange: (mf: any) => {
+                this.props.onChange(mf.text("latex"))
+            }
+        };
+
+        const mf = MathLive.makeMathField(this.insertElement, options);
+
+        if (this.props.mathFieldRef) {
+            this.props.mathFieldRef(mf);
+        }
+    }
+}

src/index.ts

@@ -0,0 +1 @@
+export { MathField } from './Mathfield';

src/types/mathlive/index.d.ts

@@ -0,0 +1,7 @@
+declare module 'mathlive/dist/mathlive.mjs' {
+    const MathLive: {
+        makeMathField: (el: HTMLElement, options?: object) => any
+    };
+
+    export default MathLive;
+}

tsconfig.json

@@ -1,12 +1,12 @@
 {
     "compilerOptions": {
-      "outDir": "./lib",
+      "outDir": "./dist",
       "target": "es5",
       "module": "commonjs",
       "noImplicitAny": true,
       "strictNullChecks": true,
       "removeComments": true,
-      "declaration": false,
+      "declaration": true,
       "sourceMap": true,
       "jsx": "react",
       "typeRoots": [
@@ -19,6 +19,7 @@
       "./src/**/*.ts"
     ],
     "exclude": [
-      "node_modules"
+      "node_modules",
+      "dist"
     ]
   }