Merge branch 'main' of github.com:velt-js/sample-apps

Author: mayank-velt

apps/javascript/crdt/text-editors/codemirror/codemirror-crdt-demo/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/javascript/crdt/text-editors/codemirror/codemirror-crdt-demo/README.md

@@ -0,0 +1,137 @@
+# CodeMirror CRDT Demo (Vanilla JavaScript)
+
+Real-time collaborative code editing built with CodeMirror 6 and Velt CRDT extension.
+
+## What Changed
+
+This demo was converted from React/Next.js to **vanilla JavaScript** with Vite:
+
+- **Removed**: React, Next.js, @veltdev/react, @veltdev/codemirror-crdt-react
+- **Added**: @veltdev/client, @veltdev/codemirror-crdt (non-React versions)
+- **Bundler**: Vite instead of Next.js
+- **UI**: Same layout and styling, implemented with vanilla JS DOM manipulation
+
+## Features
+
+- Real-time collaborative code editing
+- Live cursors and presence awareness
+- CRDT-based conflict resolution (Yjs)
+- Velt collaboration tools (presence, comments, notifications)
+
+## Directory Structure
+
+```
+codemirror-crdt-demo/
+├── src/
+│   ├── main.js                    # Entry point
+│   ├── lib/
+│   │   ├── user.js                # User management
+│   │   ├── document.js            # Document ID management
+│   │   └── velt.js                # Velt client initialization
+│   ├── components/
+│   │   ├── sidebar.js             # Left sidebar component
+│   │   ├── header.js              # Header with Velt tools
+│   │   ├── document-canvas.js     # Main layout
+│   │   └── codemirror.js          # CodeMirror with CRDT
+│   └── styles/
+│       └── velt-customization.css # Velt theme variables
+├── styles/
+│   ├── globals.css                # Global styles (Tailwind)
+│   └── codemirror.css             # Editor styles
+├── public/                        # Static assets
+├── index.html                     # HTML entry
+├── vite.config.js                 # Vite configuration
+├── tailwind.config.js             # Tailwind configuration
+├── postcss.config.js              # PostCSS configuration
+└── package.json
+```
+
+## Getting Started
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Development Server
+
+```bash
+pnpm dev
+```
+
+Open http://localhost:3000 in your browser.
+
+### Build for Production
+
+```bash
+pnpm build
+pnpm preview
+```
+
+## Testing Collaboration
+
+1. Open the demo in two browser tabs (or different browsers)
+2. Both tabs will automatically get unique users
+3. Edit code in one tab and see changes appear in the other
+4. Observe live cursors showing other users' positions
+
+## Key Technologies
+
+- **Vite** - Build tool
+- **CodeMirror 6** - Code editor
+- **@veltdev/client** - Velt SDK (vanilla JS)
+- **@veltdev/codemirror-crdt** - CRDT extension for CodeMirror
+- **y-codemirror.next** - Yjs binding for CodeMirror
+- **Tailwind CSS v3.4** - Styling
+
+## Velt Integration
+
+The demo uses these Velt features:
+
+1. **@veltdev/client** for initialization:
+   ```js
+   import { initVelt } from '@veltdev/client';
+   const client = await initVelt('YOUR_API_KEY');
+   await client.identify(user);
+   await client.setDocument(documentId);
+   ```
+
+2. **@veltdev/codemirror-crdt** for collaborative editing:
+   ```js
+   import { createVeltCodeMirrorStore } from '@veltdev/codemirror-crdt';
+   const store = await createVeltCodeMirrorStore({
+     editorId: 'editor-1',
+     veltClient: client,
+     initialContent: '...',
+   });
+   ```
+
+3. **Velt web components** for collaboration UI:
+   ```html
+   <velt-presence></velt-presence>
+   <velt-comments></velt-comments>
+   <velt-notifications-tool></velt-notifications-tool>
+   ```
+
+## Troubleshooting
+
+### Editor Not Loading
+- Check browser console for errors
+- Verify Velt client initialization succeeded
+- Ensure document ID is set before creating the editor
+
+### Collaboration Not Working
+- Open in two different browser profiles (not just tabs)
+- Check that both sessions have the same document ID
+- Verify user authentication completed
+
+### Styles Not Applied
+- Run `pnpm install` to ensure Tailwind is installed
+- Check that CSS files are imported in main.js
+
+## Resources
+
+- [Velt Documentation](https://docs.velt.dev)
+- [CodeMirror Documentation](https://codemirror.net/)
+- [Velt CodeMirror CRDT Guide](https://docs.velt.dev/realtime-collaboration/crdt/setup/codemirror)

apps/javascript/crdt/text-editors/codemirror/codemirror-crdt-demo/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CodeMirror CRDT Demo</title>
+    <meta name="description" content="CodeMirror demo for CRDT collaborative editing" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Urbanist:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

apps/javascript/crdt/text-editors/codemirror/codemirror-crdt-demo/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@apps/vanilla-js-CRDT-text-editors-codemirror-codemirror-crdt-demo",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-css": "^6",
+    "@codemirror/lang-html": "^6",
+    "@codemirror/lang-javascript": "^6",
+    "@codemirror/state": "^6",
+    "@codemirror/theme-one-dark": "^6",
+    "@veltdev/client": "^4.6.10",
+    "@veltdev/codemirror-crdt": "4.5.8",
+    "@veltdev/types": "^4.6.10",
+    "codemirror": "^6",
+    "y-codemirror.next": "^0.3.5",
+    "yjs": "^13.6.18"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "autoprefixer": "^10",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5",
+    "vite": "^5.4.0"
+  }
+}

apps/javascript/crdt/text-editors/codemirror/codemirror-crdt-demo/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}