tldraw/apps/www/components/Editor.tsx
Steve Ruiz e6a3e5c3ea
[big chore] restore core to monorepo (#287)
* move core into repo, apps into apps folder, update tests

* Update scripts for build:core

* improve scripts

* remove noise from www

* Update .gitignore

* Fix focus bug

* add ci test script

* Update main.yml
2021-11-18 13:09:18 +00:00

47 lines
1.2 KiB
TypeScript

import { Tldraw, TldrawApp, useFileSystem } from '@tldraw/tldraw'
import * as gtag from '-utils/gtag'
import React from 'react'
import { useAccountHandlers } from '-hooks/useAccountHandlers'
declare const window: Window & { app: TldrawApp }
interface EditorProps {
id?: string
isUser?: boolean
isSponsor?: boolean
}
export default function Editor({ id = 'home', isSponsor = false }: EditorProps) {
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={onSignOut}
{...fileSystemEvents}
/>
</div>
)
}