Jgisin-crdt NPM

React Flow Example

Import veltStore from @velt/crdt-reactflow
Import Zustand and useShallow
Instantiate a veltStore with initialNodes and initialEdges as arguments (can use this to initialize from remote database)
const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = storeRef.current( useShallow(selector), ); destructres the reactflow state management from the veltStore which can then be passed to the ReactFlow component.
```
import React, { useRef } from 'react';
import {
ReactFlow,
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
```

import '@xyflow/react/dist/style.css'; import { veltStore } from '@velt/crdt-reactflow'; import { useShallow } from 'zustand/react/shallow';

const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, ; const initialEdges = { id: 'e1-2', source: '1', target: '2' };

const selector = (state) => ({ nodes: state.nodes, edges: state.edges, onNodesChange: state.onNodesChange, onEdgesChange: state.onEdgesChange, onConnect: state.onConnect, });

export default function App() {

const storeRef = useRef(veltStore(initialNodes, initialEdges)); const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = storeRef.current( useShallow(selector), );

return (

<div style={{ width: '100vw', height: '100vh' }}>
  <ReactFlow
    nodes={nodes}
    edges={edges}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
    fitView
  >
    <Controls />
    <MiniMap />
    <Background variant="dots" gap={12} size={1} />
  </ReactFlow>
</div>

); }

## CodeMirror Example

1. Import VeltCodeMirror from `@velt/crdt-codemirror`
2. Import `yCollab` from `y-codemirror.next`
3. Destructure the `ytext` and `awareness` and `undoManager` from the return value of VeltCodeMirror
4. add the `yCollab` extension to the EditorView
5. use the velt `ytext` and `awareness` and `undoManager` in the `yCollab`

```import {EditorView, basicSetup} from "codemirror"
import {lineNumbers} from "@codemirror/view"
import { yCollab } from 'y-codemirror.next'
import {VeltCodeMirror} from "@velt/crdt-codemirror"

export const usercolors = [
  { color: '#30bced', light: '#30bced33' },
  { color: '#6eeb83', light: '#6eeb8333' },
  { color: '#ffbc42', light: '#ffbc4233' },
  { color: '#ecd444', light: '#ecd44433' },
  { color: '#ee6352', light: '#ee635233' },
  { color: '#9ac2c9', light: '#9ac2c933' },
  { color: '#8acb88', light: '#8acb8833' },
  { color: '#1be7ff', light: '#1be7ff33' }
]

// Initialize Velt CodeMirror with the Y.Doc
const velt = VeltCodeMirror()

let editor = new EditorView({
  doc: "",
  extensions: [
      basicSetup, 
      lineNumbers(),
      yCollab(velt.ytext, velt.awareness, { undoManager: velt.undoManager }),
  ],
  parent: document.querySelector('#editor') || document.body
})```

4 months ago

4 months ago