Skip to content

Commit cf9e0ec

Browse files
yoen-veltyoen-velt
committed
Tiptap Demo v1
1 parent 627b307 commit cf9e0ec

40 files changed

+2978
-10
lines changed

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/README.md‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
# TipTap CRDT Demo
2+
3+
> **[🚀 View Live Demo](https://sample-apps-tiptap-crdt-demo.vercel.app/)**
4+
5+
6+
https://github.com/user-attachments/assets/ba757155-087d-4c1f-9d80-47b72d29ca9b
7+
8+
9+
## Overview
10+
11+
This demo showcases **real-time collaborative text editing** built using **TipTap** with **Velt's CRDT extension**. Multiple users can simultaneously edit content with automatic conflict resolution, ensuring a smooth collaborative writing experience.
12+
13+
Velt's CRDT extension is based on Yjs.
14+
15+
## Path
16+
17+
```
18+
apps/react/crdt/text-editors/tiptap/tiptap-crdt-demo/
19+
```
20+
21+
## Package Name
22+
23+
`@apps/react-crdt-text-editors-tiptap-tiptap-crdt-demo`
24+
25+
## Features
26+
27+
### Real-time Collaboration
28+
- **Live Co-editing**: Multiple users can simultaneously edit the document with Velt's CRDT synchronization
29+
- **Presence Awareness**: See who's currently viewing and editing the document
30+
- **Live Cursors**: See collaborators' cursor positions in real-time
31+
- **Notifications**: Stay updated on document activity
32+
- **Conflict Resolution**: Automatic CRDT-based conflict resolution for simultaneous edits
33+
34+
### Editor Features
35+
- **Rich Text Editing**: Full-featured rich text editor powered by TipTap
36+
- **History**: Undo/redo functionality that respects collaborative changes
37+
- **Extensible**: Built on TipTap's powerful extension system
38+
39+
## Directory Structure
40+
41+
```
42+
tiptap-crdt-demo/
43+
├── app/
44+
│ ├── api/
45+
│ │ └── velt/
46+
│ │ └── token/
47+
│ │ └── route.ts # Velt JWT token generation endpoint
48+
│ ├── document/
49+
│ │ ├── DocumentContext.tsx # Document context provider
50+
│ │ └── useCurrentDocument.ts # Document management hook
51+
│ ├── userAuth/
52+
│ │ ├── AppUserContext.tsx # User authentication context
53+
│ │ ├── LoginPanel.tsx # User login panel component
54+
│ │ ├── useAppUser.ts # User authentication hook
55+
│ │ └── users.ts # Mock user data
56+
│ ├── layout.tsx # Root layout with Velt provider
57+
│ └── page.tsx # Main page
58+
├── components/
59+
│ ├── header/
60+
│ │ └── header.tsx # Header with Velt tools (presence, notifications)
61+
│ ├── sidebar/
62+
│ │ └── sidebar.tsx # Left navigation sidebar
63+
│ ├── document/
64+
│ │ ├── document-canvas.tsx # Main document wrapper
65+
│ │ └── TipTapComponent/
66+
│ │ ├── TipTapComponent.tsx # Main TipTap editor with Velt CRDT
67+
│ │ ├── constants.ts # Editor configuration constants
68+
│ │ └── types.ts # TypeScript type definitions
69+
│ └── velt/
70+
│ ├── ui-customization/
71+
│ │ ├── VeltCustomization.tsx # Velt UI customization wrapper
72+
│ │ ├── VeltNotificationsToolWf.tsx # Custom notifications wireframe
73+
│ │ └── styles.css # Custom Velt styles
74+
│ ├── VeltCollaboration.tsx # Velt client setup and configuration
75+
│ ├── VeltInitializeDocument.tsx # Document initialization
76+
│ ├── VeltInitializeUser.tsx # User initialization
77+
│ └── VeltTools.tsx # Velt component exports
78+
├── hooks/ # Custom React hooks
79+
├── lib/
80+
│ └── utils.ts # Utility functions
81+
├── public/ # Static assets
82+
├── styles/
83+
│ └── globals.css # Global styles
84+
├── .npmrc # pnpm config to prevent Tailwind v4 hoisting
85+
├── next.config.js
86+
├── tailwind.config.js
87+
├── tsconfig.json
88+
├── components.json # shadcn/ui configuration
89+
└── package.json
90+
```
91+
92+
## Key Technologies
93+
94+
- **Next.js 15** with React 19
95+
- **TipTap 2.x** - Headless rich text editor
96+
- **@veltdev/tiptap-crdt** - Velt CRDT extension for TipTap
97+
- **@veltdev/react** - Velt collaboration components
98+
- **Yjs** - Underlying CRDT implementation
99+
- **Tailwind CSS v3.4** - Styling
100+
- **TypeScript** - Type safety
101+
102+
## Getting Started
103+
104+
### Install Dependencies
105+
106+
From the monorepo root:
107+
108+
```bash
109+
pnpm install
110+
```
111+
112+
### Run Development Server
113+
114+
Navigate to the demo directory:
115+
116+
```bash
117+
cd apps/react/crdt/text-editors/tiptap/tiptap-crdt-demo
118+
pnpm dev
119+
```
120+
121+
Or run from the root:
122+
123+
```bash
124+
pnpm --filter @apps/react-crdt-text-editors-tiptap-tiptap-crdt-demo dev
125+
```
126+
127+
Open [http://localhost:3000](http://localhost:3000) in your browser.
128+
129+
### Build for Production
130+
131+
```bash
132+
pnpm --filter @apps/react-crdt-text-editors-tiptap-tiptap-crdt-demo build
133+
```
134+
135+
## Usage
136+
137+
### Basic Editing
138+
139+
1. **Type content**: Click into the editor and start writing
140+
2. **See collaborators**: View other users' cursors in real-time
141+
3. **Edit simultaneously**: Multiple users can type in different parts of the document
142+
143+
### Collaborative Features
144+
145+
1. **Join session**: Open the same document in multiple browsers
146+
2. **Switch users**: Use the login panel to switch between test users
147+
3. **See active users**: View avatars of online collaborators in the header
148+
4. **Live cursors**: See where other users are typing in real-time
149+
5. **Simultaneous edits**: Type in different parts of the document simultaneously
150+
151+
### Collaboration Features
152+
153+
- **See active users**: View avatars of online collaborators in the header
154+
- **Receive notifications**: Bell icon shows document activity
155+
- **Real-time updates**: All edits appear instantly for all users
156+
157+
## Troubleshooting
158+
159+
### PostCSS Errors
160+
If you see PostCSS/Tailwind errors, ensure:
161+
1. The `.npmrc` file exists in this directory
162+
2. You ran `pnpm install` from the monorepo root
163+
3. You're not accidentally using Tailwind v4
164+
165+
### Velt Not Loading
166+
If Velt features don't appear:
167+
1. Check that `NEXT_PUBLIC_VELT_API_KEY` is set in your environment
168+
2. Verify user initialization in browser console
169+
3. Ensure you're running the dev server on the correct port
170+
171+
### CRDT Sync Issues
172+
If changes aren't syncing:
173+
1. Check browser console for WebSocket errors
174+
2. Verify the `editorId` is unique for your document
175+
3. Ensure multiple users are on the same document ID
176+
4. Test with two unique users on two different browser profiles (e.g., Chrome regular + Chrome incognito, or different browsers)
177+
178+
### Editor Not Loading
179+
If the editor doesn't appear:
180+
1. Check that TipTap extensions are loaded correctly
181+
2. Verify collaboration config is available before editor initialization
182+
3. Ensure `isLoading` is false before rendering editor
183+
4. Check browser console for TipTap errors
184+
185+
## About Velt SDK
186+
187+
<a href="https://npmjs.org/package/@veltdev/react">
188+
<img src="https://img.shields.io/npm/v/@veltdev/react?style=flat&label=npm&color=09f" alt="NPM" />
189+
</a>
190+
191+
With Velt SDK you can add powerful collaboration features to your product extremely fast.
192+
193+
The SDK provides **fullstack components**:
194+
- UI and behavior are fully customizable to match your product's needs
195+
- Fully-managed on a scalable realtime backend
196+
197+
**Features include:**
198+
- **Comments** like Figma, Frame.io, Google Docs, Sheets and more
199+
- **Recording** like Loom (audio, video, screen)
200+
- **Huddle** like Slack (audio, video, screensharing)
201+
- In-app and off-app **notifications**
202+
- **@mentions** and assignment
203+
- **Presence**, **Cursors**, **Live Selection**
204+
- **Live state sync** with Single Editor mode
205+
- **Multiplayer editing** with conflict resolution
206+
- **Follow mode** like Figma
207+
- ... and so much more
208+
209+
### Resources
210+
- 📚 [Documentation](https://docs.velt.dev/get-started/overview) - Guides and API references
211+
- 🎨 [Use Cases](https://velt.dev/use-case) - See collaboration in action
212+
- 🎭 [Figma Template](https://www.figma.com/community/file/1402312407969730816/velt-collaboration-kit) - Visualize features for your product
213+
- 📝 [Release Notes](https://docs.velt.dev/release-notes/version-4/sdk-changelog) - Latest changes
214+
- 🔒 [Security](https://velt.dev/security) - SOC2 Type 2 & HIPAA compliant
215+
- 🐦 [X/Twitter](https://x.com/veltjs) - Updates and announcements
216+
217+
## Important Configuration
218+
219+
### .npmrc File
220+
221+
This demo includes a `.npmrc` file that prevents pnpm from hoisting Tailwind CSS v4 from other workspace packages:
222+
223+
```
224+
public-hoist-pattern[]=*
225+
public-hoist-pattern[]=!@tailwindcss*
226+
```
227+
228+
**Why this matters**:
229+
- This demo uses Tailwind CSS v3.4.x with traditional PostCSS configuration
230+
- Other apps in the monorepo may use Tailwind CSS v4
231+
- Without the `.npmrc`, pnpm would hoist v4 and cause PostCSS build errors
232+
233+
**Do not delete the `.npmrc` file** - it ensures the correct Tailwind version is used.
234+

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>TipTap CRDT Demo</title>
7+
<meta name="description" content="TipTap demo for CRDT collaborative editing" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&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" />
11+
</head>
12+
<body>
13+
<div id="app"></div>
14+
<script type="module" src="/src/main.js"></script>
15+
</body>
16+
</html>

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/next.config.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/** @type {import('next').NextConfig} */
2+
const path = require('path');
3+
4+
// Helper to get package directory from main entry
5+
const getPackageDir = (packageName) => {
6+
try {
7+
// Try resolving the main entry and get its directory
8+
const resolved = require.resolve(packageName);
9+
// Walk up to find the package root (contains node_modules or is in node_modules)
10+
let dir = path.dirname(resolved);
11+
while (dir !== '/' && !dir.endsWith(`node_modules/${packageName}`) && !dir.endsWith(`node_modules\\${packageName}`)) {
12+
const parent = path.dirname(dir);
13+
if (parent === dir) break;
14+
dir = parent;
15+
}
16+
return dir;
17+
} catch {
18+
return packageName;
19+
}
20+
};
21+
22+
const nextConfig = {
23+
transpilePackages: ['@veltdev/react', '@veltdev/tiptap-crdt-react', '@veltdev/tiptap-crdt'],
24+
webpack: (config) => {
25+
// Resolve packages to single instances to prevent duplicate package issues
26+
config.resolve.alias = {
27+
...config.resolve.alias,
28+
// Ensure single instances of Yjs packages
29+
'yjs': getPackageDir('yjs'),
30+
'y-prosemirror': getPackageDir('y-prosemirror'),
31+
'lib0': getPackageDir('lib0'),
32+
};
33+
return config;
34+
},
35+
}
36+
37+
module.exports = nextConfig

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@apps/vanilla-js-CRDT-text-editors-tiptap-tiptap-crdt-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"serve": "vite preview"
11+
},
12+
"dependencies": {
13+
"@tiptap/core": "^3.14.0",
14+
"@tiptap/extension-bubble-menu": "^3.14.0",
15+
"@tiptap/extension-collaboration": "^3.14.0",
16+
"@tiptap/extension-collaboration-caret": "^3.14.0",
17+
"@tiptap/extension-text-align": "^3.14.0",
18+
"@tiptap/extension-underline": "^3.14.0",
19+
"@tiptap/pm": "^3.14.0",
20+
"@tiptap/starter-kit": "^3.14.0",
21+
"@veltdev/client": "^4.6.10",
22+
"@veltdev/tiptap-crdt": "^4.5.9-beta.2",
23+
"@veltdev/types": "^4.6.10",
24+
"y-prosemirror": "^1.2.12",
25+
"yjs": "^13.6.18"
26+
},
27+
"devDependencies": {
28+
"@types/node": "^22",
29+
"autoprefixer": "^10",
30+
"postcss": "^8",
31+
"tailwindcss": "^3.4.0",
32+
"typescript": "^5",
33+
"vite": "^5.4.0"
34+
}
35+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/public/.gitkeep‎

Whitespace-only changes.

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/public/icons/align-center.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/public/icons/align-left.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎apps/javascript/crdt/text-editors/tiptap/tiptap-crdt-demo/public/icons/align-right.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)