c54c800675
* local images use assets for local copy add menu options * clean up packages * cleanup unused content, move file handling into app.paste * Add tldraw-assets.json to other files. * add path to editor * Update build.mjs * add export to server example with link to gist * Fix onAssetCreate and onAssetDelete APIs * Update yarn.lock * fix bugs on paste, adjust api for getting images, fix readonly on cut, copy, paste * re-enable swc * paste svg strings as svg images * cleanup * fix string case for tldraw json
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw'
|
|
import { useAccountHandlers } from 'hooks/useAccountHandlers'
|
|
import React, { FC } from 'react'
|
|
import * as gtag from 'utils/gtag'
|
|
|
|
declare const window: Window & { app: TldrawApp }
|
|
|
|
interface EditorProps {
|
|
id?: string
|
|
isUser?: boolean
|
|
isSponsor?: boolean
|
|
}
|
|
|
|
const Editor: FC<EditorProps & Partial<TldrawProps>> = ({
|
|
id = 'home',
|
|
isUser = false,
|
|
isSponsor = false,
|
|
...rest
|
|
}) => {
|
|
const handleMount = React.useCallback((app: TldrawApp) => {
|
|
window.app = app
|
|
}, [])
|
|
|
|
// Send events to gtag as actions.
|
|
const handlePersist = React.useCallback((_app: TldrawApp, reason?: string) => {
|
|
gtag.event({
|
|
action: reason ?? '',
|
|
category: 'editor',
|
|
label: reason ?? 'persist',
|
|
value: 0,
|
|
})
|
|
}, [])
|
|
|
|
const fileSystemEvents = useFileSystem()
|
|
|
|
const { onSignIn, onSignOut } = useAccountHandlers()
|
|
|
|
return (
|
|
<div className="tldraw">
|
|
<Tldraw
|
|
id={id}
|
|
autofocus
|
|
onMount={handleMount}
|
|
onPersist={handlePersist}
|
|
showSponsorLink={!isSponsor}
|
|
onSignIn={isSponsor ? undefined : onSignIn}
|
|
onSignOut={isUser ? onSignOut : undefined}
|
|
{...fileSystemEvents}
|
|
{...rest}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Editor
|