kopia lustrzana https://github.com/Tldraw/Tldraw
49 wiersze
1012 B
TypeScript
49 wiersze
1012 B
TypeScript
import { track } from '@tldraw/state'
|
|
import { Tldraw, useEditor } from '@tldraw/tldraw'
|
|
import '@tldraw/tldraw/tldraw.css'
|
|
import { useYjsStore } from './useYjsStore'
|
|
|
|
const HOST_URL =
|
|
process.env.NODE_ENV === 'development' ? 'ws://localhost:1234' : 'wss://demos.yjs.dev'
|
|
|
|
export default function YjsExample() {
|
|
const store = useYjsStore({
|
|
roomId: 'example6',
|
|
hostUrl: HOST_URL,
|
|
})
|
|
|
|
return (
|
|
<div className="tldraw__editor">
|
|
<Tldraw autoFocus store={store} shareZone={<NameEditor />} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const NameEditor = track(() => {
|
|
const editor = useEditor()
|
|
|
|
const { color, name } = editor.user
|
|
|
|
return (
|
|
<div style={{ pointerEvents: 'all', display: 'flex' }}>
|
|
<input
|
|
type="color"
|
|
value={color}
|
|
onChange={(e) => {
|
|
editor.user.updateUserPreferences({
|
|
color: e.currentTarget.value,
|
|
})
|
|
}}
|
|
/>
|
|
<input
|
|
value={name}
|
|
onChange={(e) => {
|
|
editor.user.updateUserPreferences({
|
|
name: e.currentTarget.value,
|
|
})
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
})
|