v1

Author: yoen-velt

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/.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/react/text-editors/libraries/tiptap/tiptap-demo-2/.npmrc

@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*
+public-hoist-pattern[]=!tailwindcss
+shamefully-hoist=false

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/README.md

@@ -0,0 +1,112 @@
+# tiptap-demo-2
+
+## Overview
+
+This demo showcases **tiptap** (Library) for **text-editors** in **react**.
+
+## Path
+
+```
+apps/react/text-editors/libraries/tiptap/tiptap-demo-2/
+```
+
+## Package Name
+
+`@apps/react-text-editors-tiptap-tiptap-demo-2`
+
+## Directory Structure
+
+```
+tiptap-demo-2/
+├── app/
+│   ├── layout.tsx          # Root layout
+│   └── page.tsx            # Main page
+├── components/
+│   ├── header/             # Header components (Velt notifications, etc.)
+│   │   └── header.tsx
+│   ├── sidebar/            # Sidebar components
+│   │   └── sidebar.tsx
+│   └── document/           # Main document/canvas logic
+│       └── document-canvas.tsx
+├── hooks/                  # Custom React hooks
+├── lib/                    # Utility functions
+│   └── utils.ts
+├── public/                 # Static assets
+├── styles/                 # Global styles
+│   └── globals.css
+├── .npmrc                  # pnpm config to prevent Tailwind v4 hoisting
+├── next.config.js
+├── tailwind.config.js
+├── tsconfig.json
+├── components.json         # shadcn/ui configuration
+└── package.json
+```
+
+## Getting Started
+
+### Install Dependencies
+
+From the monorepo root:
+
+```bash
+pnpm -w install
+```
+
+### Run Development Server
+
+```bash
+cd apps/react/text-editors/libraries/tiptap/tiptap-demo-2
+pnpm dev
+```
+
+Or from the root:
+
+```bash
+pnpm --filter @apps/react-text-editors-tiptap-tiptap-demo-2 dev
+```
+
+### Build for Production
+
+```bash
+pnpm --filter @apps/react-text-editors-tiptap-tiptap-demo-2 build
+```
+
+## Structure
+
+- **Framework**: react
+- **Document**: text-editors
+- **Implementation**: libraries
+- **Library/Solution**: tiptap
+- **Demo**: tiptap-demo-2
+
+## Component Organization
+
+- **`components/header/`** - Contains Velt components like notifications, presence indicators, header buttons
+- **`components/sidebar/`** - Contains sidebar-related components
+- **`components/document/`** - Contains the main application logic and tiptap integration
+- **`hooks/`** - Custom React hooks for state management and side effects
+- **`lib/`** - Utility functions and helpers
+
+## Important Configuration
+
+### .npmrc File
+This demo includes a `.npmrc` file that prevents pnpm from hoisting Tailwind CSS v4 from other workspace packages. This is necessary because:
+- This demo uses Tailwind CSS v3.4.x with traditional PostCSS configuration
+- Other apps in the monorepo may use Tailwind CSS v4
+- Without the `.npmrc`, pnpm would hoist v4 and cause PostCSS errors
+
+**Do not delete the `.npmrc` file** - it ensures the correct Tailwind version is used.
+
+## Next Steps
+
+1. Add your tiptap implementation in `components/document/`
+2. Add Velt collaboration features in `components/header/`
+3. Update this README with specific usage instructions
+4. Add the demo to `master-sample-app` if it should be showcased
+5. Update deployment configs (Vercel, GitHub Actions) if needed
+
+## Learn More
+
+- [Monorepo Structure Guide](../../../../README_MONOREPO.md)
+- [Structure Documentation](../../../../docs/structure.md)
+- [Velt Documentation](https://docs.velt.dev)

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/app/api/velt/token/route.ts

@@ -0,0 +1,37 @@
+// [Velt] API endpoint to generate authentication tokens
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId, organizationId, email, isAdmin } = await req.json();
+    if (!userId || !organizationId) {
+      return NextResponse.json({ error: 'Missing userId or organizationId' }, { status: 400 });
+    }
+    if (!process.env.VELT_AUTH_TOKEN) {
+      return NextResponse.json({ error: 'Server configuration error: missing VELT_AUTH_TOKEN' }, { status: 500 });
+    }
+    const body = {
+      data: {
+        userId,
+        userProperties: {
+          organizationId,
+          ...(typeof isAdmin === 'boolean' ? { isAdmin } : {}),
+          ...(email ? { email } : {}),
+        },
+      },
+    };
+    const res = await fetch('https://api.velt.dev/v2/auth/token/get', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'x-velt-api-key': process.env.NEXT_PUBLIC_VELT_API_KEY!, 'x-velt-auth-token': process.env.VELT_AUTH_TOKEN! },
+      body: JSON.stringify(body),
+    });
+    const json = await res.json();
+    const token = json?.result?.data?.token;
+    if (!res.ok || !token) {
+      return NextResponse.json({ error: json?.error?.message || 'Failed to generate token' }, { status: 500 });
+    }
+    return NextResponse.json({ token });
+  } catch {
+    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
+  }
+}

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/app/document/DocumentContext.tsx

@@ -0,0 +1,74 @@
+'use client';
+import { useMemo, useEffect, useState, useRef } from 'react';
+
+export type CurrentDocument = {
+  documentId: string;
+  documentName: string;
+};
+
+export function useCurrentDocument(): CurrentDocument {
+  const [documentId, setDocumentId] = useState<string>('');
+  const isInitialized = useRef(false);
+
+  useEffect(() => {
+    if (isInitialized.current) return;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    let docId = urlParams.get('documentId');
+
+    if (docId) {
+      setDocumentId(docId);
+      localStorage.setItem('tiptap-document-id', docId);
+    } else {
+      const stored = localStorage.getItem('tiptap-document-id');
+      if (stored) {
+        docId = stored;
+      } else {
+        docId = `doc-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+        localStorage.setItem('tiptap-document-id', docId);
+      }
+
+      const newUrl = `${window.location.pathname}?documentId=${docId}`;
+      window.history.pushState({}, '', newUrl);
+
+      setDocumentId(docId);
+    }
+
+    isInitialized.current = true;
+  }, []);
+
+  useEffect(() => {
+    const handleUrlChange = () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const docId = urlParams.get('documentId');
+
+      if (docId && docId !== documentId) {
+        setDocumentId(docId);
+        localStorage.setItem('tiptap-document-id', docId);
+      }
+    };
+
+    window.addEventListener('popstate', handleUrlChange);
+
+    const interval = setInterval(() => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const docId = urlParams.get('documentId');
+      if (docId && docId !== documentId) {
+        handleUrlChange();
+      }
+    }, 1000);
+
+    return () => {
+      window.removeEventListener('popstate', handleUrlChange);
+      clearInterval(interval);
+    };
+  }, [documentId]);
+
+  return useMemo(
+    () => ({
+      documentId: documentId || 'loading',
+      documentName: "TipTap Document",
+    }),
+    [documentId]
+  );
+}

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/app/document/useCurrentDocument.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export { useCurrentDocument } from './DocumentContext';
+export type { CurrentDocument } from './DocumentContext';

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import '../styles/globals.css'
+import { AppProviders } from "@/app/userAuth/AppProviders";
+
+export const metadata: Metadata = {
+  title: 'tiptap-demo',
+  description: 'Library demo for tiptap',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <AppProviders>{children}</AppProviders>
+      </body>
+    </html>
+  )
+}

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/app/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+// [Velt] Provider + collaboration
+import { VeltProvider } from "@veltdev/react";
+import { useVeltAuthProvider } from "@/components/velt/VeltInitializeUser";
+import { VeltCollaboration } from "@/components/velt/VeltCollaboration";
+import DocumentCanvas from '@/components/document/document-canvas'
+
+export default function Home() {
+  // [Velt] Auth provider (reads from app/userAuth/useAppUser)
+  const { authProvider } = useVeltAuthProvider();
+
+  return (
+    // [Velt] Wrap app with VeltProvider
+    <VeltProvider
+      apiKey={process.env.NEXT_PUBLIC_VELT_API_KEY!}
+      authProvider={authProvider}
+    >
+      {/* [Velt] Collaboration core (includes document init) */}
+      <VeltCollaboration />
+
+      {/* --- App UI --- */}
+      <DocumentCanvas />
+    </VeltProvider>
+  );
+}

apps/react/text-editors/libraries/tiptap/tiptap-demo-2/app/userAuth/AppProviders.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+import { AppUserProvider } from "./AppUserContext";
+import { useCurrentDocument } from "@/app/document/DocumentContext";
+
+/**
+ * Client component that connects DocumentContext to AppUserProvider
+ * This ensures users are scoped per document-id
+ */
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  const { documentId } = useCurrentDocument();
+
+  return (
+    <AppUserProvider documentId={documentId}>
+      {children}
+    </AppUserProvider>
+  );
+}