React Flow Example

1. Import veltStore from @velt/crdt-reactflow
2. Import Zustand and useShallow
3. Instantiate a veltStore with initialNodes and initialEdges as arguments (can use this to initialize from remote database)
4. 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 {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
})```