e0e1373468
* Update prettier to latest * Add format command * Create .prettierignore * Add prettier plugin sort imports * Update prettier config * Update prettier config * Update .prettierignore * Fix @babel/parser conflict https://github.com/trivago/prettier-plugin-sort-imports/issues/156 * Revert "Update .prettierignore" This reverts commit 282e5b838376f16b3df7f4c1f99f1106baaffea4. * Revert change for apps/www/pages/v/[id].tsx * Sort imports Moves the third party imports to the top, "~" imports in middle, and "./" at last * Sorting of the specifiers in an import declarations * [www] use path vs "../" * [core] use path "~" vs "../" * [tldraw] use path "~" vs "../.../" * [tldraw] use path "~" vs "../" * [tldraw] Cleanup * Update prettier config * Last use path "~" vs "../.../" * [www] Fix order of the third party imports * Clean prettier config
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { Tldraw, useFileSystem } from '@tldraw/tldraw'
|
|
import * as React from 'react'
|
|
import { useReadOnlyMultiplayerState } from '~hooks/useReadOnlyMultiplayerState'
|
|
import { styled } from '~styles'
|
|
import { RoomProvider } from '~utils/liveblocks'
|
|
|
|
interface Props {
|
|
roomId: string
|
|
}
|
|
|
|
const ReadOnlyMultiplayerEditor = ({ roomId }: Props) => {
|
|
return (
|
|
<RoomProvider id={roomId}>
|
|
<ReadOnlyEditor roomId={roomId} />
|
|
</RoomProvider>
|
|
)
|
|
}
|
|
|
|
// Inner Editor
|
|
|
|
function ReadOnlyEditor({ roomId }: Props) {
|
|
const { onSaveProjectAs, onSaveProject } = useFileSystem()
|
|
const { error, ...events } = useReadOnlyMultiplayerState(roomId)
|
|
|
|
if (error) return <LoadingScreen>Error: {error.message}</LoadingScreen>
|
|
|
|
return (
|
|
<div className="tldraw">
|
|
<Tldraw
|
|
autofocus
|
|
disableAssets={false}
|
|
showPages={false}
|
|
onSaveProjectAs={onSaveProjectAs}
|
|
onSaveProject={onSaveProject}
|
|
readOnly
|
|
{...events}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ReadOnlyMultiplayerEditor
|
|
|
|
const LoadingScreen = styled('div', {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
})
|