4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1e15,'use client'; import * as React from 'react'; import type { UnifiedProvider } from '@platejs/yjs'; import { YjsPlugin } from '@platejs/yjs/react'; import { RefreshCw } from 'lucide-react'; import { nanoid } from 'nanoid'; import { Plate, useEditorRef, usePlateEditor, usePluginOption, } from 'platejs/react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { EditorKit } from '@/registry/components/editor/editor-kit'; import { useMounted } from '@/registry/hooks/use-mounted'; import { Editor, EditorContainer } from '@/registry/ui/editor'; import { RemoteCursorOverlay } from '@/registry/ui/remote-cursor-overlay'; const INITIAL_VALUE = [ { children: [{ text: 'This is the initial content loaded into the Y.Doc.' }], type: 'p', }, ]; export default function CollaborativeEditingDemo(): React.ReactNode { const mounted = useMounted(); const { generateNewRoom, roomName, handleRoomChange } = useCollaborationRoom(); const { cursorColor, username } = useCollaborationUser(); const editor = usePlateEditor( { plugins: [ ...EditorKit, YjsPlugin.configure({ options: { cursors: { data: { color: cursorColor, name: username }, }, providers: [ { options: { name: roomName, url: 'ws://localhost:8888', }, type: 'hocuspocus', }, { options: { maxConns: 9, // Limit to 10 total participants roomName, signaling: [ process.env.NODE_ENV === 'production' ? // Use public signaling server just for demo purposes 'wss://signaling.yjs.dev' : 'ws://localhost:4444', ], }, type: 'webrtc', }, ], }, render: { afterEditable: RemoteCursorOverlay, }, }), ], skipInitialization: true, }, [roomName] ); React.useEffect(() => { if (!mounted) return; editor.getApi(YjsPlugin).yjs.init({ id: roomName, autoSelect: 'end', value: INITIAL_VALUE, }); return () => { editor.getApi(YjsPlugin).yjs.destroy(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [editor, mounted]); return (

Room ID (share this to collaborate)

You can{' '} open this page in another tab {' '} or share your Room ID with others to test real-time collaboration. Each instance will have a different cursor color for easy identification.

About this demo:

Share your Room ID with others to collaborate in the same document
Limited to 10 concurrent participants per room
Using WebRTC with public signaling servers - for demo purposes only

); } function CollaborativeEditor({ cursorColor, username, }: { cursorColor: string; username: string; }): React.ReactNode { const editor = useEditorRef(); const providers = usePluginOption(YjsPlugin, '_providers'); const isConnected = usePluginOption(YjsPlugin, '_isConnected'); const toggleConnection = () => { if (editor.getOptions(YjsPlugin)._isConnected) { return editor.getApi(YjsPlugin).yjs.disconnect(); } editor.getApi(YjsPlugin).yjs.connect(); }; return ( <>

Connected as {username}

{providers.map((provider: UnifiedProvider) => ( {provider.type.charAt(0).toUpperCase() + provider.type.slice(1)}:{' '} {provider.isConnected ? 'Connected' : 'Disconnected'} ))}

); } // Hook for managing room state function useCollaborationRoom() { const [roomName, setRoomName] = React.useState(() => { if (typeof window === 'undefined') return ''; const storedRoomId = localStorage.getItem('demo-room-id'); if (storedRoomId) return storedRoomId; const newRoomId = nanoid(); localStorage.setItem('demo-room-id', newRoomId); return newRoomId; }); const handleRoomChange = React.useCallback( (e: React.ChangeEvent) => { const newRoomId = e.target.value; localStorage.setItem('demo-room-id', newRoomId); setRoomName(newRoomId); }, [] ); const generateNewRoom = React.useCallback(() => { const newRoomId = nanoid(); localStorage.setItem('demo-room-id', newRoomId); setRoomName(newRoomId); }, []); return { generateNewRoom, roomName, handleRoomChange, }; } // Hook for managing user/cursor state function useCollaborationUser() { const [username] = React.useState( () => `user-${Math.floor(Math.random() * 1000)}` ); const [cursorColor] = React.useState(() => getRandomColor()); return { cursorColor, username, }; } const getRandomColor = (): string => { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@platejs/yjs",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Fyjs","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@platejs/yjs"}]]}]}],["$","li","nanoid",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nanoid","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"nanoid"}]]}]}]]}],["$","$L4f",null,{"namespace":"@plate","registryDependencies":["https://platejs.org/r/use-mounted.json","https://platejs.org/r/remote-cursor-overlay.json","button","input"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/examples/collaboration-demo.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]