Compare commits

...

2 commits

Author SHA1 Message Date
karissa
da36537264 Improve the react example 2022-01-31 10:50:37 -07:00
karissa
e5df0e3c97 Update app to include text editor, import Automerge correctly 2022-01-28 21:33:24 -07:00
3 changed files with 36 additions and 32 deletions

View file

@ -10,7 +10,7 @@
"@types/node": "^16.11.21", "@types/node": "^16.11.21",
"@types/react": "^17.0.38", "@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11", "@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": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",

View file

@ -1,40 +1,41 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css'; 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() { function App() {
const [ doc, ] = useState(Automerge.create())
const [ edits, ] = useState(doc.set("_root", "edits", Automerge.TEXT) || "")
const [ val, setVal ] = useState(""); const [ val, setVal ] = useState("");
useEffect(() => { 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, 0, 0, "the quick fox jumps over the lazy dog")
doc.splice(edits, 10, 3, "sloth")
let result = doc.text(edits) 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 ( return (
<div className="App"> <div className="App">
<header className="App-header"> <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> </header>
</div> </div>
); );

View file

@ -3,13 +3,16 @@ import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; 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 // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))