{doc.taskLists.map((docUrl) => (
onSelectDocument(docUrl)}
>
))}
{title}
;
};
```
--------------------------------
### Initialize ProseMirror Editor with Automerge Integration
Source: https://automerge.org/docs/cookbook/rich-text-prosemirror-vanilla
Initializes the ProseMirror editor using the Automerge document handle and its associated schema and plugin. Requires `EditorView` and `EditorState` from ProseMirror.
```javascript
// This is the integration with automerge.
const { schema, doc, plugin } = init(handle, ["text"])
const editorConfig = {
schema,
plugins: [plugin],
}
// This is the prosemirror editor.
const view = new EditorView(document.querySelector("#editor"), {
state: EditorState.create({
doc, // Note that we initialize using the mirror
plugins: exampleSetup({ schema, plugins: [plugin] }),
}),
})
```
--------------------------------
### Create Vite App with Automerge Dependencies
Source: https://automerge.org/docs/cookbook/rich-text-prosemirror-react
Use the @automerge/vite-app template to create a new Vite project with Automerge dependencies pre-installed.
```bash
yarn create @automerge/vite-app
```
--------------------------------
### Demonstrate Concurrent Updates and Merging
Source: https://automerge.org/docs/reference/documents/conflicts
Illustrates creating two separate Automerge documents with conflicting updates to the same property ('x') and then merging them. The assertion confirms that merging in either order results in an identical document state, highlighting Automerge's deterministic conflict resolution.
```javascript
let doc1 = Automerge.change(Automerge.init(), (doc) => {
doc.x = 1;
});
let doc2 = Automerge.change(Automerge.init(), (doc) => {
doc.x = 2;
});
let doc1_merged_with_doc2 = Automerge.merge(doc1, doc2);
let doc2_merged_with_doc1 = Automerge.merge(doc2, doc1);
assert.deepEqual(doc1_merged_with_doc2, doc2_merged_with_doc1);
```
--------------------------------
### Pattern Matching with Refs
Source: https://automerge.org/docs/reference/repositories/refs
Explains how to use pattern matching to select document subsections without explicit paths.
```APIDOC
## Pattern Matching with Refs
### Description
Select document subsections by simple pattern matching, such as matching an object with a specific property value.
### Method
`handle.ref(path, pattern)`
### Parameters
#### Path Parameters
- **path** (string) - The path to the array or object containing the target subsection.
- **pattern** (object) - An object defining the properties to match.
### Request Example
```javascript
let handle = repo.create({
users: [
{ id: "a", name: "Alice" },
{ id: "b", name: "Bob" },
{ id: "c", name: "Charlie" },
]
})
const bobRef = handle.ref("users", { id: "b" })
bobRef.remove()
// Logs the objects for Alice and Charlie
console.log(handle.doc().users)
```
```
--------------------------------
### Listen for Document Changes
Source: https://automerge.org/docs/tutorial/local-sync
Attach a change listener to a `DocHandle` using `handle.on("change", ...)` to log updates to the document. This allows you to observe real-time modifications as they occur.
```javascript
handle.on("change", evt => console.log(evt.doc))
```
--------------------------------
### Create and Manage Task List URL
Source: https://automerge.org/docs/tutorial/multiple-task-lists
Use this snippet to create a new task list, update the document with its URL, and then select the new document. Ensure the `changeDoc` function is available and correctly implemented.
```typescript
const newTaskList = repo.create