Improve the react example

examples/cra/package.json

@@ -10,7 +10,7 @@
     "@types/node": "^16.11.21",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
-    "automerge-wasm": "file:../automerge-wasm-v0.1.0.tgz",
+    "automerge-wasm": "file:../../automerge-wasm/automerge-wasm-v0.1.0.tgz",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

examples/cra/src/App.tsx

@@ -1,40 +1,41 @@
 import React, { useEffect, useState } from 'react';
-import logo from './logo.svg';
 import './App.css';
-import init from "automerge-wasm"
+import * as Automerge from "automerge-wasm"
-import { create, loadDoc, encodeChange, decodeChange,
-         initSyncState, encodeSyncState, decodeSyncState,
-         encodeSyncMessage, decodeSyncMessage,
-         LIST, MAP, TEXT } from "automerge-wasm"
 
 function App() {
+  const [ doc, ] = useState(Automerge.create())
+  const [ edits, ] = useState(doc.set("_root", "edits", Automerge.TEXT) || "")
   const [ val, setVal ] = useState("");
   useEffect(() => {
-    init().then(() => {
-      let doc = create()
-      let edits = doc.set("_root", "edits", TEXT) || ""
       doc.splice(edits, 0, 0, "the quick fox jumps over the lazy dog")
-      doc.splice(edits, 10, 3, "sloth")
       let result = doc.text(edits)
-      setVal(JSON.stringify(result))
+      setVal(result)
-    })
   }, [])
+
+  function updateTextarea(e: any) {
+    e.preventDefault()
+    let event: InputEvent = e.nativeEvent
+    console.log(edits, e.target.selectionEnd)
+    switch (event.inputType) {
+      case 'insertText':
+        //@ts-ignore
+        doc.splice(edits, e.target.selectionEnd - 1, 0, e.nativeEvent.data)
+        break;
+      case 'deleteContentBackward':
+        //@ts-ignore
+        doc.splice(edits, e.target.selectionEnd, 1)
+        break;
+      case 'insertLineBreak':
+        //@ts-ignore
+        doc.splice(edits, e.target.selectionEnd - 1, '\n')
+        break;
+    }
+    setVal(doc.text(edits))
+  }
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <textarea value={val} onChange={updateTextarea}></textarea>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-        <p> edits = {val}</p>
       </header>
     </div>
   );

examples/cra/src/index.tsx

@@ -3,13 +3,16 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import init from "automerge-wasm"
 
-ReactDOM.render(
+init().then(_ => {
-  <React.StrictMode>
+  ReactDOM.render(
-    <App />
+    <React.StrictMode>
-  </React.StrictMode>,
+      <App />
-  document.getElementById('root')
+    </React.StrictMode>,
-);
+    document.getElementById('root')
+  );
+})
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))