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/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",

View file

@ -1,40 +1,41 @@
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import init from "automerge-wasm"
import { create, loadDoc, encodeChange, decodeChange,
initSyncState, encodeSyncState, decodeSyncState,
encodeSyncMessage, decodeSyncMessage,
LIST, MAP, TEXT } from "automerge-wasm"
import * as Automerge 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" />
<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>
<textarea value={val} onChange={updateTextarea}></textarea>
</header>
</div>
);

View file

@ -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"
init().then(_ => {
ReactDOM.render(
<React.StrictMode>
<App />
</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))