snapshot of https://github.com/ueberdosis/hocuspocus.git @ cf3cfa355b4d3bb61c6b6c80071f71783e32470e (2026-09-15)
Some checks failed
build / lint (22) (push) Failing after 17s
build / test (22) (push) Failing after 8s
build / lint (23) (push) Failing after 2s
build / build (22) (push) Has been skipped
build / build (23) (push) Has been skipped
build / test (23) (push) Failing after 4s
docsearch / docsearch (push) Failing after 1s
Some checks failed
build / lint (22) (push) Failing after 17s
build / test (22) (push) Failing after 8s
build / lint (23) (push) Failing after 2s
build / build (22) (push) Has been skipped
build / build (23) (push) Has been skipped
build / test (23) (push) Failing after 4s
docsearch / docsearch (push) Failing after 1s
This commit is contained in:
upstream-mirror
41
playground/frontend/.gitignore
vendored
Normal file
41
playground/frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
302
playground/frontend/CHANGELOG.md
Normal file
302
playground/frontend/CHANGELOG.md
Normal file
@@ -0,0 +1,302 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [3.4.6-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v3.4.6-rc.0...v3.4.6-rc.1) (2026-02-03)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.4.6-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.4.5-rc.0...v3.4.6-rc.0) (2026-02-03)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.4.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.4.4...v3.4.5-rc.0) (2026-02-03)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.4.4](https://github.com/ueberdosis/hocuspocus/compare/v3.4.3...v3.4.4) (2026-01-25)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.4.3](https://github.com/ueberdosis/hocuspocus/compare/v3.4.2...v3.4.3) (2025-12-15)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.4.2](https://github.com/ueberdosis/hocuspocus/compare/v3.4.1...v3.4.2) (2025-12-15)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.4.1](https://github.com/ueberdosis/hocuspocus/compare/v3.4.0...v3.4.1) (2025-12-09)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [3.4.0](https://github.com/ueberdosis/hocuspocus/compare/v3.3.2...v3.4.0) (2025-10-24)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.3.2](https://github.com/ueberdosis/hocuspocus/compare/v3.3.1...v3.3.2) (2025-10-23)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.3.1](https://github.com/ueberdosis/hocuspocus/compare/v3.3.0...v3.3.1) (2025-10-22)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [3.3.0](https://github.com/ueberdosis/hocuspocus/compare/v3.2.6...v3.3.0) (2025-10-22)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.2.6](https://github.com/ueberdosis/hocuspocus/compare/v3.2.5...v3.2.6) (2025-10-17)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.2.5](https://github.com/ueberdosis/hocuspocus/compare/v3.2.4...v3.2.5) (2025-10-07)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.2.4](https://github.com/ueberdosis/hocuspocus/compare/v3.2.3...v3.2.4) (2025-09-30)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.2.3](https://github.com/ueberdosis/hocuspocus/compare/v3.2.2...v3.2.3) (2025-08-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fixes playground plug and play confg ([f9dff84](https://github.com/ueberdosis/hocuspocus/commit/f9dff843e5132fd858ce410e1774089e6b4c9692))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.2.2](https://github.com/ueberdosis/hocuspocus/compare/v3.2.1...v3.2.2) (2025-07-28)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.2.1](https://github.com/ueberdosis/hocuspocus/compare/v3.2.0...v3.2.1) (2025-07-20)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [3.2.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.12...v3.2.0) (2025-07-12)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.12](https://github.com/ueberdosis/hocuspocus/compare/v3.1.11...v3.1.12) (2025-07-09)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.10](https://github.com/ueberdosis/hocuspocus/compare/v3.1.9...v3.1.10) (2025-07-08)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.8](https://github.com/ueberdosis/hocuspocus/compare/v3.1.7...v3.1.8) (2025-07-01)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.7](https://github.com/ueberdosis/hocuspocus/compare/v3.1.6...v3.1.7) (2025-06-22)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.6](https://github.com/ueberdosis/hocuspocus/compare/v3.1.5...v3.1.6) (2025-06-20)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.5](https://github.com/ueberdosis/hocuspocus/compare/v3.1.4...v3.1.5) (2025-06-19)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.4](https://github.com/ueberdosis/hocuspocus/compare/v3.1.3...v3.1.4) (2025-06-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* playground: Cannot update a component (`CollaborationStatus`) while rendering a different component (`CollaborativeEditor`) ([9c6b87d](https://github.com/ueberdosis/hocuspocus/commit/9c6b87d882d2a1c00dca55cac1d71de2221a3a6d))
|
||||
* playground: destroy instead of detach ([c8b60f8](https://github.com/ueberdosis/hocuspocus/commit/c8b60f84ea7b7df0d04a9aad71e92e8bba2c747c))
|
||||
* playground: port 1234 ([62e45d4](https://github.com/ueberdosis/hocuspocus/commit/62e45d40fd7e044daa6b0eee0b96b0786d2c5a6b))
|
||||
* playground: update styling of collaboration caret ([4a2506b](https://github.com/ueberdosis/hocuspocus/commit/4a2506ba0fe399280b7cd6cba31602c0660e7a36))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* playground: adds two editors for nicer testing ([b2332f2](https://github.com/ueberdosis/hocuspocus/commit/b2332f21c5369a6e980e19c1ef7842e8cf32b878))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.3](https://github.com/ueberdosis/hocuspocus/compare/v3.1.2...v3.1.3) (2025-06-06)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.2](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1...v3.1.2) (2025-06-05)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.1](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1-rc.1...v3.1.1) (2025-05-10)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.1-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1-rc.0...v3.1.1-rc.1) (2025-05-08)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.1.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.0...v3.1.1-rc.0) (2025-04-30)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [3.1.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.0-rc.0...v3.1.0) (2025-04-29)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [3.1.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.8-rc.0...v3.1.0-rc.0) (2025-04-28)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.0.8-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.7-rc.0...v3.0.8-rc.0) (2025-04-09)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.0.7-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.6-rc.0...v3.0.7-rc.0) (2025-04-09)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.0.6-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.5-rc.0...v3.0.6-rc.0) (2025-03-28)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [3.0.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.4-rc.0...v3.0.5-rc.0) (2025-03-28)
|
||||
|
||||
**Note:** Version bump only for package @hocuspocus/frontend-demo
|
||||
36
playground/frontend/README.md
Normal file
36
playground/frontend/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
8
playground/frontend/app/SocketContext1.ts
Normal file
8
playground/frontend/app/SocketContext1.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
|
||||
import { createContext } from "react";
|
||||
|
||||
export const SocketContext1 = createContext<HocuspocusProviderWebsocket | null>(
|
||||
null,
|
||||
);
|
||||
8
playground/frontend/app/SocketContext2.ts
Normal file
8
playground/frontend/app/SocketContext2.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import type { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
|
||||
import { createContext } from "react";
|
||||
|
||||
export const SocketContext2 = createContext<HocuspocusProviderWebsocket | null>(
|
||||
null,
|
||||
);
|
||||
174
playground/frontend/app/articles/[slug]/ArticleEditor.tsx
Normal file
174
playground/frontend/app/articles/[slug]/ArticleEditor.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
|
||||
import { SocketContext1 } from "@/app/SocketContext1";
|
||||
import { SocketContext2 } from "@/app/SocketContext2";
|
||||
import CollaborationStatus from "@/app/articles/[slug]/CollaborationStatus";
|
||||
import CollaborativeEditor from "@/app/articles/[slug]/CollaborativeEditor";
|
||||
import {
|
||||
HocuspocusProvider,
|
||||
HocuspocusProviderWebsocket,
|
||||
} from "@hocuspocus/provider";
|
||||
// import { TiptapCollabProvider } from "@tiptap-cloud/provider";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
|
||||
export default function ArticleEditor({ slug }: { slug: string }) {
|
||||
const socket1 = useContext(SocketContext1);
|
||||
const socket2 = useContext(SocketContext2);
|
||||
|
||||
const [provider1, setProvider1] = useState<HocuspocusProvider>();
|
||||
const [provider2, setProvider2] = useState<HocuspocusProvider>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!socket1 || !socket2) return;
|
||||
|
||||
// Create separate providers for each editor
|
||||
const _p1 = new HocuspocusProvider({
|
||||
websocketProvider: socket1,
|
||||
name: slug,
|
||||
onOpen: (data) => console.log("Editor 1 onOpen!", data),
|
||||
onClose: (data) => console.log("Editor 1 onClose!", data),
|
||||
onAuthenticated: (data) => console.log("Editor 1 onAuthenticated!", data),
|
||||
onAuthenticationFailed: (data) =>
|
||||
console.log("Editor 1 onAuthenticationFailed", data),
|
||||
onUnsyncedChanges: (data) =>
|
||||
console.log("Editor 1 onUnsyncedChanges", data),
|
||||
onStatus(data) {
|
||||
console.log("editor 1 onStatus", data);
|
||||
},
|
||||
});
|
||||
|
||||
const _p2 = new HocuspocusProvider({
|
||||
websocketProvider: socket2,
|
||||
name: slug,
|
||||
onOpen: (data) => console.log("Editor 2 onOpen!", data),
|
||||
onClose: (data) => console.log("Editor 2 onClose!", data),
|
||||
onAuthenticated: (data) => console.log("Editor 2 onAuthenticated!", data),
|
||||
onAuthenticationFailed: (data) =>
|
||||
console.log("Editor 2 onAuthenticationFailed", data),
|
||||
onUnsyncedChanges: (data) =>
|
||||
console.log("Editor 2 onUnsyncedChanges", data),
|
||||
onStatus(data) {
|
||||
console.log("editor 2 onStatus", data);
|
||||
},
|
||||
});
|
||||
|
||||
setProvider1(_p1);
|
||||
setProvider2(_p2);
|
||||
|
||||
return () => {
|
||||
_p1.destroy();
|
||||
_p2.destroy();
|
||||
};
|
||||
}, [socket1, socket2, slug]);
|
||||
|
||||
if (!provider1 || !provider2) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
// you need to attach here, to make sure the connection gets properly established due to React strict-mode re-run of hooks
|
||||
provider1.attach();
|
||||
provider2.attach();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Header */}
|
||||
<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
Article #{slug}
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400 mt-1">
|
||||
Real-time collaborative editing - Two editors demonstrating sync
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 p-8">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
{/* Editors side by side */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Editor 1 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Editor 1
|
||||
</h2>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Independent WebSocket connection
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Status Panel 1 */}
|
||||
<CollaborationStatus provider={provider1} />
|
||||
|
||||
{/* Editor 1 */}
|
||||
<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
|
||||
<CollaborativeEditor slug={slug} provider={provider1} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor 2 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Editor 2
|
||||
</h2>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Independent WebSocket connection
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Status Panel 2 */}
|
||||
<CollaborationStatus provider={provider2} />
|
||||
|
||||
{/* Editor 2 */}
|
||||
<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
|
||||
<CollaborativeEditor slug={slug} provider={provider2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info panel */}
|
||||
<div className="bg-blue-50/50 dark:bg-blue-900/20 backdrop-blur-sm rounded-xl border border-blue-200 dark:border-blue-700 p-6">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/40 rounded-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-4 h-4 text-blue-600 dark:text-blue-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-blue-900 dark:text-blue-100">
|
||||
Real-time Collaboration Demo
|
||||
</h3>
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
||||
Both editors are connected to the same document but use
|
||||
separate WebSocket connections. Changes made in one editor
|
||||
will appear in the other in real-time. Try typing in either
|
||||
editor or use the connection controls to test synchronization
|
||||
behavior.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
184
playground/frontend/app/articles/[slug]/CollaborationStatus.tsx
Normal file
184
playground/frontend/app/articles/[slug]/CollaborationStatus.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import type {
|
||||
HocuspocusProvider,
|
||||
onStatusParameters,
|
||||
onUnsyncedChangesParameters,
|
||||
} from "@hocuspocus/provider";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const CollaborationStatus = (props: {
|
||||
provider: HocuspocusProvider;
|
||||
}) => {
|
||||
const { provider } = props;
|
||||
|
||||
const [unsyncedChanges, setUnsyncedChanges] = useState(0);
|
||||
const [socketStatus, setSocketStatus] = useState<string | null>(null);
|
||||
const [isAttached, _setAttached] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setSocketStatus(provider.configuration.websocketProvider.status);
|
||||
_setAttached(provider.isAttached);
|
||||
|
||||
const handleUnsyncedChanges = (changes: onUnsyncedChangesParameters) => {
|
||||
setUnsyncedChanges(changes.number);
|
||||
};
|
||||
|
||||
const handleSocketStatus = (status: onStatusParameters) => {
|
||||
setSocketStatus(status.status);
|
||||
};
|
||||
|
||||
provider.on("unsyncedChanges", handleUnsyncedChanges);
|
||||
provider.configuration.websocketProvider.on("status", handleSocketStatus);
|
||||
|
||||
return () => {
|
||||
provider.off("unsyncedChanges", handleUnsyncedChanges);
|
||||
provider.configuration.websocketProvider.off(
|
||||
"status",
|
||||
handleSocketStatus,
|
||||
);
|
||||
};
|
||||
}, [provider]);
|
||||
|
||||
const updateAttached = (attach: boolean) => {
|
||||
if (attach) {
|
||||
provider.attach();
|
||||
} else {
|
||||
provider.detach();
|
||||
}
|
||||
|
||||
_setAttached(provider.isAttached);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "connected":
|
||||
return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
|
||||
case "connecting":
|
||||
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400";
|
||||
case "disconnected":
|
||||
return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
|
||||
default:
|
||||
return "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400";
|
||||
}
|
||||
};
|
||||
|
||||
const UNSYNCED_THRESHOLD = 10;
|
||||
|
||||
return (
|
||||
<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
||||
{/* Alert banner when unsynced changes grow — indicates connection issues */}
|
||||
{unsyncedChanges >= UNSYNCED_THRESHOLD && (
|
||||
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center space-x-3">
|
||||
<div className="w-5 h-5 shrink-0 text-red-600 dark:text-red-400">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-red-800 dark:text-red-200">
|
||||
Connection issue detected
|
||||
</p>
|
||||
<p className="text-xs text-red-600 dark:text-red-400">
|
||||
{unsyncedChanges} changes are waiting to sync. Your edits are
|
||||
saved locally but not yet on the server.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status indicators */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Connection Status
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${socketStatus === "connected" ? "bg-green-500" : socketStatus === "connecting" ? "bg-yellow-500" : "bg-red-500"}`}
|
||||
></div>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(socketStatus)}`}
|
||||
>
|
||||
{socketStatus || "Unknown"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${provider.isAttached ? "bg-green-500" : "bg-red-500"}`}
|
||||
></div>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${provider.isAttached ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400" : "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"}`}
|
||||
>
|
||||
{isAttached ? "Attached" : "Detached"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-500 animate-pulse" : "bg-orange-500 animate-pulse"}`}
|
||||
></div>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
|
||||
>
|
||||
{unsyncedChanges} unsynced
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control buttons */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
WebSocket Controls
|
||||
</h4>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() =>
|
||||
provider.configuration.websocketProvider.disconnect()
|
||||
}
|
||||
disabled={socketStatus === "disconnected"}
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => provider.configuration.websocketProvider.connect()}
|
||||
disabled={socketStatus === "connected"}
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Provider Controls
|
||||
</h4>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => updateAttached(false)}
|
||||
disabled={!isAttached}
|
||||
>
|
||||
Detach
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => updateAttached(true)}
|
||||
disabled={isAttached}
|
||||
>
|
||||
Attach
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollaborationStatus;
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import type { HocuspocusProvider } from "@hocuspocus/provider";
|
||||
import { Collaboration } from "@tiptap/extension-collaboration";
|
||||
import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import { StarterKit } from "@tiptap/starter-kit";
|
||||
import * as Y from "yjs";
|
||||
|
||||
const initialContent = [
|
||||
1, 3, 223, 175, 255, 141, 2, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3,
|
||||
9, 112, 97, 114, 97, 103, 114, 97, 112, 104, 7, 0, 223, 175, 255, 141, 2, 0,
|
||||
6, 4, 0, 223, 175, 255, 141, 2, 1, 17, 72, 101, 108, 108, 111, 32, 87, 111,
|
||||
114, 108, 100, 33, 32, 240, 159, 140, 142, 0,
|
||||
];
|
||||
|
||||
const CollaborativeEditor = (props: {
|
||||
slug: string;
|
||||
provider: HocuspocusProvider;
|
||||
}) => {
|
||||
/**
|
||||
* if you want to load initial content to the editor, the safest way to do so is by applying an initial Yjs update.
|
||||
* Yjs updates can safely be applied multiple times, while using `setContent` or similar Tiptap commands may result in
|
||||
* duplicate content in the Tiptap editor.
|
||||
*
|
||||
* The easiest way to generate the Yjs update (`initialContent` above) is to do something like
|
||||
*
|
||||
* ```
|
||||
* console.log(Y.encodeStateAsUpdate(provider.props.document).toString())
|
||||
* ```
|
||||
*
|
||||
* after you have filled the editor with the desired content.
|
||||
*/
|
||||
Y.applyUpdate(props.provider.document, Uint8Array.from(initialContent));
|
||||
|
||||
const editor = useEditor(
|
||||
{
|
||||
extensions: [
|
||||
// make sure to turn off the undo-redo extension when using collaboration
|
||||
StarterKit.configure({
|
||||
undoRedo: false,
|
||||
}),
|
||||
Collaboration.configure({
|
||||
document: props.provider.document,
|
||||
}),
|
||||
CollaborationCaret.configure({
|
||||
provider: props.provider,
|
||||
}),
|
||||
],
|
||||
// immediatelyRender needs to be `false` when using SSR
|
||||
immediatelyRender: false,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
"prose prose-lg max-w-none focus:outline-none min-h-[500px] p-8 bg-white/50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm",
|
||||
},
|
||||
},
|
||||
},
|
||||
[props.provider.document],
|
||||
);
|
||||
|
||||
return <EditorContent editor={editor} />;
|
||||
};
|
||||
|
||||
export default CollaborativeEditor;
|
||||
10
playground/frontend/app/articles/[slug]/page.tsx
Normal file
10
playground/frontend/app/articles/[slug]/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import ArticleEditor from "@/app/articles/[slug]/ArticleEditor";
|
||||
|
||||
export default async function Home(props: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
const slug = params.slug;
|
||||
|
||||
return <ArticleEditor slug={slug} />;
|
||||
}
|
||||
53
playground/frontend/app/articles/layout.tsx
Normal file
53
playground/frontend/app/articles/layout.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
|
||||
// import {
|
||||
// TiptapCollabProvider,
|
||||
// TiptapCollabProviderWebsocket,
|
||||
// } from "@tiptap-cloud/provider";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SocketContext1 } from "@/app/SocketContext1";
|
||||
import { SocketContext2 } from "@/app/SocketContext2";
|
||||
|
||||
export default function Layout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const [socket1, setSocket1] = useState<HocuspocusProviderWebsocket | null>(
|
||||
null,
|
||||
);
|
||||
const [socket2, setSocket2] = useState<HocuspocusProviderWebsocket | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const newlyCreatedSocket1 = new HocuspocusProviderWebsocket({
|
||||
url: "ws://localhost:8000",
|
||||
});
|
||||
const newlyCreatedSocket2 = new HocuspocusProviderWebsocket({
|
||||
url: "ws://localhost:8000",
|
||||
});
|
||||
// const newlyCreatedSocket = new TiptapCollabProviderWebsocket({
|
||||
// appId: "",
|
||||
// });
|
||||
|
||||
setSocket1(newlyCreatedSocket1);
|
||||
setSocket2(newlyCreatedSocket2);
|
||||
|
||||
return () => {
|
||||
newlyCreatedSocket1?.destroy();
|
||||
newlyCreatedSocket2?.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (socket1 && socket2) {
|
||||
return (
|
||||
<>
|
||||
<SocketContext1 value={socket1}>
|
||||
<SocketContext2 value={socket2}>{children}</SocketContext2>
|
||||
</SocketContext1>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
BIN
playground/frontend/app/favicon.ico
Normal file
BIN
playground/frontend/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
124
playground/frontend/app/globals.css
Normal file
124
playground/frontend/app/globals.css
Normal file
@@ -0,0 +1,124 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Modern editor styles */
|
||||
.tiptap {
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Placeholder styling */
|
||||
p.is-editor-empty:first-child::before {
|
||||
color: rgb(148 163 184);
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Improved focus styles */
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgb(59 130 246 / 0.1);
|
||||
}
|
||||
|
||||
/* Better typography */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
color: rgb(15 23 42);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: rgb(248 250 252);
|
||||
}
|
||||
p.is-editor-empty:first-child::before {
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modern collaboration cursor */
|
||||
.collaboration-carets__caret {
|
||||
border-left: 2px solid currentColor;
|
||||
border-right: 2px solid currentColor;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
word-break: normal;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
/* Smooth blinking animation */
|
||||
@keyframes blink {
|
||||
0%,
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modern username label */
|
||||
.collaboration-carets__label {
|
||||
border-radius: 6px 6px 6px 2px;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
left: -1px;
|
||||
line-height: normal;
|
||||
padding: 0.25rem 0.5rem;
|
||||
position: absolute;
|
||||
top: -1.8em;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
70
playground/frontend/app/layout.tsx
Normal file
70
playground/frontend/app/layout.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import Link from "next/link";
|
||||
import "./globals.css";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
|
||||
<div className="flex min-h-screen">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-r border-slate-200 dark:border-slate-700 shadow-sm">
|
||||
<div className="p-6">
|
||||
<div className="mb-8">
|
||||
<Link href="/" className="flex items-center space-x-2 text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">H</span>
|
||||
</div>
|
||||
<span className="font-semibold">Hocuspocus</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Classic Provider</h2>
|
||||
<ul className="space-y-2">
|
||||
{[1, 2, 3, 4].map((num) => (
|
||||
<li key={num}>
|
||||
<Link
|
||||
href={`/articles/${num}`}
|
||||
className="flex items-center px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-200"
|
||||
>
|
||||
<div className="w-2 h-2 bg-slate-400 dark:bg-slate-500 rounded-full mr-3"></div>
|
||||
Article {num}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">React Provider</h2>
|
||||
<ul className="space-y-2">
|
||||
{[1, 2, 3, 4].map((num) => (
|
||||
<li key={num}>
|
||||
<Link
|
||||
href={`/react-provider/${num}`}
|
||||
className="flex items-center px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-purple-600 dark:hover:text-purple-400 transition-all duration-200"
|
||||
>
|
||||
<div className="w-2 h-2 bg-purple-400 dark:bg-purple-500 rounded-full mr-3"></div>
|
||||
Article {num}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
76
playground/frontend/app/page.tsx
Normal file
76
playground/frontend/app/page.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Header */}
|
||||
<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="px-8 py-6">
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
Hocuspocus v3 Playground
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400 mt-2">
|
||||
Real-time collaborative editor demo
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Welcome card */}
|
||||
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-2xl border border-slate-200 dark:border-slate-700 shadow-xl p-8 mb-8">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rounded-xl flex items-center justify-center mr-4">
|
||||
<span className="text-white text-xl">🚀</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Welcome!</h2>
|
||||
</div>
|
||||
<p className="text-slate-700 dark:text-slate-300 text-lg leading-relaxed mb-6">
|
||||
This demo showcases how to use a shared WebSocket connection to load multiple documents with real-time collaboration.
|
||||
</p>
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<p className="text-blue-800 dark:text-blue-200 font-medium">
|
||||
💡 Tip: Open a second tab or window and experience collaborative editing in real-time!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features grid */}
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-4">
|
||||
<span className="text-white text-lg">🔌</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">Smart Connection</h3>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
WebSocket connection opens when you enter article routes and closes when you leave.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center mb-4">
|
||||
<span className="text-white text-lg">📄</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-2">On-Demand Loading</h3>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
Documents are fetched as needed via the shared connection for optimal performance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Debug info */}
|
||||
<div className="bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-slate-500 to-slate-600 rounded-lg flex items-center justify-center mr-3">
|
||||
<span className="text-white text-sm">🔍</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-700 dark:text-slate-300">Developer Console</h3>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
Open your browser's developer console to see detailed connection and synchronization information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
159
playground/frontend/app/react-provider/[slug]/ArticleEditor.tsx
Normal file
159
playground/frontend/app/react-provider/[slug]/ArticleEditor.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
HocuspocusProviderWebsocketComponent,
|
||||
HocuspocusRoom,
|
||||
} from "@hocuspocus/provider-react";
|
||||
import React, { useCallback } from "react";
|
||||
import CollaborationStatus from "./CollaborationStatus";
|
||||
import CollaborativeEditor from "./CollaborativeEditor";
|
||||
import ConnectedUsers from "./ConnectedUsers";
|
||||
|
||||
export default function ArticleEditor({ slug }: { slug: string }) {
|
||||
const handleAuthFailed = useCallback(
|
||||
(data: { reason: string }) => {
|
||||
console.error(`[Editor 1] Auth failed for "${slug}":`, data.reason);
|
||||
},
|
||||
[slug],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Header */}
|
||||
<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
Article #{slug}
|
||||
<span className="ml-3 text-sm font-medium text-purple-600 dark:text-purple-400 bg-purple-100 dark:bg-purple-900/30 px-2 py-1 rounded-full">
|
||||
provider-react
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400 mt-1">
|
||||
Using @hocuspocus/provider-react hooks and components
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 p-8">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
{/* Two independent WebSocket connections, each with its own room */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Editor 1 — event handlers via HocuspocusRoom props */}
|
||||
<HocuspocusProviderWebsocketComponent url="ws://localhost:8000">
|
||||
<HocuspocusRoom
|
||||
name={slug}
|
||||
onAuthenticationFailed={handleAuthFailed}
|
||||
onClose={(data) =>
|
||||
console.log("[Editor 1] Connection closed:", data.event)
|
||||
}
|
||||
onSynced={(data) =>
|
||||
console.log("[Editor 1] Synced:", data.state)
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Editor 1
|
||||
</h2>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Event handlers via props
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<CollaborationStatus />
|
||||
|
||||
<ConnectedUsers />
|
||||
|
||||
<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
|
||||
<CollaborativeEditor />
|
||||
</div>
|
||||
</div>
|
||||
</HocuspocusRoom>
|
||||
</HocuspocusProviderWebsocketComponent>
|
||||
|
||||
{/* Editor 2 — event handlers via useHocuspocusEvent hook (see CollaborationStatus) */}
|
||||
<HocuspocusProviderWebsocketComponent url="ws://localhost:8000">
|
||||
<HocuspocusRoom name={slug}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Editor 2
|
||||
</h2>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Event handlers via hook
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<CollaborationStatus />
|
||||
|
||||
<ConnectedUsers />
|
||||
|
||||
<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
|
||||
<CollaborativeEditor />
|
||||
</div>
|
||||
</div>
|
||||
</HocuspocusRoom>
|
||||
</HocuspocusProviderWebsocketComponent>
|
||||
</div>
|
||||
|
||||
{/* Info panel */}
|
||||
<div className="bg-purple-50/50 dark:bg-purple-900/20 backdrop-blur-sm rounded-xl border border-purple-200 dark:border-purple-700 p-6">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/40 rounded-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-4 h-4 text-purple-600 dark:text-purple-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-purple-900 dark:text-purple-100">
|
||||
@hocuspocus/provider-react Demo
|
||||
</h3>
|
||||
<p className="text-sm text-purple-700 dark:text-purple-300 mt-1">
|
||||
This demo uses the new React-specific package. Each editor is
|
||||
wrapped in its own{" "}
|
||||
<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
|
||||
HocuspocusProviderWebsocketComponent
|
||||
</code>{" "}
|
||||
(independent WebSocket) and{" "}
|
||||
<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
|
||||
HocuspocusRoom
|
||||
</code>
|
||||
. Status is read via{" "}
|
||||
<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
|
||||
useHocuspocusConnectionStatus()
|
||||
</code>
|
||||
,{" "}
|
||||
<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
|
||||
useHocuspocusSyncStatus()
|
||||
</code>
|
||||
, and{" "}
|
||||
<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
|
||||
useHocuspocusAwareness()
|
||||
</code>{" "}
|
||||
hooks — no manual event listeners needed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useHocuspocusConnectionStatus,
|
||||
useHocuspocusEvent,
|
||||
useHocuspocusProvider,
|
||||
useHocuspocusSyncStatus,
|
||||
} from "@hocuspocus/provider-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const CollaborationStatus = () => {
|
||||
const provider = useHocuspocusProvider();
|
||||
const connectionStatus = useHocuspocusConnectionStatus();
|
||||
const syncStatus = useHocuspocusSyncStatus();
|
||||
const [unsyncedChanges, setUnsyncedChanges] = useState(0);
|
||||
|
||||
// Using the useHocuspocusEvent hook instead of manual provider.on/off
|
||||
useHocuspocusEvent("unsyncedChanges", (data) => {
|
||||
setUnsyncedChanges(data.number);
|
||||
});
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "connected":
|
||||
return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
|
||||
case "connecting":
|
||||
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400";
|
||||
case "disconnected":
|
||||
return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
|
||||
default:
|
||||
return "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400";
|
||||
}
|
||||
};
|
||||
|
||||
const UNSYNCED_THRESHOLD = 10;
|
||||
|
||||
return (
|
||||
<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
|
||||
{/* Alert banner when unsynced changes grow — indicates connection issues */}
|
||||
{unsyncedChanges >= UNSYNCED_THRESHOLD && (
|
||||
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center space-x-3">
|
||||
<div className="w-5 h-5 shrink-0 text-red-600 dark:text-red-400">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-red-800 dark:text-red-200">
|
||||
Connection issue detected
|
||||
</p>
|
||||
<p className="text-xs text-red-600 dark:text-red-400">
|
||||
{unsyncedChanges} changes are waiting to sync. Your edits are
|
||||
saved locally but not yet on the server.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status indicators */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
Connection Status
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${connectionStatus === "connected" ? "bg-green-500" : connectionStatus === "connecting" ? "bg-yellow-500" : "bg-red-500"}`}
|
||||
/>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(connectionStatus)}`}
|
||||
>
|
||||
{connectionStatus}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${syncStatus === "synced" ? "bg-green-500" : "bg-orange-500 animate-pulse"}`}
|
||||
/>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${syncStatus === "synced" ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
|
||||
>
|
||||
{syncStatus}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-500 animate-pulse" : "bg-orange-500 animate-pulse"}`}
|
||||
/>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
|
||||
>
|
||||
{unsyncedChanges} unsynced
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control buttons */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
WebSocket Controls
|
||||
</h4>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() =>
|
||||
provider.configuration.websocketProvider.disconnect()
|
||||
}
|
||||
disabled={connectionStatus === "disconnected"}
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() =>
|
||||
provider.configuration.websocketProvider.connect()
|
||||
}
|
||||
disabled={connectionStatus === "connected"}
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Provider Controls
|
||||
</h4>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => provider.detach()}
|
||||
>
|
||||
Detach
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => provider.attach()}
|
||||
>
|
||||
Attach
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollaborationStatus;
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { useHocuspocusProvider } from "@hocuspocus/provider-react";
|
||||
import { Collaboration } from "@tiptap/extension-collaboration";
|
||||
import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import { StarterKit } from "@tiptap/starter-kit";
|
||||
import { useEffect, useRef } from "react";
|
||||
import * as Y from "yjs";
|
||||
|
||||
const initialContent = [
|
||||
1, 3, 223, 175, 255, 141, 2, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3,
|
||||
9, 112, 97, 114, 97, 103, 114, 97, 112, 104, 7, 0, 223, 175, 255, 141, 2, 0,
|
||||
6, 4, 0, 223, 175, 255, 141, 2, 1, 17, 72, 101, 108, 108, 111, 32, 87, 111,
|
||||
114, 108, 100, 33, 32, 240, 159, 140, 142, 0,
|
||||
];
|
||||
|
||||
const CollaborativeEditor = () => {
|
||||
const provider = useHocuspocusProvider();
|
||||
const initializedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!initializedRef.current) {
|
||||
Y.applyUpdate(provider.document, Uint8Array.from(initialContent));
|
||||
initializedRef.current = true;
|
||||
}
|
||||
}, [provider.document]);
|
||||
|
||||
const editor = useEditor(
|
||||
{
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
undoRedo: false,
|
||||
}),
|
||||
Collaboration.configure({
|
||||
document: provider.document,
|
||||
}),
|
||||
CollaborationCaret.configure({
|
||||
provider,
|
||||
}),
|
||||
],
|
||||
immediatelyRender: false,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
"prose prose-lg max-w-none focus:outline-none min-h-[500px] p-8 bg-white/50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm",
|
||||
},
|
||||
},
|
||||
},
|
||||
[provider.document],
|
||||
);
|
||||
|
||||
return <EditorContent editor={editor} />;
|
||||
};
|
||||
|
||||
export default CollaborativeEditor;
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { useHocuspocusAwareness } from "@hocuspocus/provider-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const colors = [
|
||||
"bg-blue-500",
|
||||
"bg-green-500",
|
||||
"bg-purple-500",
|
||||
"bg-pink-500",
|
||||
"bg-amber-500",
|
||||
"bg-cyan-500",
|
||||
"bg-rose-500",
|
||||
"bg-indigo-500",
|
||||
];
|
||||
|
||||
const ConnectedUsers = () => {
|
||||
const users = useHocuspocusAwareness();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 px-4 py-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
|
||||
Users
|
||||
</span>
|
||||
{mounted && (
|
||||
<>
|
||||
<div className="flex -space-x-2">
|
||||
{users.map((user, i) => (
|
||||
<div
|
||||
key={user.clientId}
|
||||
className={`w-7 h-7 rounded-full ${colors[i % colors.length]} border-2 border-white dark:border-slate-900 flex items-center justify-center`}
|
||||
title={`Client ${user.clientId}`}
|
||||
>
|
||||
<span className="text-white text-xs font-bold">
|
||||
{String(user.clientId).slice(-2)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{users.length} connected
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConnectedUsers;
|
||||
10
playground/frontend/app/react-provider/[slug]/page.tsx
Normal file
10
playground/frontend/app/react-provider/[slug]/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import ArticleEditor from "./ArticleEditor";
|
||||
|
||||
export default async function Page(props: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const params = await props.params;
|
||||
const slug = params.slug;
|
||||
|
||||
return <ArticleEditor slug={slug} />;
|
||||
}
|
||||
7
playground/frontend/app/react-provider/layout.tsx
Normal file
7
playground/frontend/app/react-provider/layout.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function Layout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return children;
|
||||
}
|
||||
20
playground/frontend/next.config.ts
Normal file
20
playground/frontend/next.config.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
serverExternalPackages: ["yjs"],
|
||||
turbopack: {
|
||||
root: "../../",
|
||||
resolveAlias: {
|
||||
"@hocuspocus/provider": "../../packages/provider/src/index.ts",
|
||||
"@hocuspocus/common": "../../packages/common/src/index.ts",
|
||||
"@hocuspocus/transformer": "../../packages/transformer/src/index.ts",
|
||||
"@hocuspocus/provider-react":
|
||||
"../../packages/provider-react/src/index.ts",
|
||||
},
|
||||
},
|
||||
webpack: (config) => {
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
33
playground/frontend/package.json
Normal file
33
playground/frontend/package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@hocuspocus/frontend-demo",
|
||||
"version": "3.4.6-rc.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hocuspocus/provider": "workspace:*",
|
||||
"@hocuspocus/provider-react": "workspace:*",
|
||||
"@tiptap/extension-collaboration": "^3.19.0",
|
||||
"@tiptap/extension-collaboration-caret": "^3.19.0",
|
||||
"@tiptap/extension-floating-menu": "^3.19.0",
|
||||
"@tiptap/react": "^3.19.0",
|
||||
"@tiptap/starter-kit": "^3.19.0",
|
||||
"jwt-encode": "^1.0.1",
|
||||
"next": "16.3.3",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"yjs": "^13.6.29"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"@types/node": "^22.19.11",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "^5.8.2"
|
||||
}
|
||||
}
|
||||
5
playground/frontend/postcss.config.mjs
Normal file
5
playground/frontend/postcss.config.mjs
Normal file
@@ -0,0 +1,5 @@
|
||||
const config = {
|
||||
plugins: ["@tailwindcss/postcss"],
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
playground/frontend/public/file.svg
Normal file
1
playground/frontend/public/file.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
playground/frontend/public/globe.svg
Normal file
1
playground/frontend/public/globe.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
playground/frontend/public/next.svg
Normal file
1
playground/frontend/public/next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
playground/frontend/public/vercel.svg
Normal file
1
playground/frontend/public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
playground/frontend/public/window.svg
Normal file
1
playground/frontend/public/window.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
41
playground/frontend/tsconfig.json
Normal file
41
playground/frontend/tsconfig.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user