From 3ba336591a90e08a3175ac0f5a5c8990a9d7be32 Mon Sep 17 00:00:00 2001
From: Fabian Grewing <Fabian.Heimbuerger@gmail.com>
Date: Wed, 30 Jan 2019 19:04:00 +0000
Subject: [PATCH] First proof of concept version

---
 .gitignore                    |  1 +
 package-lock.json             |  5 +++++
 package.json                  |  5 ++++-
 src/Mathfield.tsx             | 40 +++++++++++++++++++++++++++++++++++
 src/index.ts                  |  1 +
 src/types/mathlive/index.d.ts |  7 ++++++
 tsconfig.json                 |  7 +++---
 7 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 src/Mathfield.tsx
 create mode 100644 src/index.ts
 create mode 100644 src/types/mathlive/index.d.ts

diff --git a/.gitignore b/.gitignore
index b1427d5..2e36466 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
diff --git a/package-lock.json b/package-lock.json
index c8ec40e..5eb2142 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "mathlive": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/mathlive/-/mathlive-0.25.0.tgz",
+      "integrity": "sha512-zW7GBTWdQtTBc9ejiANsOwpc3o+pVcvsflgwpMdwYERnWwfD+vLVQ6Rq+fn0pq/leVOIMweE8QIzr/93Ez4oAQ=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
diff --git a/package.json b/package.json
index ff3e7a8..d3ec724 100644
--- a/package.json
+++ b/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"
   }
diff --git a/src/Mathfield.tsx b/src/Mathfield.tsx
new file mode 100644
index 0000000..7f513d4
--- /dev/null
+++ b/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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..041e211
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1 @@
+export { MathField } from './Mathfield';
\ No newline at end of file
diff --git a/src/types/mathlive/index.d.ts b/src/types/mathlive/index.d.ts
new file mode 100644
index 0000000..c6a4199
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 41164ea..b3f5a11 100644
--- a/tsconfig.json
+++ b/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"
     ]
   }
\ No newline at end of file