Compare commits
2 commits
main
...
react-exam
Author | SHA1 | Date | |
---|---|---|---|
|
da36537264 | ||
|
e5df0e3c97 |
3 changed files with 36 additions and 32 deletions
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
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))
|
||||
|
|
Loading…
Reference in a new issue